ui-design-brain

UI Design Brain

このスキルは、component.galleryを情報源とし、ベストプラクティス、レイアウトの指針、使用ルールを加えた、60 以上の UI コンポーネントパターンの厳選ナレッジベースを提供します。インターフェースを生成する際に、一般的な推測ではなく、実際のデザインシステムの知識を活用できます。

UI コードを書く前に必ずこのスキルを参照し、適切なコンポーネントを選んでベストプラクティスに従ってください。詳しいリファレンスについては、components.mdをお読みください。

このスキルを使う場面

ユーザーから次のようなものの構築、デザイン、生成を求められた場合に適用します。

• Web ページ、ランディングページ、マーケティングサイト
• SaaS ダッシュボード、管理パネル、設定ページ
• フォーム、データテーブル、ナビゲーション構造
• モーダル、ドロワー、ポップオーバー、オーバーレイパターン
• React、HTML/CSS、Tailwind の UI コンポーネント全般

デザイン哲学

生成するインターフェースはすべて、テンプレートのようではなく、モダンでミニマルかつ本番環境に適した印象に仕上げます。

基本原則

1. 装飾よりも抑制を。 要素は少なく、洗練度は高く。余白もデザインの一部です。
2. タイポグラフィで階層を表現。 個性のあるディスプレイフォントと、読みやすい本文フォントを組み合わせます。見出しとラベルの太さに十分な差をつけます。
3. 色の見せ場はひとつに。 まずはニュートラルなパレット（温かみのあるオフホワイト、黒に近い色、落ち着いた中間色）を使います。そこに自信を感じさせるアクセントカラーをひとつ加えます。ポスターや書籍の表紙に使えそうな配色なら、時代を超えて使える可能性が高いでしょう。
4. 余白で構造を作る。 8 px グリッドを使います。間隔を狭めると関連する要素がまとまり、広く取るとヒーローコンテンツにゆとりが生まれます。
5. アクセシビリティは必須です。 WCAG AA のコントラスト基準を満たし、フォーカスインジケーター、セマンティック HTML、キーボード操作に対応します。
6. ありきたりな AI 風のデザインは避けます。 紫と白のグラデーション、Inter／Roboto のデフォルト設定、均等に並ぶカードグリッド、型にはまったレイアウトは避けます。インターフェースはそれぞれ、固有の用途に合わせてデザインします。

品質基準

トップクラスの SaaS 企業に所属するシニアプロダクトデザイナーに期待される品質を目指します。

• 意図的な非対称性を取り入れた、整った視覚的リズム
• 直感的にわかるインタラクション要素（ホバー、フォーカス、アクティブ状態）
• 空の状態、読み込み中、エラーなどの例外ケースにも適切に対応
• ブレークポイントによる表示の乱れがなく、レスポンシブに対応

ワークフロー

ステップ 1 — コンポーネントを特定する

ユーザーの依頼を読み、必要な UI コンポーネントを判断します。components.mdを参照し、名前または別名から各コンポーネントを探します。

よくある対応関係：

• 「ナビゲーション」→ Header、Navigation、Breadcrumbs、Tabs
• 「フォーム」→ Form、Text input、Select、Checkbox、Radio button、Button
• 「データ表示」→ Table、Card、List、Badge、Avatar
• 「フィードバック」→ Alert、Toast、Modal、Spinner、Progress bar、Empty state
• 「入力」→ Text input、Textarea、Select、Combobox、Datepicker、File upload、Slider
• 「オーバーレイ」→ Modal、Drawer、Popover、Tooltip、Dropdown menu

ステップ 2 — ベストプラクティスを適用する

インターフェース内の各コンポーネントについて、リファレンスに記載されたベストプラクティスに従います。幅広く適用できる主なルールは次のとおりです。

レイアウト

• フォームは 1 列にする — 内容を素早く確認できます
• 繰り返し行（リスト、テーブル）では、縦方向の位置を揃える
• アイコンやアクション用の領域は、空の場合も含めて幅を固定する
• カードは「メディア → タイトル → メタ情報 → アクション」の階層にする

インタラクション

• ボタンのラベルは動詞から始める（「Submit」ではなく「Save changes」）。セクションごとに主要ボタンは 1 つにする
• モーダルには X、Cancel、Escape を必ず用意する。フォーカスを閉じ込め、閉じたときにフォーカスを元の位置に戻す
• トーストは 4〜6 秒で自動的に閉じるようにし、手動で閉じられるようにして、新しいものが一番上に重なるようにする
• トグルは即時に反映する場合に限って使う — 保存が必要なフォームではチェックボックスを使う

タイポグラフィと余白

• 見出しの階層（h1 → h2 → h3）を厳守し、1 ページにつき h1 は 1 つにする
• モバイルではタッチ領域を最低 44 px 確保する
• ラベルは入力欄の上（縦型フォーム）または横（横型フォーム）に配置する
• プレースホルダーテキストは形式のヒントとして使い、ラベルの代わりにはしない

状態

• 空の状態：イラスト＋役立つ見出し＋主要 CTA
• 読み込み中：スピナーよりスケルトンスクリーンを優先する（300 ms 待ってから表示）
• 入力検証：キー入力のたびではなく、フォーカスが外れたときにインラインで表示する
• 無効化された要素：視覚的に区別できるようにしつつ、読みやすさを保つ

Step 3 — デザインの方向性を選ぶ

ユーザーの意図に最も合うスタイルプリセットを選択します。不明な場合は確認してください。

モダンな SaaS（デフォルト）

• ニュートラルな配色と、存在感のあるアクセントカラーを1色
• 8 px グリッドと、ゆとりのある余白
• すっきりとして、プロフェッショナルで、広々としたデザイン

Apple レベルのミニマル

• ほぼモノクロの、温かみのあるグレー
• 大きな文字の階層と、ディスプレイテキストの詰まった字間
• 豊富な余白と、マイクロインタラクション（150–250 ms の ease-out）

エンタープライズ／コーポレート

• 情報密度が高く、領域が明確に定義されている
• コンパクトなスペーシングスケール（4/8/12/16/24 px）
• 堅牢なフォーム処理と、完全なキーボード操作への対応

クリエイティブ／ポートフォリオ

• 大胆で表現力があり、強いビジュアルパーソナリティ
• 非対称レイアウトと、劇的なスケールのコントラスト
• エディトリアルなタイポグラフィと、鮮やかなアクセントカラー

データダッシュボード

• スキャンしやすさを重視した、高密度のデータ表示
• 行間で一貫した垂直方向の配置
• 明確な指標の階層：KPI → トレンド → 詳細

Step 4 — コードを生成する

以下のルールに従って、本番環境で使えるコードを記述します。

Stack:       React + Tailwind CSS (unless user specifies otherwise)
Spacing:     Tailwind spacing scale (p-2, gap-4, etc.) on an 8px grid
Colors:      CSS variables or Tailwind config for palette consistency
Typography:  Tailwind text utilities; expressive font pairings via Google Fonts
States:      Implement hover, focus, active, disabled for all interactive elements
Responsive:  Mobile-first; test at 375, 768, 1440 px
Accessibility: Semantic HTML, ARIA where needed, focus management

コンポーネントのクイックリファレンス

以下は、最もよく使われる15個のコンポーネントです。ベストプラクティス、別名、レイアウト例を含む60以上のコンポーネントの完全なリファレンスについては、components.md を参照してください。

コンポーネント	使用場面	主なルール
Button	アクションを実行する	動詞から始まるラベルを使い、各セクションのプライマリボタンは1つにする
Card	エンティティを表す	メディア → タイトル → メタ情報 → アクションの順にする。シャドウかボーダーのどちらか一方のみを使う
Modal	注意を集中させる	フォーカスを閉じ込め、X、キャンセル、Escape で閉じられるようにする
Navigation	ページ／セクションへのリンク	項目は最大5～7個にし、アクティブ状態を明確にする
Table	構造化データを表示する	ヘッダーを固定し、数値は右揃えにして、列をソート可能にする
Tabs	パネルを切り替える	タブは2～7個にし、アクティブ状態を示す。モバイルではアコーディオンを使う
Form	入力を受け付ける	1列にし、ラベルを上に配置して、フォーカスを外したときにインライン検証を行う
Toast	簡潔な確認を伝える	4～6秒で自動的に閉じる。破壊的な操作には取り消しアクションを用意する
Alert	重要な状態を伝える	意味のある色とアイコンを使い、最大2文にする
Drawer	補助パネルを表示する	詳細には右側、ナビゲーションには左側を使う。デスクトップでは320～480 px にする
Search input	コンテンツを検索する	Cmd/Ctrl+K ショートカットを使い、200～300 ms のデバウンスを行う
Empty state	データがないことを示す	イラスト＋見出し＋CTA を配置し、前向きな表現にする
Skeleton	読み込み中のプレースホルダー	実際のレイアウト形状に合わせ、シマーアニメーションを使う
Badge	ステータス／メタデータのラベル	1～2語にし、ステータスにはピル形状を使い、色の種類を制限する
Dropdown menu	アクション／ナビゲーションの選択肢	項目数は7±2個にし、破壊的なアクションは最後に赤色で表示する

避けるべきアンチパターン

以下は汎用的で質の低い UI の兆候となるため、決して生成しないでください。

• 虹色のバッジ — 意味上の理由もなく、ステータスごとに異なる明るい色を使う
• モーダル内のモーダル — 複雑なフローにはページまたはドロワーを使う
• 説明のない無効な送信ボタン — 不足している項目を必ず示す
• 予測可能なレイアウトにスピナーを使う — 代わりにスケルトン画面を使う
• 「ここをクリック」リンク — リンクテキストには遷移先を記述する
• デスクトップでのハンバーガーメニュー — スペースに余裕があれば、ナビゲーションを表示する
• 自動で進むカルーセル — ナビゲーションはユーザーが操作できるようにする
• プレースホルダーだけのフォームフィールド — 常に見えるラベルを使う
• 同じ重要度のボタン — プライマリ／セカンダリ／ターシャリの階層を設ける
• 小さすぎる文字（< 12 px） — 本文は最低14 px とし、16 px を推奨する