フロントエンドデザインシステム は何をしますか？
哲学: すべてのピクセルに意味がある。抑制は贅沢。ユーザーの心理が判断を導く。 核となる原則: 暗記するな、考えろ。決めつけるな、質問しろ。
🎯 選択的読み取りルール（必須）
必要なファイルは常に読み、オプションは必要なときだけ読むこと:
| ファイル | ステータス | いつ読むか |
|---|---|---|
| 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 = 常に読むこと。それ以外は関連がある場合のみ。
🔧 実行スクリプト
監査のために実行（読む必要はなく、実行するだけ）:
| スクリプト | 目的 | 使い方 |
|---|---|---|
scripts/ux_audit.py | UX心理学とアクセシビリティ監査 | python scripts/ux_audit.py <プロジェクトパス> |
⚠️ 重要: 決めつける前に質問する（必須）
止まれ！ユーザーのリクエストが漠然としている場合、自分のお気に入りにデフォルト設定してはいけません。
ユーザーのプロンプトが曖昧な場合、質問せよ:
色が指定されていない？ 質問せよ:
「どのカラーパレットをご希望ですか？（青/緑/オレンジ/ニュートラル/その他）」
スタイルが指定されていない？ 質問せよ:
「どんなスタイルを目指していますか？（ミニマル/大胆/レトロ/未来的/オーガニック）」
レイアウトが指定されていない？ 質問せよ:
「レイアウトのご希望はありますか？（シングルカラム/グリッド/非対称/フルワイド）」
⛔ 避けるべきデフォルト傾向（アンチセーフハーバー）:
| 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. 視覚効果の原則
グラスモーフィズム（適切な場合）
主要プロパティ:
├── 半透明の背景
├── 背景ぼかし
├── 輪郭を明確にするための微妙な境界線
└── ⚠️ **警告:** 標準的な青/白のグラスモーフィズムは現代の決まり文句です。ラジカルに使うか、まったく使わないかのどちらか。
シャドウの階層
浮き上がりの概念:
├── 高い要素ほど大きなシャドウ
├── Yオフセット > Xオフセット（上からの光）
├── 複数レイヤーでよりリアルに
└── ダークモード: 代わりにグローが必要な場合あり
グラデーションの使い方
調和のとれたグラデーション:
├── カラーホイール上の隣接色（類似色）
├── または同じ色相で明度を変える
├── 厳しい補色ペアは避ける
├── 🚫 **メッシュ/オーロラグラデーション禁止**（浮遊するブロブ）
└── プロジェクトごとにラジカルに変化させる
完全なエフェクトガイドについては: visual-effects.md
7. アニメーションの原則
タイミングの概念
持続時間の基準:
├── 距離（遠いほど長い）
├── サイズ（大きいほど遅い）
├── 重要度（重要＝明確）
└── コンテキスト（緊急＝速い、ラグジュアリー＝遅い）
イージングの選択
| 動作 | イージング | 理由 |
|---|---|---|
| 出現 | イーズアウト | 減速して落ち着く |
| 消失 | イーズイン | 加速して退出 |
| 強調 | イーズインアウト | スムーズで意図的 |
| 遊び心 | バウンス | 楽しく、エネルギッシュ |
パフォーマンス
- transformとopacityのみアニメーション
- 動きの軽減設定を尊重
- 低スペック端末でもテスト
アニメーションパターンについては: animation-guide.md、高度なものは: motion-graphics.md
8. 「ワウファクター」チェックリスト
プレミアム指標
- たっぷりとしたホワイトスペース（贅沢＝余裕）
- 微妙な奥行きと立体感
- スムーズで意図的なアニメーション
- 細部へのこだわり（整列、一貫性）
- まとまりのある視覚リズム
- カスタム要素（デフォルトだけではない）
信頼構築要素
- 適切な場所にセキュリティ表示
- 社会的証明 / 体験談
- 明確な価値提案
- プロフェッショナルな画像
- 一貫したデザイン言語
感情トリガー
- 意図した感情を呼び起こすヒーロー
- 人間的要素（顔、ストーリー）
- 進行度/達成度の表示
- 喜びの瞬間
9. アンチパターン（やってはいけないこと）
❌ 怠惰なデザイン指標
- 考慮なしのデフォルトシステムフォント
- マッチしないストック画像
- 不規則なスペーシング
- 競合する色が多すぎる
- 階層のないテキストの壁
- アクセシビリティを無視したコントラスト
❌ AI傾向パターン（避けるべき！）
- 毎回同じ色
- 暗い背景＋ネオンをデフォルトに
- すべてにパープル/バイオレット（パープル禁止 ✅）
- シンプルなランディングページにベントグリッド
- メッシュグラデーションとグロー効果
- 同じレイアウト構造 / Vercelのクローン
- ユーザーの好みを尋ねない
❌ ダークパターン（非倫理的）
- 隠れたコスト
- 偽の緊急性
- 強制アクション
- 欺瞞的なUI
- 確認の恥辱
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. デザイン → フロントエンドデザインの原則を読む ← ここ
2. コーディング → デザインを実装
3. 監査 → web-design-guidelines レビューを実行
4. 修正 → 監査で見つかった問題に対処
次のステップ: コーディング後、
web-design-guidelinesスキルを使用して、アクセシビリティ、フォーカス状態、アニメーション、パフォーマンス問題について実装を監査してください。
忘れるな: デザインは考えることであり、コピーすることではない。すべてのプロジェクトは、その独自のコンテキストとユーザーに基づいた新鮮な考慮に値する。モダンSaaSのセーフハーバーを避けよ！