ui-ux-pro-max

優先順位： 主な目的が デザインシステムに関するインテリジェンス（スタイル、パレット、フォント、ガイドラインの体系的な選定）である場合は、このスキルを使用してください。独自性のあるビジュアル表現には frontend-design を使用してください。React／Next.js のパフォーマンスには vercel-react-best-practices を使用してください。

UI/UX Pro Max - デザインインテリジェンス

Web アプリケーションとモバイルアプリケーションのための包括的なデザインガイドです。50 種類以上のスタイル、161 種類のカラーパレット、57 種類のフォントの組み合わせ、推論ルールを備えた 161 種類の製品タイプ、99 項目の UX ガイドライン、10 種類の技術スタックに対応する 25 種類のチャートタイプを収録しています。優先度に基づく推奨機能を備えた、検索可能なデータベースです。

使用する場面

UI 構造、ビジュアルデザインの決定、インタラクションパターン、ユーザーエクスペリエンスの品質管理に関わるタスクでは、このスキルを使用してください。

必ず使用する

次の状況では、このスキルを必ず使用してください。

• 新しいページ（ランディングページ、ダッシュボード、管理画面、SaaS、モバイルアプリ）を設計する
• UI コンポーネント（ボタン、モーダル、フォーム、テーブル、チャートなど）を作成またはリファクタリングする
• 配色、タイポグラフィシステム、余白の基準、レイアウトシステムを選定する
• ユーザーエクスペリエンス、アクセシビリティ、ビジュアルの一貫性の観点から UI コードをレビューする
• ナビゲーション構造、アニメーション、レスポンシブな動作を実装する
• 製品レベルのデザインを決定する（スタイル、情報階層、ブランド表現）
• インターフェースの品質、明瞭さ、使いやすさを向上させる

推奨

次の状況では、このスキルの使用を推奨します。

• UI が「プロらしさに欠ける」ものの、その理由がはっきりしない
• ユーザビリティやエクスペリエンスに関するフィードバックを受けている
• リリース前に UI の品質を最適化する
• プラットフォーム間（Web／iOS／Android）のデザインを統一する
• デザインシステムや再利用可能なコンポーネントライブラリを構築する

使用を省略する

次の状況では、このスキルは必要ありません。

• バックエンドロジックのみを開発する
• API またはデータベースの設計のみを行う
• インターフェースに関係しないパフォーマンスを最適化する
• インフラストラクチャや DevOps の作業を行う
• ビジュアル要素のないスクリプトや自動化タスクを扱う

判断基準： タスクによって機能の見た目、印象、動き、操作方法が変わる場合は、このスキルを使用してください。

優先度別ルールカテゴリ

人間／AI 向けの参考情報です。最初に注目するルールカテゴリを決めるには、優先度 1→10 の順に確認してください。詳細が必要な場合は、--domain <Domain> で問い合わせてください。スクリプトはこの表を読み取りません。

優先度	カテゴリ	影響度	ドメイン	主なチェック項目（必須）	アンチパターン（避けること）
1	アクセシビリティ	CRITICAL	ux	コントラスト比 4.5:1、代替テキスト、キーボード操作、Aria-labels	フォーカスリングの削除、ラベルのないアイコンのみのボタン
2	タッチとインタラクション	CRITICAL	ux	最小サイズ 44×44px、8px 以上の間隔、読み込み状態のフィードバック	ホバーのみに依存すること、状態が即座に変わること（0ms）
3	パフォーマンス	HIGH	ux	WebP/AVIF、遅延読み込み、スペースの確保（CLS < 0.1）	レイアウトの頻繁な再計算、累積レイアウトシフト
4	スタイルの選択	HIGH	style, product	製品タイプとの適合性、一貫性、SVG アイコン（絵文字は使わない）	フラットデザインとスキューモーフィズムの無秩序な混在、アイコンとしての絵文字
5	レイアウトとレスポンシブ対応	HIGH	ux	モバイルファーストのブレークポイント、Viewport meta、水平方向のスクロールなし	水平方向のスクロール、固定 px 幅のコンテナー、ズームの無効化
6	タイポグラフィと色	MEDIUM	typography, color	基本サイズ 16px、行の高さ 1.5、セマンティックな色トークン	本文の文字サイズが < 12px、灰色の背景に灰色の文字、コンポーネント内の生の 16 進数カラーコード
7	アニメーション	MEDIUM	ux	再生時間 150～300ms、意味を伝える動き、空間的な連続性	装飾のみのアニメーション、幅／高さのアニメーション、動きを抑える設定への非対応
8	フォームとフィードバック	MEDIUM	ux	表示されるラベル、入力欄の近くにエラーを表示、補助テキスト、段階的な情報開示	プレースホルダーだけのラベル、ページ上部だけに表示されるエラー、最初からの情報過多
9	ナビゲーションパターン	HIGH	ux	予測可能な戻る動作、ボトムナビは 5 項目以下、ディープリンク	項目過多のナビゲーション、戻る動作の不具合、ディープリンクなし
10	グラフとデータ	LOW	chart	凡例、ツールチップ、アクセシブルな色	意味を伝えるために色だけに頼ること

クイックリファレンス

プライベートコンポーネントレジストリ

UI タスクで shadcn/ui MCP、shadcnblocks、またはプライベートコンポーネントレジストリを使用する場合、レジストリが利用できないと判断する前に、暗号化されたコンポーネント設定を確認してください。Darkmatter UI プロジェクトでは、components.sops.json に追加のレジストリが含まれていることがあります。sops-secret-access スキルを使用し、復号した内容を表示せずに sops -d components.sops.json で復号してください。

1. アクセシビリティ（重大）

• color-contrast - 通常のテキストでは最低 4.5:1（大きなテキストでは 3:1）の比率にします。Material Design
• focus-states - インタラクティブ要素に視認できるフォーカスリングを表示します（2～4px、Apple HIG、MD）
• alt-text - 意味のある画像には説明的な代替テキストを設定します
• aria-labels - アイコンのみのボタンには aria-label を設定します。ネイティブでは accessibilityLabel を設定します（Apple HIG）
• keyboard-nav - Tab キーの順序を視覚的な順序と一致させ、キーボード操作を全面的にサポートします（Apple HIG）
• form-labels - for 属性を指定した label を使用します
• skip-links - キーボードユーザーがメインコンテンツに移動できるスキップリンクを用意します
• heading-hierarchy - h1→h6 の見出し階層を順番どおりにし、レベルを飛ばしません
• color-not-only - 色だけで情報を伝えないようにします（アイコンやテキストを追加します）
• dynamic-type - システムのテキスト拡大に対応し、テキストの拡大に伴う切り捨てを避けます（Apple Dynamic Type、MD）
• reduced-motion - prefers-reduced-motion を尊重し、要求に応じてアニメーションを減らすか無効にします（Apple Reduced Motion API、MD）
• voiceover-sr - 意味のある accessibilityLabel/accessibilityHint を設定し、VoiceOver やスクリーンリーダーで論理的な読み上げ順序にします（Apple HIG、MD）
• escape-routes - モーダルや複数ステップのフローにキャンセルまたは戻る手段を用意します（Apple HIG）
• keyboard-shortcuts - システムおよびアクセシビリティのショートカットを維持し、ドラッグ＆ドロップにはキーボードでの代替手段を用意します（Apple HIG）

2. タッチとインタラクション（重大）

• touch-target-size - 最小サイズを 44×44pt（Apple）／48×48dp（Material）にします。必要に応じて、視覚的な境界よりもタップ範囲を広げます
• touch-spacing - タッチ対象の間に最低 8px／8dp の間隔を設けます（Apple HIG、MD）
• hover-vs-tap - 主な操作にはクリック／タップを使用し、ホバーだけに依存しないようにします
• loading-buttons - 非同期処理中はボタンを無効にし、スピナーまたは進行状況を表示します
• error-feedback - 問題の近くに明確なエラーメッセージを表示します
• cursor-pointer - クリック可能な要素に cursor-pointer を追加します（Web）
• gesture-conflicts - メインコンテンツでの横スワイプを避け、縦スクロールを優先します
• tap-delay - touch-action: manipulation を使用して、300ms の遅延を減らします（Web）
• standard-gestures - プラットフォーム標準のジェスチャーを一貫して使用し、再定義しません（例：スワイプで戻る、ピンチズーム）（Apple HIG）
• system-gestures - システムジェスチャー（コントロールセンター、スワイプで戻るなど）を妨げません（Apple HIG）
• press-feedback - 押下時に視覚的なフィードバックを表示します（リップル／ハイライト、MD のステートレイヤー）
• haptic-feedback - 確認時や重要な操作では触覚フィードバックを使用し、過度な使用は避けます（Apple HIG）
• gesture-alternative - ジェスチャーだけに依存した操作を避け、重要な操作には必ず視認できるコントロールを用意します
• safe-area-awareness - 主なタッチ対象をノッチ、Dynamic Island、ジェスチャーバー、画面端から離して配置します
• no-precision-required - 小さなアイコンや細い端をピクセル単位で正確にタップする必要がある設計を避けます
• swipe-clarity - スワイプ操作には、明確な手がかりやヒント（シェブロン、ラベル、チュートリアル）を表示します
• drag-threshold - 誤ってドラッグが始まるのを防ぐため、ドラッグ開始前に移動しきい値を設けます

3. パフォーマンス（高）

• image-optimization - WebP/AVIF、レスポンシブ画像（srcset/sizes）を使用し、重要度の低いアセットは遅延読み込みします
• image-dimension - レイアウトシフト（Core Web Vitals：CLS）を防ぐため、width/heightを指定するか、aspect-ratioを使用します
• font-loading - テキストが表示されない状態（FOIT）を避けるため、font-display: swap/optionalを使用します。レイアウトシフトを抑えるためにスペースを確保します（MD）
• font-preload - 重要なフォントのみをプリロードし、すべてのバリエーションでプリロードを多用しないようにします
• critical-css - ファーストビューのCSSを優先します（クリティカルCSSをインライン化するか、スタイルシートを早期に読み込みます）
• lazy-loading - 動的インポート／ルート単位の分割により、ヒーロー以外のコンポーネントを遅延読み込みします
• bundle-splitting - ルート／機能ごとにコードを分割し（React Suspense／Next.js dynamic）、初期読み込みとTTIを短縮します
• third-party-scripts - サードパーティスクリプトをasync/deferで読み込み、監査して不要なものを削除します（MD）
• reduce-reflows - 頻繁なレイアウトの読み書きを避け、DOMの読み取りをまとめてから書き込みます
• content-jumping - 非同期コンテンツのためのスペースを確保し、レイアウトのジャンプを防ぎます（Core Web Vitals：CLS）
• lazy-load-below-fold - ファーストビューより下にある画像や大容量メディアにはloading="lazy"を使用します
• virtualize-lists - メモリ効率とスクロール性能を向上させるため、50項目以上のリストを仮想化します
• main-thread-budget - 60fpsを維持するため、フレームごとの処理を約16ms以内に抑えます。重いタスクはメインスレッドから移します（HIG、MD）
• progressive-loading - 1秒を超える処理では、長時間ブロックするスピナーではなく、スケルトンスクリーン／シマーを使用します（Apple HIG）
• input-latency - タップ／スクロール時の入力遅延を約100ms未満に抑えます（Materialの応答性基準）
• tap-feedback-speed - タップから100ms以内に視覚的なフィードバックを提供します（Apple HIG）
• debounce-throttle - 高頻度イベント（スクロール、リサイズ、入力）にはデバウンス／スロットルを使用します
• offline-support - オフライン状態のメッセージと基本的なフォールバックを提供します（PWA／モバイル）
• network-fallback - ネットワークが遅い場合に、低解像度の画像や少ないアニメーションなど、機能を制限したモードを提供します

4. スタイルの選択（高）

• style-match - プロダクトの種類に合わせてスタイルを選びます（推奨事項には--design-systemを使用します）
• consistency - すべてのページで同じスタイルを使用します
• no-emoji-icons - 絵文字ではなくSVGアイコン（Heroicons、Lucide）を使用します
• color-palette-from-product - プロダクト／業界に合わせてパレットを選びます（--domain colorを検索します）
• effects-match-style - シャドウ、ぼかし、角丸を選択したスタイル（glass／flat／clayなど）に合わせます
• platform-adaptive - プラットフォームの慣習（iOS HIGとMaterial）に合わせ、ナビゲーション、コントロール、タイポグラフィ、モーションを調整します
• state-clarity - スタイルに沿いながら、ホバー／押下／無効状態を視覚的に区別しやすくします（Materialのステートレイヤー）
• elevation-consistent - カード、シート、モーダルには一貫したエレベーション／シャドウのスケールを使用し、ランダムな値は避けます
• dark-mode-pairing - ブランド、コントラスト、スタイルの一貫性を保つため、ライト／ダークのバリエーションを合わせて設計します
• icon-style-consistent - プロダクト全体で1つのアイコンセット／視覚表現（線の太さ、角の丸み）を使用します
• system-controls - 完全にカスタム化したものよりネイティブ／システムのコントロールを優先し、ブランド上必要な場合のみカスタマイズします（Apple HIG）
• blur-purpose - ぼかしは背景をタップして閉じられることを示すために使い、装飾としては使用しません（Apple HIG）
• primary-action - 各画面の主要なCTAは1つだけにし、副次的なアクションは視覚的に目立たないようにします（Apple HIG）

5. レイアウトとレスポンシブ対応（高）

• viewport-meta - width=device-width initial-scale=1（ズームを無効にしない）
• mobile-first - モバイルファーストで設計し、その後タブレットやデスクトップ向けに拡張する
• breakpoint-consistency - 体系的なブレークポイントを使用する（例：375 / 768 / 1024 / 1440）
• readable-font-size - モバイルでは本文を最低16pxにする（iOSの自動ズームを防ぐ）
• line-length-control - 1行あたりの文字数は、モバイルでは35～60文字、デスクトップでは60～75文字にする
• horizontal-scroll - モバイルで横スクロールが発生しないようにし、コンテンツがビューポート幅に収まるようにする
• spacing-scale - 4pt / 8dp刻みの間隔システムを使用する（Material Design）
• touch-density - タッチ操作に適したコンポーネント間隔を保つ。詰め込みすぎず、誤タップも起きないようにする
• container-width - デスクトップでは一貫した最大幅を設定する（max-w-6xl / 7xl）
• z-index-management - レイヤーごとのz-indexスケールを定義する（例：0 / 10 / 20 / 40 / 100 / 1000）
• fixed-element-offset - 固定ナビゲーションバーや下部バーを配置する場合は、その下のコンテンツに安全な余白を確保する
• scroll-behavior - メインのスクロール操作を妨げる、入れ子になったスクロール領域を避ける
• viewport-units - モバイルでは100vhよりmin-h-dvhを優先する
• orientation-support - 横向きモードでもレイアウトを読みやすく、操作しやすく保つ
• content-priority - モバイルでは主要なコンテンツを最初に表示し、二次的なコンテンツは折りたたむか非表示にする
• visual-hierarchy - 色だけに頼らず、サイズ、間隔、コントラストで階層を表現する

6. タイポグラフィと色（中）

• line-height - 本文の行の高さは1.5～1.75にする
• line-length - 1行あたりの文字数を65～75文字に制限する
• font-pairing - 見出しと本文のフォントの特徴を調和させる
• font-scale - 一貫した文字サイズのスケールを使用する（例：12 14 16 18 24 32）
• contrast-readability - 明るい背景には、より濃い色のテキストを使用する（例：白地にslate-900）
• text-styles-system - プラットフォームの文字スタイルシステムを使用する：iOS 11のDynamic Typeスタイル / Material 5の文字スタイルの役割（display、headline、title、body、label）（HIG、MD）
• weight-hierarchy - font-weightで階層を強調する：太字の見出し（600～700）、通常の本文（400）、中程度のラベル（500）（MD）
• color-semantic - コンポーネント内で生の16進数カラーを使わず、意味を持つ色トークン（primary、secondary、error、surface、on-surface）を定義する（Materialのカラーシステム）
• color-dark-mode - ダークモードでは色を反転するのではなく、彩度を落とした色や明るいトーンの色を使用する。コントラストは個別にテストする（HIG、MD）
• color-accessible-pairs - 前景色と背景色の組み合わせは、コントラスト比4.5:1（AA）または7:1（AAA）を満たす必要がある。ツールを使って確認する（WCAG、MD）
• color-not-decorative-only - 機能を示す色（エラーを示す赤、成功を示す緑）にはアイコンやテキストも併用し、色だけに意味を持たせない（HIG、MD）
• truncation-strategy - 省略より折り返しを優先する。省略する場合は三点リーダーを使用し、ツールチップや展開機能で全文を表示する（Apple HIG）
• letter-spacing - プラットフォームの標準的な文字間隔を尊重し、本文の文字間隔を詰めすぎない（HIG、MD）
• number-tabular - データ列、価格、タイマーには、レイアウトのずれを防ぐために等幅数字を使用する
• whitespace-balance - 関連項目をまとめたり、セクションを区切ったりするために余白を意図的に使い、視覚的な雑然さを避ける（Apple HIG）

7. アニメーション（MEDIUM）

• duration-timing - マイクロインタラクションには150～300ms、複雑なトランジションには≤400msを使用し、>500msは避けます（MD）
• transform-performance - transform／opacityのみを使用し、width／height／top／leftのアニメーションは避けます
• loading-states - 読み込みが300msを超える場合は、スケルトンまたは進行状況インジケーターを表示します
• excessive-motion - 1つのビューでアニメーションさせる主要な要素は最大1～2個にします
• easing - 入場にはease-out、退場にはease-inを使用し、UIトランジションでlinearは避けます
• motion-meaning - すべてのアニメーションは装飾にとどまらず、原因と結果の関係を表現する必要があります（Apple HIG）
• state-transition - 状態の変化（hover／active／expanded／collapsed／modal）は、瞬時に切り替わるのではなく、滑らかにアニメーションさせます
• continuity - ページ／画面のトランジションでは、空間的な連続性を維持します（共有要素、方向性のあるスライド）（Apple HIG）
• parallax-subtle - 視差効果は控えめに使用し、視差効果を減らす設定に対応して、ユーザーに方向感覚の喪失を起こさないようにします（Apple HIG）
• spring-physics - 自然な動きにするため、linearやcubic-bezierよりも、スプリング／物理ベースのカーブを優先します（Apple HIGの流動的なアニメーション）
• exit-faster-than-enter - 反応のよさを感じさせるため、退場アニメーションは入場アニメーションより短くします（入場時間の約60～70％）（MD motion）
• stagger-sequence - リスト／グリッド項目の入場は、項目ごとに30～50msずつ遅らせます。一斉に表示したり、表示に時間をかけすぎたりしないようにします（MD）
• shared-element-transition - 画面間の視覚的な連続性を保つため、共有要素／ヒーロートランジションを使用します（MD、HIG）
• interruptible - アニメーションは中断可能にします。ユーザーのタップ／ジェスチャーによって、進行中のアニメーションをただちにキャンセルできる必要があります（Apple HIG）
• no-blocking-animation - アニメーション中にユーザー入力をブロックしてはいけません。UIは操作可能な状態を保つ必要があります（Apple HIG）
• fade-crossfade - 同じコンテナー内のコンテンツを置き換える際は、クロスフェードを使用します（MD）
• scale-feedback - タップ可能なカード／ボタンは、押したときに控えめに拡大・縮小（0.95～1.05）し、指を離したときに元のサイズに戻します（HIG、MD）
• gesture-feedback - ドラッグ、スワイプ、ピンチには、指の動きを追従するリアルタイムの視覚的フィードバックを提供します（MD Motion）
• hierarchy-motion - 移動／拡大縮小の方向で階層を表現します。下から入場すると深い階層へ、上方向に退場すると戻る動きになります（MD）
• motion-consistency - duration／easingのトークンを全体で統一し、すべてのアニメーションで同じリズムと動きにします
• opacity-threshold - フェードする要素をopacity 0.2未満の状態で残さないようにします。完全にフェードアウトさせるか、見える状態を保ちます
• modal-motion - 空間的な文脈が伝わるよう、モーダル／シートは起動元からアニメーションさせます（拡大縮小＋フェード、またはスライドイン）（HIG、MD）
• navigation-direction - 前方へのナビゲーションは左／上方向、後方へのナビゲーションは右／下方向にアニメーションさせ、方向の論理的一貫性を保ちます（HIG）
• layout-shift-avoid - アニメーションによってレイアウトの再配置やCLSが発生しないようにします。位置の変更にはtransformを使用します

8. フォームとフィードバック（中）

• input-labels - 各入力欄に、プレースホルダーだけではなく、常に表示されるラベルを付けます
• error-placement - 関連するフィールドの下にエラーを表示します
• submit-feedback - 送信時に読み込み状態を表示し、その後、成功またはエラーの状態を表示します
• required-indicators - 必須フィールドを示します（例：アスタリスク）
• empty-states - コンテンツがない場合に、役立つメッセージとアクションを表示します
• toast-dismiss - トーストを3～5秒後に自動的に閉じます
• confirmation-dialogs - 破壊的な操作の前に確認を求めます
• input-helper-text - 複雑な入力欄の下に、プレースホルダーだけではなく、常に表示される補足テキストを設けます（Material Design）
• disabled-states - 無効な要素は、不透明度を下げ（0.38～0.5）、カーソルを変更し、セマンティック属性を使用します（MD）
• progressive-disclosure - 複雑なオプションは段階的に表示し、最初からユーザーに負担をかけないようにします（Apple HIG）
• inline-validation - キーストロークごとではなく、フォーカスが外れたときに検証します。ユーザーが入力を終えてからエラーを表示します（MD）
• input-type-keyboard - セマンティックな入力タイプ（email、tel、number）を使用して、適切なモバイルキーボードを表示します（HIG、MD）
• password-toggle - パスワードフィールドに表示／非表示を切り替えるトグルを設けます（MD）
• autofill-support - autocomplete／textContentType 属性を使用して、システムが自動入力できるようにします（HIG、MD）
• undo-support - 破壊的な操作や一括操作を取り消せるようにします（例：「削除を元に戻す」トースト）（Apple HIG）
• success-feedback - 完了した操作を、短い視覚的フィードバック（チェックマーク、トースト、色の点滅）で確認できるようにします（MD）
• error-recovery - エラーメッセージには、明確な復旧手段（再試行、編集、ヘルプへのリンク）を含めます（HIG、MD）
• multi-step-progress - 複数ステップのフローには、ステップインジケーターまたはプログレスバーを表示し、前のステップに戻れるようにします（MD）
• form-autosave - 長いフォームでは、誤って閉じたときのデータ消失を防ぐため、下書きを自動保存します（Apple HIG）
• sheet-dismiss-confirm - 未保存の変更があるシート／モーダルを閉じる前に確認を求めます（Apple HIG）
• error-clarity - エラーメッセージには原因と修正方法を明記します（「入力が無効です」だけにしません）（HIG、MD）
• field-grouping - 関連するフィールドを論理的にグループ化します（fieldset／legend または視覚的なグループ化）（MD）
• read-only-distinction - 読み取り専用状態は、無効状態と視覚的にもセマンティックにも区別します（MD）
• focus-management - 送信時のエラー発生後、最初の無効なフィールドに自動でフォーカスします（WCAG、MD）
• error-summary - 複数のエラーがある場合は、各フィールドへのアンカーリンクを含むサマリーをページ上部に表示します（WCAG）
• touch-friendly-input - タッチターゲットの要件を満たすため、モバイルでの入力欄の高さを44px以上にします（Apple HIG）
• destructive-emphasis - 破壊的な操作には意味的な危険色（赤）を使用し、主要な操作と視覚的に区別します（HIG、MD）
• toast-accessibility - トーストはフォーカスを奪わないようにし、スクリーンリーダーへの通知には aria-live="polite" を使用します（WCAG）
• aria-live-errors - フォームのエラーには aria-live 領域または role="alert" を使用し、スクリーンリーダーに通知します（WCAG）
• contrast-feedback - エラー状態と成功状態の色は、4.5:1のコントラスト比を満たす必要があります（WCAG、MD）
• timeout-feedback - リクエストがタイムアウトした場合は、再試行オプションを含む明確なフィードバックを表示します（MD）

9. ナビゲーションパターン（HIGH）

• bottom-nav-limit - ボトムナビゲーションは最大5項目にします。アイコンとラベルを組み合わせます（Material Design）
• drawer-usage - ドロワー／サイドバーは二次ナビゲーションに使用し、主要なアクションには使用しません（Material Design）
• back-behavior - 戻るナビゲーションは予測可能で一貫した動作にし、スクロール位置や状態を保持します（Apple HIG、MD）
• deep-linking - 共有や通知に対応できるよう、主要な画面にはすべてディープリンク／URLからアクセスできるようにします（Apple HIG、MD）
• tab-bar-ios - iOS：最上位のナビゲーションには下部のタブバーを使用します（Apple HIG）
• top-app-bar-android - Android：主要な構造にはナビゲーションアイコン付きのトップアプリバーを使用します（Material Design）
• nav-label-icon - ナビゲーション項目にはアイコンとテキストラベルの両方を付けます。アイコンのみのナビゲーションは見つけにくくなります（MD）
• nav-state-active - 現在の位置をナビゲーション内で視覚的に強調します（色、太さ、インジケーター）（HIG、MD）
• nav-hierarchy - 主要なナビゲーション（タブ／ボトムバー）と二次ナビゲーション（ドロワー／設定）を明確に分けます（MD）
• modal-escape - モーダルやシートには、明確な閉じる／閉じる操作を用意します。モバイルでは下方向のスワイプで閉じられるようにします（Apple HIG）
• search-accessible - 検索に簡単にアクセスできるようにします（トップバーまたはタブ）。最近の検索語句や候補も提示します（MD）
• breadcrumb-web - Web：階層が3段以上の場合は、位置を把握しやすくするためにパンくずリストを使用します（MD）
• state-preservation - 戻る操作で、前のスクロール位置、フィルターの状態、入力内容を復元します（HIG、MD）
• gesture-nav-support - システムのジェスチャーナビゲーション（iOSのスワイプによる戻る、Androidの予測型戻る）を妨げずにサポートします（HIG、MD）
• tab-badge - 未読や保留中を示すナビゲーション項目のバッジは控えめに使用し、ユーザーが項目を開いたら消します（HIG、MD）
• overflow-menu - アクションが表示可能な領域を超える場合は、詰め込まずにオーバーフロー／その他メニューを使用します（MD）
• bottom-nav-top-level - ボトムナビゲーションは最上位の画面にのみ使用し、その中にサブナビゲーションを入れません（MD）
• adaptive-navigation - 大画面（≥1024px）ではサイドバーを優先し、小画面ではボトム／トップナビゲーションを使用します（Material Adaptive）
• back-stack-integrity - ナビゲーションスタックを予告なくリセットしたり、予期せずホームに戻したりしません（HIG、MD）
• navigation-consistency - ナビゲーションの配置はすべてのページで統一し、ページの種類によって変更しません
• avoid-mixed-patterns - 同じ階層でタブ、サイドバー、ボトムナビゲーションを混在させません
• modal-vs-navigation - モーダルを主要なナビゲーションの流れに使用しません。モーダルはユーザーの進行を妨げます（HIG）
• focus-on-route-change - ページ遷移後、スクリーンリーダーのユーザー向けにメインコンテンツ領域へフォーカスを移動します（WCAG）
• persistent-nav - 主要なナビゲーションには深い階層のページからもアクセスできるようにし、サブフロー内で完全に隠しません（HIG、MD）
• destructive-nav-separation - 危険な操作（アカウント削除、ログアウト）は、通常のナビゲーション項目から視覚的にも空間的にも分離します（HIG、MD）
• empty-nav-state - ナビゲーション先が利用できない場合は、黙って非表示にせず、その理由を説明します（MD）

10. チャートとデータ（低）

• chart-type - データの種類に合わせてチャートの種類を選びます（傾向 → 折れ線、比較 → 棒、割合 → 円／ドーナツ）
• color-guidance - アクセシブルなカラーパレットを使用し、色覚障害のあるユーザー向けに赤と緑だけの組み合わせは避けます（WCAG、MD）
• data-table - アクセシビリティのため、代替となるテーブルを用意します。チャートだけではスクリーンリーダーに対応できません（WCAG）
• pattern-texture - 色がなくてもデータを識別できるよう、パターン、テクスチャ、図形で色を補います（WCAG、MD）
• legend-visible - 凡例は常に表示し、チャートの近くに配置します。スクロールしないと見えない下部に離して配置しないでください（MD）
• tooltip-on-interact - ホバー（Web）またはタップ（モバイル）時に、正確な値を示すツールチップ／データラベルを表示します（HIG、MD）
• axis-labels - 単位と読みやすい目盛りを付けて軸にラベルを表示します。モバイルでは、途中で切れたラベルや回転したラベルを避けます
• responsive-chart - 小さな画面ではチャートを再配置するか、簡略化する必要があります（例：縦棒の代わりに横棒を使う、目盛りを減らす）
• empty-data-state - データがない場合は、空白のチャートではなく、意味のある空状態（「データはまだありません」＋案内）を表示します（MD）
• loading-chart - チャートデータの読み込み中は、スケルトンまたはシマーのプレースホルダーを使用します。空の軸だけを表示しないでください
• animation-optional - チャートの表示アニメーションは prefers-reduced-motion を尊重する必要があります。データはすぐに読み取れるようにします（HIG）
• large-dataset - データポイントが 1000 件以上ある場合は、集約またはサンプリングします。すべてを描画するのではなく、詳細を確認できるドリルダウンを用意します（MD）
• number-formatting - 軸とラベルの数値、日付、通貨は、ロケールに応じた形式で表示します（HIG、MD）
• touch-target-chart - インタラクティブなチャート要素（ポイント、セグメント）は、44pt 以上のタップ領域を確保するか、タッチ時に拡大する必要があります（Apple HIG）
• no-pie-overuse - カテゴリが 5 つを超える場合は円／ドーナツチャートを避け、わかりやすい棒チャートに切り替えます
• contrast-data - データの線／棒と背景のコントラスト比は 3:1 以上、データのテキストラベルは 4.5:1 以上にします（WCAG）
• legend-interactive - 凡例をクリックして、系列の表示／非表示を切り替えられるようにします（MD）
• direct-labeling - データセットが小さい場合は、視線の移動を減らすため、チャート上に値を直接表示します
• tooltip-keyboard - ツールチップの内容はキーボードでアクセスできるようにし、ホバーだけに依存しないようにします（WCAG）
• sortable-table - データテーブルは並べ替えに対応し、現在の並べ替え状態を aria-sort で示す必要があります（WCAG）
• axis-readability - 軸の目盛りを詰め込みすぎず、読みやすい間隔を維持します。小さな画面では自動的に目盛りを間引きます
• data-density - 認知的な過負荷を避けるため、チャートごとの情報密度を制限します。必要に応じて複数のチャートに分けます
• trend-emphasis - 装飾よりもデータの傾向を強調します。データを見えにくくする強いグラデーションや影は避けます
• gridline-subtle - グリッド線は低コントラスト（例：gray-200）にして、データの邪魔にならないようにします
• focusable-elements - インタラクティブなチャート要素（ポイント、棒、スライス）はキーボードで操作できる必要があります（WCAG）
• screen-reader-summary - スクリーンリーダー向けに、チャートの重要な洞察を説明するテキストの要約または aria-label を用意します（WCAG）
• error-state-chart - データの読み込みに失敗した場合は、壊れたチャートや空のチャートではなく、再試行操作を含むエラーメッセージを表示します
• export-option - 大量のデータを扱う製品では、チャートデータを CSV／画像としてエクスポートできるようにします
• drill-down-consistency - ドリルダウン操作では、明確な戻り道と階層を示すパンくずリストを維持します
• time-scale-clarity - 時系列チャートでは時間の粒度（日／週／月）を明確に示し、切り替えられるようにします

使い方

以下の CLI ツールを使用して、特定のドメインを検索します。

---

前提条件

Python がインストールされているか確認します：

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールします：

macOS：

brew install python3

Ubuntu/Debian：

sudo apt update && sudo apt install python3

Windows：

winget install Python.Python.3.12

---

このスキルの使い方

ユーザーから次のいずれかの依頼があった場合に、このスキルを使用します。

シナリオ	トリガーの例	開始ステップ
新しいプロジェクト／ページ	「ランディングページを作成して」「ダッシュボードを作成して」	ステップ 1 → ステップ 2（デザインシステム）
新しいコンポーネント	「料金カードを作成して」「モーダルを追加して」	ステップ 3（ドメイン検索：スタイル、UX）
スタイル／色／フォントの選択	「フィンテックアプリに合うスタイルは？」「カラーパレットをおすすめして」	ステップ 2（デザインシステム）
既存の UI のレビュー	「このページの UX の問題を確認して」「アクセシビリティを確認して」	上記のクイックリファレンスのチェックリスト
UI のバグ修正	「ボタンのホバーが動作しない」「読み込み時にレイアウトがずれる」	クイックリファレンス → 該当セクション
改善／最適化	「もっと高速にして」「モバイルでの操作性を改善して」	ステップ 3（ドメイン検索：UX、React）
ダークモードの実装	「ダークモードに対応して」	ステップ 3（ドメイン：スタイル「dark mode」）
グラフ／データビジュアライゼーションの追加	「分析ダッシュボードにグラフを追加して」	ステップ 3（ドメイン：グラフ）
スタックのベストプラクティス	「React のパフォーマンスのヒント」、”SwiftUI navigation”	ステップ 4（スタック検索）

次のワークフローに従います。

ステップ 1：ユーザーの要件を分析する

ユーザーの依頼から重要な情報を抽出します。

• 製品タイプ：エンターテインメント（ソーシャル、動画、音楽、ゲーム）、ツール（スキャナー、エディター、コンバーター）、生産性（タスク管理、メモ、カレンダー）、またはハイブリッド
• ターゲットユーザー：一般消費者。年齢層や利用状況（通勤、余暇、仕事）を考慮します
• スタイルのキーワード：遊び心のある、鮮やかな、ミニマル、ダークモード、コンテンツ重視、没入感がある、など
• スタック：React Native（このプロジェクトで使用する唯一の技術スタック）

ステップ 2：デザインシステムを生成する（必須）

必ず --design-system から開始して、根拠を含む包括的な推奨事項を取得します。

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンドは次の処理を行います。

1. ドメイン（製品、スタイル、色、ランディングページ、タイポグラフィ）を並列検索します
2. ui-reasoning.csv の推論ルールを適用して、最適な候補を選択します
3. パターン、スタイル、色、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも含まれます

例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ 2b：デザインシステムを保存する（マスター＋オーバーライドのパターン）

セッションをまたいで階層的に取得できるようにデザインシステムを保存するには、--persist を追加します。

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

次のファイルが作成されます。

• design-system/MASTER.md — すべてのデザインルールを含む、グローバルな信頼できる唯一の情報源
• design-system/pages/ — ページ固有のオーバーライド用フォルダー

ページ固有のオーバーライドを指定する場合：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

次のファイルも作成されます。

• design-system/pages/dashboard.md — マスターからのページ固有の差分

階層的な取得の仕組み：

1. 特定のページ（例：「Checkout」）を作成する際は、まず design-system/pages/checkout.md を確認します
2. ページファイルが存在する場合、そのルールはマスターファイルのルールをオーバーライドします
3. 存在しない場合は、design-system/MASTER.md のみを使用します

コンテキストを考慮した取得プロンプト：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

ステップ 3：詳細検索で補足する（必要に応じて）

デザインシステムを取得したら、ドメイン検索を使って詳細情報を追加します。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使う場面：

必要な情報	ドメイン	例
プロダクトタイプのパターン	product	--domain product "entertainment social"
スタイルの選択肢を増やす	style	--domain style "glassmorphism dark"
カラーパレット	color	--domain color "entertainment vibrant"
フォントの組み合わせ	typography	--domain typography "playful modern"
チャートの推奨事項	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
代替フォント	typography	--domain typography "elegant luxury"
個別の Google Fonts	google-fonts	--domain google-fonts "sans serif popular variable"
ランディングページの構成	landing	--domain landing "hero social-proof"
React Native のパフォーマンス	react	--domain react "rerender memo list"
アプリのインターフェースのアクセシビリティ	web	--domain web "accessibilityLabel touch safe-areas"
AI プロンプト／CSS キーワード	prompt	--domain prompt "minimalism"

ステップ 4：スタックのガイドライン（React Native）

React Native の実装に特化したベストプラクティスを取得します。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワード例
product	プロダクトタイプの推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容、サービス
style	UI スタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン
color	プロダクトタイプ別のカラーパレット	SaaS、eコマース、ヘルスケア、美容、フィンテック、サービス
landing	ページ構成、CTA 戦略	ヒーロー、ヒーロー中心、推薦文、料金、ソーシャルプルーフ
chart	チャートの種類、ライブラリの推奨事項	トレンド、比較、タイムライン、ファネル、円グラフ
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み
google-fonts	個別の Google Fonts の検索	サンセリフ、等幅、日本語、可変フォント、人気
react	React／Next.js のパフォーマンス	ウォーターフォール、バンドル、Suspense、メモ化、再レンダリング、キャッシュ
web	アプリのインターフェースのガイドライン（iOS／Android／React Native）	accessibilityLabel、タッチターゲット、安全領域、Dynamic Type
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

スタック	主な対象
react-native	コンポーネント、ナビゲーション、リスト

---

ワークフローの例

ユーザーのリクエスト：「AI 検索のホームページを作ってください。」

ステップ 1：要件を分析する

• プロダクトの種類：ツール（AI 検索エンジン）
• 対象ユーザー：高速でインテリジェントな検索を求める一般ユーザー
• スタイルのキーワード：モダン、ミニマル、コンテンツ重視、ダークモード
• 技術スタック：React Native

ステップ 2：デザインシステムを生成する（必須）

python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"

出力： パターン、スタイル、色、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

ステップ 3：必要に応じて詳細検索で補足する

# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style

# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux

ステップ 4：技術スタックのガイドライン

python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native

その後： デザインシステムと詳細検索の結果を統合し、デザインを実装します。

---

出力形式

--design-system フラグは、2 つの出力形式に対応しています。

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

より良い結果を得るためのヒント

クエリ戦略

• 多次元のキーワードを使います。プロダクト、業界、トーン、情報密度を組み合わせます。例："entertainment social vibrant content-dense"。"app" だけでは不十分です。
• 同じニーズに対して異なるキーワードを試します。"playful neon" → "vibrant dark" → "content-first minimal"
• まず --design-system で包括的な推奨事項を取得し、不明な点を --domain で詳しく調べます。
• 実装に特化したガイダンスを得るため、必ず --stack react-native を追加します。

よくあるつまずき

問題	対処方法
スタイルや色を決められない	キーワードを変えて --design-system を再実行します
ダークモードでコントラストに問題がある	クイックリファレンス §6：color-dark-mode + color-accessible-pairs
アニメーションが不自然に感じる	クイックリファレンス §7：spring-physics + easing + exit-faster-than-enter
フォームの UX が使いにくい	クイックリファレンス §8：inline-validation + error-clarity + focus-management
ナビゲーションがわかりにくい	クイックリファレンス §9：nav-hierarchy + bottom-nav-limit + back-behavior
小さな画面でレイアウトが崩れる	クイックリファレンス §5：mobile-first + breakpoint-consistency
パフォーマンスの低下／カクつき	クイックリファレンス §3：virtualize-lists + main-thread-budget + debounce-throttle

提供前のチェックリスト

• 実装前に UX 検証として --domain ux "animation accessibility z-index loading" を実行します。
• 最終確認として、クイックリファレンスの §1～§3（CRITICAL + HIGH）を確認します。
• 375px（小型スマートフォン）と横向き表示でテストします。
• reduced-motion を有効にし、Dynamic Type を最大サイズにした状態で動作を確認します。
• ダークモードのコントラストを個別に確認します（ライトモードの値がそのまま使えるとは限りません）。
• すべてのタッチ領域が 44pt 以上であること、セーフエリアの背後にコンテンツが隠れていないことを確認します。

---

プロフェッショナルな UI のための共通ルール

これらは見落とされがちな、UI をプロらしく見せるための問題です。 対象範囲に関する注意：以下のルールはアプリ UI（iOS／Android／React Native／Flutter）を対象としており、デスクトップ Web の操作パターンには適用されません。

アイコンと視覚要素

ルール	基準	避けること	重要な理由
構造アイコンに絵文字を使わない	ベクターベースのアイコン（例：Lucide、react-native-vector-icons、@expo/vector-icons）を使用します。	ナビゲーション、設定、システムコントロールに絵文字（🎨 🚀 ⚙️）を使用すること。	絵文字はフォントに依存し、プラットフォームによって一貫性がなく、デザイントークンで制御できません。
ベクターアセットのみを使用	拡大縮小しても鮮明で、テーマに対応するSVGまたはプラットフォームのベクターアイコンを使用します。	ぼやけたり、ピクセル化したりするラスターPNGアイコン。	拡張性、鮮明な描画、ダークモードとライトモードへの適応性を確保します。
安定したインタラクション状態	押下状態には、レイアウトの境界を変えずに色、不透明度、または標高の遷移を使用します。	周囲のコンテンツを動かしたり、視覚的なちらつきを引き起こしたりする、レイアウトをずらす変形。	不安定な操作を防ぎ、モバイルでの滑らかな動きと体感品質を保ちます。
正しいブランドロゴを使用	公式ブランドアセットを使用し、使用ガイドライン（間隔、色、クリアスペース）に従います。	ロゴのパスを推測する、非公式に色を変更する、または比率を変えること。	ブランドの誤用を防ぎ、法令やプラットフォームの要件への準拠を確保します。
アイコンサイズを統一	アイコンのサイズをデザイントークンとして定義します（例：icon-sm、icon-md = 24pt、icon-lg）。	20pt／24pt／28ptなどの任意の値を無秩序に混在させること。	インターフェース全体でリズムと視覚的な階層を維持します。
線幅を統一	同じ視覚レイヤー内では線幅を統一します（例：1.5pxまたは2px）。	太い線と細い線のスタイルを無秩序に混在させること。	線幅が一貫していないと、仕上がりの質感と統一感が損なわれます。
塗りつぶしとアウトラインの使い分け	階層レベルごとにアイコンスタイルを1つに統一します。	同じ階層レベルで塗りつぶしアイコンとアウトラインアイコンを混在させること。	意味の明確さとスタイルの一貫性を保ちます。
タッチターゲットの最小サイズ	インタラクティブ領域は最低44×44ptにします（アイコンが小さい場合はhitSlopを使用）。	タップ領域を拡張していない小さなアイコン。	アクセシビリティとプラットフォームのユーザビリティ基準を満たします。
アイコンの配置	アイコンをテキストのベースラインに合わせ、余白を一定に保ちます。	アイコンの位置がずれている、または周囲の間隔が一定でないこと。	微妙な視覚的不均衡を防ぎ、体感品質の低下を避けます。
アイコンのコントラスト	WCAGのコントラスト基準に従います。小さな要素は4.5:1、大きなUIグリフは最低3:1にします。	背景に溶け込む、コントラストの低いアイコン。	ライトモードとダークモードの両方でアクセシビリティを確保します。

Interaction（アプリ）

ルール	推奨事項	避けること
タップ時のフィードバック	80〜150ms 以内に、明確な押下フィードバック（波紋／不透明度／高さ）を表示します	タップしても視覚的な反応がないこと
アニメーションのタイミング	マイクロインタラクションを約150〜300msに保ち、プラットフォーム標準のイージングを使用します	即時に切り替わるトランジションや、遅いアニメーション（>500ms）
アクセシビリティのフォーカス	スクリーンリーダーのフォーカス順を視覚的な順序と一致させ、説明的なラベルを付けます	ラベルのないコントロールや、分かりにくいフォーカス移動
無効状態の明確さ	無効のセマンティクス（disabled／ネイティブの disabled プロパティ）を使用し、強調を抑え、タップ操作を無効にします	タップできそうに見えるのに何も起こらないコントロール
タッチ領域の最小サイズ	タップ領域を44x44pt（iOS）または48x48dp（Android）以上に保ち、アイコンが小さい場合はタップ領域を広げます	小さすぎるタップ領域や、余白のないアイコンのみのタップ領域
ジェスチャーの競合防止	領域ごとに主要なジェスチャーを1つにし、タップとドラッグの入れ子による競合を避けます	ジェスチャーが重なり、意図しない操作が発生すること
セマンティクスを備えたネイティブコントロール	適切なアクセシビリティロールを備えたネイティブの操作要素（Button、Pressable、各プラットフォームの同等要素）を優先します	セマンティクスのない汎用コンテナーを主要なコントロールとして使うこと

ライト／ダークモードのコントラスト

ルール	推奨事項	避けること
サーフェスの可読性（ライト）	十分な不透明度や高さを確保し、カード／サーフェスを背景から明確に区別します	階層が曖昧になるほど透明度の高いサーフェス
テキストのコントラスト（ライト）	ライトサーフェス上で、本文テキストのコントラスト比を4.5:1以上に保ちます	コントラストの低い灰色の本文テキスト
テキストのコントラスト（ダーク）	ダークサーフェス上で、主要テキストのコントラスト比を4.5:1以上、副次テキストを3:1以上に保ちます	背景に溶け込むダークモードのテキスト
境界線と区切り線の視認性	どちらのテーマでも区切り線を視認できるようにします（ライトモードだけでなく）	片方のモードで消えてしまう、テーマ固有の境界線
状態コントラストの一貫性	ライトテーマとダークテーマの両方で、押下／フォーカス／無効状態を同じ程度に区別できるようにします	一方のテーマだけにインタラクション状態を定義すること
トークンによるテーマ設定	アプリ内のサーフェス／テキスト／アイコン全体で、テーマごとに割り当てられたセマンティックカラートークンを使用します	画面ごとにハードコードされた16進数の色
スクリーンとモーダルの視認性	前景コンテンツを分離できる強さのモーダルスクリーン（通常は黒の40〜60%）を使用します	背景が視覚的に競合するほど弱いスクリーン

レイアウトと間隔

ルール	実施すること	避けること
セーフエリアへの準拠	固定ヘッダー、タブバー、CTA バーすべてで、上下のセーフエリアを尊重します	ノッチ、ステータスバー、ジェスチャー領域の下に固定 UI を配置する
システムバーとの間隔	ステータスバー／ナビゲーションバーとジェスチャー用ホームインジケーターのための間隔を設けます	タップ可能なコンテンツを OS の UI に接触させる
コンテンツ幅の一貫性	デバイスの種類（スマートフォン／タブレット）ごとに予測可能なコンテンツ幅を保ちます	画面ごとに任意の幅を混在させる
8dp 間隔のリズム	パディング、隙間、セクション間隔に一貫した 4／8dp の間隔体系を使用します	一貫性のない、ランダムな間隔を使う
読みやすいテキスト幅	大型デバイスでも長文を読みやすくします（タブレットでは段落を画面端まで広げないでください）	読みやすさを損なう全幅の長文テキスト
セクション間隔の階層	階層に応じて明確な縦方向の間隔段階（例：16／24／32／48）を定義します	同程度の UI 階層で間隔に一貫性がない状態
ブレークポイントに応じた余白	幅の広い画面や横向きでは左右のインセットを広げます	すべてのデバイスサイズ／画面の向きで同じ狭い余白を使う
スクロール要素と固定要素の共存	リストが固定バーの背後に隠れないよう、コンテンツの上下にインセットを追加します	スクロールコンテンツが固定ヘッダー／フッターに隠れる

---

提供前チェックリスト

UI コードを提供する前に、以下の項目を確認してください。 対象範囲の注意：このチェックリストはアプリ UI（iOS／Android／React Native／Flutter）向けです。

ビジュアル品質

• アイコンとして絵文字を使用していない（代わりに SVG を使用）
• すべてのアイコンで、一貫したアイコンファミリーとスタイルを使用している
• 正式なブランドアセットを適切な比率とクリアスペースで使用している
• 押下状態のビジュアルによってレイアウトの境界が移動したり、ちらつきが発生したりしない
• セマンティックなテーマトークンを一貫して使用している（画面ごとに場当たり的なハードコード色を使っていない）

インタラクション

• タップ可能な要素すべてで、明確な押下フィードバック（リップル／不透明度／エレベーション）が得られる
• タッチターゲットが最小サイズ（iOS は >=44x44pt、Android は >=48x48dp）を満たしている
• マイクロインタラクションの時間が 150～300ms の範囲内で、ネイティブらしいイージングになっている
• 無効状態が視覚的に明確で、操作できない
• スクリーンリーダーのフォーカス順が視覚的な順序と一致し、操作要素のラベルが具体的である
• ジェスチャー領域で、入れ子や競合する操作（タップ／ドラッグ／戻るスワイプの競合）が発生しない

ライトモード／ダークモード

• ライトモードとダークモードの両方で、主要テキストのコントラスト比が >=4.5:1 である
• ライトモードとダークモードの両方で、補助テキストのコントラスト比が >=3:1 である
• 両方のモードで、区切り線／枠線とインタラクション状態を見分けられる
• モーダル／ドロワーのスクリーンの不透明度が、前景の読みやすさを保つのに十分である（通常は黒の 40～60%）
• 提供前に両方のテーマをテストしている（単一のテーマから推測していない）

レイアウト

• ヘッダー、タブバー、画面下部の CTA バーでセーフエリアを尊重している
• スクロールコンテンツが固定／スティッキーバーの背後に隠れていない
• 小型スマートフォン、大型スマートフォン、タブレット（縦向き＋横向き）で確認している
• デバイスのサイズと画面の向きに応じて、左右のインセット／余白が適切に変化する
• コンポーネント、セクション、ページの各レベルで 4／8dp の間隔のリズムを維持している
• 長文テキストの幅が大型デバイスでも読みやすい（段落を画面端まで広げていない）

アクセシビリティ

• 意味のある画像やアイコンには、すべてアクセシビリティラベルが設定されています
• フォームフィールドにはラベル、ヒント、わかりやすいエラーメッセージがあります
• 色だけが唯一の識別手段になっていません
• レイアウトを崩すことなく、視差効果の軽減と動的なテキストサイズに対応しています
• アクセシビリティの特性／役割／状態（選択済み、無効、展開済み）が正しく読み上げられます