フロントエンドデザインシステム

哲学: すべてのピクセルに意味がある。抑制は贅沢である。ユーザーの心理がデザインを動かす。 中核原則: 暗記するな、考えろ。仮定するな、質問しろ。

🎯 選択的読み取りルール（必須）

必須ファイルは常に読み、オプションファイルは必要なときだけ読むこと:

ファイル	ステータス	読むタイミング
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心理学＆アクセシビリティ監査	ブラウザの開発ツールとLighthouseを使用

⚠️ 重要: 仮定する前に質問せよ（必須）

ストップ！ ユーザーのリクエストが自由形式の場合、自分の好みをデフォルトにしないこと。

ユーザーのプロンプトが曖昧な場合、質問せよ：

色が指定されていない場合: 質問:

「どのカラーパレットをご希望ですか？（青/緑/オレンジ/ニュートラル/その他？）」

スタイルが指定されていない場合: 質問:

「どのようなスタイルを目指していますか？（ミニマル/大胆/レトロ/未来的/オーガニック？）」

レイアウトが指定されていない場合: 質問:

「レイアウトのご希望はありますか？（1カラム/グリッド/非対称/フルワイド？）」

⛔ 避けるべきデフォルト傾向（アンチセーフハーバー）:

AIのデフォルト傾向	なぜ悪いのか	代わりに考えること
Bentoグリッド（現代の定番）	あらゆるAIデザインで使われる	なぜこのコンテンツにグリッドが必要なのか？
ヒーロー分割（左/右）	予測可能で退屈	巨大タイポグラフィや縦書きナラティブはどうか？
メッシュ/オーロラグラデーション	新しい「怠惰な背景」	大胆な色の組み合わせは何か？
グラスモーフィズム	AIが考える「プレミアム」	ソリッドでハイコントラストなフラットはどうか？
深いシアン / フィンテックブルー	パープル禁止からのセーフハーバー	レッド、ブラック、ネオングリーンはなぜダメなのか？
「Orchestrate / Empower」	AI生成のコピーライティング	人間はこれをどう言うだろう？
暗い背景＋ネオングロー	使い古された「AIルック」	ブランドは実際に何を必要としているのか？
すべて丸く	汎用的/安全	シャープでブルータリズムなエッジはどこで使えるか？

🔴 「あなたが選ぶ『安全な』構造は、一歩ごとにあなたを汎用テンプレートに近づける。リスクを取れ。」

1. 制約分析（常に最初に）

デザイン作業の前に、以下の質問に答えるか、ユーザーに質問せよ：

制約	質問	なぜ重要か
タイムライン	どれくらいの時間があるか？	複雑さを決定する
コンテンツ	準備済みかプレースホルダーか？	レイアウトの柔軟性に影響
ブランド	既存のガイドラインはあるか？	色/フォントを決定する可能性あり
技術	使用スタックは？	機能性に影響
オーディエンス	具体的に誰か？	すべてのビジュアル決定を動かす

オーディエンス → デザインアプローチ

オーディエンス	考慮すべきこと
Gen Z	大胆、速い、モバイルファースト、本物
ミレニアル世代	クリーン、ミニマル、価値志向
Gen 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の傾向パターン（避けよ！）

毎回同じ色
ダーク＋ネオンがデフォルト
すべてパープル/バイオレット（パープル禁止 ✅）
シンプルなランディングページにBentoグリッド
メッシュグラデーションとグローエフェクト
同じレイアウト構造 / 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 - ユーザー心理学の深掘り

デザイン後のワークフロー

デザインを実装した後、監査を実行:

1. デザイン → frontend-designの原則を読む ← ここ
2. コード  → デザインを実装
3. 監査    → web-design-guidelinesレビューを実行
4. 修正    → 監査結果に対処

次のステップ: コーディング後、web-design-guidelinesスキルを使用して、アクセシビリティ、フォーカス状態、アニメーション、パフォーマンス問題について実装を監査してください。

覚えておいてください: デザインは「考えること」であり、「コピーすること」ではありません。すべてのプロジェクトは、独自のコンテキストとユーザーに基づいた新鮮な考察に値します。モダンSaaSのセーフハーバーを避けよ！

スキル	使用タイミング
frontend-design（これ）	コーディング前 - デザイン原則（色、タイポグラフィ、UX心理学）を学ぶ
web-design-guidelines	コーディング後 - アクセシビリティ、パフォーマンス、ベストプラクティスを監査

お気に入りのAIに質問する

ドキュメント