# UI/UX ATLAS — Full reference / 2.1 All pattern values are synthetic. Links are relative to the ATLAS site root. --- # ボタン / Button - Stable ID: urn:uiux-atlas:pattern:001 - Pattern: 1 - Category: 入力・操作 - Usage: 保存や送信など、次の行動を明確にする - Accessibility: 主要操作は1画面に1つ。処理中は二重送信を防ぎ、完了を通知する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/001.html - JSON: patterns/001.json - Interactive demo: index.html#pattern/1 ## Implementation specification 「ボタン / Button」を実装してください。 目的：保存や送信など、次の行動を明確にする。 想定場面：クリック・CTA・申し込みを扱う画面。 仕様： - 主要操作は1画面に1つ。処理中は二重送信を防ぎ、完了を通知する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 主要操作は1画面に1つ。処理中は二重送信を防ぎ、完了を通知することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # カード / Card - Stable ID: urn:uiux-atlas:pattern:002 - Pattern: 2 - Category: 情報表示 - Usage: 関連する情報を、ひとまとまりにする - Accessibility: 見出しと内容を構造化し、カード内の複数リンクは役割を区別する - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/002.html - JSON: patterns/002.json - Interactive demo: index.html#pattern/2 ## Implementation specification 「カード / Card」を実装してください。 目的：関連する情報を、ひとまとまりにする。 想定場面：一覧・商品・記事を扱う画面。 仕様： - 見出しと内容を構造化し、カード内の複数リンクは役割を区別する。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 見出しと内容を構造化し、カード内の複数リンクは役割を区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # タブ / Tabs - Stable ID: urn:uiux-atlas:pattern:003 - Pattern: 3 - Category: 発見・検索 - Usage: 同じ階層の情報を切り替える - Accessibility: タブとパネルを関連付け、左右矢印でも選択できるようにする - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/003.html - JSON: patterns/003.json - Interactive demo: index.html#pattern/3 ## Implementation specification 「タブ / Tabs」を実装してください。 目的：同じ階層の情報を切り替える。 想定場面：切替・分類を扱う画面。 仕様： - タブとパネルを関連付け、左右矢印でも選択できるようにする。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - タブとパネルを関連付け、左右矢印でも選択できるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # モーダル / Modal Dialog - Stable ID: urn:uiux-atlas:pattern:004 - Pattern: 4 - Category: フィードバック - Usage: 確認や短い作業に集中してもらう - Accessibility: 開いたら内部へフォーカスを移し、Escapeで閉じ、起点に戻す - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/004.html - JSON: patterns/004.json - Interactive demo: index.html#pattern/4 ## Implementation specification 「モーダル / Modal Dialog」を実装してください。 目的：確認や短い作業に集中してもらう。 想定場面：ポップアップ・確認を扱う画面。 仕様： - 開いたら内部へフォーカスを移し、Escapeで閉じ、起点に戻す。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 開いたら内部へフォーカスを移し、Escapeで閉じ、起点に戻すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # トースト / Toast - Stable ID: urn:uiux-atlas:pattern:005 - Pattern: 5 - Category: フィードバック - Usage: 操作の完了を、さりげなく伝える - Accessibility: 重要なエラーは自動で消さず、完了通知にはrole=statusを使う - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/005.html - JSON: patterns/005.json - Interactive demo: index.html#pattern/5 ## Implementation specification 「トースト / Toast」を実装してください。 目的：操作の完了を、さりげなく伝える。 想定場面：通知・保存・完了を扱う画面。 仕様： - 重要なエラーは自動で消さず、完了通知にはrole=statusを使う。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 重要なエラーは自動で消さず、完了通知にはrole=statusを使うことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # アコーディオン / Accordion - Stable ID: urn:uiux-atlas:pattern:006 - Pattern: 6 - Category: 情報表示 - Usage: 必要な情報だけを展開する - Accessibility: 開閉ボタンの状態を伝え、見出し構造を保つ - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/006.html - JSON: patterns/006.json - Interactive demo: index.html#pattern/6 ## Implementation specification 「アコーディオン / Accordion」を実装してください。 目的：必要な情報だけを展開する。 想定場面：FAQ・折りたたみを扱う画面。 仕様： - 開閉ボタンの状態を伝え、見出し構造を保つ。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 開閉ボタンの状態を伝え、見出し構造を保つことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # パンくずリスト / Breadcrumbs - Stable ID: urn:uiux-atlas:pattern:007 - Pattern: 7 - Category: ナビゲーション - Usage: サイト内の現在位置を伝える - Accessibility: navに名前を付け、現在のページにaria-currentを使う - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/007.html - JSON: patterns/007.json - Interactive demo: index.html#pattern/7 ## Implementation specification 「パンくずリスト / Breadcrumbs」を実装してください。 目的：サイト内の現在位置を伝える。 想定場面：階層・戻るを扱う画面。 仕様： - navに名前を付け、現在のページにaria-currentを使う。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - navに名前を付け、現在のページにaria-currentを使うことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # サイドバー / Sidebar - Stable ID: urn:uiux-atlas:pattern:008 - Pattern: 8 - Category: ナビゲーション - Usage: 主要機能へ、いつでも移動できるようにする - Accessibility: 現在地を明示し、スマホでは内容を隠しすぎない - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/008.html - JSON: patterns/008.json - Interactive demo: index.html#pattern/8 ## Implementation specification 「サイドバー / Sidebar」を実装してください。 目的：主要機能へ、いつでも移動できるようにする。 想定場面：メニュー・ダッシュボードを扱う画面。 仕様： - 現在地を明示し、スマホでは内容を隠しすぎない。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 現在地を明示し、スマホでは内容を隠しすぎないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ヘッダーナビ / Header Navigation - Stable ID: urn:uiux-atlas:pattern:009 - Pattern: 9 - Category: ナビゲーション - Usage: 主要なページへの入口をまとめる - Accessibility: 意味のあるリンク名を付け、現在地を色以外でも示す - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/009.html - JSON: patterns/009.json - Interactive demo: index.html#pattern/9 ## Implementation specification 「ヘッダーナビ / Header Navigation」を実装してください。 目的：主要なページへの入口をまとめる。 想定場面：ヘッダー・メニューを扱う画面。 仕様： - 意味のあるリンク名を付け、現在地を色以外でも示す。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 意味のあるリンク名を付け、現在地を色以外でも示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ボトムナビ / Bottom Navigation - Stable ID: urn:uiux-atlas:pattern:010 - Pattern: 10 - Category: ナビゲーション - Usage: スマホの主要機能を親指で切り替える - Accessibility: 3〜5項目に絞り、アイコンにテキストラベルを添える - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/010.html - JSON: patterns/010.json - Interactive demo: index.html#pattern/10 ## Implementation specification 「ボトムナビ / Bottom Navigation」を実装してください。 目的：スマホの主要機能を親指で切り替える。 想定場面：スマホ・アプリ・メニューを扱う画面。 仕様： - 3〜5項目に絞り、アイコンにテキストラベルを添える。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 3〜5項目に絞り、アイコンにテキストラベルを添えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ステッパー / Stepper - Stable ID: urn:uiux-atlas:pattern:011 - Pattern: 11 - Category: ナビゲーション - Usage: 複数の入力手順と進捗を示す - Accessibility: 現在の手順をテキストでも示し、戻っても入力値を維持する - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/011.html - JSON: patterns/011.json - Interactive demo: index.html#pattern/11 ## Implementation specification 「ステッパー / Stepper」を実装してください。 目的：複数の入力手順と進捗を示す。 想定場面：登録・手順・ウィザードを扱う画面。 仕様： - 現在の手順をテキストでも示し、戻っても入力値を維持する。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 現在の手順をテキストでも示し、戻っても入力値を維持することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ページネーション / Pagination - Stable ID: urn:uiux-atlas:pattern:012 - Pattern: 12 - Category: ナビゲーション - Usage: 長い一覧をページごとに区切る - Accessibility: 現在ページを示し、前後の操作に具体的な名前を付ける - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/012.html - JSON: patterns/012.json - Interactive demo: index.html#pattern/12 ## Implementation specification 「ページネーション / Pagination」を実装してください。 目的：長い一覧をページごとに区切る。 想定場面：一覧・ページ・送りを扱う画面。 仕様： - 現在ページを示し、前後の操作に具体的な名前を付ける。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 現在ページを示し、前後の操作に具体的な名前を付けることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # テキストフィールド / Text Field - Stable ID: urn:uiux-atlas:pattern:013 - Pattern: 13 - Category: 入力・操作 - Usage: 短い文字列を入力してもらう - Accessibility: ラベルを常時表示し、補足とエラーを入力欄に関連付ける - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/013.html - JSON: patterns/013.json - Interactive demo: index.html#pattern/13 ## Implementation specification 「テキストフィールド / Text Field」を実装してください。 目的：短い文字列を入力してもらう。 想定場面：フォーム・入力・名前を扱う画面。 仕様： - ラベルを常時表示し、補足とエラーを入力欄に関連付ける。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ラベルを常時表示し、補足とエラーを入力欄に関連付けることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # テキストエリア / Text Area - Stable ID: urn:uiux-atlas:pattern:014 - Pattern: 14 - Category: 入力・操作 - Usage: 自由な文章を入力してもらう - Accessibility: 入力上限と文字数を示し、縦方向の拡張を許可する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/014.html - JSON: patterns/014.json - Interactive demo: index.html#pattern/14 ## Implementation specification 「テキストエリア / Text Area」を実装してください。 目的：自由な文章を入力してもらう。 想定場面：文章・コメント・入力を扱う画面。 仕様： - 入力上限と文字数を示し、縦方向の拡張を許可する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 入力上限と文字数を示し、縦方向の拡張を許可することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # セレクト / Select - Stable ID: urn:uiux-atlas:pattern:015 - Pattern: 15 - Category: 入力・操作 - Usage: 選択肢から1つを選んでもらう - Accessibility: 標準selectを優先し、初期値と未選択を区別する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/015.html - JSON: patterns/015.json - Interactive demo: index.html#pattern/15 ## Implementation specification 「セレクト / Select」を実装してください。 目的：選択肢から1つを選んでもらう。 想定場面：プルダウン・選択を扱う画面。 仕様： - 標準selectを優先し、初期値と未選択を区別する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 標準selectを優先し、初期値と未選択を区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # チェックボックス / Checkbox - Stable ID: urn:uiux-atlas:pattern:016 - Pattern: 16 - Category: 入力・操作 - Usage: 複数の項目を選んでもらう - Accessibility: ラベル全体をクリック可能にし、関連項目はグループ化する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/016.html - JSON: patterns/016.json - Interactive demo: index.html#pattern/16 ## Implementation specification 「チェックボックス / Checkbox」を実装してください。 目的：複数の項目を選んでもらう。 想定場面：複数選択・同意を扱う画面。 仕様： - ラベル全体をクリック可能にし、関連項目はグループ化する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ラベル全体をクリック可能にし、関連項目はグループ化することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ラジオボタン / Radio Button - Stable ID: urn:uiux-atlas:pattern:017 - Pattern: 17 - Category: 入力・操作 - Usage: 少数の候補から1つを選んでもらう - Accessibility: 同じグループに同じnameを付け、fieldsetとlegendでまとめる - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/017.html - JSON: patterns/017.json - Interactive demo: index.html#pattern/17 ## Implementation specification 「ラジオボタン / Radio Button」を実装してください。 目的：少数の候補から1つを選んでもらう。 想定場面：単一選択・プランを扱う画面。 仕様： - 同じグループに同じnameを付け、fieldsetとlegendでまとめる。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 同じグループに同じnameを付け、fieldsetとlegendでまとめることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # トグルスイッチ / Toggle Switch - Stable ID: urn:uiux-atlas:pattern:018 - Pattern: 18 - Category: 入力・操作 - Usage: 設定のオン・オフを即座に切り替える - Accessibility: 状態がすぐ反映される設定に使い、状態を読み上げ可能にする - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/018.html - JSON: patterns/018.json - Interactive demo: index.html#pattern/18 ## Implementation specification 「トグルスイッチ / Toggle Switch」を実装してください。 目的：設定のオン・オフを即座に切り替える。 想定場面：設定・切替を扱う画面。 仕様： - 状態がすぐ反映される設定に使い、状態を読み上げ可能にする。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 状態がすぐ反映される設定に使い、状態を読み上げ可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スライダー / Slider - Stable ID: urn:uiux-atlas:pattern:019 - Pattern: 19 - Category: 入力・操作 - Usage: 範囲の中から値を調整する - Accessibility: 現在値と単位を表示し、キーボードでも調整できるようにする - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/019.html - JSON: patterns/019.json - Interactive demo: index.html#pattern/19 ## Implementation specification 「スライダー / Slider」を実装してください。 目的：範囲の中から値を調整する。 想定場面：範囲・音量・調整を扱う画面。 仕様： - 現在値と単位を表示し、キーボードでも調整できるようにする。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 現在値と単位を表示し、キーボードでも調整できるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 日付入力 / Date Picker - Stable ID: urn:uiux-atlas:pattern:020 - Pattern: 20 - Category: 入力・操作 - Usage: 日付を選んでもらう - Accessibility: 標準date入力とラベルを使い、入力形式と範囲を明示する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/020.html - JSON: patterns/020.json - Interactive demo: index.html#pattern/20 ## Implementation specification 「日付入力 / Date Picker」を実装してください。 目的：日付を選んでもらう。 想定場面：カレンダー・予約を扱う画面。 仕様： - 標準date入力とラベルを使い、入力形式と範囲を明示する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 標準date入力とラベルを使い、入力形式と範囲を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ファイルアップロード / File Upload - Stable ID: urn:uiux-atlas:pattern:021 - Pattern: 21 - Category: 入力・操作 - Usage: 画像やファイルを選んでもらう - Accessibility: 拡張子だけに依存せず、実装時はサイズ・内容も検証する - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/021.html - JSON: patterns/021.json - Interactive demo: index.html#pattern/21 ## Implementation specification 「ファイルアップロード / File Upload」を実装してください。 目的：画像やファイルを選んでもらう。 想定場面：画像・添付・ドロップを扱う画面。 仕様： - 拡張子だけに依存せず、実装時はサイズ・内容も検証する。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 拡張子だけに依存せず、実装時はサイズ・内容も検証することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 検索入力 / Search Field - Stable ID: urn:uiux-atlas:pattern:022 - Pattern: 22 - Category: 発見・検索 - Usage: キーワードで必要な情報を見つける - Accessibility: 検索条件と件数を示し、ゼロ件から条件を解除できるようにする - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/022.html - JSON: patterns/022.json - Interactive demo: index.html#pattern/22 ## Implementation specification 「検索入力 / Search Field」を実装してください。 目的：キーワードで必要な情報を見つける。 想定場面：探す・フィルタを扱う画面。 仕様： - 検索条件と件数を示し、ゼロ件から条件を解除できるようにする。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 検索条件と件数を示し、ゼロ件から条件を解除できるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ツールチップ / Tooltip - Stable ID: urn:uiux-atlas:pattern:023 - Pattern: 23 - Category: 情報表示 - Usage: 短い補足を、必要な瞬間に表示する - Accessibility: ホバーとフォーカスの両方で表示し、重要情報をここだけに隠さない - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/023.html - JSON: patterns/023.json - Interactive demo: index.html#pattern/23 ## Implementation specification 「ツールチップ / Tooltip」を実装してください。 目的：短い補足を、必要な瞬間に表示する。 想定場面：説明・ヒントを扱う画面。 仕様： - ホバーとフォーカスの両方で表示し、重要情報をここだけに隠さない。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ホバーとフォーカスの両方で表示し、重要情報をここだけに隠さないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # バッジ / Badge - Stable ID: urn:uiux-atlas:pattern:024 - Pattern: 24 - Category: 情報表示 - Usage: 状態や件数をコンパクトに示す - Accessibility: 色だけでなく文字でも状態を表現する - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/024.html - JSON: patterns/024.json - Interactive demo: index.html#pattern/24 ## Implementation specification 「バッジ / Badge」を実装してください。 目的：状態や件数をコンパクトに示す。 想定場面：状態・未読・ラベルを扱う画面。 仕様： - 色だけでなく文字でも状態を表現する。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 色だけでなく文字でも状態を表現することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # アバター / Avatar - Stable ID: urn:uiux-atlas:pattern:025 - Pattern: 25 - Category: 情報表示 - Usage: ユーザーや担当者を識別する - Accessibility: 名前を併記し、装飾画像の代替テキストは空にする - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/025.html - JSON: patterns/025.json - Interactive demo: index.html#pattern/25 ## Implementation specification 「アバター / Avatar」を実装してください。 目的：ユーザーや担当者を識別する。 想定場面：ユーザー・プロフィールを扱う画面。 仕様： - 名前を併記し、装飾画像の代替テキストは空にする。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 名前を併記し、装飾画像の代替テキストは空にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # データテーブル / Data Table - Stable ID: urn:uiux-atlas:pattern:026 - Pattern: 26 - Category: データ・可視化 - Usage: 多くの数値や項目を比較する - Accessibility: 見出しセルを定義し、スマホの横スクロール領域に名前を付ける - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/026.html - JSON: patterns/026.json - Interactive demo: index.html#pattern/26 ## Implementation specification 「データテーブル / Data Table」を実装してください。 目的：多くの数値や項目を比較する。 想定場面：金融・表・一覧を扱う画面。 仕様： - 見出しセルを定義し、スマホの横スクロール領域に名前を付ける。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 見出しセルを定義し、スマホの横スクロール領域に名前を付けることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # リスト / List - Stable ID: urn:uiux-atlas:pattern:027 - Pattern: 27 - Category: 情報表示 - Usage: 同じ種類の情報を読みやすく並べる - Accessibility: ulやolを使い、操作と情報を明確に分ける - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/027.html - JSON: patterns/027.json - Interactive demo: index.html#pattern/27 ## Implementation specification 「リスト / List」を実装してください。 目的：同じ種類の情報を読みやすく並べる。 想定場面：一覧・履歴を扱う画面。 仕様： - ulやolを使い、操作と情報を明確に分ける。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ulやolを使い、操作と情報を明確に分けることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # タイムライン / Timeline - Stable ID: urn:uiux-atlas:pattern:028 - Pattern: 28 - Category: 情報表示 - Usage: 出来事の流れを時系列で伝える - Accessibility: 時刻をテキストで示し、順序をDOMでも維持する - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/028.html - JSON: patterns/028.json - Interactive demo: index.html#pattern/28 ## Implementation specification 「タイムライン / Timeline」を実装してください。 目的：出来事の流れを時系列で伝える。 想定場面：履歴・経過・注文を扱う画面。 仕様： - 時刻をテキストで示し、順序をDOMでも維持する。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 時刻をテキストで示し、順序をDOMでも維持することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 空の状態 / Empty State - Stable ID: urn:uiux-atlas:pattern:029 - Pattern: 29 - Category: 情報表示 - Usage: データがない理由と次の行動を示す - Accessibility: 初回利用と検索ゼロ件を区別し、役立つ行動を提案する - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/029.html - JSON: patterns/029.json - Interactive demo: index.html#pattern/29 ## Implementation specification 「空の状態 / Empty State」を実装してください。 目的：データがない理由と次の行動を示す。 想定場面：ゼロ件・初回・空を扱う画面。 仕様： - 初回利用と検索ゼロ件を区別し、役立つ行動を提案する。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 初回利用と検索ゼロ件を区別し、役立つ行動を提案することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スケルトン / Skeleton Screen - Stable ID: urn:uiux-atlas:pattern:030 - Pattern: 30 - Category: フィードバック - Usage: 読み込み中のレイアウトを予告する - Accessibility: 領域にaria-busyを付け、読み込み完了時に解除する - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/030.html - JSON: patterns/030.json - Interactive demo: index.html#pattern/30 ## Implementation specification 「スケルトン / Skeleton Screen」を実装してください。 目的：読み込み中のレイアウトを予告する。 想定場面：読み込み・ローディング・待機を扱う画面。 仕様： - 領域にaria-busyを付け、読み込み完了時に解除する。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 領域にaria-busyを付け、読み込み完了時に解除することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スピナー / Loading Spinner - Stable ID: urn:uiux-atlas:pattern:031 - Pattern: 31 - Category: フィードバック - Usage: 短い待ち時間の処理中を伝える - Accessibility: 処理中の説明をテキストで付け、長時間の処理には進捗を使う - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/031.html - JSON: patterns/031.json - Interactive demo: index.html#pattern/31 ## Implementation specification 「スピナー / Loading Spinner」を実装してください。 目的：短い待ち時間の処理中を伝える。 想定場面：読み込み・ローディング・待機を扱う画面。 仕様： - 処理中の説明をテキストで付け、長時間の処理には進捗を使う。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 処理中の説明をテキストで付け、長時間の処理には進捗を使うことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # プログレスバー / Progress Bar - Stable ID: urn:uiux-atlas:pattern:032 - Pattern: 32 - Category: フィードバック - Usage: 処理がどこまで進んだかを示す - Accessibility: 値が測れる場合だけパーセントを使い、ラベルと現在値を伝える - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/032.html - JSON: patterns/032.json - Interactive demo: index.html#pattern/32 ## Implementation specification 「プログレスバー / Progress Bar」を実装してください。 目的：処理がどこまで進んだかを示す。 想定場面：読み込み・進捗・アップロードを扱う画面。 仕様： - 値が測れる場合だけパーセントを使い、ラベルと現在値を伝える。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 値が測れる場合だけパーセントを使い、ラベルと現在値を伝えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # アラート / Alert - Stable ID: urn:uiux-atlas:pattern:033 - Pattern: 33 - Category: フィードバック - Usage: 見逃せない注意やエラーを伝える - Accessibility: 緊急度に応じてroleを選び、解決方法も示す - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/033.html - JSON: patterns/033.json - Interactive demo: index.html#pattern/33 ## Implementation specification 「アラート / Alert」を実装してください。 目的：見逃せない注意やエラーを伝える。 想定場面：エラー・注意・警告を扱う画面。 仕様： - 緊急度に応じてroleを選び、解決方法も示す。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 緊急度に応じてroleを選び、解決方法も示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 確認ダイアログ / Confirmation Dialog - Stable ID: urn:uiux-atlas:pattern:034 - Pattern: 34 - Category: フィードバック - Usage: 重要な操作を実行前に確かめる - Accessibility: 対象と結果を具体的に示し、キャンセルを容易にする - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/034.html - JSON: patterns/034.json - Interactive demo: index.html#pattern/34 ## Implementation specification 「確認ダイアログ / Confirmation Dialog」を実装してください。 目的：重要な操作を実行前に確かめる。 想定場面：削除・確認を扱う画面。 仕様： - 対象と結果を具体的に示し、キャンセルを容易にする。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 対象と結果を具体的に示し、キャンセルを容易にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # インラインエラー / Inline Validation - Stable ID: urn:uiux-atlas:pattern:035 - Pattern: 35 - Category: 入力・操作 - Usage: 入力の問題をその場で解決する - Accessibility: エラーを入力欄に関連付け、入力途中に過剰な警告を出さない - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/035.html - JSON: patterns/035.json - Interactive demo: index.html#pattern/35 ## Implementation specification 「インラインエラー / Inline Validation」を実装してください。 目的：入力の問題をその場で解決する。 想定場面：フォーム・エラー・検証を扱う画面。 仕様： - エラーを入力欄に関連付け、入力途中に過剰な警告を出さない。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - エラーを入力欄に関連付け、入力途中に過剰な警告を出さないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 折れ線グラフ / Line Chart - Stable ID: urn:uiux-atlas:pattern:036 - Pattern: 36 - Category: データ・可視化 - Usage: 数値の推移や傾向を見せる - Accessibility: 軸と単位を示し、数値をテキストでも確認できるようにする - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/036.html - JSON: patterns/036.json - Interactive demo: index.html#pattern/36 ## Implementation specification 「折れ線グラフ / Line Chart」を実装してください。 目的：数値の推移や傾向を見せる。 想定場面：グラフ・金融・時系列を扱う画面。 仕様： - 軸と単位を示し、数値をテキストでも確認できるようにする。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 軸と単位を示し、数値をテキストでも確認できるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 棒グラフ / Bar Chart - Stable ID: urn:uiux-atlas:pattern:037 - Pattern: 37 - Category: データ・可視化 - Usage: 項目ごとの大小を比べる - Accessibility: 原則としてゼロ始点にし、値と項目名を併記する - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/037.html - JSON: patterns/037.json - Interactive demo: index.html#pattern/37 ## Implementation specification 「棒グラフ / Bar Chart」を実装してください。 目的：項目ごとの大小を比べる。 想定場面：グラフ・比較・売上を扱う画面。 仕様： - 原則としてゼロ始点にし、値と項目名を併記する。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 原則としてゼロ始点にし、値と項目名を併記することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ドーナツグラフ / Donut Chart - Stable ID: urn:uiux-atlas:pattern:038 - Pattern: 38 - Category: データ・可視化 - Usage: 全体に対する構成比を見せる - Accessibility: 内訳と割合を文字でも示し、項目数を増やしすぎない - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/038.html - JSON: patterns/038.json - Interactive demo: index.html#pattern/38 ## Implementation specification 「ドーナツグラフ / Donut Chart」を実装してください。 目的：全体に対する構成比を見せる。 想定場面：グラフ・割合・金融を扱う画面。 仕様： - 内訳と割合を文字でも示し、項目数を増やしすぎない。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 内訳と割合を文字でも示し、項目数を増やしすぎないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # KPIカード / KPI Card - Stable ID: urn:uiux-atlas:pattern:039 - Pattern: 39 - Category: データ・可視化 - Usage: 判断に必要な重要数値を目立たせる - Accessibility: 数値の期間・単位・比較基準を明記する - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/039.html - JSON: patterns/039.json - Interactive demo: index.html#pattern/39 ## Implementation specification 「KPIカード / KPI Card」を実装してください。 目的：判断に必要な重要数値を目立たせる。 想定場面：金融・数字・ダッシュボードを扱う画面。 仕様： - 数値の期間・単位・比較基準を明記する。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 数値の期間・単位・比較基準を明記することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スパークライン / Sparkline - Stable ID: urn:uiux-atlas:pattern:040 - Pattern: 40 - Category: データ・可視化 - Usage: 小さな領域で推移を添える - Accessibility: 装飾扱いにする場合も、傾向を隣接テキストで説明する - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/040.html - JSON: patterns/040.json - Interactive demo: index.html#pattern/40 ## Implementation specification 「スパークライン / Sparkline」を実装してください。 目的：小さな領域で推移を添える。 想定場面：グラフ・金融・推移を扱う画面。 仕様： - 装飾扱いにする場合も、傾向を隣接テキストで説明する。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 装飾扱いにする場合も、傾向を隣接テキストで説明することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ヒートマップ / Heatmap - Stable ID: urn:uiux-atlas:pattern:041 - Pattern: 41 - Category: データ・可視化 - Usage: 色の濃淡で分布を見つける - Accessibility: 凡例を付け、各セルの値も確認できるようにする - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/041.html - JSON: patterns/041.json - Interactive demo: index.html#pattern/41 ## Implementation specification 「ヒートマップ / Heatmap」を実装してください。 目的：色の濃淡で分布を見つける。 想定場面：グラフ・分布・カレンダーを扱う画面。 仕様： - 凡例を付け、各セルの値も確認できるようにする。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 凡例を付け、各セルの値も確認できるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ソート / Sortable Table - Stable ID: urn:uiux-atlas:pattern:042 - Pattern: 42 - Category: データ・可視化 - Usage: 表の並び順を変えて比較する - Accessibility: ヘッダーのボタンとaria-sortで方向を伝える - Responsive: PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - HTML: patterns/042.html - JSON: patterns/042.json - Interactive demo: index.html#pattern/42 ## Implementation specification 「ソート / Sortable Table」を実装してください。 目的：表の並び順を変えて比較する。 想定場面：表・金融・並べ替えを扱う画面。 仕様： - ヘッダーのボタンとaria-sortで方向を伝える。 - PCでは比較しやすく並べ、スマホでは要約を優先します。表は横スクロール、グラフは文字の内訳も用意します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ヘッダーのボタンとaria-sortで方向を伝えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # グリッド / Grid Layout - Stable ID: urn:uiux-atlas:pattern:043 - Pattern: 43 - Category: レイアウト - Usage: 同じ重みの情報を整然と並べる - Accessibility: 画面幅で列数を変え、見た目と読み上げ順を一致させる - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/043.html - JSON: patterns/043.json - Interactive demo: index.html#pattern/43 ## Implementation specification 「グリッド / Grid Layout」を実装してください。 目的：同じ重みの情報を整然と並べる。 想定場面：カード・一覧・配置を扱う画面。 仕様： - 画面幅で列数を変え、見た目と読み上げ順を一致させる。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 画面幅で列数を変え、見た目と読み上げ順を一致させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スプリットビュー / Split View - Stable ID: urn:uiux-atlas:pattern:044 - Pattern: 44 - Category: レイアウト - Usage: 一覧と詳細を同時に確認する - Accessibility: スマホでは上下配置にし、選択した対象を明示する - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/044.html - JSON: patterns/044.json - Interactive demo: index.html#pattern/44 ## Implementation specification 「スプリットビュー / Split View」を実装してください。 目的：一覧と詳細を同時に確認する。 想定場面：二分割・メールを扱う画面。 仕様： - スマホでは上下配置にし、選択した対象を明示する。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - スマホでは上下配置にし、選択した対象を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ヒーロー / Hero Section - Stable ID: urn:uiux-atlas:pattern:045 - Pattern: 45 - Category: レイアウト - Usage: 第一印象で価値と行動を伝える - Accessibility: 具体的な見出しと1つの主要な行動を置く - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/045.html - JSON: patterns/045.json - Interactive demo: index.html#pattern/45 ## Implementation specification 「ヒーロー / Hero Section」を実装してください。 目的：第一印象で価値と行動を伝える。 想定場面：ホーム・ランディングを扱う画面。 仕様： - 具体的な見出しと1つの主要な行動を置く。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 具体的な見出しと1つの主要な行動を置くことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # フッター / Footer - Stable ID: urn:uiux-atlas:pattern:046 - Pattern: 46 - Category: レイアウト - Usage: 補助リンクとサイト情報をまとめる - Accessibility: リンクを用途ごとに整理し、小さすぎる文字を避ける - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/046.html - JSON: patterns/046.json - Interactive demo: index.html#pattern/46 ## Implementation specification 「フッター / Footer」を実装してください。 目的：補助リンクとサイト情報をまとめる。 想定場面：下部・リンクを扱う画面。 仕様： - リンクを用途ごとに整理し、小さすぎる文字を避ける。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - リンクを用途ごとに整理し、小さすぎる文字を避けることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 区切り線 / Divider - Stable ID: urn:uiux-atlas:pattern:047 - Pattern: 47 - Category: レイアウト - Usage: 情報のまとまりを穏やかに分ける - Accessibility: 意味のある区切りにはhrを使い、余白と組み合わせる - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/047.html - JSON: patterns/047.json - Interactive demo: index.html#pattern/47 ## Implementation specification 「区切り線 / Divider」を実装してください。 目的：情報のまとまりを穏やかに分ける。 想定場面：余白・境界を扱う画面。 仕様： - 意味のある区切りにはhrを使い、余白と組み合わせる。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 意味のある区切りにはhrを使い、余白と組み合わせることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ドロワー / Drawer - Stable ID: urn:uiux-atlas:pattern:048 - Pattern: 48 - Category: レイアウト - Usage: 画面の端から補助パネルを開く - Accessibility: モーダル型ならフォーカスを閉じ込め、閉じる操作を用意する - Responsive: PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - HTML: patterns/048.html - JSON: patterns/048.json - Interactive demo: index.html#pattern/48 ## Implementation specification 「ドロワー / Drawer」を実装してください。 目的：画面の端から補助パネルを開く。 想定場面：スマホ・メニュー・サイドを扱う画面。 仕様： - モーダル型ならフォーカスを閉じ込め、閉じる操作を用意する。 - PCの複数列をスマホで1列に変えます。DOMの読み順を保ち、横スクロールを発生させません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - モーダル型ならフォーカスを閉じ込め、閉じる操作を用意することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # フィルターチップ / Filter Chips - Stable ID: urn:uiux-atlas:pattern:049 - Pattern: 49 - Category: 発見・検索 - Usage: 絞り込み条件を手軽に選ぶ - Accessibility: 選択状態をaria-pressedで示し、解除手段を用意する - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/049.html - JSON: patterns/049.json - Interactive demo: index.html#pattern/49 ## Implementation specification 「フィルターチップ / Filter Chips」を実装してください。 目的：絞り込み条件を手軽に選ぶ。 想定場面：検索・タグ・条件を扱う画面。 仕様： - 選択状態をaria-pressedで示し、解除手段を用意する。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 選択状態をaria-pressedで示し、解除手段を用意することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # コマンドパレット / Command Palette - Stable ID: urn:uiux-atlas:pattern:050 - Pattern: 50 - Category: 発見・検索 - Usage: コマンドを素早く検索して実行する - Accessibility: 検索欄へフォーカスし、候補の名前と実行結果を伝える - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/050.html - JSON: patterns/050.json - Interactive demo: index.html#pattern/50 ## Implementation specification 「コマンドパレット / Command Palette」を実装してください。 目的：コマンドを素早く検索して実行する。 想定場面：検索・ショートカットを扱う画面。 仕様： - 検索欄へフォーカスし、候補の名前と実行結果を伝える。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 検索欄へフォーカスし、候補の名前と実行結果を伝えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # オートコンプリート / Autocomplete - Stable ID: urn:uiux-atlas:pattern:051 - Pattern: 51 - Category: 発見・検索 - Usage: 入力に応じて候補を提案する - Accessibility: 標準datalistを活用し、自由入力の可否を説明する - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/051.html - JSON: patterns/051.json - Interactive demo: index.html#pattern/51 ## Implementation specification 「オートコンプリート / Autocomplete」を実装してください。 目的：入力に応じて候補を提案する。 想定場面：検索・入力・候補を扱う画面。 仕様： - 標準datalistを活用し、自由入力の可否を説明する。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 標準datalistを活用し、自由入力の可否を説明することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ドロップダウンメニュー / Dropdown Menu - Stable ID: urn:uiux-atlas:pattern:052 - Pattern: 52 - Category: 発見・検索 - Usage: 関連する操作を小さくまとめる - Accessibility: 開閉状態を伝え、外側クリックやEscapeで閉じられるようにする - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/052.html - JSON: patterns/052.json - Interactive demo: index.html#pattern/52 ## Implementation specification 「ドロップダウンメニュー / Dropdown Menu」を実装してください。 目的：関連する操作を小さくまとめる。 想定場面：メニュー・操作を扱う画面。 仕様： - 開閉状態を伝え、外側クリックやEscapeで閉じられるようにする。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 開閉状態を伝え、外側クリックやEscapeで閉じられるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # セグメントコントロール / Segmented Control - Stable ID: urn:uiux-atlas:pattern:053 - Pattern: 53 - Category: 発見・検索 - Usage: 少数の表示モードを切り替える - Accessibility: 単一選択のグループとして扱い、選択を形でも示す - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/053.html - JSON: patterns/053.json - Interactive demo: index.html#pattern/53 ## Implementation specification 「セグメントコントロール / Segmented Control」を実装してください。 目的：少数の表示モードを切り替える。 想定場面：切替・表示を扱う画面。 仕様： - 単一選択のグループとして扱い、選択を形でも示す。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 単一選択のグループとして扱い、選択を形でも示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # カルーセル / Carousel - Stable ID: urn:uiux-atlas:pattern:054 - Pattern: 54 - Category: 発見・検索 - Usage: 複数のコンテンツを順に見せる - Accessibility: 自動再生を避け、前後ボタンと現在位置を示す - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/054.html - JSON: patterns/054.json - Interactive demo: index.html#pattern/54 ## Implementation specification 「カルーセル / Carousel」を実装してください。 目的：複数のコンテンツを順に見せる。 想定場面：スライド・画像を扱う画面。 仕様： - 自動再生を避け、前後ボタンと現在位置を示す。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 自動再生を避け、前後ボタンと現在位置を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 無限スクロール / Load More / Infinite Scroll - Stable ID: urn:uiux-atlas:pattern:055 - Pattern: 55 - Category: 発見・検索 - Usage: 一覧の続きを段階的に読み込む - Accessibility: 明示的な追加ボタンを併設し、追加件数を通知する - Responsive: PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - HTML: patterns/055.html - JSON: patterns/055.json - Interactive demo: index.html#pattern/55 ## Implementation specification 「無限スクロール / Load More / Infinite Scroll」を実装してください。 目的：一覧の続きを段階的に読み込む。 想定場面：追加・一覧・読み込みを扱う画面。 仕様： - 明示的な追加ボタンを併設し、追加件数を通知する。 - PCでもスマホでも検索条件を確認・解除可能にします。操作後の件数を通知し、入力を保持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 明示的な追加ボタンを併設し、追加件数を通知することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スティッキーヘッダー / Sticky Header - Stable ID: urn:uiux-atlas:pattern:056 - Pattern: 56 - Category: ナビゲーション - Usage: スクロール中も操作を使えるようにする - Accessibility: 画面を覆いすぎず、フォーカス先が隠れないようにする - Responsive: PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - HTML: patterns/056.html - JSON: patterns/056.json - Interactive demo: index.html#pattern/56 ## Implementation specification 「スティッキーヘッダー / Sticky Header」を実装してください。 目的：スクロール中も操作を使えるようにする。 想定場面：固定・ヘッダーを扱う画面。 仕様： - 画面を覆いすぎず、フォーカス先が隠れないようにする。 - PCでは横幅を活用し、スマホでは項目が切れないよう折り返し・スクロールを選びます。現在地は両方で維持します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 画面を覆いすぎず、フォーカス先が隠れないようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # ボトムシート / Bottom Sheet - Stable ID: urn:uiux-atlas:pattern:057 - Pattern: 57 - Category: モバイル - Usage: スマホの下部から補助操作を表示する - Accessibility: 閉じるボタンを用意し、ドラッグだけに依存しない - Responsive: スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - HTML: patterns/057.html - JSON: patterns/057.json - Interactive demo: index.html#pattern/57 ## Implementation specification 「ボトムシート / Bottom Sheet」を実装してください。 目的：スマホの下部から補助操作を表示する。 想定場面：スマホ・パネルを扱う画面。 仕様： - 閉じるボタンを用意し、ドラッグだけに依存しない。 - スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 閉じるボタンを用意し、ドラッグだけに依存しないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # FAB / Floating Action Button - Stable ID: urn:uiux-atlas:pattern:058 - Pattern: 58 - Category: モバイル - Usage: 主要操作を手の届く場所に固定する - Accessibility: アイコンに操作名を付け、他のコンテンツを覆わないようにする - Responsive: スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - HTML: patterns/058.html - JSON: patterns/058.json - Interactive demo: index.html#pattern/58 ## Implementation specification 「FAB / Floating Action Button」を実装してください。 目的：主要操作を手の届く場所に固定する。 想定場面：スマホ・追加・ボタンを扱う画面。 仕様： - アイコンに操作名を付け、他のコンテンツを覆わないようにする。 - スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - アイコンに操作名を付け、他のコンテンツを覆わないようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # スワイプ操作 / Swipe Action - Stable ID: urn:uiux-atlas:pattern:059 - Pattern: 59 - Category: モバイル - Usage: リスト項目への操作を素早く行う - Accessibility: スワイプ以外のボタンも用意し、削除は取り消せるようにする - Responsive: スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - HTML: patterns/059.html - JSON: patterns/059.json - Interactive demo: index.html#pattern/59 ## Implementation specification 「スワイプ操作 / Swipe Action」を実装してください。 目的：リスト項目への操作を素早く行う。 想定場面：スマホ・ジェスチャーを扱う画面。 仕様： - スワイプ以外のボタンも用意し、削除は取り消せるようにする。 - スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - スワイプ以外のボタンも用意し、削除は取り消せるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # プルトゥリフレッシュ / Pull to Refresh - Stable ID: urn:uiux-atlas:pattern:060 - Pattern: 60 - Category: モバイル - Usage: 一覧を手動で最新状態に更新する - Accessibility: 更新ボタンを併設し、最終更新状態を通知する - Responsive: スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - HTML: patterns/060.html - JSON: patterns/060.json - Interactive demo: index.html#pattern/60 ## Implementation specification 「プルトゥリフレッシュ / Pull to Refresh」を実装してください。 目的：一覧を手動で最新状態に更新する。 想定場面：スマホ・更新・読み込みを扱う画面。 仕様： - 更新ボタンを併設し、最終更新状態を通知する。 - スマホでは親指で届く位置と安全な余白を確保します。PCでは同じ操作をクリック・キーボードで行えるようにします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 更新ボタンを併設し、最終更新状態を通知することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # トグル可能なパスワード / Password Visibility - Stable ID: urn:uiux-atlas:pattern:061 - Pattern: 61 - Category: 入力・操作 - Usage: 入力したパスワードを確認する - Accessibility: 表示ボタンの状態を読み上げ可能にし、自動表示しない - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/061.html - JSON: patterns/061.json - Interactive demo: index.html#pattern/61 ## Implementation specification 「トグル可能なパスワード / Password Visibility」を実装してください。 目的：入力したパスワードを確認する。 想定場面：フォーム・ログインを扱う画面。 仕様： - 表示ボタンの状態を読み上げ可能にし、自動表示しない。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 表示ボタンの状態を読み上げ可能にし、自動表示しないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # コピー操作 / Copy to Clipboard - Stable ID: urn:uiux-atlas:pattern:062 - Pattern: 62 - Category: 入力・操作 - Usage: コードや文章を再利用しやすくする - Accessibility: 成功を検出して通知し、失敗時は手動コピー手段を示す - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/062.html - JSON: patterns/062.json - Interactive demo: index.html#pattern/62 ## Implementation specification 「コピー操作 / Copy to Clipboard」を実装してください。 目的：コードや文章を再利用しやすくする。 想定場面：コピー・AI・指示文を扱う画面。 仕様： - 成功を検出して通知し、失敗時は手動コピー手段を示す。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 成功を検出して通知し、失敗時は手動コピー手段を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 評価入力 / Rating - Stable ID: urn:uiux-atlas:pattern:063 - Pattern: 63 - Category: 入力・操作 - Usage: 段階的な満足度を入力してもらう - Accessibility: 各選択肢に点数ラベルを付け、キーボードでも選べるようにする - Responsive: PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - HTML: patterns/063.html - JSON: patterns/063.json - Interactive demo: index.html#pattern/63 ## Implementation specification 「評価入力 / Rating」を実装してください。 目的：段階的な満足度を入力してもらう。 想定場面：星・レビューを扱う画面。 仕様： - 各選択肢に点数ラベルを付け、キーボードでも選べるようにする。 - PCはキーボード、スマホはタッチで完結させます。入力文字は16px以上、タップ領域は原則44px以上を確保します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 各選択肢に点数ラベルを付け、キーボードでも選べるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 価格表 / Pricing Table - Stable ID: urn:uiux-atlas:pattern:064 - Pattern: 64 - Category: 情報表示 - Usage: プランの違いと費用を比較する - Accessibility: 総額・期間・条件を明示し、推奨を色だけで伝えない - Responsive: PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - HTML: patterns/064.html - JSON: patterns/064.json - Interactive demo: index.html#pattern/64 ## Implementation specification 「価格表 / Pricing Table」を実装してください。 目的：プランの違いと費用を比較する。 想定場面：料金・比較・プランを扱う画面。 仕様： - 総額・期間・条件を明示し、推奨を色だけで伝えない。 - PCでは関連情報をまとめ、スマホでは1列を基本にします。重要な説明をホバーだけに隠しません。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 総額・期間・条件を明示し、推奨を色だけで伝えないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # オンボーディング / Onboarding - Stable ID: urn:uiux-atlas:pattern:065 - Pattern: 65 - Category: フィードバック - Usage: 初めてのユーザーを使い始めまで導く - Accessibility: 途中で閉じられるようにし、進捗と完了後の行動を示す - Responsive: PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - HTML: patterns/065.html - JSON: patterns/065.json - Interactive demo: index.html#pattern/65 ## Implementation specification 「オンボーディング / Onboarding」を実装してください。 目的：初めてのユーザーを使い始めまで導く。 想定場面：初回・ガイド・使い方を扱う画面。 仕様： - 途中で閉じられるようにし、進捗と完了後の行動を示す。 - PC・スマホとも操作の直後に結果を示します。モーダルは小画面でも閉じる操作と本文をスクロール可能にします。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 途中で閉じられるようにし、進捗と完了後の行動を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 --- # 面グラフ / Area Chart - Stable ID: urn:uiux-atlas:pattern:066 - Pattern: 66 - Category: グラフ - Usage: 推移と量感を面で伝える - Accessibility: ゼロを基準にし、面の重なりで値が隠れないようにする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/066.html - JSON: patterns/066.json - Interactive demo: index.html#pattern/66 ## Implementation specification 「面グラフ / Area Chart」を実装してください。 目的：推移と量感を面で伝える。 想定場面：グラフ・推移・売上・金融を扱う画面。 仕様： - ゼロを基準にし、面の重なりで値が隠れないようにする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ゼロを基準にし、面の重なりで値が隠れないようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "値（件）" ], "rows": [ [ "1月", 24 ], [ "2月", 48 ], [ "3月", 36 ], [ "4月", 72 ], [ "5月", 58 ], [ "6月", 88 ] ] } ``` --- # 積み上げ面グラフ / Stacked Area - Stable ID: urn:uiux-atlas:pattern:067 - Pattern: 67 - Category: グラフ - Usage: 全体と内訳の変化を同時に見る - Accessibility: 系列順を固定し、内訳の比較が難しいときは小分けにする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/067.html - JSON: patterns/067.json - Interactive demo: index.html#pattern/67 ## Implementation specification 「積み上げ面グラフ / Stacked Area」を実装してください。 目的：全体と内訳の変化を同時に見る。 想定場面：グラフ・内訳・時系列を扱う画面。 仕様： - 系列順を固定し、内訳の比較が難しいときは小分けにする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 系列順を固定し、内訳の比較が難しいときは小分けにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "A（件）", "B（件）", "合計" ], "rows": [ [ "1月", 24, 16, 40 ], [ "2月", 48, 28, 76 ], [ "3月", 36, 20, 56 ], [ "4月", 72, 32, 104 ], [ "5月", 58, 22, 80 ], [ "6月", 88, 36, 124 ] ] } ``` --- # グループ棒グラフ / Grouped Bars - Stable ID: urn:uiux-atlas:pattern:068 - Pattern: 68 - Category: グラフ - Usage: 同じ項目の複数系列を比較する - Accessibility: 系列の色と凡例を固定し、棒の基準をゼロにする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/068.html - JSON: patterns/068.json - Interactive demo: index.html#pattern/68 ## Implementation specification 「グループ棒グラフ / Grouped Bars」を実装してください。 目的：同じ項目の複数系列を比較する。 想定場面：グラフ・比較・売上を扱う画面。 仕様： - 系列の色と凡例を固定し、棒の基準をゼロにする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 系列の色と凡例を固定し、棒の基準をゼロにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "A（件）", "B（件）", "合計" ], "rows": [ [ "1月", 24, 16, 40 ], [ "2月", 48, 28, 76 ], [ "3月", 36, 20, 56 ], [ "4月", 72, 32, 104 ], [ "5月", 58, 22, 80 ], [ "6月", 88, 36, 124 ] ] } ``` --- # 積み上げ棒グラフ / Stacked Bars - Stable ID: urn:uiux-atlas:pattern:069 - Pattern: 69 - Category: グラフ - Usage: 合計と内訳を1本の棒で示す - Accessibility: 合計と内訳の値を併記し、順序を統一する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/069.html - JSON: patterns/069.json - Interactive demo: index.html#pattern/69 ## Implementation specification 「積み上げ棒グラフ / Stacked Bars」を実装してください。 目的：合計と内訳を1本の棒で示す。 想定場面：グラフ・内訳・合計を扱う画面。 仕様： - 合計と内訳の値を併記し、順序を統一する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 合計と内訳の値を併記し、順序を統一することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "A（件）", "B（件）", "合計" ], "rows": [ [ "1月", 24, 16, 40 ], [ "2月", 48, 28, 76 ], [ "3月", 36, 20, 56 ], [ "4月", 72, 32, 104 ], [ "5月", 58, 22, 80 ], [ "6月", 88, 36, 124 ] ] } ``` --- # 100%積み上げ棒 / 100% Stacked Bars - Stable ID: urn:uiux-atlas:pattern:070 - Pattern: 70 - Category: グラフ - Usage: 規模の違う項目の構成比を比べる - Accessibility: 割合の合計を100%にし、元の件数も確認可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/070.html - JSON: patterns/070.json - Interactive demo: index.html#pattern/70 ## Implementation specification 「100%積み上げ棒 / 100% Stacked Bars」を実装してください。 目的：規模の違う項目の構成比を比べる。 想定場面：グラフ・割合・構成比を扱う画面。 仕様： - 割合の合計を100%にし、元の件数も確認可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 割合の合計を100%にし、元の件数も確認可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "A（件）", "B（件）", "A構成比" ], "rows": [ [ "1月", 24, 16, "60.0%" ], [ "2月", 48, 28, "63.2%" ], [ "3月", 36, 20, "64.3%" ], [ "4月", 72, 32, "69.2%" ], [ "5月", 58, 22, "72.5%" ], [ "6月", 88, 36, "71.0%" ] ] } ``` --- # 横棒グラフ / Horizontal Bars - Stable ID: urn:uiux-atlas:pattern:071 - Pattern: 71 - Category: グラフ - Usage: 長い項目名と数値を比較する - Accessibility: 値順か意味のある順に並べ、ゼロ始点を保つ - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/071.html - JSON: patterns/071.json - Interactive demo: index.html#pattern/71 ## Implementation specification 「横棒グラフ / Horizontal Bars」を実装してください。 目的：長い項目名と数値を比較する。 想定場面：グラフ・比較・ランキングを扱う画面。 仕様： - 値順か意味のある順に並べ、ゼロ始点を保つ。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 値順か意味のある順に並べ、ゼロ始点を保つことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "地域", "件数" ], "rows": [ [ "東京", 92 ], [ "大阪", 76 ], [ "福岡", 58 ], [ "札幌", 42 ], [ "仙台", 28 ] ] } ``` --- # 散布図 / Scatter Plot - Stable ID: urn:uiux-atlas:pattern:072 - Pattern: 72 - Category: グラフ - Usage: 2つの数値の関係を見る - Accessibility: 軸の意味と単位を示し、相関を因果と誤認させない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/072.html - JSON: patterns/072.json - Interactive demo: index.html#pattern/72 ## Implementation specification 「散布図 / Scatter Plot」を実装してください。 目的：2つの数値の関係を見る。 想定場面：グラフ・相関・分布を扱う画面。 仕様： - 軸の意味と単位を示し、相関を因果と誤認させない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 軸の意味と単位を示し、相関を因果と誤認させないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "広告費（万円）", "売上（万円）" ], "rows": [ [ "8.0", "18.0" ], [ "12.5", "38.2" ], [ "17.0", "33.4" ], [ "21.5", "28.6" ], [ "26.0", "48.8" ], [ "30.5", "44.0" ], [ "35.0", "39.2" ], [ "39.5", "59.4" ], [ "44.0", "54.6" ], [ "48.5", "49.8" ], [ "53.0", "70.0" ], [ "57.5", "65.2" ], [ "62.0", "60.4" ], [ "66.5", "80.6" ], [ "71.0", "75.8" ], [ "75.5", "71.0" ], [ "80.0", "91.2" ], [ "84.5", "86.4" ], [ "89.0", "81.6" ] ] } ``` --- # バブルチャート / Bubble Chart - Stable ID: urn:uiux-atlas:pattern:073 - Pattern: 73 - Category: グラフ - Usage: 位置と円の大きさで3変数を示す - Accessibility: 半径ではなく面積を値に比例させる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/073.html - JSON: patterns/073.json - Interactive demo: index.html#pattern/73 ## Implementation specification 「バブルチャート / Bubble Chart」を実装してください。 目的：位置と円の大きさで3変数を示す。 想定場面：グラフ・分布・規模を扱う画面。 仕様： - 半径ではなく面積を値に比例させる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 半径ではなく面積を値に比例させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "広告費（万円）", "売上（万円）", "顧客数" ], "rows": [ [ "8.0", "18.0", 10 ], [ "12.5", "38.2", 23 ], [ "17.0", "33.4", 36 ], [ "21.5", "28.6", 49 ], [ "26.0", "48.8", 62 ], [ "30.5", "44.0", 75 ], [ "35.0", "39.2", 88 ], [ "39.5", "59.4", 21 ], [ "44.0", "54.6", 34 ], [ "48.5", "49.8", 47 ], [ "53.0", "70.0", 60 ], [ "57.5", "65.2", 73 ], [ "62.0", "60.4", 86 ], [ "66.5", "80.6", 19 ], [ "71.0", "75.8", 32 ], [ "75.5", "71.0", 45 ], [ "80.0", "91.2", 58 ], [ "84.5", "86.4", 71 ], [ "89.0", "81.6", 84 ] ] } ``` --- # ヒストグラム / Histogram - Stable ID: urn:uiux-atlas:pattern:074 - Pattern: 74 - Category: グラフ - Usage: 数値の分布と偏りを見る - Accessibility: 階級幅と境界を示し、棒の間隔を空けない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/074.html - JSON: patterns/074.json - Interactive demo: index.html#pattern/74 ## Implementation specification 「ヒストグラム / Histogram」を実装してください。 目的：数値の分布と偏りを見る。 想定場面：グラフ・分布・度数を扱う画面。 仕様： - 階級幅と境界を示し、棒の間隔を空けない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 階級幅と境界を示し、棒の間隔を空けないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "年齢階級", "人数" ], "rows": [ [ "10〜19歳", 3 ], [ "20〜29歳", 8 ], [ "30〜39歳", 18 ], [ "40〜49歳", 30 ], [ "50〜59歳", 24 ], [ "60〜69歳", 15 ], [ "70〜79歳", 7 ], [ "80〜89歳", 3 ] ] } ``` --- # 箱ひげ図 / Box Plot - Stable ID: urn:uiux-atlas:pattern:075 - Pattern: 75 - Category: グラフ - Usage: 中央値とばらつきを比べる - Accessibility: 四分位数とひげの定義を示し、平均値と区別する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/075.html - JSON: patterns/075.json - Interactive demo: index.html#pattern/75 ## Implementation specification 「箱ひげ図 / Box Plot」を実装してください。 目的：中央値とばらつきを比べる。 想定場面：グラフ・分布・中央値を扱う画面。 仕様： - 四分位数とひげの定義を示し、平均値と区別する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 四分位数とひげの定義を示し、平均値と区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "群", "最小", "第1四分位", "中央値", "第3四分位", "最大" ], "rows": [ [ "A", 15, 30, 48, 64, 88 ], [ "B", 22, 45, 60, 73, 95 ], [ "C", 8, 24, 39, 53, 78 ] ] } ``` --- # バイオリンプロット / Violin Plot - Stable ID: urn:uiux-atlas:pattern:076 - Pattern: 76 - Category: グラフ - Usage: 分布の形と密度を比べる - Accessibility: 幅は密度を表すことを明示し、標本数を併記する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/076.html - JSON: patterns/076.json - Interactive demo: index.html#pattern/76 ## Implementation specification 「バイオリンプロット / Violin Plot」を実装してください。 目的：分布の形と密度を比べる。 想定場面：グラフ・分布・密度を扱う画面。 仕様： - 幅は密度を表すことを明示し、標本数を併記する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 幅は密度を表すことを明示し、標本数を併記することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "群", "点数", "相対密度" ], "rows": [ [ "A", 0, "4.1" ], [ "A", 10, "8.8" ], [ "A", 20, "15.4" ], [ "A", 30, "21.5" ], [ "A", 40, "24.0" ], [ "A", 50, "21.5" ], [ "A", 60, "15.4" ], [ "A", 70, "8.8" ], [ "A", 80, "4.1" ], [ "A", 90, "2.0" ], [ "A", 100, "2.0" ], [ "B", 0, "2.0" ], [ "B", 10, "4.1" ], [ "B", 20, "8.8" ], [ "B", 30, "15.4" ], [ "B", 40, "21.5" ], [ "B", 50, "24.0" ], [ "B", 60, "21.5" ], [ "B", 70, "15.4" ], [ "B", 80, "8.8" ], [ "B", 90, "4.1" ], [ "B", 100, "2.0" ], [ "C", 0, "2.0" ], [ "C", 10, "2.0" ], [ "C", 20, "4.1" ], [ "C", 30, "8.8" ], [ "C", 40, "15.4" ], [ "C", 50, "21.5" ], [ "C", 60, "24.0" ], [ "C", 70, "21.5" ], [ "C", 80, "15.4" ], [ "C", 90, "8.8" ], [ "C", 100, "4.1" ] ] } ``` --- # レーダーチャート / Radar Chart - Stable ID: urn:uiux-atlas:pattern:077 - Pattern: 77 - Category: グラフ - Usage: 複数の評価軸を一度に見渡す - Accessibility: 軸の尺度と順序を統一し、面積だけで優劣を判断させない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/077.html - JSON: patterns/077.json - Interactive demo: index.html#pattern/77 ## Implementation specification 「レーダーチャート / Radar Chart」を実装してください。 目的：複数の評価軸を一度に見渡す。 想定場面：グラフ・評価・多変量を扱う画面。 仕様： - 軸の尺度と順序を統一し、面積だけで優劣を判断させない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 軸の尺度と順序を統一し、面積だけで優劣を判断させないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "評価軸", "点（最大100）" ], "rows": [ [ "速度", 82 ], [ "品質", 64 ], [ "価格", 90 ], [ "機能", 72 ], [ "操作", 58 ] ] } ``` --- # ゲージ / Gauge - Stable ID: urn:uiux-atlas:pattern:078 - Pattern: 78 - Category: グラフ - Usage: 現在値と上限の関係を示す - Accessibility: 最小値・最大値・現在値を文字でも表示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/078.html - JSON: patterns/078.json - Interactive demo: index.html#pattern/78 ## Implementation specification 「ゲージ / Gauge」を実装してください。 目的：現在値と上限の関係を示す。 想定場面：グラフ・達成率・メーターを扱う画面。 仕様： - 最小値・最大値・現在値を文字でも表示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 最小値・最大値・現在値を文字でも表示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "状態", "%" ], "rows": [ [ "完了", 72 ], [ "残り", 28 ] ] } ``` --- # ブレットチャート / Bullet Chart - Stable ID: urn:uiux-atlas:pattern:079 - Pattern: 79 - Category: グラフ - Usage: 実績と目標をコンパクトに比べる - Accessibility: 帯の意味と目標線を示し、実績値も併記する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/079.html - JSON: patterns/079.json - Interactive demo: index.html#pattern/79 ## Implementation specification 「ブレットチャート / Bullet Chart」を実装してください。 目的：実績と目標をコンパクトに比べる。 想定場面：グラフ・目標・実績を扱う画面。 仕様： - 帯の意味と目標線を示し、実績値も併記する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 帯の意味と目標線を示し、実績値も併記することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "点" ], "rows": [ [ "実績", 72 ], [ "目標", 85 ], [ "帯1上限", 50 ], [ "帯2上限", 75 ], [ "最大", 100 ] ] } ``` --- # ウォーターフォール / Waterfall - Stable ID: urn:uiux-atlas:pattern:080 - Pattern: 80 - Category: グラフ - Usage: 増減が合計に至る過程を示す - Accessibility: 開始値・増減・最終値の計算を一致させる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/080.html - JSON: patterns/080.json - Interactive demo: index.html#pattern/80 ## Implementation specification 「ウォーターフォール / Waterfall」を実装してください。 目的：増減が合計に至る過程を示す。 想定場面：グラフ・利益・金融・増減を扱う画面。 仕様： - 開始値・増減・最終値の計算を一致させる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 開始値・増減・最終値の計算を一致させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "段階", "増減または合計（万円）" ], "rows": [ [ "開始", 80 ], [ "売上", 35 ], [ "原価", -20 ], [ "追加", 25 ], [ "経費", -15 ], [ "合計", 105 ] ] } ``` --- # ファネル / Funnel Chart - Stable ID: urn:uiux-atlas:pattern:081 - Pattern: 81 - Category: グラフ - Usage: 段階ごとの到達数と離脱を見る - Accessibility: 段階の順序と母数を固定し、率の分母を明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/081.html - JSON: patterns/081.json - Interactive demo: index.html#pattern/81 ## Implementation specification 「ファネル / Funnel Chart」を実装してください。 目的：段階ごとの到達数と離脱を見る。 想定場面：グラフ・転換・離脱・CVRを扱う画面。 仕様： - 段階の順序と母数を固定し、率の分母を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 段階の順序と母数を固定し、率の分母を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "段階", "件数", "訪問に対する率" ], "rows": [ [ "訪問", 1000, "100.0%" ], [ "閲覧", 680, "68.0%" ], [ "カート", 420, "42.0%" ], [ "購入", 240, "24.0%" ] ] } ``` --- # ツリーマップ / Treemap - Stable ID: urn:uiux-atlas:pattern:082 - Pattern: 82 - Category: グラフ - Usage: 面積で内訳と構成比を示す - Accessibility: 矩形の面積を値に比例させ、小さい項目も表で確認可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/082.html - JSON: patterns/082.json - Interactive demo: index.html#pattern/82 ## Implementation specification 「ツリーマップ / Treemap」を実装してください。 目的：面積で内訳と構成比を示す。 想定場面：グラフ・内訳・階層・面積を扱う画面。 仕様： - 矩形の面積を値に比例させ、小さい項目も表で確認可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 矩形の面積を値に比例させ、小さい項目も表で確認可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "区分", "構成比（%）" ], "rows": [ [ "Web", 40 ], [ "App", 30 ], [ "API", 20 ], [ "Other", 10 ] ] } ``` --- # サンバースト / Sunburst - Stable ID: urn:uiux-atlas:pattern:083 - Pattern: 83 - Category: グラフ - Usage: 円の内外で階層と内訳を示す - Accessibility: 親子の合計を整合させ、階層をテキストでも説明する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/083.html - JSON: patterns/083.json - Interactive demo: index.html#pattern/83 ## Implementation specification 「サンバースト / Sunburst」を実装してください。 目的：円の内外で階層と内訳を示す。 想定場面：グラフ・階層・円を扱う画面。 仕様： - 親子の合計を整合させ、階層をテキストでも説明する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 親子の合計を整合させ、階層をテキストでも説明することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "階層", "件数" ], "rows": [ [ "Web / 新規", 40 ], [ "Web / 継続", 20 ], [ "App / 新規", 25 ], [ "App / 継続", 15 ] ] } ``` --- # サンキー図 / Sankey Diagram - Stable ID: urn:uiux-atlas:pattern:084 - Pattern: 84 - Category: グラフ - Usage: 流入・分岐・流出を帯で見せる - Accessibility: 帯幅を量に比例させ、ノードの流入と流出を整合させる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/084.html - JSON: patterns/084.json - Interactive demo: index.html#pattern/84 ## Implementation specification 「サンキー図 / Sankey Diagram」を実装してください。 目的：流入・分岐・流出を帯で見せる。 想定場面：グラフ・フロー・流れを扱う画面。 仕様： - 帯幅を量に比例させ、ノードの流入と流出を整合させる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 帯幅を量に比例させ、ノードの流入と流出を整合させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "流入元", "行き先", "件数" ], "rows": [ [ "検索", "Web", 42 ], [ "検索", "App", 18 ], [ "SNS", "Web", 28 ], [ "SNS", "App", 12 ] ] } ``` --- # ローソク足 / Candlestick - Stable ID: urn:uiux-atlas:pattern:085 - Pattern: 85 - Category: グラフ - Usage: 始値・高値・安値・終値を表す - Accessibility: 上昇と下落を形とラベルでも区別し、時間足と価格単位を示す - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/085.html - JSON: patterns/085.json - Interactive demo: index.html#pattern/85 ## Implementation specification 「ローソク足 / Candlestick」を実装してください。 目的：始値・高値・安値・終値を表す。 想定場面：グラフ・金融・株価・チャートを扱う画面。 仕様： - 上昇と下落を形とラベルでも区別し、時間足と価格単位を示す。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 上昇と下落を形とラベルでも区別し、時間足と価格単位を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "日", "始値", "高値", "安値", "終値" ], "rows": [ [ 1, 55, 81, 47, 71 ], [ 2, 68, 78, 47, 55 ], [ 3, 81, 107, 73, 97 ], [ 4, 70, 96, 62, 86 ], [ 5, 83, 93, 62, 70 ], [ 6, 96, 122, 88, 112 ], [ 7, 85, 111, 77, 101 ], [ 8, 98, 108, 77, 85 ], [ 9, 111, 137, 103, 127 ] ] } ``` --- # レンジバンド / Range Band - Stable ID: urn:uiux-atlas:pattern:086 - Pattern: 86 - Category: グラフ - Usage: 代表値と上下の幅を同時に示す - Accessibility: 帯が予測区間か最小最大かを明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/086.html - JSON: patterns/086.json - Interactive demo: index.html#pattern/86 ## Implementation specification 「レンジバンド / Range Band」を実装してください。 目的：代表値と上下の幅を同時に示す。 想定場面：グラフ・予測・不確実性を扱う画面。 仕様： - 帯が予測区間か最小最大かを明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 帯が予測区間か最小最大かを明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "月", "下限", "予測", "上限" ], "rows": [ [ "1月", 9, 24, 39 ], [ "2月", 33, 48, 63 ], [ "3月", 21, 36, 51 ], [ "4月", 57, 72, 87 ], [ "5月", 43, 58, 73 ], [ "6月", 73, 88, 100 ] ] } ``` --- # スロープグラフ / Slope Graph - Stable ID: urn:uiux-atlas:pattern:087 - Pattern: 87 - Category: グラフ - Usage: 2時点の変化を線で比べる - Accessibility: 両端の値と時点を示し、尺度を左右で統一する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/087.html - JSON: patterns/087.json - Interactive demo: index.html#pattern/87 ## Implementation specification 「スロープグラフ / Slope Graph」を実装してください。 目的：2時点の変化を線で比べる。 想定場面：グラフ・前後・比較・変化を扱う画面。 仕様： - 両端の値と時点を示し、尺度を左右で統一する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 両端の値と時点を示し、尺度を左右で統一することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "2025（件）", "2026（件）" ], "rows": [ [ "A", 80, 65 ], [ "B", 60, 88 ], [ "C", 35, 48 ], [ "D", 20, 25 ] ] } ``` --- # ダンベルチャート / Dumbbell Chart - Stable ID: urn:uiux-atlas:pattern:088 - Pattern: 88 - Category: グラフ - Usage: 2つの値の差を同じ軸で示す - Accessibility: 始点と終点の意味を固定し、差分も読み取れるようにする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/088.html - JSON: patterns/088.json - Interactive demo: index.html#pattern/88 ## Implementation specification 「ダンベルチャート / Dumbbell Chart」を実装してください。 目的：2つの値の差を同じ軸で示す。 想定場面：グラフ・比較・差分を扱う画面。 仕様： - 始点と終点の意味を固定し、差分も読み取れるようにする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 始点と終点の意味を固定し、差分も読み取れるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "地域", "現在", "前回" ], "rows": [ [ "東京", 92, 82 ], [ "大阪", 76, 63 ], [ "福岡", 58, 42 ], [ "札幌", 42, 23 ], [ "仙台", 28, 6 ] ] } ``` --- # ロリポップ / Lollipop Chart - Stable ID: urn:uiux-atlas:pattern:089 - Pattern: 89 - Category: グラフ - Usage: 棒より軽い表現で大小を示す - Accessibility: 点の位置で値を示し、基準点をそろえる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/089.html - JSON: patterns/089.json - Interactive demo: index.html#pattern/89 ## Implementation specification 「ロリポップ / Lollipop Chart」を実装してください。 目的：棒より軽い表現で大小を示す。 想定場面：グラフ・比較・ミニマルを扱う画面。 仕様： - 点の位置で値を示し、基準点をそろえる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 点の位置で値を示し、基準点をそろえることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "地域", "件数" ], "rows": [ [ "東京", 92 ], [ "大阪", 76 ], [ "福岡", 58 ], [ "札幌", 42 ], [ "仙台", 28 ] ] } ``` --- # ポーラーエリア / Polar Area - Stable ID: urn:uiux-atlas:pattern:090 - Pattern: 90 - Category: グラフ - Usage: 角度をそろえ、扇の面積で量を示す - Accessibility: 半径は値の平方根に比例させ、面積で比較させる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/090.html - JSON: patterns/090.json - Interactive demo: index.html#pattern/90 ## Implementation specification 「ポーラーエリア / Polar Area」を実装してください。 目的：角度をそろえ、扇の面積で量を示す。 想定場面：グラフ・円・放射を扱う画面。 仕様： - 半径は値の平方根に比例させ、面積で比較させる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 半径は値の平方根に比例させ、面積で比較させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "量" ], "rows": [ [ "A", 80 ], [ "B", 55 ], [ "C", 95 ], [ "D", 65 ], [ "E", 45 ], [ "F", 72 ] ] } ``` --- # 日本地図・色分け / Japan Choropleth - Stable ID: urn:uiux-atlas:pattern:091 - Pattern: 91 - Category: 地図 - Usage: 都道府県ごとの違いを色で示す - Accessibility: 凡例と単位を示し、面積の大きさを値と誤認させない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/091.html - JSON: patterns/091.json - Interactive demo: index.html#pattern/91 ## Implementation specification 「日本地図・色分け / Japan Choropleth」を実装してください。 目的：都道府県ごとの違いを色で示す。 想定場面：日本地図・地図・都道府県・地域を扱う画面。 仕様： - 凡例と単位を示し、面積の大きさを値と誤認させない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 凡例と単位を示し、面積の大きさを値と誤認させないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "都道府県", "件数" ], "rows": [ [ "北海道", 32 ], [ "青森県", 49 ], [ "岩手県", 66 ], [ "宮城県", 83 ], [ "秋田県", 15 ], [ "山形県", 32 ], [ "福島県", 49 ], [ "茨城県", 66 ], [ "栃木県", 83 ], [ "群馬県", 15 ], [ "埼玉県", 32 ], [ "千葉県", 49 ], [ "東京都", 66 ], [ "神奈川県", 83 ], [ "新潟県", 15 ], [ "富山県", 32 ], [ "石川県", 49 ], [ "福井県", 66 ], [ "山梨県", 83 ], [ "長野県", 15 ], [ "岐阜県", 32 ], [ "静岡県", 49 ], [ "愛知県", 66 ], [ "三重県", 83 ], [ "滋賀県", 15 ], [ "京都府", 32 ], [ "大阪府", 49 ], [ "兵庫県", 66 ], [ "奈良県", 83 ], [ "和歌山県", 15 ], [ "鳥取県", 32 ], [ "島根県", 49 ], [ "岡山県", 66 ], [ "広島県", 83 ], [ "山口県", 15 ], [ "徳島県", 32 ], [ "香川県", 49 ], [ "愛媛県", 66 ], [ "高知県", 83 ], [ "福岡県", 15 ], [ "佐賀県", 32 ], [ "長崎県", 49 ], [ "熊本県", 66 ], [ "大分県", 83 ], [ "宮崎県", 15 ], [ "鹿児島県", 32 ], [ "沖縄県", 49 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # 日本地図・バブル / Japan Bubble Map - Stable ID: urn:uiux-atlas:pattern:092 - Pattern: 92 - Category: 地図 - Usage: 地域の規模を円の面積で示す - Accessibility: 円の面積を値に比例させ、重なりと地名を確認可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/092.html - JSON: patterns/092.json - Interactive demo: index.html#pattern/92 ## Implementation specification 「日本地図・バブル / Japan Bubble Map」を実装してください。 目的：地域の規模を円の面積で示す。 想定場面：日本地図・地図・地域・バブルを扱う画面。 仕様： - 円の面積を値に比例させ、重なりと地名を確認可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 円の面積を値に比例させ、重なりと地名を確認可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "都道府県", "件数" ], "rows": [ [ "北海道", 32 ], [ "青森県", 49 ], [ "岩手県", 66 ], [ "宮城県", 83 ], [ "秋田県", 15 ], [ "山形県", 32 ], [ "福島県", 49 ], [ "茨城県", 66 ], [ "栃木県", 83 ], [ "群馬県", 15 ], [ "埼玉県", 32 ], [ "千葉県", 49 ], [ "東京都", 66 ], [ "神奈川県", 83 ], [ "新潟県", 15 ], [ "富山県", 32 ], [ "石川県", 49 ], [ "福井県", 66 ], [ "山梨県", 83 ], [ "長野県", 15 ], [ "岐阜県", 32 ], [ "静岡県", 49 ], [ "愛知県", 66 ], [ "三重県", 83 ], [ "滋賀県", 15 ], [ "京都府", 32 ], [ "大阪府", 49 ], [ "兵庫県", 66 ], [ "奈良県", 83 ], [ "和歌山県", 15 ], [ "鳥取県", 32 ], [ "島根県", 49 ], [ "岡山県", 66 ], [ "広島県", 83 ], [ "山口県", 15 ], [ "徳島県", 32 ], [ "香川県", 49 ], [ "愛媛県", 66 ], [ "高知県", 83 ], [ "福岡県", 15 ], [ "佐賀県", 32 ], [ "長崎県", 49 ], [ "熊本県", 66 ], [ "大分県", 83 ], [ "宮崎県", 15 ], [ "鹿児島県", 32 ], [ "沖縄県", 49 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # 日本地図・ドット / Japan Dot Map - Stable ID: urn:uiux-atlas:pattern:093 - Pattern: 93 - Category: 地図 - Usage: 地域の件数を同じ大きさの点で示す - Accessibility: 1点あたりの件数を凡例に示し、点は正確な住所ではないと伝える - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/093.html - JSON: patterns/093.json - Interactive demo: index.html#pattern/93 ## Implementation specification 「日本地図・ドット / Japan Dot Map」を実装してください。 目的：地域の件数を同じ大きさの点で示す。 想定場面：日本地図・地図・分布・ドットを扱う画面。 仕様： - 1点あたりの件数を凡例に示し、点は正確な住所ではないと伝える。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 1点あたりの件数を凡例に示し、点は正確な住所ではないと伝えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "都道府県", "件数" ], "rows": [ [ "北海道", 32 ], [ "青森県", 49 ], [ "岩手県", 66 ], [ "宮城県", 83 ], [ "秋田県", 15 ], [ "山形県", 32 ], [ "福島県", 49 ], [ "茨城県", 66 ], [ "栃木県", 83 ], [ "群馬県", 15 ], [ "埼玉県", 32 ], [ "千葉県", 49 ], [ "東京都", 66 ], [ "神奈川県", 83 ], [ "新潟県", 15 ], [ "富山県", 32 ], [ "石川県", 49 ], [ "福井県", 66 ], [ "山梨県", 83 ], [ "長野県", 15 ], [ "岐阜県", 32 ], [ "静岡県", 49 ], [ "愛知県", 66 ], [ "三重県", 83 ], [ "滋賀県", 15 ], [ "京都府", 32 ], [ "大阪府", 49 ], [ "兵庫県", 66 ], [ "奈良県", 83 ], [ "和歌山県", 15 ], [ "鳥取県", 32 ], [ "島根県", 49 ], [ "岡山県", 66 ], [ "広島県", 83 ], [ "山口県", 15 ], [ "徳島県", 32 ], [ "香川県", 49 ], [ "愛媛県", 66 ], [ "高知県", 83 ], [ "福岡県", 15 ], [ "佐賀県", 32 ], [ "長崎県", 49 ], [ "熊本県", 66 ], [ "大分県", 83 ], [ "宮崎県", 15 ], [ "鹿児島県", 32 ], [ "沖縄県", 49 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # 都道府県タイル / Prefecture Tile Map - Stable ID: urn:uiux-atlas:pattern:094 - Pattern: 94 - Category: 地図 - Usage: 地域を同じ面積で比較する - Accessibility: 地理的な距離や形を表さない模式図だと明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/094.html - JSON: patterns/094.json - Interactive demo: index.html#pattern/94 ## Implementation specification 「都道府県タイル / Prefecture Tile Map」を実装してください。 目的：地域を同じ面積で比較する。 想定場面：日本地図・地図・タイル・都道府県を扱う画面。 仕様： - 地理的な距離や形を表さない模式図だと明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 地理的な距離や形を表さない模式図だと明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "都道府県", "件数" ], "rows": [ [ "北海道", 32 ], [ "青森県", 49 ], [ "岩手県", 66 ], [ "宮城県", 83 ], [ "秋田県", 15 ], [ "山形県", 32 ], [ "福島県", 49 ], [ "茨城県", 66 ], [ "栃木県", 83 ], [ "群馬県", 15 ], [ "埼玉県", 32 ], [ "千葉県", 49 ], [ "東京都", 66 ], [ "神奈川県", 83 ], [ "新潟県", 15 ], [ "富山県", 32 ], [ "石川県", 49 ], [ "福井県", 66 ], [ "山梨県", 83 ], [ "長野県", 15 ], [ "岐阜県", 32 ], [ "静岡県", 49 ], [ "愛知県", 66 ], [ "三重県", 83 ], [ "滋賀県", 15 ], [ "京都府", 32 ], [ "大阪府", 49 ], [ "兵庫県", 66 ], [ "奈良県", 83 ], [ "和歌山県", 15 ], [ "鳥取県", 32 ], [ "島根県", 49 ], [ "岡山県", 66 ], [ "広島県", 83 ], [ "山口県", 15 ], [ "徳島県", 32 ], [ "香川県", 49 ], [ "愛媛県", 66 ], [ "高知県", 83 ], [ "福岡県", 15 ], [ "佐賀県", 32 ], [ "長崎県", 49 ], [ "熊本県", 66 ], [ "大分県", 83 ], [ "宮崎県", 15 ], [ "鹿児島県", 32 ], [ "沖縄県", 49 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # ルートマップ / Route Map - Stable ID: urn:uiux-atlas:pattern:095 - Pattern: 95 - Category: 地図 - Usage: 拠点間の移動と順序を示す - Accessibility: 線は経路の模式表現であり、実際の交通経路と区別する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/095.html - JSON: patterns/095.json - Interactive demo: index.html#pattern/95 ## Implementation specification 「ルートマップ / Route Map」を実装してください。 目的：拠点間の移動と順序を示す。 想定場面：地図・ルート・移動・路線を扱う画面。 仕様： - 線は経路の模式表現であり、実際の交通経路と区別する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 線は経路の模式表現であり、実際の交通経路と区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "拠点", "順序" ], "rows": [ [ "札幌", 1 ], [ "東京", 2 ], [ "大阪", 3 ], [ "福岡", 4 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # ロケーションマップ / Location Map - Stable ID: urn:uiux-atlas:pattern:096 - Pattern: 96 - Category: 地図 - Usage: 地点の位置をピンで示す - Accessibility: ピン以外に地点名と一覧を用意する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/096.html - JSON: patterns/096.json - Interactive demo: index.html#pattern/96 ## Implementation specification 「ロケーションマップ / Location Map」を実装してください。 目的：地点の位置をピンで示す。 想定場面：地図・店舗・ピン・拠点を扱う画面。 仕様： - ピン以外に地点名と一覧を用意する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ピン以外に地点名と一覧を用意することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "拠点", "順序" ], "rows": [ [ "札幌", 1 ], [ "東京", 2 ], [ "大阪", 3 ], [ "福岡", 4 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # ヘックスマップ / Hexbin Map - Stable ID: urn:uiux-atlas:pattern:097 - Pattern: 97 - Category: 地図 - Usage: 六角形の区画で密度を比べる - Accessibility: 集計単位と凡例を明示し、正確な行政境界と区別する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/097.html - JSON: patterns/097.json - Interactive demo: index.html#pattern/97 ## Implementation specification 「ヘックスマップ / Hexbin Map」を実装してください。 目的：六角形の区画で密度を比べる。 想定場面：地図・密度・六角形を扱う画面。 仕様： - 集計単位と凡例を明示し、正確な行政境界と区別する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 集計単位と凡例を明示し、正確な行政境界と区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "区画", "件数" ], "rows": [ [ "2-0", 14 ], [ "3-0", 21 ], [ "4-0", 28 ], [ "5-0", 35 ], [ "6-0", 42 ], [ "7-0", 49 ], [ "8-0", 56 ], [ "9-0", 63 ], [ "10-0", 70 ], [ "2-1", 27 ], [ "3-1", 34 ], [ "4-1", 41 ], [ "5-1", 48 ], [ "6-1", 55 ], [ "7-1", 62 ], [ "8-1", 69 ], [ "9-1", 76 ], [ "10-1", 83 ], [ "2-2", 40 ], [ "3-2", 47 ], [ "4-2", 54 ], [ "5-2", 61 ], [ "6-2", 68 ], [ "7-2", 75 ], [ "8-2", 82 ], [ "9-2", 89 ], [ "10-2", 96 ], [ "0-3", 39 ], [ "1-3", 46 ], [ "2-3", 53 ], [ "3-3", 60 ], [ "4-3", 67 ], [ "5-3", 74 ], [ "6-3", 81 ], [ "7-3", 88 ], [ "8-3", 95 ], [ "9-3", 2 ], [ "10-3", 9 ], [ "0-4", 52 ], [ "1-4", 59 ], [ "2-4", 66 ], [ "3-4", 73 ], [ "4-4", 80 ], [ "5-4", 87 ], [ "6-4", 94 ], [ "7-4", 1 ], [ "8-4", 8 ], [ "9-4", 15 ], [ "10-4", 22 ], [ "0-5", 65 ], [ "1-5", 72 ], [ "2-5", 79 ], [ "3-5", 86 ], [ "4-5", 93 ], [ "5-5", 0 ], [ "6-5", 7 ], [ "7-5", 14 ], [ "8-5", 21 ], [ "0-6", 78 ], [ "1-6", 85 ], [ "2-6", 92 ], [ "3-6", 99 ], [ "4-6", 6 ], [ "5-6", 13 ], [ "6-6", 20 ], [ "7-6", 27 ], [ "8-6", 34 ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # フロアマップ / Floor Plan - Stable ID: urn:uiux-atlas:pattern:098 - Pattern: 98 - Category: 地図 - Usage: 空間と部屋の配置を示す - Accessibility: 部屋名と状態を文字で示し、色だけに依存しない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/098.html - JSON: patterns/098.json - Interactive demo: index.html#pattern/98 ## Implementation specification 「フロアマップ / Floor Plan」を実装してください。 目的：空間と部屋の配置を示す。 想定場面：地図・室内・座席・間取りを扱う画面。 仕様： - 部屋名と状態を文字で示し、色だけに依存しない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 部屋名と状態を文字で示し、色だけに依存しないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "部屋", "状態" ], "rows": [ [ "A", "使用中" ], [ "B", "空室" ], [ "C", "空室" ], [ "D", "使用中" ], [ "E", "空室" ], [ "F", "空室" ] ] } ``` ## Map source Synthetic values and schematic positions. Japan geometry simplified from Natural Earth; some small islands omitted. https://www.naturalearthdata.com/about/terms-of-use/ Local geometry: ../assets/japan-map.js --- # カレンダーヒートマップ / Calendar Heatmap - Stable ID: urn:uiux-atlas:pattern:099 - Pattern: 99 - Category: データ表現 - Usage: 日ごとの活動量をカレンダーで見る - Accessibility: 日付・値・凡例を用意し、週の開始曜日を示す - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/099.html - JSON: patterns/099.json - Interactive demo: index.html#pattern/99 ## Implementation specification 「カレンダーヒートマップ / Calendar Heatmap」を実装してください。 目的：日ごとの活動量をカレンダーで見る。 想定場面：カレンダー・日別・活動・ヒートマップを扱う画面。 仕様： - 日付・値・凡例を用意し、週の開始曜日を示す。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 日付・値・凡例を用意し、週の開始曜日を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "日", "活動（件）" ], "rows": [ [ 1, 0 ], [ 2, 2 ], [ 3, 4 ], [ 4, 1 ], [ 5, 3 ], [ 6, 0 ], [ 7, 2 ], [ 8, 2 ], [ 9, 4 ], [ 10, 1 ], [ 11, 3 ], [ 12, 0 ], [ 13, 2 ], [ 14, 4 ], [ 15, 4 ], [ 16, 1 ], [ 17, 3 ], [ 18, 0 ], [ 19, 2 ], [ 20, 4 ], [ 21, 1 ], [ 22, 1 ], [ 23, 3 ], [ 24, 0 ], [ 25, 2 ], [ 26, 4 ], [ 27, 1 ], [ 28, 3 ], [ 29, 3 ], [ 30, 0 ], [ 31, 2 ], [ 32, 4 ], [ 33, 1 ], [ 34, 3 ], [ 35, 0 ], [ 36, 0 ], [ 37, 2 ], [ 38, 4 ], [ 39, 1 ], [ 40, 3 ], [ 41, 0 ], [ 42, 2 ], [ 43, 2 ], [ 44, 4 ], [ 45, 1 ], [ 46, 3 ], [ 47, 0 ], [ 48, 2 ], [ 49, 4 ], [ 50, 4 ], [ 51, 1 ], [ 52, 3 ], [ 53, 0 ], [ 54, 2 ], [ 55, 4 ], [ 56, 1 ], [ 57, 1 ], [ 58, 3 ], [ 59, 0 ], [ 60, 2 ], [ 61, 4 ], [ 62, 1 ], [ 63, 3 ], [ 64, 3 ], [ 65, 0 ], [ 66, 2 ], [ 67, 4 ], [ 68, 1 ], [ 69, 3 ], [ 70, 0 ], [ 71, 0 ], [ 72, 2 ], [ 73, 4 ], [ 74, 1 ], [ 75, 3 ], [ 76, 0 ], [ 77, 2 ], [ 78, 2 ], [ 79, 4 ], [ 80, 1 ], [ 81, 3 ], [ 82, 0 ], [ 83, 2 ], [ 84, 4 ], [ 85, 4 ], [ 86, 1 ], [ 87, 3 ], [ 88, 0 ], [ 89, 2 ], [ 90, 4 ], [ 91, 1 ], [ 92, 1 ], [ 93, 3 ], [ 94, 0 ], [ 95, 2 ], [ 96, 4 ], [ 97, 1 ], [ 98, 3 ], [ 99, 3 ], [ 100, 0 ], [ 101, 2 ], [ 102, 4 ], [ 103, 1 ], [ 104, 3 ], [ 105, 0 ], [ 106, 0 ], [ 107, 2 ], [ 108, 4 ], [ 109, 1 ], [ 110, 3 ], [ 111, 0 ], [ 112, 2 ] ] } ``` --- # コホート表 / Cohort Table - Stable ID: urn:uiux-atlas:pattern:100 - Pattern: 100 - Category: データ表現 - Usage: 開始時期別の継続率を比べる - Accessibility: 行の母数・経過期間・欠測を明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/100.html - JSON: patterns/100.json - Interactive demo: index.html#pattern/100 ## Implementation specification 「コホート表 / Cohort Table」を実装してください。 目的：開始時期別の継続率を比べる。 想定場面：継続率・分析・ヒートマップを扱う画面。 仕様： - 行の母数・経過期間・欠測を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 行の母数・経過期間・欠測を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "開始月", "0か月", "1か月", "2か月", "3か月", "4か月", "5か月" ], "rows": [ [ "1月", "100%", "86%", "72%", "58%", "44%", "30%" ], [ "2月", "100%", "83%", "69%", "55%", "41%", "未観測" ], [ "3月", "100%", "80%", "66%", "52%", "未観測", "未観測" ], [ "4月", "100%", "77%", "63%", "未観測", "未観測", "未観測" ], [ "5月", "100%", "74%", "未観測", "未観測", "未観測", "未観測" ], [ "6月", "100%", "未観測", "未観測", "未観測", "未観測", "未観測" ] ] } ``` --- # 相関行列 / Correlation Matrix - Stable ID: urn:uiux-atlas:pattern:101 - Pattern: 101 - Category: データ表現 - Usage: 複数の変数の関係を一覧にする - Accessibility: 相関係数の範囲と対角を示し、因果関係と区別する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/101.html - JSON: patterns/101.json - Interactive demo: index.html#pattern/101 ## Implementation specification 「相関行列 / Correlation Matrix」を実装してください。 目的：複数の変数の関係を一覧にする。 想定場面：相関・分析・マトリクスを扱う画面。 仕様： - 相関係数の範囲と対角を示し、因果関係と区別する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 相関係数の範囲と対角を示し、因果関係と区別することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "変数A", "変数B", "相関係数" ], "rows": [ [ "広告", "広告", "1.00" ], [ "広告", "売上", "0.82" ], [ "広告", "単価", "-0.18" ], [ "広告", "継続", "0.45" ], [ "売上", "広告", "0.82" ], [ "売上", "売上", "1.00" ], [ "売上", "単価", "0.36" ], [ "売上", "継続", "0.68" ], [ "単価", "広告", "-0.18" ], [ "単価", "売上", "0.36" ], [ "単価", "単価", "1.00" ], [ "単価", "継続", "-0.24" ], [ "継続", "広告", "0.45" ], [ "継続", "売上", "0.68" ], [ "継続", "単価", "-0.24" ], [ "継続", "継続", "1.00" ] ] } ``` --- # ワッフルチャート / Waffle Chart - Stable ID: urn:uiux-atlas:pattern:102 - Pattern: 102 - Category: データ表現 - Usage: 100個のセルで割合を直感的に示す - Accessibility: 全体のセル数と1セルの割合を明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/102.html - JSON: patterns/102.json - Interactive demo: index.html#pattern/102 ## Implementation specification 「ワッフルチャート / Waffle Chart」を実装してください。 目的：100個のセルで割合を直感的に示す。 想定場面：割合・パーセント・構成比を扱う画面。 仕様： - 全体のセル数と1セルの割合を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 全体のセル数と1セルの割合を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "区分", "%" ], "rows": [ [ "選択", 68 ], [ "その他", 32 ] ] } ``` --- # ピクトグラム / Pictogram - Stable ID: urn:uiux-atlas:pattern:103 - Pattern: 103 - Category: データ表現 - Usage: アイコンの個数で量感を伝える - Accessibility: 1個の単位を示し、半端な値の丸め方を説明する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/103.html - JSON: patterns/103.json - Interactive demo: index.html#pattern/103 ## Implementation specification 「ピクトグラム / Pictogram」を実装してください。 目的：アイコンの個数で量感を伝える。 想定場面：割合・人数・アイコンを扱う画面。 仕様： - 1個の単位を示し、半端な値の丸め方を説明する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 1個の単位を示し、半端な値の丸め方を説明することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "区分", "人数" ], "rows": [ [ "対象", 60 ], [ "その他", 40 ] ] } ``` --- # 円形プログレス / Radial Progress - Stable ID: urn:uiux-atlas:pattern:104 - Pattern: 104 - Category: データ表現 - Usage: 進捗を円と数値で見せる - Accessibility: 現在値と上限を明示し、進捗の根拠を持つ - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/104.html - JSON: patterns/104.json - Interactive demo: index.html#pattern/104 ## Implementation specification 「円形プログレス / Radial Progress」を実装してください。 目的：進捗を円と数値で見せる。 想定場面：進捗・達成率・円を扱う画面。 仕様： - 現在値と上限を明示し、進捗の根拠を持つ。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 現在値と上限を明示し、進捗の根拠を持つことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "状態", "%" ], "rows": [ [ "完了", 72 ], [ "残り", 28 ] ] } ``` --- # 目標トラッカー / Goal Tracker - Stable ID: urn:uiux-atlas:pattern:105 - Pattern: 105 - Category: データ表現 - Usage: 実績と残りを分かりやすく示す - Accessibility: 目標と実績の期間・単位を一致させる - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/105.html - JSON: patterns/105.json - Interactive demo: index.html#pattern/105 ## Implementation specification 「目標トラッカー / Goal Tracker」を実装してください。 目的：実績と残りを分かりやすく示す。 想定場面：目標・達成率・KPIを扱う画面。 仕様： - 目標と実績の期間・単位を一致させる。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 目標と実績の期間・単位を一致させることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "実績", 72400 ], [ "目標", 100000 ], [ "残り", 27600 ] ] } ``` --- # ビッグナンバー / Big Number - Stable ID: urn:uiux-atlas:pattern:106 - Pattern: 106 - Category: データ表現 - Usage: ひとつの重要数値を大胆に見せる - Accessibility: 期間・単位・比較基準を数値の近くに置く - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/106.html - JSON: patterns/106.json - Interactive demo: index.html#pattern/106 ## Implementation specification 「ビッグナンバー / Big Number」を実装してください。 目的：ひとつの重要数値を大胆に見せる。 想定場面：数値・KPI・タイポグラフィを扱う画面。 仕様： - 期間・単位・比較基準を数値の近くに置く。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 期間・単位・比較基準を数値の近くに置くことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "2026年6月 売上（円）", 72400 ], [ "前月（円）", 64000 ] ] } ``` --- # 比較カード / Comparison Cards - Stable ID: urn:uiux-atlas:pattern:107 - Pattern: 107 - Category: データ表現 - Usage: 同じ指標の前後を並べる - Accessibility: 同じ期間長と単位で比較し、変化率の基準を示す - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/107.html - JSON: patterns/107.json - Interactive demo: index.html#pattern/107 ## Implementation specification 「比較カード / Comparison Cards」を実装してください。 目的：同じ指標の前後を並べる。 想定場面：比較・前後・KPIを扱う画面。 仕様： - 同じ期間長と単位で比較し、変化率の基準を示す。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 同じ期間長と単位で比較し、変化率の基準を示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "前月", 64000 ], [ "今月", 72400 ], [ "差分", 8400 ] ] } ``` --- # ランキングバー / Ranked Bars - Stable ID: urn:uiux-atlas:pattern:108 - Pattern: 108 - Category: データ表現 - Usage: 順位と量の差をひと目で伝える - Accessibility: 順位だけでなく実数と集計期間も示す - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/108.html - JSON: patterns/108.json - Interactive demo: index.html#pattern/108 ## Implementation specification 「ランキングバー / Ranked Bars」を実装してください。 目的：順位と量の差をひと目で伝える。 想定場面：ランキング・順位・売上を扱う画面。 仕様： - 順位だけでなく実数と集計期間も示す。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 順位だけでなく実数と集計期間も示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "地域", "件数" ], "rows": [ [ "東京", 92 ], [ "大阪", 76 ], [ "福岡", 58 ], [ "札幌", 42 ], [ "仙台", 28 ] ] } ``` --- # リーダーボード / Leaderboard - Stable ID: urn:uiux-atlas:pattern:109 - Pattern: 109 - Category: データ表現 - Usage: 上位の項目を強調して並べる - Accessibility: 同順位の扱いと評価指標を明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/109.html - JSON: patterns/109.json - Interactive demo: index.html#pattern/109 ## Implementation specification 「リーダーボード / Leaderboard」を実装してください。 目的：上位の項目を強調して並べる。 想定場面：ランキング・順位・表彰を扱う画面。 仕様： - 同順位の扱いと評価指標を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 同順位の扱いと評価指標を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "Tokyo", 980 ], [ "Osaka", 860 ], [ "Fukuoka", 740 ] ] } ``` --- # マーケットティッカー / Market Ticker - Stable ID: urn:uiux-atlas:pattern:110 - Pattern: 110 - Category: データ表現 - Usage: 複数指標の現在値と変化を並べる - Accessibility: 更新時刻と単位を示し、自動移動があれば停止可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/110.html - JSON: patterns/110.json - Interactive demo: index.html#pattern/110 ## Implementation specification 「マーケットティッカー / Market Ticker」を実装してください。 目的：複数指標の現在値と変化を並べる。 想定場面：金融・株価・ティッカー・数値を扱う画面。 仕様： - 更新時刻と単位を示し、自動移動があれば停止可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 更新時刻と単位を示し、自動移動があれば停止可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "銘柄（架空）", "価格（円）", "前日比" ], "rows": [ [ "ATLAS", 1240, "+2.4%" ], [ "NOVA", 860, "−1.2%" ], [ "WAVE", 3420, "+0.8%" ] ] } ``` --- # 数字カウンター / Number Counter - Stable ID: urn:uiux-atlas:pattern:111 - Pattern: 111 - Category: データ表現 - Usage: 数値の変化を段階的に見せる - Accessibility: 動きを減らす設定を尊重し、最終値を読み上げ可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/111.html - JSON: patterns/111.json - Interactive demo: index.html#pattern/111 ## Implementation specification 「数字カウンター / Number Counter」を実装してください。 目的：数値の変化を段階的に見せる。 想定場面：数値・カウント・アニメーションを扱う画面。 仕様： - 動きを減らす設定を尊重し、最終値を読み上げ可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 動きを減らす設定を尊重し、最終値を読み上げ可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "2026年6月 売上（円）", 72400 ], [ "前月（円）", 64000 ] ] } ``` --- # テーブル内バー / In-cell Bars - Stable ID: urn:uiux-atlas:pattern:112 - Pattern: 112 - Category: データ表現 - Usage: 表の数値に小さな棒を添える - Accessibility: 同じ列で尺度を統一し、数値をそのまま読めるようにする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/112.html - JSON: patterns/112.json - Interactive demo: index.html#pattern/112 ## Implementation specification 「テーブル内バー / In-cell Bars」を実装してください。 目的：表の数値に小さな棒を添える。 想定場面：表・データバー・比較を扱う画面。 仕様： - 同じ列で尺度を統一し、数値をそのまま読めるようにする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 同じ列で尺度を統一し、数値をそのまま読めるようにすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "地域", "売上（万円）" ], "rows": [ [ "Tokyo", 92 ], [ "Osaka", 76 ], [ "Fukuoka", 58 ], [ "Sapporo", 42 ] ] } ``` --- # カンバン / Kanban Board - Stable ID: urn:uiux-atlas:pattern:113 - Pattern: 113 - Category: 情報デザイン - Usage: 状態ごとに作業を並べる - Accessibility: ドラッグだけでなく移動ボタンも用意する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/113.html - JSON: patterns/113.json - Interactive demo: index.html#pattern/113 ## Implementation specification 「カンバン / Kanban Board」を実装してください。 目的：状態ごとに作業を並べる。 想定場面：タスク・ボード・進捗を扱う画面。 仕様： - ドラッグだけでなく移動ボタンも用意する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ドラッグだけでなく移動ボタンも用意することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "タスク", "状態" ], "rows": [ [ "Design", "Backlog" ], [ "Build", "In progress" ], [ "Review", "Done" ] ] } ``` --- # ガントチャート / Gantt Chart - Stable ID: urn:uiux-atlas:pattern:114 - Pattern: 114 - Category: 情報デザイン - Usage: 期間と作業の重なりを見せる - Accessibility: 開始日・終了日・時間軸を文字でも示す - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/114.html - JSON: patterns/114.json - Interactive demo: index.html#pattern/114 ## Implementation specification 「ガントチャート / Gantt Chart」を実装してください。 目的：期間と作業の重なりを見せる。 想定場面：工程・予定・スケジュールを扱う画面。 仕様： - 開始日・終了日・時間軸を文字でも示す。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 開始日・終了日・時間軸を文字でも示すことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "工程", "開始日（6月）", "終了日（6月）" ], "rows": [ [ "Design", 1, 4 ], [ "Build", 3, 8 ], [ "Review", 8, 11 ], [ "Release", 12, 13 ] ] } ``` --- # ロードマップ / Roadmap - Stable ID: urn:uiux-atlas:pattern:115 - Pattern: 115 - Category: 情報デザイン - Usage: 計画を時期ごとに整理する - Accessibility: 予定と確定を区別し、期間を明示する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/115.html - JSON: patterns/115.json - Interactive demo: index.html#pattern/115 ## Implementation specification 「ロードマップ / Roadmap」を実装してください。 目的：計画を時期ごとに整理する。 想定場面：計画・予定・時系列を扱う画面。 仕様： - 予定と確定を区別し、期間を明示する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 予定と確定を区別し、期間を明示することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "項目", "値" ], "rows": [ [ "Q1", "Research" ], [ "Q2", "Prototype" ], [ "Q3", "Build" ], [ "Q4", "Scale" ] ] } ``` --- # ツリーダイアグラム / Tree Diagram - Stable ID: urn:uiux-atlas:pattern:116 - Pattern: 116 - Category: 情報デザイン - Usage: 親子の階層構造を示す - Accessibility: 親子関係をリストなどの構造でも伝える - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/116.html - JSON: patterns/116.json - Interactive demo: index.html#pattern/116 ## Implementation specification 「ツリーダイアグラム / Tree Diagram」を実装してください。 目的：親子の階層構造を示す。 想定場面：階層・組織図・ツリーを扱う画面。 仕様： - 親子関係をリストなどの構造でも伝える。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 親子関係をリストなどの構造でも伝えることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "親", "子" ], "rows": [ [ "Product", "Design" ], [ "Product", "Engineering" ], [ "Engineering", "Web" ], [ "Engineering", "API" ] ] } ``` --- # ネットワーク図 / Network Graph - Stable ID: urn:uiux-atlas:pattern:117 - Pattern: 117 - Category: 情報デザイン - Usage: 項目どうしのつながりを見せる - Accessibility: ノード名と接続を文字でも確認可能にする - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/117.html - JSON: patterns/117.json - Interactive demo: index.html#pattern/117 ## Implementation specification 「ネットワーク図 / Network Graph」を実装してください。 目的：項目どうしのつながりを見せる。 想定場面：関係・ネットワーク・つながりを扱う画面。 仕様： - ノード名と接続を文字でも確認可能にする。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - ノード名と接続を文字でも確認可能にすることを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "接続元", "接続先" ], "rows": [ [ "A", "B" ], [ "A", "C" ], [ "A", "D" ], [ "A", "E" ], [ "A", "F" ], [ "B", "F" ], [ "C", "D" ] ] } ``` --- # フローチャート / Flowchart - Stable ID: urn:uiux-atlas:pattern:118 - Pattern: 118 - Category: 情報デザイン - Usage: 処理の順序と分岐を示す - Accessibility: 分岐条件を矢印に付け、読み順を維持する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/118.html - JSON: patterns/118.json - Interactive demo: index.html#pattern/118 ## Implementation specification 「フローチャート / Flowchart」を実装してください。 目的：処理の順序と分岐を示す。 想定場面：フロー・処理・手順・分岐を扱う画面。 仕様： - 分岐条件を矢印に付け、読み順を維持する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 分岐条件を矢印に付け、読み順を維持することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "ステップ", "次の処理" ], "rows": [ [ "入力", "検証" ], [ "検証", "有効 → 保存" ], [ "検証", "無効 → 修正" ], [ "修正", "検証" ] ] } ``` --- # ベン図 / Venn Diagram - Stable ID: urn:uiux-atlas:pattern:119 - Pattern: 119 - Category: 情報デザイン - Usage: 集合の重なりを示す - Accessibility: 概念図か面積比例図かを区別し、重複を二重計上しない - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/119.html - JSON: patterns/119.json - Interactive demo: index.html#pattern/119 ## Implementation specification 「ベン図 / Venn Diagram」を実装してください。 目的：集合の重なりを示す。 想定場面：集合・重なり・関係を扱う画面。 仕様： - 概念図か面積比例図かを区別し、重複を二重計上しない。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 概念図か面積比例図かを区別し、重複を二重計上しないことを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "集合", "人数" ], "rows": [ [ "Aのみ", 35 ], [ "AかつB", 25 ], [ "Bのみ", 40 ] ] } ``` --- # 四象限マトリクス / Quadrant Matrix - Stable ID: urn:uiux-atlas:pattern:120 - Pattern: 120 - Category: 情報デザイン - Usage: 2軸で優先順位や位置を整理する - Accessibility: 軸の定義と高低を明示し、境界の意味を説明する - Responsive: PCは比較、スマホは要約。数値表と凡例を併記。 - HTML: patterns/120.html - JSON: patterns/120.json - Interactive demo: index.html#pattern/120 ## Implementation specification 「四象限マトリクス / Quadrant Matrix」を実装してください。 目的：2軸で優先順位や位置を整理する。 想定場面：優先順位・分類・マトリクスを扱う画面。 仕様： - 軸の定義と高低を明示し、境界の意味を説明する。 - PCでは比較を、スマホでは要約を優先。数値表と凡例を併記します。 - Noto Sans JP、本文16px、補足14px、見出し24pxを基本にする。 - 背景#FFFFFF、カード#FFFFFF、本文#17191E、主要操作#17191E、境界線#E8ECF3。主要ボタンの文字は白にする。 - 余白は8px単位、カード角丸12px、控えめな影に統一する。 - semantic HTMLと標準コントロールを優先し、操作名・現在状態・結果を読み上げ可能にする。 - キーボード操作、見えるフォーカス、通常テキスト4.5:1以上のコントラストを確保する。 - prefers-reduced-motionを尊重し、アニメーションを止めても内容を理解できるようにする。 受け入れ条件： - 1440pxと390pxで表示を確認し、ページ全体に横はみ出しがない。 - 軸の定義と高低を明示し、境界の意味を説明することを操作で確認する。 - 読み込み・空・成功・エラーの該当状態を用意する。 - 見た目だけのボタンを残さず、操作を実装する。 - 実装後にスクリーンショットを比較して改善し、決定した仕様をdesign.mdへ保存する。 ## Synthetic sample data ```json { "columns": [ "施策", "実行しやすさ（点）", "効果（点）" ], "rows": [ [ "A", 74, 83 ], [ "B", 22, 75 ], [ "C", 26, 23 ], [ "D", 82, 20 ], [ "E", 56, 70 ] ] } ```