フロントエンドデザインシステム
哲学: すべてのピクセルに意図がある。抑制は贅沢である。ユーザー心理学が判断を導く。 核となる原則: 覚えるな、考えろ。決めつけるな、質問しろ。
🎯 選択的読み取りルール（必須）
必須ファイルは常に読み、オプションファイルは必要なときだけ読むこと:
| ファイル | ステータス | いつ読むか |
|---|---|---|
| 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 <project_path> |
⚠️ 重要：決めつける前に質問する（必須）
止まれ！ ユーザーのリクエストが未確定の場合、自分の好みにデフォルト設定してはいけません。
ユーザーのプロンプトが曖昧な場合、質問せよ：
色が指定されていない？ 質問する：
「どのカラーパレットをご希望ですか？（青/緑/オレンジ/ニュートラル/その他？）」
スタイルが指定されていない？ 質問する：
「どのようなスタイルを目指していますか？（ミニマル/大胆/レトロ/未来的/有機的？）」
レイアウトが指定されていない？ 質問する：
「レイアウトのご希望はありますか？（シングルカラム/グリッド/非対称/フルワイド？）」
⛔ 避けるべきデフォルト傾向（アンチセーフハーバー）：
| AIのデフォルト傾向 | なぜ悪いか | 代わりに考えること |
|---|---|---|
| ベントグリッド（流行りの代名詞） | あらゆるAIデザインで使われている | なぜこのコンテンツにグリッドが必要なのか？ |
| ヒーロー分割（左右） | 予測可能で退屈 | 巨大タイポグラフィや縦型ナラティブはどうか？ |
| メッシュ/オーロラグラデーション | 新しい「手抜き」背景 | 大胆な色の組み合わせは？ |
| グラスモーフィズム | AIの考える「プレミアム」 | ソリッドで高コントラストのフラットはどうか？ |
| 深いシアン/フィンテックブルー | パープル禁止からのセーフハーバー | なぜ赤、黒、ネオングリーンにしないのか？ |
| 「Orchestrate / Empower」 | 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. 「ワウファクター」チェックリスト
プレミアム指標
- 十分な余白（贅沢＝呼吸するスペース）
- 微妙な奥行きと立体感
- スムーズで意図的なアニメーション
- 細部へのこだわり（整列、一貫性）
- 統一感のある視覚的リズム
- カスタム要素（デフォルトに頼らない）
信頼構築
- 適切な場所にセキュリティの手がかり
- 社会的証明／お客様の声
- 明確な価値提案
- プロフェッショナルな画像
- 一貫したデザイン言語
感情トリガー
- 意図した感情を呼び起こすヒーロー
- 人間的な要素（顔、ストーリー）
- 進捗／達成の表示
- 喜びの瞬間
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. デザイン → frontend-designの原則を読む ← 今ここ
2. コーディング → デザインを実装
3. 監査 → web-design-guidelinesのレビューを実行
4. 修正 → 監査結果に対処
次のステップ： コーディング後、
web-design-guidelinesスキルを使って、アクセシビリティ、フォーカス状態、アニメーション、パフォーマンスの問題について実装を監査してください。
忘れるな： デザインは考えることであり、コピーすることではない。すべてのプロジェクトは、その独自のコンテキストとユーザーに基づいた、新鮮な考察に値する。モダンなSaaSのセーフハーバーを避けよ！