ui-design-patterns

UI デザインパターン

モダンなウェブアプリケーションやモバイルアプリケーションを構築するための、一般的なユーザーインターフェースのデザインパターン、コンポーネントパターン、インタラクションパターン、アクセシビリティのベストプラクティスを網羅したガイドです。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• ユーザーインターフェースのデザイン：直感的で使いやすいインターフェースを作成する
• UI コンポーネントの実装：確立されたパターンに沿って再利用可能なインターフェースコンポーネントを構築する
• UX の問題解決：実証済みの解決策で一般的なユーザー体験の課題に対処する
• アクセシビリティの確保：障害のあるユーザーを含むすべてのユーザーが利用できるインターフェースを作成する
• デザインシステムの構築：一貫性のあるコンポーネントライブラリとデザインシステムを作成する
• インターフェースのレビュー：既存のインターフェースの使いやすさとベストプラクティスへの準拠を評価する
• インタラクションのプロトタイプ作成：インタラクティブな UI の動作をデザインして実装する
• ナビゲーションの最適化：情報アーキテクチャとナビゲーションフローを構成する
• フォームデザインへの対応：適切なバリデーションとフィードバックを備えた効果的なフォームを作成する
• データの表示：複雑なデータを明確で一覧しやすい形式で提示する
• フィードバックの提供：システムの状態とユーザーの操作を効果的に伝える
• レスポンシブデザイン：さまざまな画面サイズやデバイスにインターフェースを適応させる

基本概念

UI パターン

UI パターンは、一般的なデザイン上の問題に対する再利用可能な解決策です。次のような利点があります。

• 一貫性：ユーザーはアプリケーション間で使い慣れたパターンを認識できます
• 効率性：実証済みの解決策により、デザインと開発にかかる時間を削減できます
• 使いやすさ：パターンは広く使われるなかでテストされ、洗練されています
• コミュニケーション：デザイナーと開発者が共有できる語彙を提供します
• アクセシビリティ：確立されたパターンには、アクセシビリティへの配慮が含まれていることがよくあります

デザインシステム

デザインシステムとは、再利用可能なコンポーネント、パターン、ガイドラインをまとめたものです。

• コンポーネントライブラリ：再利用可能な UI の構成要素
• デザイントークン：色、間隔、タイポグラフィの変数
• 使用ガイドライン：各コンポーネントをいつ、どのように使用するか
• アクセシビリティ基準：WCAG 準拠の要件
• コード例：実装の参考例
• ドキュメント：包括的なガイドと原則

アトミックデザインの方法論

インターフェースを原子単位に分解します。

• アトム：基本的な構成要素（ボタン、入力欄、ラベル）
• モレキュール：アトムを単純に組み合わせたもの（ボタン付き検索フィールド）
• オーガニズム：複雑なコンポーネント（ヘッダー、フォーム、カード）
• テンプレート：ページレベルのレイアウト
• ページ：実際のコンテンツを含む具体的なインスタンス

ナビゲーションパターン

1. タブパターン

コンテンツを複数のパネルに整理し、一度に 1 つずつ表示します。

使用する場面：

• 同じ階層レベルにある関連コンテンツのカテゴリ
• セクション数が限られている場合（理想的なタブ数は 3～7 個）
• ユーザーがビューを頻繁に切り替える必要がある場合
• 画面スペースが限られている場合

構成：

[Tab 1] [Tab 2] [Tab 3]
─────────────────────────
Content for active tab

ベストプラクティス：

• アクティブなタブを明確に強調する
• タブのラベルは短く、内容がわかるものにする
• タブを切り替えても状態を維持する
• わかりやすさのため、アイコンとテキストを併用する
• キーボードでのナビゲーションが機能することを確認する
• モバイル向けの代替手段（ドロップダウン、セグメントコントロール）を検討する

アクセシビリティ：

• ARIA の role="tablist"、role="tab"、role="tabpanel" を使用する
• 矢印キーによるナビゲーションを実装する
• aria-selected と aria-controls を設定する
• タブパネルをフォーカス可能にする

HTML の例：

<div role="tablist" aria-label="Content sections">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Overview
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Details
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
    Settings
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Overview content...
</div>

2. アコーディオンパターン

縦に積み重ねたセクションを、展開・折りたたみできるようにします。

使用する場面：

• 明確に区分されたセクションを含む長いページ
• 情報を段階的に表示する場合
• FAQ セクション
• 設定パネル
• 画面スペースが限られている場合

種類：

• 単一展開：一度に開けるパネルは 1 つだけです
• 複数展開：複数のパネルを同時に開けます
• ネスト：アコーディオンの中にアコーディオンを配置します

ベストプラクティス：

• 明確で説明的な見出しを使用します
• 視覚的なインジケーター（シェブロン、+/−）を表示します
• デフォルトの状態（折りたたみ、または最初の項目を開く）を検討します
• トランジションを滑らかにアニメーションさせます（200～300ms）
• 折りたたんでもコンテンツを保持します
• キーボードで操作できるようにします

アクセシビリティ：

• 見出しには <button> を使用します
• aria-expanded 属性を設定します
• aria-controls を使用して見出しとパネルを関連付けます
• キーボード操作（Enter、Space、矢印キー）に対応します
• 適切な見出し階層を設定します

構造の例：

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1">
      Section Title
      <span class="icon" aria-hidden="true">▼</span>
    </button>
  </h3>
  <div id="section-1" hidden>
    <p>Section content...</p>
  </div>
</div>

3. パンくずリストパターン

サイト階層内でのユーザーの現在位置を示します。

使用する場面：

• 階層が深いサイト（3 階層以上）
• EC サイトのカテゴリーナビゲーション
• ドキュメントサイト
• 複数ステップのプロセス

ベストプラクティス：

• 現在位置を明確に示します
• 上位階層をクリックできるようにします
• 適切な区切り文字（>、/、→）を使用します
• ラベルは簡潔にします
• モバイル表示での省略を検討します
• ページの上部に配置します

アクセシビリティ：

• aria-label="Breadcrumb" を指定した <nav> を使用します
• 現在のページに aria-current="page" を設定します
• 十分な色のコントラストを確保します
• キーボード操作に対応します

例：

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Laptops</li>
  </ol>
</nav>

4. ページネーションパターン

複数のページに分割された大量のコンテンツを移動できるようにします。

種類：

• 番号付き：ページ番号（1、2、3...）を表示します
• さらに読み込む：追加コンテンツを読み込むボタンを表示します
• 無限スクロール：ユーザーのスクロールに合わせて自動的に読み込みます
• 前へ／次へ：ページ間をシンプルに移動します

使用する場面：

• 検索結果
• 商品一覧
• ブログのアーカイブ
• データテーブル

ベストプラクティス：

• 現在のページを明確に示します
• 前へ／次へのコントロールを用意します
• 最初／最後のページへのリンクを含めます
• ページ総数または結果数を表示します
• 省略されたページには省略記号を使用します（1 ... 5 6 7 ... 20）
• 適切にスクロール位置を維持します
• 読み込み時間とパフォーマンスを考慮します

アクセシビリティ：

• aria-label="Pagination" を指定した <nav> を使用します
• 現在のページに aria-current="page" を設定します
• 機能しないリンクは適切に無効化します
• アイコンのみのコントロールにはテキストによる代替を用意します

5. メニューパターン

ドロップダウンメニュー

クリックまたはホバーすると、追加のオプションを表示します。

ベストプラクティス：

• モバイルでの互換性を考慮し、ホバーよりクリックを優先します
• ホバー時は、閉じるまでに短い遅延を設けます
• 矢印アイコンでサブメニューを示します
• メニュー階層は浅くします（最大 2～3 階層）
• ビューポートからはみ出さないよう適切に配置します

メガメニュー

複数の列とカテゴリーを表示する、大型のドロップダウンメニューです。

使用する場面：

• カテゴリーが多い EC サイト
• 情報設計が複雑なサイト
• 通常のドロップダウンでは窮屈に感じる場合

ベストプラクティス：

• 整理しやすいグリッドレイアウトを使用します
• 視覚要素（アイコン、画像）を含めます
• 関連する項目をグループ化します
• 明確な視覚的階層を設けます
• 外側をクリックするか、Esc キーを押すと閉じるようにします

ハンバーガーメニュー

モバイルナビゲーション用の折りたたみ可能なメニューです。

ベストプラクティス：

• 認識しやすいアイコン（横線 3 本）を使用します
• 分かりやすいラベル（「メニュー」）を付けます
• 開閉時にアニメーションを付けます
• 開いている間は body のスクロールを無効にします
• メニュー内に閉じるボタンを含めます
• 見つけやすさを高める代替手段を検討します

アクセシビリティ：

• 適切な ARIA のロールと状態を使用します
• キーボード操作に対応します
• スクリーンリーダーにメニューの状態を通知します
• フォーカスを適切に管理します

フォームパターン

1. 入力検証パターン

ユーザー入力が正しいかどうかのフィードバックを提供します。

検証の種類：

• 必須フィールド：入力が必要です
• 形式検証：メールアドレス、電話番号、URL のパターン
• 長さ検証：最小／最大文字数
• 範囲検証：数値の範囲
• カスタムルール：ビジネスロジックの検証

タイミング：

• 送信時：従来の方法で、すべてのエラーを一度に表示します
• フォーカスアウト時：フィールドから移動したときに検証します
• 変更時：入力中にリアルタイムで検証します
• ハイブリッド：最適な UX を実現するため、複数の方法を組み合わせます

ベストプラクティス：

• 必須フィールドを明確に示します（アスタリスク、「必須」ラベル）
• フィールドの近くにインラインエラーメッセージを表示します
• 明確で役立つエラーメッセージを使用します
• 適切な場合は成功状態を表示します
• 関連するエラーをグループ化します
• フォームが有効になるまで送信を無効にします（任意）
• エラー表示中もユーザーの入力を保持します
• ブラウザーの自動入力に対応します

エラーメッセージのガイドライン：

• 問題を具体的に示します
• 修正方法を説明します
• 親しみやすく、専門用語を使わない表現にします
• ユーザーを責める表現は避けます（「入力した内容が…」ではなく「メールアドレスの形式が無効です」）

視覚的なインジケーター：

• エラーには赤い枠線／背景を使用します
• 成功／有効には緑色を使用します
• 状態を補足するアイコンを使用します
• 十分な色のコントラストを確保します

アクセシビリティ：

• 無効なフィールドには aria-invalid="true" を使用します
• エラーを aria-describedby で関連付けます
• スクリーンリーダーにエラーを通知します
• エラーメッセージがプログラム上で関連付けられていることを確認します

例：

<div class="form-field">
  <label for="email">
    Email Address <span aria-label="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
    required
  />
  <div id="email-error" class="error-message" role="alert">
    Please enter a valid email address
  </div>
</div>

2. マルチステップフォームパターン

長いフォームを複数のステップやページに分割します。

使用する場面：

• 多数のフィールドを含む複雑なフォーム
• 関連情報の論理的なグループ化
• オンボーディングのフロー
• チェックアウトのプロセス
• ユーザー登録

コンポーネント：

• 進捗インジケーター：現在のステップと合計ステップ数を表示します
• ステップナビゲーション：ステップ間を移動します
• 確認ステップ：送信前に概要を表示します
• 下書きの保存：後から再開できるようにします

ベストプラクティス：

• 各ステップを単一のトピックに絞ります
• 進捗を明確に表示します
• 前のステップに戻れるようにします
• 次に進む前に各ステップを検証します
• 進捗を自動的に保存します
• 任意のステップをスキップする方法を用意します
• 可能であれば所要時間の目安を表示します
• 内容がわかりやすいステップタイトルを使用します

進捗インジケーター：

• 直線的なステップ（1 → 2 → 3 → 4）
• 番号付きのステップラベル
• 完了率
• 視覚的なタイムライン

アクセシビリティ：

• ステップインジケーターに aria-label を使用します
• ステップの変更を通知します
• キーボードナビゲーションが機能することを確認します
• 完了済み／現在／次のステップを示します

3. インライン編集パターン

別のフォームを使わず、コンテンツをその場で直接編集します。

使用する場面：

• スプレッドシートのようなインターフェース
• 既存コンテンツの簡単な編集
• データテーブル
• ユーザープロフィール
• 設定ページ

操作モード：

• クリックして編集：フィールドをクリックして編集可能にします
• 常時編集可能：フィールドを常に編集モードにします
• 編集ボタン：明示的なボタンで編集モードに切り替えます
• 行／項目の編集：行や項目全体を一度に編集します

ベストプラクティス：

• 編集可能な領域を視覚的に明確に示します
• 編集モードを明確に表示します（枠線、背景の変更）
• 保存／キャンセルの操作を用意します
• フォーカスアウト時に自動保存します（任意）
• 保存前に検証します
• 保存中は読み込み状態を表示します
• エラーに適切に対処します
• キーボードショートカットを用意します（Enter で保存、Esc でキャンセル）

視覚的な状態：

• デフォルト：コンテンツを表示し、編集可能であることを示します
• ホバー：操作可能であることを示します
• 編集：明確な入力／編集インターフェースを表示します
• 保存中：読み込みインジケーターを表示します
• 保存済み：短時間、成功を確認する表示を行います

アクセシビリティ：

• セマンティック HTML 要素を使用します
• 明確なラベルを設定します
• 状態の変更を通知します
• キーボードのみの操作に対応します

4. 検索パターン

オートコンプリート／タイプアヘッド

ユーザーの入力に合わせて候補を表示します。

ベストプラクティス：

• 入力をデバウンスします（300ms の遅延）
• 一致する文字を強調表示します
• 最近の検索結果と関連性の高い結果を両方表示します
• 候補数を制限します（5～10 件）
• キーボードでの操作を可能にします（矢印キー、Enter）
• Esc キーで候補をクリアします
• 「結果がありません」の状態を表示します
• フォールバックとして検索ボタンを含めます

アクセシビリティ：

• role="combobox" と aria-autocomplete を使用します
• 候補数を読み上げます
• 強調表示された候補には aria-activedescendant を使用します
• スクリーンリーダーでのサポートを確保します

フィルタリング

条件に基づいて結果を絞り込みます。

種類：

• ファセット検索：複数のフィルターカテゴリ
• タグフィルター：タグの選択／選択解除
• 範囲フィルター：数値範囲を指定するスライダー
• 日付フィルター：日付ピッカーまたはプリセット

ベストプラクティス：

• 適用中のフィルターを明確に表示します
• 結果数を表示します
• 個別またはすべてのフィルターをクリアできるようにします
• リアルタイム、または適用ボタンで結果を更新します
• フィルターの状態を URL に保持します
• よく使われるクエリ向けのフィルタープリセットを用意します

5. フォームレイアウトのパターン

1 列

モバイルやシンプルさを重視する場合に最適です。

利点：

• 縦方向に読み進めやすくなります
• モバイルでの使いやすさが向上します
• 認知負荷が軽減されます
• 完了率が高まります

複数列

関連するフィールドをまとめる場合や、スペースを効率的に使う場合に使用します。

ベストプラクティス：

• 関連するフィールドをまとめます
• ラベルを左揃えにします
• 短いフォームにのみ使用します
• モバイルでは縦に並べます

ラベルの配置

• 上部ラベル：入力完了が最も速く、モバイルに最適です
• 左側ラベル：スペース効率が良く、データ入力に適しています
• インラインラベル：プレースホルダー形式です（慎重に使用します）

データ表示パターン

1. テーブルパターン

構造化データを行と列で表示します。

使用する場面：

• 複数の項目でデータを比較する場合
• 並べ替えやフィルタリングが必要な大規模なデータセット
• 正確さが求められる詳細なデータ
• 管理インターフェースやダッシュボード

必須機能：

• 並べ替え：ヘッダーをクリックして列を並べ替えます
• フィルタリング：列ごとに検索またはフィルタリングします
• ページネーション：大規模なデータセットを扱います
• 行の選択：一括操作用のチェックボックス
• レスポンシブ対応：モバイル画面に合わせて調整します

高度な機能：

• 列の幅変更：ドラッグして幅を調整します
• 列の並べ替え：列の順序を変更します
• 列の固定：ヘッダー／最初の列を表示したままにします
• 行の展開：追加の詳細を表示します
• インライン編集：セルを直接編集します
• エクスポート：CSV／Excel 形式でダウンロードします

ベストプラクティス：

• テキストは左揃え、数値は右揃えにします
• 一貫した書式を使用します
• ホバー時に強調表示します
• 読み込み中の状態を表示します
• 空の状態に対応します
• 並べ替えの状態を明確に示します
• ゼブラストライプは控えめに使用します
• 可能な限り横スクロールを避けます

レスポンシブ対応の方法：

• 横スクロール：シンプルですが、あまり理想的ではありません
• カード表示：行をカードに変換します
• 優先列：重要度の低い列を非表示にします
• 行の展開：展開するまで詳細を非表示にします
• 比較表示：2～3 件の項目を横並びで表示します

アクセシビリティ：

• セマンティックな <table>、<thead>、<tbody>、<th>、<td> を使用します
• ヘッダーに scope 属性を追加します
• テーブルのキャプションを指定します
• 並べ替え可能な列には aria-sort を使用します
• 操作可能な要素をキーボードで操作できるようにします

2. カードパターン

視覚的な階層構造を持たせて関連情報をまとめるコンテナーです。

使用する場面：

• 商品の一覧
• ユーザープロフィール
• ダッシュボードのウィジェット
• コンテンツのプレビュー
• 複数のコンテンツ形式

構成要素：

• 画像／ビジュアル：ヒーロー画像またはアイコン
• ヘッダー：タイトルとメタデータ
• 本文：説明または詳細
• アクション：ボタンまたはリンク
• フッター：補足情報

バリエーション：

• 商品カード：画像、タイトル、価格、カートに追加
• ユーザーカード：アバター、名前、自己紹介、フォローボタン
• 記事カード：サムネイル、見出し、抜粋、読了時間
• 統計カード：数値、ラベル、傾向のインジケーター

ベストプラクティス：

• グリッド内でカードのサイズを統一する
• 明確な視覚的階層を設ける
• 適切なパディングと間隔を確保する
• インタラクションを可能にするホバー状態を設ける
• アクションは主要なもの1～2個に限定する
• 奥行きを表現するため、控えめなシャドウを使う
• タッチターゲットが十分な大きさ（最小44x44px）であることを確認する

グリッドレイアウト：

• レスポンシブな列数（モバイルでは1列、デスクトップでは2～4列）
• カードの高さを揃えるか、メイソンリーレイアウトにする
• カード間の間隔を統一する

アクセシビリティ：

• セマンティックなHTMLを使用する
• 画像に代替テキストを設定する
• 十分なコントラストを確保する
• 適切な場合はカード全体をクリック可能にする
• タイトルには見出しタグを使用する

3. リストパターン

類似した項目を順に表示します。

種類：

• シンプルリスト：テキストのみの項目
• 詳細リスト：各項目に複数行の情報を表示
• インタラクティブリスト：クリックまたは選択できる項目
• グループ化リスト：カテゴリー別に整理した項目
• 受信トレイリスト：プレビュー、時刻、ステータスを含むメッセージ

ベストプラクティス：

• 項目間を視覚的に明確に区切る
• 項目の高さを統一するか、自然な流れにする
• 項目数を表示する
• 選択中の項目を強調表示する
• すぐに実行できるアクションを用意する
• 適切な場合は複数選択に対応する
• 長いリストには仮想スクロールを実装する

アクセシビリティ：

• セマンティックなリスト要素（<ul>、<ol>、<li>）を使用する
• 各項目に一意のIDを設定する
• 選択状態の変更を通知する
• キーボード操作に対応する

4. グリッドパターン

項目を行と列に並べて配置します。

使用する場面：

• 画像ギャラリー
• 商品カタログ
• アプリランチャー
• アイコンセット
• メディアライブラリ

グリッドの種類：

• 固定グリッド：項目のサイズを統一する
• メイソンリー：高さが異なるPinterest風のレイアウト
• レスポンシブグリッド：画面サイズに合わせて調整する

ベストプラクティス：

• CSS GridまたはFlexboxを使用する
• アスペクト比を維持する
• 画像には遅延読み込みを実装する
• グリッド表示とリスト表示を切り替えられるようにする
• 間隔を統一する
• 空の状態に対応する

レスポンシブ動作：

Mobile: 1-2 columns
Tablet: 2-4 columns
Desktop: 4-6 columns

5. ダッシュボードパターン

主要な指標とデータビジュアライゼーションの概要を表示します。

構成要素：

• KPIカード：傾向を含む主要な指標
• チャート：折れ線、棒、円、面グラフ
• テーブル：詳細データ
• アクティビティフィード：最近のイベント
• クイックアクション：よく使うタスク

レイアウト戦略：

• 固定レイアウト：位置をあらかじめ決めたレイアウト
• ドラッグ可能なウィジェット：ユーザーがカスタマイズ可能
• レスポンシブグリッド：画面サイズに合わせて調整する

ベストプラクティス：

• 最も重要な指標を優先する
• 期間を統一する
• 比較や傾向などのコンテキストを示す
• 詳細を掘り下げて確認できるようにする
• データをリアルタイムで更新するか、最終更新時刻を表示する
• カスタマイズに対応する
• エクスポート／共有機能を用意する

フィードバックパターン

1. トースト／スナックバーのパターン

システムの状態やアクションの結果を短時間だけ表示するメッセージです。

使用する場面：

• アクションの完了を確認する（保存、削除、送信）
• 簡潔な通知を表示する
• 重大ではないエラーを伝える
• 元に戻す機会を提供する

ベストプラクティス：

• 3～7秒間表示します
• 表示位置を統一します（下部中央または右上）
• トーストは一度に1つ表示するか、複数ある場合はキューに追加します
• 閉じる操作を用意します
• 重要なコンテンツを妨げないようにします
• メッセージは簡潔にします
• 適切な色を使用します（成功：緑、エラー：赤、情報：青）
• 破壊的なアクションには元に戻す機能を用意します

使用しない場面：

• ユーザーの操作が必要な重大なエラー
• ユーザーが読む必要のある情報
• 複数のメッセージを同時に表示する場合
• 長いメッセージ

アクセシビリティ：

• role="status" または role="alert" を使用します
• スクリーンリーダーに通知します
• 自動的に閉じるまでの時間を短くしすぎないようにします
• 手動で閉じる方法を用意します

構造の例：

<div class="toast" role="status" aria-live="polite">
  <span>Settings saved successfully</span>
  <button aria-label="Close notification">×</button>
</div>

2. モーダル／ダイアログのパターン

特定のタスクや情報にユーザーの注意を集中させるオーバーレイです。

種類：

• アラートダイアログ：確認が必要な重要なメッセージ
• 確認ダイアログ：はい／いいえの判断
• フォームダイアログ：入力の収集
• ライトボックス：画像／メディアビューアー

使用する場面：

• 重要な判断を求めるとき
• 1つのタスクに集中させるとき
• 必要な情報を収集するとき
• 破壊的なアクションを中断するとき
• メディアをフルサイズで表示するとき

ベストプラクティス：

• 背景コンテンツを暗くします（オーバーレイ）
• 背景とのインタラクションを無効にします
• 明確な閉じる方法を用意します（X ボタン、キャンセル、Esc キー）
• 開いたときに最初の入力欄または閉じるボタンにフォーカスを設定します
• 閉じたときにトリガー要素へフォーカスを戻します
• コンテンツは簡潔にします
• ビューポートの中央に配置します
• 開いている間は body のスクロールを防ぎます
• モーダルの入れ子（モーダル内のモーダル）は避けます

アクセシビリティ：

• role="dialog" または role="alertdialog" を使用します
• aria-modal="true" を設定します
• aria-labelledby と aria-describedby を使用します
• フォーカストラップを実装します
• Esc キーで閉じられるようにします
• スクリーンリーダーに通知します

構造：

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Deletion</h2>
    <p>Are you sure you want to delete this item?</p>
    <div class="modal-actions">
      <button>Cancel</button>
      <button class="danger">Delete</button>
    </div>
  </div>
</div>

3. ローディング状態のパターン

処理やデータ取得が進行中であることを示します。

種類：

• スピナー：円形または線形の進捗表示
• プログレスバー：完了率を表示
• スケルトン画面：コンテンツのプレースホルダー
• シマー効果：アニメーションするプレースホルダー
• インラインローダー：ボタンやセクション内に表示

使用する場面：

• ページの読み込み
• API リクエスト
• ファイルのアップロード
• バックグラウンド処理
• 無限スクロールの読み込み

ベストプラクティス：

• すぐに表示します（100ms 以内）
• 可能な場合は進捗を示します
• 長時間かかる処理では所要時間の目安を示します
• 適切な場合はキャンセルできるようにします
• 体感速度を向上させるためにスケルトン画面を使用します
• 不必要に UI 全体をブロックしないようにします
• 読み込み中も部分的なコンテンツを表示します

スケルトン画面： 何も表示しない画面やスピナーより、優れた UX を実現できます：

• 実際のコンテンツのレイアウトに合わせます
• 控えめなアニメーションを使用します
• コンテンツを段階的に読み込みます
• スクロール位置を維持します

アクセシビリティ：

• 読み込み中は aria-busy="true" を使用します
• 読み込み完了を通知します
• 視覚的なローダーにはテキストによる代替を用意します
• キーボードユーザーがキャンセルできるようにします

4. 空の状態のパターン

コンテンツがないことを伝え、次のアクションを案内します。

種類：

• 初回利用：新しいユーザーを案内する
• 結果なし：検索／フィルターで結果が見つからなかった
• エラー状態：問題が発生した
• 完了状態：すべてのタスクが完了した

構成要素：

• イラスト：視覚的な要素
• 見出し：明確なメッセージ
• 説明：説明と案内
• 行動喚起：次に行う主なアクション

ベストプラクティス：

• 励ましとなる、役立つ表現にします
• 次のアクションを明確に示します
• 状況に応じた適切なトーンを使用します
• 関連するイラストを含めます
• CTA を目立たせます
• 代替案や提案を提示します

例：

初回利用：

"Welcome to your inbox!"
"You don't have any messages yet.
Why not invite your team?"
[Invite Team Button]

結果なし：

"No results found for 'query'"
"Try different keywords or clear filters"
[Clear Filters Button]

エラー：

"Oops, something went wrong"
"We couldn't load your data. Please try again."
[Retry Button]

アクセシビリティ：

• 意味のあるテキストを用意します
• 画像に alt テキストを設定します
• キーボードで CTA にアクセスできるようにします

5. 通知バッジパターン

未読項目や保留中のアクションを示します。

種類：

• 数字バッジ：件数を表示します（5、12、99+）
• ドットバッジ：件数を表示せず、項目の存在を示します
• ステータスバッジ：オンライン、オフライン、取り込み中の状態を示します

使用する場面：

• 未読メッセージ
• 保留中の通知
• カート内の商品数
• ユーザーステータスのインジケーター

ベストプラクティス：

• 一貫した位置（アイコンの右上）に配置します
• コントラストの高い色を使います
• 数字に上限を設けます（件数が多い場合は99+）
• 閲覧後に消します
• 使いすぎないようにします
• 適切なサイズにします

アクセシビリティ：

• アクセシブルネームに含めます
• スクリーンリーダーに更新を通知します
• 例：aria-label="Messages (3 unread)"

インタラクションパターン

1. ドラッグ＆ドロップパターン

ドラッグして項目を移動または並べ替えます。

使用例：

• ファイルのアップロード
• リストの並べ替え
• カンバンボード
• 画像ギャラリー
• フォームビルダー

インタラクションの状態：

• ドラッグ可能：視覚的なインジケーター（ハンドルアイコン）
• ドラッグ中：項目がカーソルに追従し、元の位置が表示されます
• ドロップ領域：有効なドロップ先を強調表示します
• 無効：ドロップできない場合に表示します
• ドロップ後：最終位置までアニメーションします

ベストプラクティス：

• 明確なドラッグハンドルを用意します
• ドロップ領域を明確に表示します
• 遷移を滑らかにアニメーションします
• キーボードでの代替操作をサポートします
• 破壊的なドロップは確認します
• 端の近くでドラッグしたときに自動スクロールします
• 最終状態のプレビューを表示します

キーボードでの代替操作：

• 項目を選択します
• 切り取り／コピーします
• ドロップ先に移動します
• 貼り付け／挿入します

アクセシビリティ：

• キーボード操作を実装します
• ドラッグ／ドロップの操作を通知します
• 代替の操作方法を用意します
• 適切な ARIA 属性を使います

2. 無限スクロールパターン

ユーザーが下にスクロールすると、コンテンツを自動的に読み込みます。

使用する場面：

• ソーシャルメディアのフィード
• 画像ギャラリー
• ニュースフィード
• 商品カタログ

ベストプラクティス：

• 読み込みインジケーターを表示します
• フォールバックとして「さらに読み込む」ボタンを用意します
• 戻る操作での移動時にスクロール位置を維持します
• すべてのコンテンツを読み込んだ後にのみフッターを含めます
• 特定の項目に移動できるようにします
• 可能な場合は合計件数を表示します
• 自動読み込みを停止する方法を用意します

アクセシビリティに関する懸念事項：

• スクリーンリーダーに新しいコンテンツを通知します
• キーボードユーザーがすべてのコンテンツにアクセスできるようにします
• スキップリンクを用意します
• ページネーションを代替手段として検討します

パフォーマンス：

• 大きなリストには仮想スクロールを実装します
• 画像を遅延読み込みします
• 画面外のコンテンツを削除します
• スクロールイベントをデバウンスします

3. フィルターと並べ替えのパターン

表示されるデータを絞り込み、整理します。

フィルターの種類：

• チェックボックス：複数のカテゴリーを選択します
• ラジオボタン：単一の項目を選択します
• 範囲スライダー：数値の範囲を指定します
• 日付ピッカー：日付の範囲を指定します
• 検索：テキストに一致する項目を探します

並べ替えオプション：

• アルファベット順（A-Z、Z-A）
• 数値順（小さい順、大きい順）
• 日付順（新しい順、古い順）
• 関連度順
• 人気順

ベストプラクティス：

• 適用中のフィルターを明確に表示します
• 結果件数を表示します
• 個々のフィルターを解除できるようにします
• 「すべてクリア」オプションを用意します
• 結果をすぐに更新するか、「適用」ボタンで更新します
• フィルターの状態を URL に保持します
• 最も役立つ並べ替え順をデフォルトにします
• 並べ替え方向を明確に表示します

モバイルでの考慮事項：

• フィルターにはボトムシートまたはサイドバーを使います
• 件数バッジ付きのフィルターボタンを用意します
• パネルを閉じる前にフィルターを適用できるようにします

4. 検索パターン

ユーザーが特定のコンテンツや項目を見つけられるようにします。

コンポーネント：

• 検索入力欄：クエリを入力するテキストフィールド
• 検索ボタン：検索を実行します
• クリアボタン：検索をリセットします
• オートコンプリート：入力中に候補を表示します
• 最近の検索：以前に検索した語句
• フィルター：検索結果を絞り込みます
• 結果：一致する項目

ベストプラクティス：

• 検索を目立たせ、見つけやすくします
• 検索アイコンを表示します
• キーボードショートカット（/、Ctrl+K）を用意します
• 検索範囲が限定される場合は、その範囲を表示します
• 結果内で一致した語句を強調表示します
• 候補を添えて「結果なし」の状態を表示します
• 検索内容を URL に保持します
• デバウンス（300ms）を実装します

検索 UX：

• インスタント検索と検索ボタンによる検索
• オートコンプリート候補
• タイプミスを考慮した曖昧検索
• 検索結果内の検索
• 関連度順の並べ替え

5. 元に戻す／やり直すパターン

操作を取り消したり、再実行したりします。

使用する場面：

• コンテンツエディター
• 描画アプリケーション
• メールクライアント
• 破壊的な操作全般

実装：

• 即時に元に戻す：元に戻すボタン付きのトースト
• コマンドパターン：取り消し可能な操作のスタック
• キーボードショートカット：Ctrl+Z、Ctrl+Y／Ctrl+Shift+Z
• メニューオプション：編集メニューの項目

ベストプラクティス：

• 重要な操作はすべて元に戻せるようにします
• 元に戻すオプションをすぐに表示します（トースト）
• 適切な制限時間（5～10秒）を設定します
• 取り消される内容を明確に伝えます
• 複数回の操作を元に戻せるようにします
• 元に戻せる操作がない場合は無効にします
• 元に戻す履歴を適切に保持します

アクセシビリティパターン

WCAGの原則

知覚可能：情報は、ユーザーが知覚できる方法で提示できなければなりません。

• テキスト以外のコンテンツにはテキストによる代替を用意します
• マルチメディアには字幕や代替手段を用意します
• さまざまな方法で提示できるコンテンツを作成します
• コンテンツを見やすく、聞きやすくします

操作可能：インターフェースのコンポーネントは、すべてのユーザーが操作できなければなりません。

• すべての機能をキーボードで利用できるようにします
• コンテンツを読んで操作するのに十分な時間をユーザーに与えます
• 発作を引き起こす可能性のあるコンテンツを設計しません
• ユーザーがコンテンツを見つけて操作できるようにします

理解可能：情報とUIの操作は理解できるものでなければなりません。

• テキストを読みやすく、理解しやすくします
• コンテンツの表示や操作を予測しやすくします
• ユーザーが間違いを避け、修正できるようにします

堅牢：さまざまなユーザーエージェントで解釈できるよう、コンテンツは十分に堅牢でなければなりません。

• 現在および将来のツールとの互換性を最大限に高めます

キーボードナビゲーション

基本パターン：

• Tab：インタラクティブ要素間を前方に移動します
• Shift+Tab：後方に移動します
• Enter/Space：ボタンやリンクを実行します
• 矢印キー：コンポーネント内（メニュー、タブ）を移動します
• Esc：ダイアログを閉じたり、操作をキャンセルしたりします
• Home/End：最初／最後の項目に移動します

フォーカス管理：

• フォーカスインジケーターを表示します（アウトライン、ハイライト）
• 論理的なタブ順序にします（視覚的な順序に従います）
• モーダル内でフォーカスをトラップします
• ダイアログを閉じた後にフォーカスを戻します
• メインコンテンツへのスキップリンクを用意します

ベストプラクティス：

• ホバー時のみの操作に依存しないようにします
• すべてのインタラクティブ要素をキーボードで操作できるようにします
• よく使う操作にはキーボードショートカットを用意します
• キーボードショートカットを文書化します
• キーボードのみでテストします

ARIA（Accessible Rich Internet Applications）

ロール： 要素の種類や機能を定義します。

• role="button"、role="tab"、role="dialog"
• role="navigation"、role="main"、role="search"
• role="alert"、role="status"、role="log"

状態とプロパティ：

• aria-expanded：展開可能な要素（true/false）
• aria-selected：選択された項目（true/false）
• aria-checked：チェックボックス（true/false/mixed）
• aria-disabled：無効状態（true/false）
• aria-hidden：スクリーンリーダーから隠す（true/false）
• aria-label：アクセシブルな名前
• aria-labelledby：ラベル要素への参照
• aria-describedby：説明への参照
• aria-live：動的な変更を通知します（polite/assertive）
• aria-current：セット内の現在の項目（page/step/location）

ベストプラクティス：

• まずセマンティックHTMLを使用します
• セマンティックHTMLだけでは不十分な場合にARIAを追加します
• ネイティブのセマンティクスを上書きしないようにします
• UIの状態に合わせてARIA属性を更新します
• スクリーンリーダーでテストします

スクリーンリーダーのサポート

考慮事項：

• 論理的な見出し階層（h1、h2、h3...）
• 説明的なリンクテキスト（「ここをクリック」は避けます）
• 画像の代替テキスト
• フォーム入力のラベル
• 入力に関連付けられたエラーメッセージ
• 動的なコンテンツ変更の通知
• 視覚情報のテキストによる代替

一般的なスクリーンリーダー：

• NVDA（Windows、無料）
• JAWS（Windows、商用）
• VoiceOver（macOS、iOS）
• TalkBack（Android）

色とコントラスト

要件：

• テキストのコントラスト：通常のテキストは4.5:1、大きなテキストは3:1（WCAG AA）
• 強化されたコントラスト：通常のテキストは7:1、大きなテキストは4.5:1（WCAG AAA）
• UI コンポーネント：インターフェース要素とグラフィックは3:1

ベストプラクティス：

• 情報を伝える際、色だけに頼らないでください
• 色に加えて、パターン、アイコン、またはテキストを使用してください
• 色覚シミュレーターでテストしてください
• ハイコントラストモードを用意してください
• フォーカスインジケーターに十分なコントラストがあることを確認してください

フォームのアクセシビリティ

ラベル：

• for／idを使用して、<label>を入力欄に関連付けてください
• プレースホルダーだけをラベルとして使用しないでください
• 関連する入力欄を<fieldset>と<legend>でグループ化してください

検証：

• aria-describedbyを使用して、エラーをフィールドに関連付けてください
• aria-invalid="true"を設定して、無効なフィールドを示してください
• role="alert"を使用して、スクリーンリーダーにエラーを通知してください
• 検証状態を示す際、色だけに頼らないでください

説明：

• フォームの前に明確な説明を用意してください
• 必須フィールドを示してください
• 書式要件を示してください
• 入力例を提示してください

レスポンシブパターン

モバイルファーストのアプローチ

まずモバイル画面向けにデザインし、その後、大きな画面向けに拡張します。

メリット：

• 必須コンテンツに焦点を当てやすくなります
• プログレッシブエンハンスメントを実現できます
• モバイルでのパフォーマンスが向上します
• デスクトップファーストより簡単です

ブレークポイント：

/* Mobile: 320px - 767px (default) */

/* Tablet: 768px+ */
@media (min-width: 768px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) { }

アダプティブレイアウト

フルイドグリッド：

• パーセンテージまたは柔軟な単位（fr、%）を使用します
• CSS GridとFlexbox
• コンポーネント単位のレスポンシブ対応にはコンテナクエリを使用します

柔軟な画像：

img {
  max-width: 100%;
  height: auto;
}

レスポンシブタイポグラフィ：

• 相対単位（rem、em）
• clamp()を使ったフルイドタイポグラフィ
• 読みやすい行の長さに調整します（45～75文字）

モバイルナビゲーションのパターン

ハンバーガーメニュー：

• アイコンでスライド式メニューを切り替えます
• 最も一般的ですが、ナビゲーションを隠してしまう場合があります
• 分かりやすいようにラベルを付けてください

タブバー：

• 画面下部に固定するナビゲーション（iOSのパターン）
• 主要セクションを3～5個にします
• 常に表示します

プライオリティプラス：

• 表示可能な項目を表示し、あふれた項目はメニューに隠します
• 利用可能なスペースに合わせて調整します
• 主要なナビゲーションに適しています

ボトムシート：

• 画面下部からスライドして表示されます
• フィルターやアクションに適しています
• 親指で簡単に届きます

タッチ操作

タッチターゲット：

• タップ可能な領域は最小44x44pxにします
• ターゲット間に十分な間隔を設けます
• 主要なアクションには大きなターゲットを使用します

ジェスチャー：

• タップ：主要なアクション
• ダブルタップ：ズーム（慎重に使用してください）
• 長押し：コンテキストメニューを表示
• スワイプ：削除、アーカイブ、移動
• ピンチ：ズーム
• プルして更新：コンテンツを更新

ベストプラクティス：

• タッチに対する視覚的なフィードバックを提供してください
• ホバーに依存するインタラクションは避けてください
• 縦向きと横向きの両方に対応してください
• 親指が届く範囲（届きやすい、伸ばせば届く、届きにくい）を考慮してください
• 実際のデバイスでテストしてください

レスポンシブテーブル

方法：

1. 水平スクロール：最も簡単ですが、あまり望ましくありません
2. 優先度の高い列：重要度の低い列を非表示にします
3. カード形式：各行をカードにします
4. 見出しの反転：見出しを回転させて行ラベルにします
5. 比較ビュー：2～3項目を横に並べて表示します

例 - カード形式：

Desktop:
| Name | Email | Role | Status |

Mobile:
┌─────────────┐
│ John Doe    │
│ Email: j@   │
│ Role: Admin │
│ Status: ✓   │
└─────────────┘

一般的なUIパターンのチェックリスト

ボタンのパターン

• 主要アクションボタン（塗りつぶし、高コントラスト）
• 二次アクションボタン（アウトラインまたはゴースト）
• 優先度の低いアクション向けの三次／テキストボタン
• よく使うアクション向けのアイコンボタン
• 関連するアクション向けのボタングループ
• オン／オフ状態を切り替えるトグルボタン
• モバイルでの主要アクション向けのフローティングアクションボタン（FAB）
• ボタンの読み込み状態
• 不透明度を下げた無効状態

入力パターン

• ラベルとプレースホルダー付きのテキスト入力
• 表示／非表示の切り替えができるパスワード入力
• アイコンとクリアボタン付きの検索入力
• 複数行入力向けのテキストエリア
• 選択肢から選ぶためのセレクト／ドロップダウン
• 少数の選択肢から1つを選ぶラジオボタン
• 複数選択用のチェックボックス
• オン／オフ設定用のトグルスイッチ
• 日付選択用の日付ピッカー
• ドラッグ＆ドロップ対応のファイルアップロード
• 数値入力用のレンジスライダー
• 色選択用のカラーピッカー

ナビゲーションパターン

• トップナビゲーションバー
• サイドバーナビゲーション
• パンくずナビゲーション
• ページネーション
• タブ
• 複数ステップのプロセスに対応するステッパー
• ページ内ナビゲーション用のアンカーリンク
• トップへ戻るボタン

オーバーレイパターン

• モーダルダイアログ
• スライドオーバー／ドロワー
• コンテキスト情報を表示するポップオーバー
• ヒントを表示するツールチップ
• ドロップダウンメニュー
• コンテキストメニュー（右クリック）
• ボトムシート（モバイル）

フィードバックパターン

• トースト通知
• アラートバナー
• インラインメッセージ
• 読み込みスピナー
• プログレスバー
• スケルトンスクリーン
• 成功／エラー状態
• 空の状態

コンテンツパターン

• カードレイアウト
• リスト表示
• グリッドレイアウト
• テーブル表示
• タイムライン／アクティビティフィード
• ヒーローセクション
• 画像ギャラリー
• カルーセル／スライダー
• 動画プレーヤー
• アバター／プロフィール画像

デザイントークン

一貫性を保つために標準化されたデザイン変数です。

カラートークン

Primary Colors:
- primary-50 to primary-900 (shades)

Semantic Colors:
- success (green)
- warning (yellow)
- error (red)
- info (blue)

Neutral Colors:
- gray-50 to gray-900

Text Colors:
- text-primary
- text-secondary
- text-disabled

余白トークン

- spacing-xs: 4px
- spacing-sm: 8px
- spacing-md: 16px
- spacing-lg: 24px
- spacing-xl: 32px
- spacing-2xl: 48px

タイポグラフィトークン

Font Sizes:
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

Font Weights:
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

Line Heights:
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

角丸トークン

- rounded-none: 0
- rounded-sm: 2px
- rounded: 4px
- rounded-md: 6px
- rounded-lg: 8px
- rounded-xl: 12px
- rounded-full: 9999px

シャドウトークン

- shadow-sm: subtle elevation
- shadow: default elevation
- shadow-md: medium elevation
- shadow-lg: large elevation
- shadow-xl: maximum elevation

パフォーマンスに関する考慮事項

体感パフォーマンス

• コンテンツをすぐに表示する（スケルトンスクリーン）
• 段階的な読み込み
• 楽観的な UI 更新
• 滑らかなアニメーション（60fps）

実際のパフォーマンス

• コード分割
• 画像やコンポーネントの遅延読み込み
• 長いリストの仮想スクロール
• デバウンスとスロットリング
• キャッシュ戦略
• リフローと再描画を最小限に抑える

画像の最適化

• 適切なフォーマット（WebP、AVIF）
• レスポンシブ画像（srcset）
• 遅延読み込み
• ぼかしアップのプレースホルダー手法
• 適切なサイズ設定と圧縮

UI パターンのテスト

ユーザビリティテスト

• ユーザーインタビュー
• タスク完了テスト
• A/B テスト
• ヒートマップとクリック追跡
• セッション録画

アクセシビリティテスト

• キーボードナビゲーションのテスト
• スクリーンリーダーのテスト
• 色のコントラストチェック
• 自動アクセシビリティ監査（axe、Lighthouse）
• WCAG 準拠状況の手動レビュー

クロスブラウザテスト

• 主要なブラウザでテストする（Chrome、Firefox、Safari、Edge）
• 実機でテストする
• ブラウザの開発者ツールを使ってレスポンシブ表示をテストする
• プログレッシブエンハンスメントを確認する

パフォーマンステスト

• Lighthouse 監査
• Core Web Vitals
• 読み込み時間のテスト
• インタラクションの遅延
• アニメーションのフレームレート

リソースとツール

デザインシステム

• Material Design（Google）
• Human Interface Guidelines（Apple）
• Fluent Design（Microsoft）
• Polaris（Shopify）
• Carbon（IBM）
• Ant Design
• Atlassian Design System

コンポーネントライブラリ

• Shadcn UI
• Radix UI
• Headless UI
• Chakra UI
• MUI（Material-UI）
• Ant Design
• Bootstrap
• Tailwind UI

アクセシビリティツール

• axe DevTools
• WAVE
• Lighthouse
• NVDA（スクリーンリーダー）
• VoiceOver（スクリーンリーダー）
• 色のコントラストチェッカー

プロトタイピングツール

• Figma
• Sketch
• Adobe XD
• Framer
• InVision

パターンライブラリ

• UI Patterns
• Patternry
• Mobile Patterns
• Pttrns

まとめ

UI デザインパターンは、一般的なインターフェースの課題に対する実証済みの解決策を提供します。これらのパターンを理解し、適切に適用することで、次のようなものを作成できます。

• 一貫性のあるインターフェース：馴染みのあるパターンによって学習の負担が軽減されます
• アクセシブルな体験：アクセシビリティへの配慮が組み込まれています
• 効率的な開発：再利用可能なコンポーネントと標準化された手法を活用できます
• 優れた UX：ユーザーが理解できる、テスト済みのパターンを活用できます

次の点に留意してください。

• コンテキストに適したパターンを選びます
• ブランドやユーザーに合うようパターンをカスタマイズします
• 実際のユーザーでテストします
• アクセシビリティを優先します
• 進化するベストプラクティスに対応します
• トレンドよりもユーザーのニーズを重視します

UI パターンはガイドラインであり、厳格なルールではありません。ユーザーに効果的に役立つインターフェースを作成できるよう、よく考えて応用してください。