動くデモで比較して、コードをコピーするだけ。

ページ構造やコンテンツ配置に関するレイアウトUI

→ まずページの骨格から

タブバー・ボトムナビ・ハンバーガーメニューなど、コンテンツ切り替えに使うナビゲーションUI

→ 画面間の導線を設計する

グラフやチャートなど、データを視覚的に表現するUI

→ メインコンテンツの見せ場を作る

チャットやフォームなど、データ入力に関するUI

→ ユーザーからの入力を受け取る

ツールチップやバッジなど、情報を補足・強調して表示するUIコンポーネント

→ 情報を補足・強調して伝える

ボタンやトグルなど、直感的に操作できるシンプルなUIコンポーネント

→ ボタン・トグルで細部を仕上げる

スワイプやドラッグなど、タッチ操作・ジェスチャーに特化したUIコンポーネント

→ インタラクションで体験を磨く

フェード・スライド・スプリングなど、Framer Motionで実装するアニメーションパターン

→ 動きで体験を豊かにする

HTMLの基本要素と構造に関するリファレンス。テキスト・リンク・メディア・フォーム・テーブル・メタ情報を網羅

JavaScriptによるDOM操作・イベント・アニメーション・通信・ストレージなど、ページの動作に関するリファレンス

CSSによる見た目・レイアウト・アニメーション・レスポンシブ・テキスト・画像・表示制御に関するリファレンス

AIコーディングツール初心者向けのガイド集。UI部位名称など、AIへの的確な指示に役立つ情報をまとめています。

→ AIへの指示を上達させる

ライブラリ選定に役立つガイド集。エンジニアがPM・チームメンバーに説明しやすくなる選定基準と考え方をまとめています。

→ ライブラリ選びの判断基準を得る

「やりたいこと」から引けるUIライブラリのAPIリファレンス。テーマ・バリデーション・アクセシビリティなどUIコンポーネント系8テーマと、データ可視化系9テーマを横断比較。

→ プロパティ名がわからないときに

AIコーディングの作業を底上げするAnthropic公式スキルを、実際に使った体験談つきで紹介。デザイン・ビジュアル系から。

→ 使えるスキルを体験談で知る

海・空・木漏れ日・炎・雨など、描きたいモチーフからCSS/SVGの表現テクニックを逆引き。AIプロンプト語彙集も併記。

→ 描きたいものから表現を探す

疾走感・癒し・温かみ・清涼感など、伝えたい印象からWebの表現テクニックを逆引き。AIプロンプト語彙集も併記。

→ 伝えたい雰囲気から表現を探す

飲食店・車LP・ヘルスケアなど、サイトの業種・用途からふさわしい表現テクニックを逆引き。AIプロンプト語彙集も併記。

→ 作るサイトの用途から表現を探す

楽しくインタラクティブな子供向けUI要素

日常生活で役立つ便利なツール集

ブラウザで動くインタラクティブなゲームのサンプル集

PythonだけでUIが作れるStreamlit。最新ウィジェットを実際に触れるプレイグラウンドと、Reactとの使い分けガイド。

→ Pythonで手早くUIを作る