PRO フロントエンドデザインスキル (2026)

プレミアムなビジュアルデザイン、モーションシステム、アニメーションアーキテクチャ、AI時代のUX哲学を組み合わせた、特徴的でシネマティック、本番環境対応のフロントエンドです。

前提条件 — デザインMCPサーバーの自動復元

デザイン作業を始める前に、これを最初に実行してください:

bash .claude/scripts/mcp-profile.sh design

これで復元されます: gemini、stitch、21st-dev-magic、animate-ui、reactbits（削除されている場合はバックアップから）。その後、/mcpで再接続します。

復元後の利用可能なデザインツール:

• Stitch: mcp__stitch__generate_screen_from_text — 説明からモックアップをコード化
• 21st.dev: mcp__21st-dev-magic__21st_magic_component_builder — プレミアムReactコンポーネント
• React Bits: mcp__reactbits__search_components — 135以上のアニメーションコンポーネント
• Animate UI: mcp__animate-ui__search_items_in_registries — アニメーション付きshadcn/ui
• Gemini: mcp__gemini__gemini-generate-image — ヒーロー画像、モックアップ
• PinchTab: bash .claude/scripts/mcp-profile.sh +pinchtabで有効化してウェブブラウジング

---

フェーズ1: デザイン思考

コーディング前に創意的な方向性を確立します。

1A. コンテキストと意図

• 目的: 解決する問題、サービスするユーザー
• 感情的ゴール: 伝わる感情（信頼感、興奮、安心感、喜び）
• ブランド層: コンシューマー / SaaS / エンタープライズ / ラグジュアリー

1B. デザイン調査とインスピレーション

方向性を確定する前に、既存の実装を調査します:

リソース	用途	URL
Pageflows	実際のアプリのユーザーフロー、オンボーディング、チェックアウト、設定	pageflows.com
Dribbble	ビジュアルデザインのインスピレーション、モーションデザイン、UIパターン	dribbble.com
LottieFiles	再利用可能なJSONアニメーション（ローディング、トランジション、アイコン）	lottiefiles.com
Awwwards	受賞歴のあるウェブデザイン、インタラクションデザイン	awwwards.com
Mobbin	モバイルアプリのデザインパターン、実際のスクリーンショット	mobbin.com

ワークフロー: リファレンスを参照 → 意図に合う2〜3つをスクリーンショット/ブックマーク → パターンを抽出（間隔、色、モーション） → フェーズ2〜4に反映

アニメーションアセットについては、GIFやビデオよりlottie-reactまたは@lottiefiles/react-lottie-playerでインポートできる軽量でスケーラブルなLottie JSONを優先します。

1C. 美的方向性にコミットする

1つの強い意図的な方向を選び、正確に実行します。例:

方向性	キャラクター
ネオ・ミニマリスト	寛大な余白、温かいニュートラル、微妙な奥行き、抑制されたモーション
シネマティックSaaS	ダークUI、ガラス層、グラデーション光、スクロールストーリーテリング
エディトリアル	強いタイポグラフィ、非対称性、大胆なコントラスト、静的なエネルギー
オーガニック/ナチュラル	ソフトなパレット、触覚的なテクスチャ、流動的な形、温かい照明
ブルータリズム	生の構造、高いコントラスト、意図的な不完全さ
レトロ・フューチャリスティック	スキャンライン、モノスペース、ネオンアクセント、コントロールされたノスタルジア

避けるべき: 汎用の紫グラデーション、暗い背景のシアン/ティール、Inter/Roboto/Arial、ありきたりなレイアウト、予測可能なパターン。温かく、特徴的なパレットを選びます。references/anti-vibe-code.mdで完全なアンチパターンライブラリを参照してください。

1C. 忘れられない1つのもの

誰かが覚えているであろう1つの要素を特定します。デザインをそれを中心に配置します。

---

フェーズ2: ビジュアル構成システム

タイポグラフィ

表現的なフォントペアリング。タイポグラフィをデザインツールとして使用。ウェイト/サイズ/間隔を混ぜます。ヒーローセクションでのアニメーション型を検討します。

色とテーマ

支配的なパレット（最大2〜3色）+ 1つのアクセント。完全にコミットします。CSSカスタムプロパティを使用します。

空間構成

非対称性、オーバーラップ、対角線フロー。密度と余白を交互に配置。z-indexをレイヤー化して奥行きを作成します。

背景と雰囲気

単色は禁止。グラデーションメッシュ、ノイズ、ガラスモーフィズム、パーティクル、または3D背景を使用します。

シャドウと照明

シャドウぼかし = Y オフセットの2〜3倍。柔軟で方向性があり、リアルです。

---

フェーズ3: モーションシステム設計

コードを生成する前に、アニメーションをシーンに分解します。品質はモデル機能ではなく計画から来ます。

3A. アニメーション決定フレームワーク（Emil Kowalski）

アニメーションを書く前に、順序立てて答えます:

アニメートすべきか? → 使用頻度に基づいて:

• 100+/日（キーボード、コマンドパレット）: アニメーションなし。決して。
• 十数/日（ホバー、リストナビゲーション）: 削除または大幅に削減
• 時々（モーダル、ドロワー）: 標準アニメーション
• レア（オンボーディング、セレブレーション）: デライトを追加できます

目的は何か? 空間的一貫性、状態表示、フィードバック、ぎくしゃくした変化の防止。「見た目が良い」が唯一の理由なら → アニメートしません。

イージングは? 開始/終了 → ease-out。画面上で移動 → ease-in-out。ホバー/色 → ease。定常 → linear。UIではease-inを絶対に使用しないでください（重要な最初の瞬間に遅いように感じます）。カスタム曲線を使用します — 組み込みCSSイージングは弱すぎます:

--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* iOSドロワー */

どのくらい速い? ボタン: 100–160ms。ツールチップ: 125–200ms。ドロップダウン: 150–250ms。モーダル: 200–500ms。UI は300ms以下。 非対称: 押す遅い（ホールド・トゥ・デリートで2秒linear）、リリース速い（200ms ease-out）。

フレームワーク全体とコード例: references/emil-design-eng.md

3B. モーション目標

• 注意を導く
• 状態を伝える
• ブランドを強化
• 認知負荷を減らす

3C. モーションレイヤー（SaaS標準）

レイヤー	タイプ	例
アンビエント	背景雰囲気	グラデーション漂流、微妙なパーティクル
構造	セクションレベル	スクロール遷移、ヒーロー変形
機能	UI フィードバック	ホバー状態、ボタン応答、フォームフィードバック
ナラティブ	ストーリーテリング	機能の表示、製品デモシーケンス

3D. シーンベースのアニメーション計画

重要なアニメーションについて、各シーンを定義します:

シーン N:
- duration: Xs
- camera/framing: [ズーム / ワイド / クローズアップ / パニング]
- UI状態: [何が見えるか、レイアウト]
- action: [何が動くか、どのように]
- transition: [フェード / スライド / スケール / モーフ]
- effects: [イージングタイプ、スタッガー、パラレックス、ぼかし、奥行き]
- triggers: [オンロード / スクロール / ホバー / クリック / 遅延]

プレミアムなモーションキーワード（プロンプト/コードで使用）:

• cinematic easing → cubic-bezier(0.16, 1, 0.3, 1)
• stagger reveal → 連続遅延（要素あたり0.05–0.15秒）
• layered parallax → マルチスピードスクロールレイヤー
• elastic micro-interaction → ホバー/タップのスプリング物理
• glass morph transition → ぼかし + 不透明度モーフ
• depth fade → 不透明度 + スケール + ぼかし結合
• perspective zoom → CSS perspective + translateZ
• progressive reveal → コンテンツがぼかし/オフセットから開始

3E. コンテンツタイプ別モーションペーシング

瞬間	スピード	フィール
ヒーロー導入	遅い（2–4秒）	シネマティック
機能表示	中程度（0.6–1秒）	明確
マイクロインタラクション	速い（0.15–0.3秒）	キビキビ
CTA フィードバック	インスタント（<0.1秒）	レスポンシブ
スクロールストーリーテリング	スクロール相対	コントロール

3F. モーション階層ルール

• 重要な要素: 最初に移動し、さらに遠く移動
• 二次要素: 後で続き、より小さいモーション
• これにより、追加マークアップなしで自然なビジュアル階層が作成されます

---

フェーズ4: 実装

テクノロジー選択

ニーズ	ツール
React コンポーネントモーション	Framer Motion（宣言型、状態結合）
タイムライン / スクロールストーリーテリング	GSAP + ScrollTrigger
3D 環境	Three.js / React Three Fiber
スムーズスクロール物理	Lenis
インタラクティブデザインプロトタイプ	HTML/CSS/JS

HTMLアーティファクト: CSS のみのアニメーション推奨; スクロール トリガーはJS。 React アーティファクト: Framer Motion + Tailwind ユーティリティクラス。

GSAP ScrollTrigger + 3D CSSパターン

イマーシブな3Dアニメーションランディングページの場合:

// セクションをピンし、スクロール時に3D要素をアニメート
gsap.to(".hero-3d", {
  scrollTrigger: {
    trigger: ".hero-section",
    start: "top top",
    end: "+=200%",
    pin: true,
    scrub: 1,
  },
  rotateY: 360,
  z: 200,
  ease: "none",
});

// パラレックス奥行きレイヤー
gsap.utils.toArray(".depth-layer").forEach((layer, i) => {
  gsap.to(layer, {
    scrollTrigger: { trigger: layer, scrub: true },
    y: -(i + 1) * 100,
    ease: "none",
  });
});

/* 3D パースペクティブコンテナ */
.scene-3d {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.scene-3d > * {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* スクロール駆動3Dカードチルト */
.card-3d {
  transform: rotateX(calc(var(--scroll) * 15deg)) rotateY(calc(var(--scroll) * -10deg));
  transition: transform 0.1s ease-out;
}

パフォーマンスルール:

• will-change: transformはアクティブにアニメーション中の要素にのみ使用
• top/left/widthではなくtransform + opacity（GPU合成）を優先
• scrub: true（インスタント）ではなくscrub: 1（1秒遅延）で、よりスムーズなフィール
• モバイルでテスト — perspectiveは低スペックGPUで高額
• Framer Motion のx/y/scale短縮形はハードウェア加速されない — メインスレッドでrequestAnimationFrameを使用。GPU合成用にanimate={{ transform: "translateX(100px)" }}を使用
• 負荷下ではCSS アニメーションがJS を上回る（メインスレッド外）。所定のAniメーション用にCSS、動的/割り込み可能なものはJS を使用
• Web Animations API（WAAPI）をライブラリなしで、プログラムによるCSS パフォーマンスアニメーション用に使用
• CSSカスタム変数を親で変更すると、すべての子でスタイル再計算がトリガーされます — 代わりにtransformを直接更新

コード品質基準

• すべてのデザイントークンにCSSカスタムプロパティ
• セマンティックHTML
• 意味のある命名
• アクセスできるモーション（prefers-reduced-motion）
• GPU加速プロパティのみ: transform、opacity

プレミアムUIパターン

ガラスモーフィズム:

background: rgba(255,255,255,0.08);
backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255,255,255,0.12);

スタッガー表示（CSS）:

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.08s; }
/* など */

シネマティックイージング:

transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);

プレミアムグラデーション背景:

background: radial-gradient(ellipse at 20% 50%, #1a1a2e 0%, transparent 60%),
            radial-gradient(ellipse at 80% 20%, #16213e 0%, transparent 60%),
            #0a0a0f;

---

フェーズ5: 特定のコンポーネントレシピ

詳細な実装パターンについては、適切なリファレンスを参照してください:

• references/hero-sections.md → ヒーローセクションの公式、スクロールストーリーテリング、シネマティック導入
• references/motion-patterns.md → 完全なアニメーションパターンライブラリ（コード付き）
• references/saas-components.md → 機能グリッド、価格表、推薦文、ナビゲーション
• references/premium-effects.md → ガラスモーフィズム、グラデーション、シャドウ、3D CSS、パーティクルシステム
• references/battle-tested-patterns.md → 本番検証パターン: 6層モーション階層、スプリング物理、クリップパス表示
• references/ginyboi-motion-patterns.md → 183個のモーションデザインパターン（CSS/Framer Motion/GSAP実装）
• references/anti-vibe-code.md → 500のバイブコード用サイトからのアンチパターン、出荷前チェックリスト、プレミアム基準
• references/particle-systems.md → tsParticles セットアップ、5個の既成設定、パフォーマンスルール、アンチパターン
• references/emil-design-eng.md → Emil Kowalskiのアニメーション決定フレームワーク、カスタムイージング曲線、スプリング設定、クリップパステクニック、WAAPI、@starting-style、レビュー形式、Sonner原則

---

アンチバイブコードガードレール

500のバイブコード化されたウェブサイトの分析に基づいています。フロントエンド作業を完了と宣言する前にこのチェックを実行してください。

自動失格者（どれか1つ = 出荷前に修正）:

• ブランド正当性のない紫/ネオングラデーション
• キラキラ絵文字またはUIエレメントとしての絵文字
• 汎用のタグライン（「Build your dreams」、「Launch faster」）
• 架空の推薦文またはプレースホルダーコンテンツ
• 非機能的なインタラクティブ要素（デッドリンク、壊れたトグル）
• 混合ボーダー半径または一貫性のない間隔

プレミアム出力に必須:

• 4ptまたは8pt間隔システムをすべてに適用
• 定義された型ランプ付きの1つのフォントペア
• すべての非同期アクション用のロード状態
• 完全なメタタグ（title、description、OG image、favicon）
• 320px、375px、768px、1024pxでモバイルテスト

完全なアンチパターンライブラリ: references/anti-vibe-code.md

---

2026デザイン哲学

プレミアム = 派手さではなく、抑制と完成度です。遅いモーション。マイクロディテール。目的のある3D。温かいミニマリズム。パフォーマンス = 美学。

メンタルモデル: 感情 → ナラティブ → システム → モーション → パフォーマンス → 適応性

---

ステップ-1: デザイントークン抽出（Dembrandt）

ユーザーがリファレンスURLを提供するとき、モックアップを生成する前にデザイントークンを抽出します。

フロー

1. 実行: kit extract-design-tokens.sh "<URL>"
2. 抽出されたトークン（色、フォント、間隔）をユーザーと確認
3. トークン概要をステップ0プロンプトに入力（パレット + タイポグラフィガイダンス）
4. 完全なトークンJSONをステップ1〜4に設計制約として渡す

トークン情報モックアッププロンプト（ステップ0）

Geminiイメージプロンプトに含めます:

リファレンスからこれらの色を使用: プライマリ {hex}、アクセント {hex}、背景 {hex}。 タイポグラフィ: 見出しは{display_font}、本文は{body_font}。

統合

ステップ	トークン使用法
0（モックアップ）	色 + フォントはビジュアル方向をガイド
1（簡単）	完全なトークンJSONを設計制約として
2（コード）	正確なトークン値から生成されたCSSカスタム変数
3（レビュー）	CSS参照がトークン定義と一致することを検証
4（Opus）	最終チェック: すべての値がトークンから発信

トークンはドメインごとにキャッシュされます（24時間TTL）.claude/.design-tokens-cache/。 再抽出には--forceを使用します。リファレンスURLが提供されていない場合はこのステップをスキップします。

---

Figma Make — 編集可能なモーショングラフィックス

編集可能性がAIビデオ生成速度よりも重要なアニメーション説明の場合:

Figma MakeがAIビデオ生成より優れている理由: AIビデオツール（Sora、Runway）は編集不可能な出力を生成します — 1語変更するにはビデオ全体を再生成する必要があります。Figma Makeはコードベースのモーショングラフィックスを生成し、完全に編集可能なままです。

ワークフロー

1. プロンプト + リファレンス画像 → Figma Make は編集可能なモーショングラフィックスを生成
2. レビューと微調整 — タイミング、色、テキストをデザインで直接調整
3. エクスポート — ビデオ、GIF、またはウェブ埋め込み用Lottie JSONとして

キットとの統合

Figma Make（編集可能モーション） → フレーム/Lottieをエクスポート → Remotion（オーディオ+トランジション作成） → MP4

mcp__claude_ai_Figma__get_design_contextを使用してFigmaデザインをコードに取り込みます。特にモーショングラフィックスについては、Figma Makeは純粋なAIビデオ生成が犠牲にする編集可能性を維持します。

決定: 説明、チュートリアル、製品デモにはFigma Makeを使用。編集可能性が不要なシネマティック/リアルな映像にはAIビデオ生成（Gemini/LTX-2）を使用します。

---

実行パイプライン（Opus最優先）

デフォルト:

1. デザイン思考（フェーズ1〜4）
2. ワーカーがコードを生成
3. Opusが統合

オプションのMCPツール（価値を追加するときに使用）:

• gemini-generate-image — 4Kモックアップ（〜$0.01）
• openai_chat — コード品質（$1.75/$14/百万）
• chat_completion — UXの理由付け（$0.14/$0.42/百万）

使用時: ユーザーが見た目プレビューを望むとき、第二意見が役立つとき、設計が複雑な場合。

いつモックアップを最初に生成するか

mcp__gemini__gemini-generate-image（4K、16:9）を使用する場合:

• 参照のない完全に新しいデザインを構築している
• ユーザーが明確な美的方向性を指定していない
• ユーザーが明示的にプレビューをリクエストしている

モックアップをスキップする場合:

• ユーザーにリファレンスURLまたは既存デザインがある
• ユーザーは見た目プレビューより速度を望む
• 既存ページで反復している

クイックスタートパターン

パターン	アプローチ
静的ランディングページ	フェーズ1〜4デザイン思考、ワーカーはコード生成、Opusが統合
アニメーション製品デモ	最初にシーンを計画（フェーズ3C）、レイヤーごとに実装
Reactコンポーネント	Framer Motion + Tailwind + ユニークなビジュアルアイデンティティ
スクロールストーリーテリング	GSAP ScrollTrigger、ピンされたセクション、シーンごとのタイムライン

品質レバー: シーン分解 → モーション階層 → 正確なタイミング/イージング → 1つの強い美的