ui-ux-pro-max

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> を使って詳細を照会します。スクリプトはこの表を読み取りません。

Priority	Category	Impact	Domain	Key Checks (Must Have)	Anti-Patterns (Avoid)
1	アクセシビリティ	CRITICAL	ux	コントラスト比 4.5:1、代替テキスト、キーボードナビゲーション、ARIA ラベル	フォーカスリングを削除する、ラベルのないアイコンのみのボタン
2	タッチとインタラクション	CRITICAL	ux	最小サイズ 44×44px、8px 以上の間隔、読み込み中のフィードバック	ホバーのみに依存する、状態を即座に変更する（0ms）
3	パフォーマンス	HIGH	ux	WebP／AVIF、遅延読み込み、スペースの確保（CLS < 0.1）	レイアウトスラッシング、累積レイアウトシフト
4	スタイルの選定	HIGH	style、product	プロダクトタイプとの一致、一貫性、SVG アイコン（絵文字は使わない）	フラットとスキューモーフィックを無作為に混在させる、絵文字をアイコンとして使う
5	レイアウトとレスポンシブ対応	HIGH	ux	モバイルファーストのブレークポイント、ビューポートメタタグ、横スクロールなし	横スクロール、固定 px のコンテナ幅、ズームの無効化
6	タイポグラフィと色	MEDIUM	typography、color	基本サイズ 16px、行の高さ 1.5、セマンティックなカラートークン	本文が 12px 未満、グレーの上にグレー、コンポーネント内の生の HEX 値
7	アニメーション	MEDIUM	ux	表示時間 150～300ms、動きで意味を伝える、空間的な連続性	装飾のみのアニメーション、幅／高さのアニメーション、動きを抑える設定への非対応
8	フォームとフィードバック	MEDIUM	ux	表示ラベル、フィールドの近くにエラーを表示、補助テキスト、段階的な情報開示	プレースホルダーのみのラベル、最上部にしか表示されないエラー、最初から情報を詰め込みすぎる
9	ナビゲーションパターン	HIGH	ux	予測可能な戻る操作、ボトムナビは 5 項目以下、ディープリンク	項目が多すぎるナビゲーション、戻る操作の不具合、ディープリンクなし
10	チャートとデータ	LOW	chart	凡例、ツールチップ、アクセシブルな色	意味を伝える手段として色だけに頼る

クイックリファレンス

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. グラフとデータ（LOW）

• 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（ドメイン検索：style、ux）
スタイル／色／フォントの選定	「フィンテックアプリに合うスタイルは？」「カラーパレットを提案して」	ステップ 2（デザインシステム）
既存 UI のレビュー	「このページの UX の問題点をレビューして」「アクセシビリティを確認して」	上記のクイックリファレンスのチェックリスト
UI のバグ修正	「ボタンのホバーが動作しない」「読み込み時にレイアウトがずれる」	クイックリファレンス → 該当するセクション
改善／最適化	「もっと高速にして」「モバイルでの使いやすさを改善して」	ステップ 3（ドメイン検索：ux、react）
ダークモードの実装	「ダークモードに対応して」	ステップ 3（ドメイン：style "dark mode"）
チャート／データビジュアライゼーションの追加	「分析ダッシュボードのチャートを追加して」	ステップ 3（ドメイン：chart）
スタックのベストプラクティス	「React のパフォーマンスに関するヒント」、「SwiftUI のナビゲーション」	ステップ 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. 複数のドメイン（product、style、color、landing、typography）を並行して検索します
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

---

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

クエリ戦略

• 複数の側面を組み合わせたキーワードを使います。プロダクト＋業界＋トーン＋情報密度を組み合わせます。"app" だけではなく、"entertainment social vibrant content-dense" のように指定します。
• 同じニーズに対して異なるキーワードを試します："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です。	背景に溶け込む、コントラストの低いアイコン。	ライトモードとダークモードの両方でアクセシビリティを確保できます。

インタラクション（アプリ）

ルール	すること	しないこと
タップ時のフィードバック	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 のスペーシングリズムが保たれています
• 大型デバイスでも長文の行長が読みやすく保たれています（段落が画面の端から端まで広がっていません）

アクセシビリティ

• 意味のある画像／アイコンすべてにアクセシビリティラベルが付いています
• フォームフィールドにラベル、ヒント、明確なエラーメッセージが設定されています
• 色だけを唯一の指標として使用していません
• レイアウトを崩すことなく、モーションの低減と動的なテキストサイズに対応しています
• アクセシビリティの特性／役割／状態（選択済み、無効、展開済み）が正しく読み上げられます