ui-design

UI デザイン

システマティックなレイアウト、明確な視覚的階層、一貫性のあるコンポーネントで、プロフェッショナルなウェブインターフェースを作成します。

対象範囲

以下の場合にこのスキルを使用します：レイアウトの作成、UI コンポーネントのデザイン、視覚的階層の確立、グリッドシステムの定義、スタイルガイドやデザイントークンの作成、既存のインターフェースの視覚的一貫性の監査。

原則

1. 美しさよりユーザー中心のデザイン

すべてのデザイン上の判断は、対象ユーザーのニーズに基づいて行います。見た目は印象的でも使いにくいインターフェースは、失敗です。

2. 視覚的階層が認識を左右する

サイズ、色、コントラスト、配置によって、ユーザーが最初に目にするものが決まります。すべてのページには、主要な焦点を必ず1つだけ設けます。

3. 一貫性が信頼を築く

同一の要素は、どこでも同じ見た目と動作にします。一貫性のなさは認知負荷を高めます。

4. そぎ落とすことは強さ

測定可能な目的のない要素は、すべて取り除きます。余白は無駄なスペースではありません。読みやすさと集中力を高めます。

5. グリッドが基盤

グリッドシステムなしに、プロフェッショナルなレイアウトは実現できません。グリッドは整列を徹底し、リズムを生み出し、レスポンシブデザインを可能にします。

ルール

レイアウトとグリッド

• 推奨：デスクトップの基準として12カラムグリッドを使用します（2、3、4、6で割り切れます）。
• 推奨：すべての間隔に8pxのベースライングリッドを使用します（8、16、24、32、48、64px）。
• 推奨：コンテンツの最大幅を1200-1440pxに設定します。
• 非推奨：1つのアプリケーション内で異なるグリッドシステムを混在させないでください。
• 非推奨：デスクトップではコンテンツブロックを横に3-4個を超えて、モバイルでは1-2個を超えて並べないでください。

視覚的階層

• 推奨：少なくとも3段階の階層を確立します：プライマリー（ヒーロー）、セカンダリー（機能）、ターシャリー（詳細）。
• 推奨：最も重要な要素を、2番目に重要な要素より少なくとも1.5倍大きくします。
• 非推奨：1つのビューポート内で3種類を超えるフォントサイズを使用しないでください。
• 非推奨：同じビューポート内に、同じ強さのCTAを複数配置しないでください。ビューポートごとにプライマリーCTAを1つにします。

コンポーネント

• 推奨：標準的なインタラクションには、確立されたUIパターンを使用します。
• 推奨：すべての入力要素に、デフォルト、ホバー、フォーカス、アクティブ、無効、エラーの各状態を明確に定義します。
• 推奨：複数ステップのプロセスには、進捗インジケーターを含めます。
• 非推奨：標準的なタスクに新しいインタラクションパターンを考案しないでください。

余白と間隔

• 推奨：セクション間には十分な余白を設けます（デスクトップでは縦方向に最低64-96px）。
• 推奨：関連する要素は近くに配置し、グループ同士は離します（ゲシュタルトの近接法則）。
• 非推奨：空白を装飾要素で埋めないでください。

スタイルガイドとデザイントークン

• 推奨：実装前にUIスタイルガイドを作成します：色、タイポグラフィ、アイコン、ボタン、間隔。
• 推奨：デザイントークンを使用します：--color-primary、--spacing-lg、--font-heading。
• 非推奨：トークンの参照ではなく、マジックナンバー（ハードコードされたピクセル値）を使用しないでください。

パターン

パターンの詳しい説明：references/patterns.mdを参照してください。

ヒーローセクション

大きなビジュアル＋簡潔な見出し（最大7語）＋サブライン＋対照的な色のプライマリーCTA。3秒以内に主要なメッセージを伝える必要があります。

カードレイアウト（弁当グリッド）

グリッド内に並ぶモジュール式のカード。各カードは独立した情報単位です。デスクトップの初期ビューポートでは最大6-9枚、モバイルでは2-3枚にします。

画面分割

同じ比重の2つの領域を設け、一方にビジュアル、もう一方にテキストを配置します。モバイルでは縦に積み重ねます。

スティッキーナビゲーション

スクロールしてもヘッダーを表示し続けます。アクティブなセクションを強調表示します。高さは最大64pxです。

モーダルとオーバーレイ

背景を暗くした中央配置のオーバーレイ。明確な閉じるボタンを設けます。フォーカストラップを設定します。Escapeキーで閉じます。

アンチパターン

要素を詰め込みすぎたインターフェース

要素が多すぎる、余白が少なすぎる、CTA同士が競合する。解決策：1ページにつき、主要な目標を1つにします。

一貫性のないスタイル

ページごとに見た目が異なるボタン。解決策：スタイルガイドを作成し、その遵守を徹底します。

ダークパターン

操作的なデザイン（隠された配信停止ボタン、確認時の羞恥心の利用）。解決策：すべてのインタラクションを透明にし、ユーザーの利益を優先します。

コンテンツ戦略としてのカルーセル

自動カルーセルでは、注目されるのは1枚目だけです（2枚目以降のクリック率は1％未満）。解決策：静的なヒーロー画像を使うか、手動で切り替えるタブを使います。

スクロールの乗っ取り

ネイティブのスクロール動作を上書きすることです。解決策：ネイティブのスクロールを維持し、アニメーションは控えめにします。

チェックリスト

• 8pxベースラインの12カラムグリッドが定義されていますか？
• コンテンツの最大幅（1200～1440px）が設定されていますか？
• 視覚的な階層（プライマリ、セカンダリ、ターシャリのレベル）を確認できますか？
• 1つのビューポートにつき、プライマリCTAは1つだけですか？
• すべてのコンポーネントに状態（デフォルト、ホバー、フォーカス、アクティブ、無効、エラー）が定義されていますか？
• セクション間の余白は一貫して十分に確保されていますか（最小64px）？
• スタイルガイド／デザイントークンが整備され、適用されていますか？
• マジックナンバーは使わず、すべての値がトークンを参照していますか？
• スクロールの乗っ取りや自動カルーセルはありませんか？
• ダークパターンは排除されていますか？
• モーダルにフォーカストラップとEscapeキーによる閉じる機能がありますか？

関連項目

• web-typography -- 階層構造のためのフォント選定とサイズ設定
• color-theory -- カラーシステムとコントラストのルール
• accessibility -- すべてのUIコンポーネントにおけるWCAG準拠
• usability -- 使いやすさのためのヒューリスティック
• responsive-design -- ブレークポイントごとのグリッドの動作
• design-trends -- 現在の受賞実績のあるUIパターン
• component-patterns -- コンポーネントの技術的な実装
• visual-direction -- ビジュアルの方向性とスタイルの決定