フロントエンドデザインシステム は何をしますか？
哲学: すべてのピクセルに意味がある。抑制は贅沢。ユーザー心理が決定を導く。 核となる原則: 覚えるな、考えろ。仮定するな、質問しろ。
🎯 選択的読み取りルール（必須）
必須ファイルは常に読み、オプションファイルは必要なときだけ読む：
| ファイル | ステータス | いつ読むか |
|---|---|---|
| ux-psychology.md | 🔴 必須 | 常に最初に読む！ |
| color-system.md | ⚪ オプション | 色・パレットの決定時 |
| typography-system.md | ⚪ オプション | フォントの選択・組み合わせ時 |
| visual-effects.md | ⚪ オプション | グラスモーフィズム、シャドウ、グラデーション |
| animation-guide.md | ⚪ オプション | アニメーションが必要な時 |
| motion-graphics.md | ⚪ オプション | Lottie、GSAP、3D使用時 |
| decision-trees.md | ⚪ オプション | コンテキストテンプレート |
🔴 ux-psychology.md = 常に読む。それ以外は関連する場合のみ。
🔧 実行スクリプト
監査のために実行（読まずに実行するだけ）：
| スクリプト | 目的 | 使用方法 |
|---|---|---|
ux_audit バリデーター | UX心理学・アクセシビリティ監査 | call_tool_checklist |
⚠️ 重要：仮定する前に質問せよ（必須）
ストップ！ ユーザーのリクエストが曖昧な場合、自分の好みにデフォルト設定してはいけません。
ユーザープロンプトが曖昧な場合、質問せよ：
色が指定されていない？ 質問：
「どのカラーパレットをお好みですか？（青/緑/オレンジ/ニュートラル/その他？）」
スタイルが指定されていない？ 質問：
「どのようなスタイルを目指していますか？（ミニマル/大胆/レトロ/未来的/有機的？）」
レイアウトが指定されていない？ 質問：
「レイアウトのご希望はありますか？（シングルカラム/グリッド/非対称/フル幅？）」
⛔ 避けるべきデフォルト傾向（アンチセーフハーバー）：
| AIのデフォルト傾向 | なぜ悪いのか | 代わりに考えること |
|---|---|---|
| ベントグリッド（現代の決まり文句） | すべてのAIデザインで使われている | なぜこのコンテンツにグリッドが必要なのか？ |
| ヒーロー分割（左右） | 予測可能で退屈 | 巨大タイポグラフィや縦型ナラティブはどうか？ |
| メッシュ/オーロラグラデーション | 「新しい」怠惰な背景 | 大胆な色の組み合わせは？ |
| グラスモーフィズム | AIが「プレミアム」と考えるもの | しっかりとした高コントラストのフラットはどうか？ |
| 濃いシアン / フィンテックブルー | 紫色禁止からのセーフハーバー | なぜ赤、黒、またはネオングリーンにしないのか？ |
| 「オーケストレート / エンパワー」 | AI生成のコピーライティング | 人間ならどう表現するか？ |
| 暗い背景 + ネオングロー | 使い古された「AIルック」 | ブランドが実際に必要としているものは？ |
| すべてを丸くする | 汎用的/安全 | どこに鋭いブルータリズムのエッジを使えるか？ |
🔴 「あなたが選ぶ『安全な』構造は、一歩ごとに汎用テンプレートに近づきます。リスクを取りなさい。」
1. 制約分析（常に最初に）
デザイン作業の前に、これらに答えるかユーザーに質問せよ：
| 制約 | 質問 | なぜ重要か |
|---|---|---|
| 期間 | どのくらいの時間がありますか？ | 複雑さを決定する |
| コンテンツ | 準備済みですか、それともプレースホルダーですか？ | レイアウトの柔軟性に影響 |
| ブランド | 既存のガイドラインはありますか？ | 色やフォントを決定する可能性あり |
| 技術 | どのスタックですか？ | 機能に影響 |
| オーディエンス | 具体的に誰ですか？ | すべてのビジュアル決定を左右する |
オーディエンス → デザインアプローチ
| オーディエンス | 考慮すること |
|---|---|
| Z世代 | 大胆、高速、モバイルファースト、本物 |
| ミレニアル世代 | 清潔、ミニマル、価値観重視 |
| X世代 | 馴染み深い、信頼できる、明確 |
| 団塊の世代 | 読みやすい、高コントラスト、シンプル |
| B2B | プロフェッショナル、データ重視、信頼 |
| ラグジュアリー | 抑制された優雅さ、余白 |
2. UX心理学の原則
核となる法則（これらを内在化せよ）
| 法則 | 原則 | 適用 |
|---|---|---|
| ヒックの法則 | 選択肢が多いほど判断が遅くなる | 選択肢を制限し、段階的開示を使う |
| フィッツの法則 | 大きくて近いほどクリックしやすい | CTAを適切なサイズに |
| ミラーの法則 | 作業記憶には約7項目まで | コンテンツをグループにまとめる |
| フォン・レストルフ効果 | 異なるもの＝記憶に残る | CTAを視覚的に区別する |
| 系列位置効果 | 最初と最後が最も記憶される | 重要な情報は最初と最後に |
感情デザインのレベル
内臓的（瞬時）→ 第一印象：色、画像、全体的な雰囲気
行動的（使用）→ 使い勝手：速さ、フィードバック、効率
内省的（記憶）→ 使用後：「これを使っている自分をどう思うか」
信頼構築
- センシティブなアクションにはセキュリティ表示
- 関連する場合の社会的証明
- 明確な連絡先/サポートへのアクセス
- 一貫性のあるプロフェッショナルなデザイン
- 透明性のあるポリシー
3. レイアウトの原則
黄金比（φ = 1.618）
プロポーションの調和に使用：
├── コンテンツ：サイドバー＝およそ62%：38%
├── 各見出しサイズ＝前のサイズ × 1.618（劇的なスケールのために）
├── 間隔は以下に従う：sm → md → lg（それぞれ × 1.618）
8ポイントグリッドの概念
すべての間隔とサイズは8の倍数に：
├── タイト：4px（マイクロの半歩）
├── 小：8px
├── 中：16px
├── 大：24px、32px
├── XL：48px、64px、80px
└── コンテンツ密度に応じて調整
主要なサイズ設定の原則
| 要素 | 考慮事項 |
|---|---|
| タッチターゲット | 最小限の快適なタップサイズ |
| ボタン | 重要度の階層に基づく高さ |
| 入力フィールド | 位置合わせのためボタンの高さに合わせる |
| カード | 一貫したパディング、余裕のある空間 |
| 読み取り幅 | 45〜75文字が最適 |
4. 色の原則
60-30-10ルール
60% → プライマリ/背景（落ち着いたニュートラルベース）
30% → セカンダリ（サポートエリア）
10% → アクセント（CTA、ハイライト、注意）
色の心理学（意思決定のため）
| 必要なもの | 検討する色相 | 避けるもの |
|---|---|---|
| 信頼、落ち着き | 青系 | 攻撃的な赤 |
| 成長、自然 | 緑系 | 工業的なグレー |
| エネルギー、緊急性 | オレンジ、赤 | 受動的な青 |
| ラグジュアリー、創造性 | 濃いティール、ゴールド、エメラルド | 安っぽいビビッドカラー |
| 清潔、ミニマル | ニュートラル | 過剰な色 |
選択プロセス
- 業界は？（選択肢を絞る）
- 感情は？（プライマリを選ぶ）
- ライトモードかダークモードか？（基礎を決める）
- 指定がない場合はユーザーに質問
詳細な色彩理論については：color-system.md
5. タイポグラフィの原則
スケール選択
| コンテンツタイプ | スケール比 | 印象 |
|---|---|---|
| 高密度UI | 1.125-1.2 | コンパクト、効率的 |
| 一般的なWeb | 1.25 | バランスが良い（最も一般的） |
| エディトリアル | 1.333 | 読みやすい、余裕がある |
| ヒーロー/ディスプレイ | 1.5-1.618 | 劇的なインパクト |
組み合わせの概念
コントラスト＋調和：
├── 階層のために十分に**異なる**
├── まとまりのために十分に**似ている**
└── 通常：ディスプレイ＋ニュートラル、またはセリフ＋サンセリフ
可読性ルール
- 行長：45〜75文字が最適
- 行間：本文1.4〜1.6
- コントラスト：WCAG要件を確認
- サイズ：Webの本文は16px以上
詳細なタイポグラフィについては：typography-system.md
6. ビジュアルエフェクトの原則
グラスモーフィズム（適切な場合）
主要プロパティ：
├── 半透明の背景
├── 背景ブラー
├── 定義のための微妙なボーダー
└── ⚠️ **警告：** 標準的な青/白のグラスモーフィズムは現代の決まり文句です。革新的に使うか、まったく使わないかのどちらか。
シャドウの階層
高さの概念：
├── 高い要素ほど大きなシャドウ
├── XオフセットよりYオフセットが大きい（上からの光）
├── 複数のレイヤーでよりリアルに
└── ダークモード：グローで代用することも
グラデーションの使用
調和のとれたグラデーション：
├── カラーホイール上の隣接色（類似色）
├── または同じ色相で明るさを変える
├── 厳しい補色ペアは避ける
├── 🚫 **メッシュ/オーロラグラデーションは禁止**（浮遊ブロブ）
└── プロジェクトごとに根本的に変化させる
完全なエフェクトガイド：visual-effects.md
7. アニメーションの原則
タイミングの概念
持続時間は以下に基づく：
├── 距離（遠いほど長い）
├── サイズ（大きいほど遅い）
├── 重要度（重要なものは明確に）
└── コンテキスト（緊急＝速い、ラグジュアリー＝遅い）
イージングの選択
| アクション | イージング | 理由 |
|---|---|---|
| 進入 | イーズアウト | 減速、落ち着く |
| 退出 | イーズイン | 加速、退出 |
| 強調 | イーズインアウト | 滑らか、意図的 |
| 遊び心 | バウンス | 楽しい、エネルギッシュ |
パフォーマンス
- transformとopacityのみアニメーション
- reduced-motion設定を尊重
- 低スペックデバイスでテストする
アニメーションパターンについては：animation-guide.md、高度なものは：motion-graphics.md
8. 「Wowファクター」チェックリスト
プレミアム指標
- 十分な余白（ラグジュアリー＝呼吸の余地）
- 微妙な奥行きと立体感
- 滑らかで意図的なアニメーション
- 細部へのこだわり（配置、一貫性）
- まとまりのある視覚的リズム
- カスタム要素（すべてデフォルトではない）
信頼構築要素
- 適切な場所でのセキュリティ表示
- 社会的証明／お客様の声
- 明確な価値提案
- プロフェッショナルな画像
- 一貫したデザイン言語
感情トリガー
- 意図した感情を引き起こすヒーロー
- 人間的な要素（顔、ストーリー）
- 進捗/達成を示す指標
- 喜びの瞬間
9. アンチパターン（やってはいけないこと）
❌ 怠惰なデザインの兆候
- 考慮せずにデフォルトのシステムフォントを使用
- マッチしないストックイメージ
- 一貫性のない間隔
- 競合する色が多すぎる
- 階層のないテキストの壁
- アクセシブルでないコントラスト
❌ AIの傾向パターン（避ける！）
- 毎回同じ色を使う
- 暗い背景＋ネオンをデフォルトにする
- すべてに紫/バイオレット（紫色禁止✅）
- シンプルなランディングページにベントグリッド
- メッシュグラデーションとグロー効果
- 同じレイアウト構造 / Vercelのコピー
- ユーザーの好みを聞かない
❌ ダークパターン（非倫理的）
- 隠れたコスト
- 偽の緊急性
- 強制アクション
- 欺瞞的なUI
- 確信犯的恥辱（Confirmshaming）
10. 意思決定プロセスの概要
すべてのデザインタスクで：
1. 制約
└── 期間、ブランド、技術、オーディエンスは？
└── 不明な場合 → 質問
2. コンテンツ
└── どんなコンテンツがある？
└── 階層は？
3. スタイルの方向性
└── コンテキストに適切なものは？
└── 不明な場合 → 質問（デフォルトにしない！）
4. 実行
└── 上記の原則を適用
└── アンチパターンに照らして確認
5. レビュー
└── 「これはユーザーの役に立つか？」
└── 「これは自分のデフォルトと違うか？」
└── 「これに誇りを持てるか？」
参考ファイル
特定分野の詳細なガイダンスについては：
- color-system.md - 色彩理論と選択プロセス
- typography-system.md - フォントの組み合わせとスケール決定
- visual-effects.md - エフェクトの原則とテクニック
- animation-guide.md - モーションデザインの原則
- motion-graphics.md - 高度：Lottie、GSAP、SVG、3D、パーティクル
- decision-trees.md - コンテキスト固有のテンプレート
- ux-psychology.md - ユーザー心理学の深掘り
関連スキル
| スキル | いつ使用するか |
|---|---|
| frontend-design（これ） | コーディング前 - デザイン原則（色、タイポグラフィ、UX心理学）を学ぶ |
| web-design-guidelines | コーディング後 - アクセシビリティ、パフォーマンス、ベストプラクティスの監査 |
デザイン後のワークフロー
デザインを実装した後、監査を実行：
1. デザイン → frontend-designの原則を読む ← 現在地
2. コード → デザインを実装
3. 監査 → web-design-guidelinesレビューを実行
4. 修正 → 監査結果に対応
次のステップ： コーディング後、
web-design-guidelinesスキルを使用して、実装のアクセシビリティ、フォーカス状態、アニメーション、パフォーマンス問題を監査します。
覚えておいてください： デザインは考えることであり、コピーすることではありません。すべてのプロジェクトは、その独自のコンテキストとユーザーに基づいた新鮮な考慮に値します。モダンSaaSのセーフハーバーを避けましょう！