elite-design-core

エリートデザインコア

プレミアムで、数々の賞に輝くウェブ体験を生み出すための基盤です。

クイックリファレンス

トピック	参照ファイル
視覚的な階層	visual-hierarchy.md
余白のシステム	spacing-systems.md
タイポグラフィ	typography.md
色彩理論	color-theory.md
デザイントークン	design-tokens.md
データビジュアライゼーション	data-visualization.md

関連スキル

• elite-gsap - 複雑なアニメーション、ScrollTrigger、SplitText
• elite-css-animations - CSS ネイティブのスクロール駆動型アニメーション
• elite-layouts - Bento グリッド、横スクロール、スティッキーセクション
• elite-performance - ビルド設定、60fps の最適化
• elite-accessibility - prefers-reduced-motion、WCAG 準拠
• elite-inspiration - 厳選された Awwwards/FWA の参考例
• elite-brand-design - ブランドアイデンティティ、個性、ビジュアルシステム

実世界のアーキタイプ

5 つの実運用アーキタイプを通して、デザイン上の判断が業界やオーディエンスにどう結び付くかを示します。

アーキタイプ	書体の組み合わせ	カラーパレット	美的表現
デジタルスタジオ	Space Grotesk + Inter	チャコール + コーラル／ライム	モダン、大胆、幾何学的
高級フレグランスの E コマース	Cormorant Garamond + Poppins	インク + アラビアンゴールド	洗練、エディトリアル、感覚的
メンタルヘルスクリニック	Fraunces + Inter	クリーム地にプラム／セージ／ラベンダー	温かく、包摂的で、柔らかい
刑事弁護事務所	Gelasio + Inter	ネイビー／ミッドナイト + ゴールド	権威ある、シャープ、エディトリアル
地域薬局	DM Serif Display + DM Sans	プロフェッショナルなトーン	信頼でき、親しみやすい

これらのアーキタイプは、参照ファイル全体で実運用例として登場します。詳しい実装については、typography.md、color-theory.md、design-tokens.md をご覧ください。

---

「エリート」デザインを実現する要素

エリートなウェブデザインには、次のような特徴があります。

1. 過剰さより節度

すべての要素に存在する理由を持たせます。壊れるまで取り除き、壊れたら 1 つだけ戻します。

2. 意図のある動き

アニメーションは注意を導き、状態を伝えるためのものであり、装飾ではありません。アニメーションごとに、「ユーザーの理解にどう役立つか？」に答えられるようにします。

3. 余白への自信

空白もデザイン要素です。プレミアムブランドは、より多くの余白を使います。余白は品質を示し、コンテンツにゆとりを与えます。

4. 構造としてのタイポグラフィ

文字は、色や画像に先んじて視覚的な階層をつくります。見出しは注目を集め、本文は控えめにすることで、明確な情報アーキテクチャを形成します。

5. システム思考

デザイン上の判断は、システム（余白のスケール、文字のスケール、カラー トークン）に沿って行います。一貫性が積み重なり、品質の印象を高めます。

6. 機能としてのパフォーマンス

60fps のアニメーション、高速な読み込み、スムーズなインタラクションは、技術面で後から考えることではなく、デザイン要件です。

7. 最初からアクセシブルに

モーションを抑えた代替表現、適切なコントラスト、キーボード操作。アクセシビリティは、適切に実現されていれば意識されません。

---

デザインプロセス

フェーズ 1：ビジョンの把握

コードを書く前に、ビジョンを理解します。

Questions to ask:
- What feeling should this site evoke? (Bold? Calm? Playful? Premium?)
- Who is the target audience? (Age, tech-savviness, context of use)
- What references or inspiration exist? (Competitor sites, mood boards)
- What is the content structure? (How much content, what types)
- What actions should users take? (Primary CTA, secondary actions)

フェーズ 2：デザインシステムの設定

構築を始める前にトークンを設定します。

/* Spacing Scale (8px base) */
--space-1: 0.25rem; /* 4px - tight */
--space-2: 0.5rem; /* 8px - default small */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px - default medium */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px - default large */
--space-12: 3rem; /* 48px - section padding small */
--space-16: 4rem; /* 64px - section padding medium */
--space-24: 6rem; /* 96px - section padding large */
--space-32: 8rem; /* 128px - hero spacing */

/* Type Scale (1.25 ratio) */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 49px */
--text-5xl: 3.815rem; /* 61px */

/* Color Tokens - Define semantic colors */
--color-text-primary: ...;
--color-text-secondary: ...;
--color-text-muted: ...;
--color-bg-primary: ...;
--color-bg-secondary: ...;
--color-accent: ...;

詳しくは、spacing-systems.md と typography.md をご覧ください。

フェーズ 3：レイアウトアーキテクチャ

プロジェクトの種類に応じてレイアウトパターンを選択します。

プロジェクトの種類	推奨レイアウト
マーケティング／ランディングページ	Bento グリッド、固定表示のリビール、画面幅いっぱいのヒーロー
ポートフォリオ／クリエイティブ	横スクロール、全画面セクション、非対称レイアウト
プロダクト／E コマース	グリッドシステム、固定表示のプロダクトビュー、スムーズなフィルター
エージェンシー／スタジオ	実験的なレイアウト、ページ遷移、大胆なタイポグラフィ

実装パターンについては、elite-layouts スキルを参照してください。

フェーズ 4：アニメーション戦略

アニメーションのアプローチを決定します。

次の場合は CSS Scroll-Driven Animations を使用します。

• シンプルなパララックス効果やリビール効果
• 進捗インジケーター
• パフォーマンスが重要
• Safari のサポートが不要（またはポリフィルで対応可能）

次の場合は GSAP ScrollTrigger を使用します。

• 複数要素を使った複雑なシーケンス
• ピン留め／固定表示の動作
• 横スクロール
• クロスブラウザーの一貫性が重要
• きめ細かな制御が必要

elite-gsap または elite-css-animations スキルを参照してください。

フェーズ 5：実装

最良の結果を得るための構築順序：

1. まず構造 - セマンティック HTML、スタイル設定なし
2. タイポグラフィ - 文字サイズのスケールと階層を適用
3. 余白 - 余白のスケールを一貫して適用
4. 色 - カラートークンを追加
5. レイアウト - グリッド構造とレスポンシブ動作
6. アニメーション - 静的デザインが機能してから動きを追加
7. 仕上げ - マイクロインタラクション、ホバー状態

フェーズ 6：仕上げと最適化

最終チェックリスト：

• デザインシステムのトークンが全体で一貫している
• 各ビューポートで視覚的階層が明確
• アニメーションが目的に沿っている（注意を導く、状態を示す）
• prefers-reduced-motion に対応している
• 色のコントラストが WCAG AA（テキストで 4.5:1）を満たしている
• 60fps のアニメーションを確認済み
• Core Web Vitals が予算内

---

判断フレームワーク

アニメーションアプローチの選び方

Is it a simple reveal or parallax effect?
├── Yes → Can you use CSS-only?
│         ├── Yes → Use CSS Scroll-Driven Animations
│         └── No (Safari support needed) → Use GSAP ScrollTrigger
└── No → Is it a complex sequence or pinned section?
         ├── Yes → Use GSAP ScrollTrigger
         └── No → Is it a state change or micro-interaction?
                  ├── Yes → Use CSS transitions
                  └── No → Use GSAP for orchestration

レイアウトパターンの選び方

What's the content density?
├── High (many items to show) → Bento grid or masonry
├── Medium (curated selection) → Asymmetric grid or cards
└── Low (focused narrative) → Full-page sections or horizontal scroll

What's the user journey?
├── Exploratory (browse, discover) → Grid layouts, filters
├── Linear (story, presentation) → Horizontal scroll, sticky reveals
└── Task-oriented (convert, purchase) → Clear hierarchy, prominent CTAs

---

プロジェクトの種類別クイックスタート

マーケティング／ランディングページ

主なパターン：

• スクロールでリビールする、画面幅いっぱいのヒーロー
• 特徴を紹介する Bento グリッド
• プロダクト紹介用の固定セクション
• 段階的にカードを表示するソーシャルプルーフ

読み込むスキル： elite-layouts、elite-gsap、elite-accessibility

デザインの重点：

• 強い視覚的階層（明確な CTA を 1 つ）
• プロダクトを引き立てる余白
• コンバージョンへ導く動き

ポートフォリオ／クリエイティブ

主なパターン：

• 横スクロールのギャラリー
• プロジェクトごとの全画面セクション
• テキストアニメーション（SplitText によるリビール）
• プロジェクト間のページ遷移

読み込むスキル： elite-gsap、elite-layouts、elite-inspiration

デザインの重点：

• 作品を主役にする（UI は最小限に）
• 独自のナビゲーションパターン
• 印象に残るインタラクション

プロダクトコンフィギュレーター

主なパターン：

• 固定表示のプロダクトビュー
• スムーズな状態遷移（Flip プラグイン）
• オプション選択用のインタラクティブな Bento
• リアルタイムの視覚的フィードバック

読み込むスキル： elite-gsap（Flip プラグイン）、elite-layouts

デザインの重点：

• オプションの状態を明確にする
• あらゆる入力に応答する
• 操作中のパフォーマンス

エージェンシー／スタジオのウェブサイト

主なパターン：

• 実験的なナビゲーション
• ページ遷移（Barba.js を使用）
• 大胆なタイポグラフィアニメーション
• 横スクロールと縦スクロールの組み合わせ

読み込むスキル： elite-gsap、elite-layouts、elite-inspiration

デザインの重点：

• 技術と能力を見せる
• 意図を持って限界を押し広げる
• 実験性と使いやすさのバランスを取る

---

よくある落とし穴

1. 目的のないアニメーション

すべてのアニメーションについて、「これによってユーザーの理解にどう役立つのか？」に答えられる必要があります。答えられない場合は削除してください。

2. 一貫性のない余白

余白のスケールを使いましょう。ピクセル値を無作為に指定すると、視覚的なノイズが生まれます。システムに従ってください。

3. 焦点を当てるポイントが多すぎる

画面ごとに主要なアクションは 1 つにします。CTA が競合すると、コンバージョン率が下がります。

4. パフォーマンスの軽視

実機でテストしてください。MacBook Pro で 60fps でも、低価格帯の Android で 60fps とは限りません。

5. 動きの軽減設定を忘れる

prefers-reduced-motion に対応した代替手段を必ず用意してください。これは任意ではありません。

6. デザインを作り込みすぎる

優れたデザインは、巧妙さではなく、必然性を感じさせます。破綻するまでシンプルにし、そこから要素を一つだけ戻してください。

7. システムを後回しにする

まずデザイントークンを定めてください。システムなしで構築すると、不整合が積み重なっていきます。

---

リソース

デザイン原則の詳細

• visual-hierarchy.md - スケール、ウェイト、コントラスト、グルーピング
• spacing-systems.md - 8px グリッド、間隔の関係性
• typography.md - 文字サイズのスケール、可変文字サイズ、フォントの組み合わせ
• color-theory.md - トークン、コントラスト、ダークモード

外部リソース

• Awwwards - 受賞サイトのデザイン参考例
• Typescale - 文字サイズのスケールを計算できるインタラクティブツール
• Realtime Colors - カラーパレットの視覚化