OilOil UI/UX ガイド（モダン・ミニマル）

このスキルを以下の2つのモードで使用します：

• guide: モダンでクリーンなUI/UXの原則と具体的なDo/Dontルールを提供します。
• review: 既存のUI（スクリーンショット/モック/HTML/PR）をレビューし、優先度付きで実装可能な改善案を出力します。

出力は簡潔に。長い段落より箇条書きを優先します。

ワークフロー（どちらか1つを選択）

1) guide ワークフロー

1. 対象を特定します：マーケティングページ/ダッシュボード/設定/作成フロー/リスト・ディテール/フォーム
2. プライマリユーザータスクとプライマリCTAを特定します。
3. システムレベルのガイド原則を最初に適用します（メンタルモデルとインタラクションロジック）。
4. 以下のコア原則を適用します（UXから始めて、CRAPで調整します）。
5. アイコンが含まれる場合：references/icons.md を参照してください。

2) review ワークフロー

1. 仮定を述べます（プラットフォーム、ターゲットユーザー、プライマリタスク）。
2. 所見を P0/P1/P2（ブロッカー/重要/ポーランド）として簡潔な根拠とともにリストアップします。
3. 主要な問題ごとに、診断にラベルを付けます：実行時のギャップか評価時のギャップか、スリップか誤りか（references/design-psych.md 参照）。
4. 実装可能な改善案を提案します（レイアウト、階層、コンポーネント、コピー、状態）。
5. 変更を検証するための簡潔なチェックリストで締めくくります。

安定した出力フォーマットが必要な場合は references/review-template.md を使用してください。

非交渉項目（硬いルール）

• アイコンとしてまたはUIの装飾として絵文字を使用しない。絵文字が表示される場合は、適切なアイコンに置き換えてください。
• アイコンは直感的で洗練されたものである必要があります。製品全体で単一の統一されたアイコンセットを使用してください（スタイルの混在を避けてください）。
• デフォルトではコピーを最小化してください。エラーを防ぐ、曖昧さを減らす、または信頼を向上させる場合にのみ説明文を追加してください。

システムレベルのガイド原則（クロスシステム、高レベル）

特定のコンポーネントやページパターンを選択する前に、これらを最初の制約として使用してください。

• 概念の恒常性：
  • 定義：同じビジネス概念は、システム全体で同じ名前、意味、インタラクションセマンティクスを保ちます。
  • 検証質問：ユーザーが1つの場所でこの概念を学んだ場合、他の場所でもその理解を転用できますか？
• プライマリタスクのフォーカス：
  • 定義：各画面には、視覚的およびインタラクション優先度が最も高い1つの支配的な目的があります。
  • 検証質問：ユーザーは3秒以内に最も重要なアクションを識別できますか？
• UIコピーソースの規律（製品開発用）：
  • 定義：表示されるUIコピーは、ビジネスコンテンツから来るべきで、実装制約や生成指示から来るべきではありません。
  • 推奨されるコピーソース：
    • ユーザータスク：ユーザーが何をしようとしているか。
    • システム状態：今何が起きているか（ロード中、空、エラー、成功、パーミッション）。
    • 結果と次のステップ：何が変わったか、ユーザーが次に何ができるか。
    • リスク/信頼コンテキスト：誤りを防ぐか信頼を向上させる場合のみ。
  • 内部専用ソース（デフォルトでは製品UIに直接レンダリングしないでください）：
    • ビジュアル/スタイル制約（例：「ミニマル」「白黒」「モダン」）。
    • 技術的制約と実装ノート。
    • プロンプト指示、レビュー基準、生成メタテキスト。
  • ユーザー向けコピーフレーミングヒューリスティック（一般的、タイトル固有ではない）：
    • 任意のプロミネント UIコピーに適用：タイトル、セクションヘッダー、コールアウト、バッジ、CTAラベル、空状態。
    • ユーザー成果フレーミングを優先：ユーザーのゴールと得られる結果を説明してください。
    • エンドユーザー向け製品UIの自己参照/プロセスフレーミングを避けてください（例：「紹介するため」「このページは示します」「スキルの価値を示す」）。
    • 例外：表面が明示的にビルダー向けのデモ/チュートリアル/スペックページである場合、理解を向上させるときは自己参照/プロセスコピーが受け入れられます。
  • 状態の知覚可能性（高レベル、クロスシステム）：
    • 問題：重要な内部状態が知覚可能でないと、ユーザーはエラーを犯します（モード、スコープ、選択、保存されていない変更、環境、パーミッション）。
    • 原則：最小ノイズで動作を確実に変える信号を使用して状態を見えるようにします。
    • 推奨信号（優先順）：
      • 構造的変化：レイアウト/コンポーネントが明らかに切り替わります（読み込み→編集、リスト→選択、表示→比較）。
      • コントロール状態：動作を変えるコントロールが状態を示します（タブ、トグル、セグメント化されたコントロール）。
      • インライン指示符：影響を受ける領域の近くのローカルキュー（選択数、スコープチップ、無効化の理由）。
      • アクション後フィードバック：明確な結果と次のステップ（評価時のギャップを減らします）。
      • 必要な場合のみ：高リスク、粘着性モードの永続的なバナー/ラベル。
    • 避けてください：構造がすでに明らかなことを言い換えた冗長な「ステータスラベル」（ノイズを追加しますが明確さは追加しません）。
  • 実用的なワークフロー：
    • 最初にコンテンツモデルを構築します（タスク/状態/結果/リスク）。
    • 次にレイアウト、階層、コンポーネントスタイリングを使用してビジュアル制約を適用します。
    • 最終的なコピーパスを実行します：文がタスク完了、状態理解、信頼に役立たない場合は、内部ノートに移動します。
  • 検証質問：各表示文はエンドユーザーに役立ちますか、またはビルダー/レビュアーにのみ役立ちますか？
• ヘルプテキストの層化（「ヒント散乱」を避ける）：
  • これが防ぐ問題：すべてのヒントをUIにダンプすることは「安全」に見えますが、階層を破壊し、スキャンコストを増加させます。
  • 配置ヒューリスティック：
    • L0（常に表示）：タスクを正しく完了するために必要な情報のみ。
    • L1（近く）：高リスク/高曖昧性入力の短い指導。
    • L2（オンデマンド）：例、詳細、「さらに詳しく」。
    • L3（アクション後）：結果、エラー、復旧、次のステップ。
  • コピー予算ヒューリスティック：
    • 複数の繰り返しヒントより1つの明確なヘルパー行を優先します。
    • ページが多くの永続的なヒントを必要とする場合、IAまたはデフォルトを最初に改善してください。
• フィードバックループの終了：
  • 定義：すべてのユーザーアクションは完全なループを完了する必要があります：受信、進行中、結果、明確な次のステップ。
  • 検証質問：いつでも、ユーザーはシステムが何をしているか、次に何をすべきかを判断できますか？
• 防止を最優先 + 回復可能性：
  • 定義：送信前にエラー確率を減らし、高リスク成果の回復パスを提供します。
  • 検証質問：パスは正しく行うのが簡単で、間違った場合の復旧が安全に設計されていますか？
• プログレッシブな複雑性：
  • 定義：デフォルトで最低限必要なコントロールを表示し、コンテキストが必要な場合のみ高度な機能を表示します。
  • 検証質問：初心者はエキスパートのスループットを制限せずにコアタスクを素早く完了できますか？
• アクション知覚可能性（アフォーダンス + 指示符）：
  • 定義：インタラクティブなターゲットと可能な結果は、推測なしで構造とビジュアルキューから知覚可能です。
  • 検証質問：ヘルプテキストを読まずに、ユーザーは何がアクション可能でどうなるかを予測できますか？
• 認知負荷予算：
  • 定義：スクリーン当たりの新しいルール、用語、インタラクションモードを制限し、新規性より再利用を優先します。
  • 検証質問：情報が増えるにつれて、理解コストは安定したままですか？
• セマンティック継続性での進化：
  • 定義：既存のものが問題を解決できない場合のみ新しいコンポーネント/パターンを導入し、セマンティック互換性を保ちます。
  • 検証質問：これは必要なイノベーションですか、それとも回避可能なインタラクションドリフトですか？

コア原則（ミニマルセット）

A) タスクファースト UX

• プライマリタスクを3秒以内に明確にします。
• 画面/セクションごとに正確に1つのプライマリCTAを許可します。
• ハッピーパスを最適化し、プログレッシブディスクロージャーの背後に高度なコントロールを非表示にします。

B) 情報アーキテクチャ（グループ化と見つけやすさ）

• ユーザーのメンタルモデルでグループ化します（ゴール/オブジェクト/時間/ステータス）、バックエンドフィールドでではなく。
• 明確なセクションタイトルを使用し、同様のスクリーン間のナビゲーションパターンを安定させます。
• アイテム数が増える場合：検索/フィルター/ソートを遅くなく早く追加します。

C) フィードバックとシステムステータス

• 常に表示：ロード中、空、エラー、成功、パーミッション状態。
• アクション後、回答します：「成功しましたか？」+「何が変わりましたか？」+「次に何ができますか？」
• グローバルトースト（クロスページアクション除く）より、インライン、コンテキスト的なフィードバックを優先します。

D) 一貫性と予測可能性

• 同じインタラクション = 同じコンポーネント + 同じ表現 + 同じ配置。
• 小さく、安定したコンポーネントバリアントセットを使用し、ワンオフスタイルを避けてください。

E) アフォーダンスと指示符（アクションを明確にする）

• ユーザーは、推測なしに何ができるかとどうするかを見るべきです。
• クリック可能なものはクリック可能に見える必要があります（ボタン/リンクスタイリング+ホバー/フォーカス+カーソル）。「神秘の肉」UIを避けてください。
  • ウェブ：ネイティブでない要素（例：onClickを持つdiv）でクリック可能性を実装する場合、cursor: pointerと適切なフォーカススタイルを確保してください。
• プライマリアクションを無ラベルアイコンの背後に非表示にしないでください。アイコンが誤解されやすい場合は、短いラベルを追加してください。
• 自然なマッピングを優先：コントロール配置は制御するものを反映します（レイアウト、方向、グループ化）。
• フォーム：送信後ではなく、送信前に制約を表示します（フォーマット、ユニット、例、必須）。

F) エラー防止と回復

• 制約、デフォルト、インライン検証でエラーを防止します。
• 可能な場合は破壊的なアクションを可逆的にします。そうでない場合は意図的な確認を要求してください。
• エラーメッセージはアクション可能である必要があります（何が起きたか + 修正方法）。

G) 認知負荷制御

• 選択肢を削減：賢明なデフォルト、プリセット、プログレッシブディスクロージャー。
• 長いタスクをステップに分割：見た目を「エンタープライズ」にするだけでなく、思考を減らす場合のみ。
• ビジュアルノイズを低く保ちます：少ないボーダー、少ない色、少ないコンペティングハイライト。

H) CRAP（視覚的階層とレイアウト）

• コントラスト：重要な少数のもの（CTA、現在の状態、主要な数字）を強調します。
• 反復：トークン/コンポーネント/スペーシングはスケールに従います。「ほぼ同じ」スタイルを避けてください。
• 整列：明確なグリッドに整列します。2pxドリフトを修正します。テキストが重要な場合はベースラインを整列します。
• 近接性：グループ内でタイト、グループ間でルーズ。スペーシングがプライマリグループ化ツールです。

スペーシングとレイアウト規律（コンパクトルールセット）

レイアウトを実装またはレビューするときにこれを使用してください。短く保ちますが、厳密に実装してください。

• ルール1 - 1つのスペーシングスケール：
  • ベースユニット：4px。
  • 許可されているスペーシングセット（推奨）：4 / 8 / 12 / 16 / 24 / 32 / 40 / 48。
  • 新しいギャップ/パディングはこのセットを使用してください。スケール外の値は明確な理由が必要です。
• ルール2 - 反復を最優先：
  • 同じコンポーネントタイプは同じ内部スペーシングを保ちます（カード、リスト行、フォームグループ、セクションブロック）。
  • 同じビジュアルロールを持つコンポーネントは異なるスペーシングパターンを持つべきではありません。
• ルール3 - 整列とグループ化：
  • 1つのグリッドに整列し、1～2pxドリフトを修正します。
  • グループ内でタイトなスペーシング、グループ間でルーズなスペーシング。
• ルール4 - デコラティブなネスティングなし：
  • 余分なラッパーは実際の機能を追加する必要があります（グループ化、状態、スクロール、アフォーダンス）。
  • ラッパーがボーダー/背景のみを追加する場合、削除してスペーシングでグループ化してください。
• クイックレビューパス：
  • スケール外のスペーシング値がありますか？
  • ベースライン/エッジの不整列がありますか？
  • 意味を失わずに削除可能なラッパーレイヤーがありますか？

モダン・ミニマルスタイルガイダンス（ルール付きの趣味）

• 階層を作成するためにホワイトスペースとタイポグラフィを使用します。装飾ファーストデザインを避けてください。
• 微妙なサーフェス（軽い昇降、低コントラストボーダー）を優先します。重い影を避けてください。
• 色パレットを小さく保ちます。プライマリアクションと主要な状態に1つのアクセントカラーを使用します。
• コピー：短く直接的なラベル。誤りを減らすか信頼を増やす場合にのみヘルパーテキストを追加します。

モーション（アニメーション）ガイダンス（コンテンツ/クリエイター向け、派手でない）

• モーションは階層（レイヤー/パネルの内容）と状態変化（何が起きたか）を説明します。装飾としてのモーションを避けてください。
• デフォルトモーション語彙：フェード、その後小さな移動+フェード、オーバーレイ用の小さなスケール+フェードを許可します。大きなバウンシーモーションを避けてください。
• キャンバス/コンテンツエリアを安定させます。パネル/オーバーレイは移動できます。作業サーフェスは「浮く」べきではありません。
• 多様性より一貫性を優先：同じコンポーネントタイプは同じモーションパターンを使用します。
• レイアウトジャンプを避けてください。プレースホルダー/スケルトンを使用して、ロード中にレイアウトを安定させます。

リファレンス

• アイコンルールと「直感的で洗練された」ガイダンス：references/icons.md
• レビュー出力テンプレートとスコアリング：references/review-template.md
• 拡張チェックリスト（必要に応じて使用）：references/checklists.md
• デザイン心理学（アフォーダンス、指示符、マッピング、制約、エラータイプ、概念モデル）：references/design-psych.md