インターフェースデザイン

意図的な美的方向性、ユーザーフロー、コンポーネント階層、ビジュアルシステムを備えたUIを計画します。実装前に設計判断を確定させます。

使用する場面

• 新機能やページのUIを計画する
• ユーザーフローとインタラクションを設計する
• UI/UX判断を評価する
• ワイヤーフレームやコンポーネント階層を構築する
• ユーザーが「どのように見えるべきか?」または「XのベストなUXは?」と質問する場合

使用しない場面:

• 実装（react、mui、cssスキル）
• アクセシビリティ（a11y）
• バックエンドAPI（architecture-patterns）

---

クリティカルパターン

✅ 必須: 大胆な美的方向性にコミットする

UIコードを書く前に、明確な概念的方向性を定義し、それにコミットします。

## 美的方向性

**目的**: このインターフェースはどの問題を解決するのか？誰がそれを使うのか？
**ドメイン**: この製品の世界から引き出された5つ以上のコンセプト、メタファー、または語彙
**カラーワールド**: このドメインの物理的空間に自然に存在する5つ以上の色
**トーン**: 1つ選択 — 徹底的にミニマル、マキシマリスト、エディトリアル、ラグジュアリー、ブルータリスト、レトロ未来的、ソフト/パステル、インダストリアル、オーガニック...極端さにコミットする。
**差別化**: このPRODUCT「だけ」に存在し得る1つの要素は？
**却下されたデフォルト**: 明示的に実行しない3つの明らかなパターン。

「大胆なマキシマリズムと洗練されたミニマリズムの両方が機能します。重要なのは強度ではなく意図性です。」

タイポグラフィ: ジェネリックなデフォルトよりも、特徴的でキャラクターのあるフォントを選びます。 カラー: 製品の世界に「適用された」ものではなく、製品の世界から「生まれた」と感じるパレット。 構成: 予期しないレイアウト、非対称、対角線フロー、余白をたっぷり使うか制御された密度 — すべて意図的であれば有効です。 背景: グラデーションメッシュ、ノイズテクスチャ、幾何学的パターン、グレインオーバーレイ、レイヤー透明性、劇的な影 — 単色を超えた雰囲気と奥行き。 複雑さ: 実装をビジョンに合わせます — マキシマリストデザイン = 複雑なアニメーションとエフェクト; ミニマリスト = 抑制、精密性、空白。

✅ 必須: ユーザーファースト設計プロセス

## 設計プロセス

1. **理解** → ユーザーは誰か？目標は何か？
2. **マップ** → ユーザーフローは何か？（エントリー → アクション → 結果）
3. **構造** → どのコンポーネントが必要か？（階層）
4. **検証** → 設計は要件を満たしているか？
5. **実装** → テクノロジースキル（react、css、mui）で構築する

✅ 必須: UIの前にユーザーフローを定義する

## ユーザーフロー: チェックアウト

**エントリー**: ユーザーがカートから「チェックアウト」をクリック
**目標**: 購入を完了する

フロー:
1. カートアイテムを確認 → [数量編集] → [アイテム削除]
2. 配送先住所を入力 → [保存済みから自動入力] → [住所検証]
3. 配送方法を選択 → [配送予定日を表示]
4. 支払い情報を入力 → [カード検証] → [エラーをインラインで表示]
5. 注文を確認 → [任意のセクションを編集] → [注文を確定]
6. 確認 → [注文番号] → [メール送信]

**エッジケース:**
- 空のカート → メッセージ付きでショップにリダイレクト
- 支払い失敗 → エラーを表示、フォーム状態を保持、再試行
- セッションタイムアウト → 進捗を保存、再ログインを促す

✅ 必須: コンポーネント階層

コンポーネントを構築する前にUI構造をマップします。

## コンポーネント階層: ダッシュボード

DashboardPage
├── DashboardHeader
│   ├── PageTitle
│   └── DateRangePicker
├── MetricsRow
│   ├── MetricCard (売上)
│   ├── MetricCard (注文)
│   └── MetricCard (顧客)
├── ChartsSection
│   ├── RevenueChart
│   └── OrdersChart
└── RecentOrdersTable
    ├── TableHeader
    ├── TableRow[]
    └── Pagination

✅ 必須: 状態の識別

実装する前に、各コンポーネントが必要とする状態を特定します。

## 状態分析: チェックアウト

| コンポーネント      | 必要な状態            | ソース             |
|-----------------|---------------------------|--------------------|
| CartReview      | items、quantities         | Redux store        |
| ShippingForm    | address fields、errors    | ローカルフォーム状態   |
| ShippingMethod  | methods[]、selected       | API + ローカル        |
| PaymentForm     | card fields、errors       | ローカルフォーム状態   |
| OrderSummary    | totals、tax、shipping     | 上記から派生         |
| CheckoutPage    | currentStep、isSubmitting | ローカル状態        |

✅ 必須: 深さの戦略 — 1つ選択する

1つの深さアプローチを選択し、一貫して適用します。戦略を混在させるとビジュアル調和が崩れます。

Borders-only      → テクニカル、正確な印象; 影なし
Subtle shadows    → 柔らかい昇降を持つレイヤー表面
Surface shifts    → 明度による昇降（ダークモード: より高い = わずかに明るい）
Borders + shadows → 強調要素のみに予約

❌ アプローチを混在させない — 一貫性のない深さはシステムがない最も明確なサイン。

入力: 周囲より少し暗い（「ここに入力」と指示）。サイドバー: キャンバスと同じ背景に微妙なボーダー — スペースを分割する異なる色相ではなく。

✅ 必須: インタラクティブ状態 — すべての5つ

すべてのインタラクティブ要素は、出荷前に5つの状態すべてが定義されている必要があります。

Default  → 静止時の外観
Hover    → カーソルが要素の上にある
Active   → 押された/クリックされた（短時間; 物理的な感覚を与える）
Focus    → キーボードナビゲーション — 見える枠線、決して非表示にしない
Disabled → 不透明度低下 + cursor:not-allowed

❌ フォーカスなし = キーボードアクセシビリティが壊れている
❌ 無効状態なし = フォームUXが壊れている

✅ 必須: 検証チェックポイント

## チェックポイント1: ユーザーフロー
- [ ] すべてのユーザーゴールが達成可能
- [ ] エラーケースが処理される（空、無効、失敗）
- [ ] ナビゲーションが明確（ユーザーは常に現在地を知っている）

## チェックポイント2: コンポーネント構造
- [ ] 各コンポーネントに単一責任
- [ ] コンポーネントが3つ以上の無関係な関心事を処理しない
- [ ] 階層がビジュアルネストを反映している

## チェックポイント3: 状態設計
- [ ] 状態がコロケートされている（使用される場所に最も近い）
- [ ] 冗長な状態なし（派生値は計算され、保存されない）
- [ ] 読み込みとエラー状態を考慮している

## チェックポイント4: クラフト自己評価
- [ ] スワップテスト: タイプフェース/レイアウトをジェネリック代替品に置き換えると見た目が変わる
- [ ] スクイントテスト: 読まずに階層が認識可能 — コントラスト/スケールがそれを支える
- [ ] シグネチャーテスト: 3つ以上の特定の要素が「このPRODUCT」に固有に感じられる
- [ ] トークンテスト: CSSの可変名がジェネリックプロジェクトではなく、この製品の世界を思わせる

✅ 必須: 設計クリティークフレームワーク

既存のUIを評価するときに使用します — モックアップ、PR、またはリリース済み機能。5つすべてのディメンションを順番に実行します。

1. 第一印象（2秒）

• 最初に何が目を引くか？それはユーザーのゴールにとって正しい要素か？
• 目的はテキストを読まずに即座に明確か？

2. ユーザビリティ

• ユーザーは現在のフローで目標を達成できるか？
• インタラクティブ要素が明白か — ボタンが押せそうに見えて、リンクが区別できるか？
• インテント（意図）と結果の間に不要なステップがあるか？

3. ビジュアル階層

• 明確な読み順があるか？サイズ、ウェイト、コントラストがそれを導くか？
• 空白が意図的に使用されているか — 単なる残りのスペースではなく？

4. 一貫性

• 確立された設計システムに従っているか（スペーシングトークン、カラートークン、タイポグラフィスケール）？
• 同様の要素（同じアクションタイプ、同じデータタイプ）が同じように見え、同じように動作するか？

5. アクセシビリティ (完全な監査には a11y スキルを使用)

• カラーコントラスト ≥ 4.5:1（テキスト）、≥ 3:1（UI要素）
• タッチターゲット ≥ 44×44px
• すべてのインタラクティブ要素がキーボードで到達可能かつ操作可能

フィードバックルール: 具体的に（要素と理由を引用）。問題とともに代替案を提案。機能している部分を認識。

---

❌ 絶対に: ジェネリックなAIデフォルト

❌ 文脈が特性を求める場合のジェネリックフォント（Inter、Roboto、Arial、system-ui）
❌ 白上の紫/青グラデーション — 最も使い古されたAI美学
❌ 文脈固有の差別化なしで予測可能なカード-グリッド-ダッシュボードレイアウト
❌ このプロダクトが何を意味するかを定義せずに「シンプルでモダン」
❌ プロジェクト全体で同じ美学を繰り返す — ライト/ダークテーマ、タイプフェース、パレットを変更

「どの設計も同じであってはいけません。この文脈のために本当にデザインされた予期しない選択をしてください。」
「ここでは並外れた創作活動が可能です — 遠慮しないでください。」

❌ 絶対に: コードで設計する

# ❌ 間違い
「コンポーネントを作成して、進行中に図形を出します。」

# ✅ 正解
「美的方向性にコミットして、ユーザーフローをマップして、
コンポーネント階層を定義して、状態ニーズを特定してから実装します。」

---

規約

ビジュアルシステム: モジュール型タイプスケール（0.75rem → 3rem）、行の高さ（見出し 1.1–1.3、本文 1.5–1.7）、流動的な clamp()。スペーシング: 8pt グリッド（4px → 64px）。カラー: セマンティックトークン、WCAG比（4.5:1 テキスト、3:1 UI）。visual-design.mdを参照。

レスポンシブ: モバイルファースト、コンテンツドリブンブレークポイント。モバイルブラウザ互換性のための dvh。タッチターゲット最小44×44px。responsive-design.mdを参照。

モーション: transform/opacity で60fps。Reactでは複雑なシーケンスにはMotionライブラリを使用。タイミング: 100–150ms（フィードバック）、200–300ms（トグル）、300–500ms（モーダル）。prefers-reduced-motion をサポート。1つのよく調整されたページロード表示は、散在するマイクロインタラクションより多くの喜びを作ります。interaction-design.mdを参照。

---

デシジョンツリー

新しいページ/機能を設計している？
  → 美的方向性 → ユーザーフロー → コンポーネント階層 → 状態分析
  → ビジュアル設計 → レスポンシブ → モーション → 実装

美的方向性にコミットしている？
  → トーン（1つの極端を選択）、差別化、却下する3つのデフォルトを定義

ビジュアル設計を計画している？
  → references/visual-design.md を参照

レスポンシブ動作を計画している？
  → references/responsive-design.md を参照

インタラクション/アニメーションを追加している？
  → references/interaction-design.md を参照

UIパターンを選択する間に迷っている？
  → 下の例表またはreferences/design-thinking.md を参照

既存のUIを評価している？
  → 設計クリティークフレームワークを実行（5つのディメンション: 印象、ユーザビリティ、階層、一貫性、a11y）
  → 4つのクラフトチェックポイントを実行 → 深さ戦略が一貫しているか確認
  → 5つのインタラクティブ状態がすべてカバーされているか確認

アクセシビリティの懸念がある？
  → a11yスキルを使用; 計画用チェックポイント4; コントラスト比用visual-design.md

---

例

パターン	使用する場合	例
リスト → 詳細	コレクション閲覧	商品リスト → 商品ページ
ウィザード/ステップ	マルチステッププロセス	チェックアウト、オンボーディング
ダッシュボード	概要 + ドリルダウン	管理パネル、分析
マスター-詳細	インラインプレビュー付きリスト	メールクライアント、ファイルマネージャー
モーダル/ダイアログ	フォーカスされたアクション、確認	削除確認、クイック編集
タブ	関連コンテンツセクション	設定、プロフィールセクション
検索 + フィルター	大規模データセット	商品カタログ、ユーザーリスト
無限スクロール	コンテンツフィード	ソーシャルフィード、ニュース

---

エッジケース

レスポンシブ: モバイルファースト、その後拡張。

読み込み状態: すべての非同期操作には読み込み、成功、エラー、空の状態が必要。

空の状態: データがない場合に設計（初回使用、結果なし、フィルター後ゼロ）。

エラーリカバリー: 常に前へ進む方法を提供 — 決してデッドエンドにならない。

---

チェックリスト

• 美的方向性にコミット（ドメイン探索、カラーワールド、トーン、差別化、却下する3つのデフォルト）
• ユーザーフローがエントリー、ゴール、エッジケース付きでマップされている
• コンポーネント階層がビジュアル構造を反映
• 状態が識別され、適切にコロケート
• 4つすべての検証チェックポイントに合格（クラフト自己評価を含む）
• 深さ戦略が選択され、一貫して適用される
• インタラクティブ要素ごとに5つのインタラクティブ状態すべて定義
• 読み込み、エラー、空の状態が設計されている
• レスポンシブ動作が計画されている
• アクセシビリティの考慮が含まれている

---

リソース

• design-thinking.md — 設計プロセス、ワイヤーフレーミング、UIパターン比較、検証質問
• visual-design.md — タイポグラフィスケール、スペーシングシステム、カラーコントラスト、アイコノグラフィ、レイアウト基礎
• interaction-design.md — モーションタイミング、マイクロインタラクション、フィードバックパターン、ジェスチャーインタラクション、パフォーマンス最適化
• responsive-design.md — モバイルファースト戦略、ブレークポイント、コンテナクエリ、流動的なタイポグラフィ、タッチターゲット
• a11y — アクセシビリティパターンとARIA
• react — React実装パターン
• composition-pattern — コンポーネント構成API設計
• mui — Material UIコンポーネントライブラリ
• tailwindcss — ユーティリティファースト CSS実装