ui-patterns

UI パターン

リリース済みの製品で実証されたインタラクションパターン。理論ではなく、受賞サイトや成功した製品で使われている実際のパターンです。

対象範囲

次の場合にこのスキルを使用します。

• 具体的な UI 要素（ヒーロー、ナビゲーション、カード、フォーム、フッター）を設計するとき
• ランディングページを構成し、コンバージョンにつながるパターンが必要なとき
• 料金表、お客様の声、CTA を設計するとき
• パターンが確立された基準を満たしていることを確認したいとき

原則

1. パターンはユーザーの期待に沿う

ユーザーにはメンタルモデルがあります。ハンバーガーメニューを開くとナビゲーションが表示され、カートアイコンを押すとチェックアウトに進みます。明確な付加価値がある場合に限り、期待を裏切りましょう。

2. 段階的な情報開示

現在のコンテキストに関連する情報だけを表示します。詳細は一度にすべて見せるのではなく、操作に応じて表示します。

3. 1 つの表示領域につき主要 CTA は 1 つ

表示されている各領域には、主要なアクションを 1 つだけ配置します。それ以外はすべて副次的、または三次的なアクションです。

4. 創造性より一貫性

製品内では、同一のアクションを同じ見た目にします。製品間では創造性を発揮し、製品内では一貫性を保ちます。

5. モバイルファーストは必須

パターンは、1440px に拡張する前に 375px で機能しなければなりません。

ルール

ヒーローセクション

• 推奨：実績のある次の 3 種類のヒーローから 1 つを選びます。
  • ステートメントヒーロー：大きな見出し＋補足文＋CTA。画像なし。SaaS／テクノロジー向け。
  • 分割ヒーロー：左にテキスト、右にビジュアル。ビジュアルによる説明が効果的な製品向け。
  • イマーシブヒーロー：画面全体に広がる画像／動画にテキストを重ねます。ブランド／ポートフォリオ向け。
• 推奨：CTA をファーストビュー内に表示します。
• 推奨：明確な視覚的階層を設けます。見出し ＞ 補足文 ＞ CTA ＞ 副次的要素。
• 非推奨：ヒーロー内のスライダー／カルーセル。エンゲージメント率が明らかに低いためです。
• 非推奨：ヒーローの見出しを 15 語より長くすること。
• 非推奨：音声付きの自動再生動画。

ナビゲーション

• 推奨：実績のあるナビゲーションパターンを選びます。
  • スティッキートップバー：左にロゴ、中央／右にリンク、右に CTA。SaaS の標準的な構成です。
  • ハンバーガーオーバーレイ：ハンバーガーアイコンの背後に画面全体を使ったナビゲーションを表示します。クリエイティブなサイト向け。
  • ミニマルヘッダー：ロゴとハンバーガーのみ。没入型の体験向け。
• 推奨：下方向へのスクロールで自動的に隠し、上方向へのスクロールで再表示します。
• 推奨：ナビゲーション内で現在のページを視覚的に示します。
• 非推奨：メインナビゲーション項目を 7 つより多くすること。
• 非推奨：モバイルでのメガメニュー。代わりにアコーディオンを使用します。
• 非推奨：キーボードユーザー向けのスキップリンクがないナビゲーション。

カードレイアウト

• 推奨：カードの構成を統一します。上部に画像、タイトル、説明、メタ情報、下部に CTA を配置します。
• 推奨：CTA のテキストだけでなく、カード全体をクリック可能にします。
• 推奨：ホバー時の状態として、影を濃くする、わずかに拡大する（1.02）、画像をズームする、またはオーバーレイを表示します。
• 非推奨：視覚的な境界（影、枠線、背景色のいずれか）がないカード。
• 非推奨：同じ行に高さの異なるカードを並べること（意図的なメイソンリーレイアウトを除く）。

フォーム

• 推奨：1 列のレイアウトを使用します。完了率が高くなります。
• 推奨：送信時だけでなく、フォーカスを外したときに入力をインラインで検証します。
• 推奨：ラベルはプレースホルダーではなく、入力欄の上に配置します。
• 推奨：エラーは要約メッセージではなく、該当する入力欄のすぐそばに表示します。
• 非推奨：1 つの表示セクションに 5 つより多くの入力欄を配置すること。
• 非推奨：デフォルトで CAPTCHA を使用すること。まずハニーポットとレート制限を使用します。

CTA

• 推奨：主要な CTA には、コントラストの高い塗りつぶしボタンを使用します。
• 推奨：「始める」「無料で試す」「デモを予約」など、行動を促すラベルを使用します。
• 推奨：ホバー時、読み込み中、成功時の状態を視覚的に示します。
• 非推奨：CTA を横に 3 つ以上並べること。
• 非推奨：ボタンのラベルに「送信」や「ここをクリック」を使用すること。

その他のルール（料金、推薦文、フッター）については、references/extended-rules.md を参照してください。

パターン

パターンの詳細な説明については、references/patterns.mdを参照してください。

パターン	用途	中核となる考え方
機能紹介タブ	SaaS のランディングページ	横並びのタブ、交互に切り替わるコンテンツ
セクション固定スクロール	製品の説明	左側を固定し、右側をスクロール
ロゴの自動スクロール	B2B SaaS、プラットフォーム	ロゴを自動スクロールする行
コマンドパレット	パワーユーザー向けツール、ダッシュボード	Cmd+K によるあいまい検索
コンバージョン向けメガフッター	SaaS、最後のコンバージョン機会	CTA ブロック＋従来型フッター
比較表	競合との差別化	チェックマークとバツ印を使った列ごとの比較
オンボーディングウィザード	複雑な製品	最大 5 ステップの複数段階プロセス

アンチパターン

1. カルーセルを主要ナビゲーションにする -- 最初のスライド以降、ユーザーが操作することはほとんどありません。
2. 現在位置がわからない無限スクロール -- ページの終わりがないと、閲覧を終えた感覚が得られません。「トップへ戻る」は必須です。
3. モーダルの上にモーダルを表示する -- モーダルを入れ子にすると混乱を招きます。オーバーレイは最大 1 層にしてください。
4. 主要 CTA を隠す -- 最も重要なボタンが、スクロール後にしか表示されません。
5. トースト通知を大量に表示する -- 同時に 1 つを超えるとノイズになります。タイムアウト付きでキューに入れてください。
6. 説明をツールチップだけにする -- モバイルにはホバーがありません。ツールチップは補足として使い、説明の代わりにしないでください。
7. 偽のチャットウィジェット -- チャットを装いながら、実際にはフォームにすぎないポップアップです。
8. 選択肢が 5 個未満なのにドロップダウンを使う -- ラジオボタンやセグメントコントロールのほうがすばやく操作できます。

チェックリスト

• ヒーローに、実績のある 3 つのバリエーション（ステートメント、分割、没入型）のいずれかを使用している
• 各ビューポートで、主要 CTA がちょうど 1 つ表示されている
• ナビゲーションの主要項目が最大 7 個になっている
• ナビゲーションで現在のページが示されている
• すべてのカード全体をクリックできる
• フォームが 1 列で、フィールドの上にラベルがある
• フォーカスが外れたときのインライン検証が実装されている
• 料金プランに 3 つの選択肢があり、おすすめのプランが強調表示されている
• お客様の声に、実名、役職、写真が含まれている
• フッターに法的通知とプライバシーポリシーへのリンクがある
• モバイルナビゲーションが独立したパターンになっている
• キーボードナビゲーション用のスキップリンクがある
• すべての非同期アクションに読み込み状態がある
• フォームとデータ読み込みにエラー状態がある
• リストとダッシュボードに空の状態がある

関連項目

• design-trends -- これらのパターンを形作る全体的なトレンド
• visual-direction -- パターンのビジュアル表現（色、タイポグラフィ、間隔）
• component-patterns -- これらのパターンの技術的なコンポーネント構成
• agent-ui-design -- AI 固有の UI パターン
• navigation-design -- ナビゲーションパターンの詳細
• landing-pages -- ランディングページ固有のパターン適用
• responsive-design -- パターンのモバイル向けバリエーション
• accessibility -- アクセシビリティ要件