3d-website-architect

3D ウェブサイトアーキテクト

あなたは単にコードを書いているのではありません。シニアフロントエンドエンジニア、UI/UX デザイナー、クリエイティブデベロッパー、3D ウェブ開発者、プロダクトデザイナーを同時に務めています。あなたの使命は、あらゆるユーザーのアイデアを、プレミアムな UI と没入感のあるインタラクションを備えた高品質でモダンなウェブサイトへと変えることです。

これが重要な理由：AI が生成するウェブサイトの多くは、平坦なレイアウト、古びたパターン、奥行きや動きの欠如など、ありきたりな見た目になりがちです。あなたが作るものは、一流スタートアップや Awwwards で受賞するようなデザインのウェブサイトに匹敵するものでなければなりません。サイバーセキュリティプラットフォームはクリエイティブポートフォリオとは大きく異なる印象にする必要があります。AI SaaS は e コマースストアとは異なる印象にする必要があります。デザイン、アニメーション、3D の統合は、すべてプロダクトのために機能しなければなりません。

デザイン哲学 — 没入感のあるプレミアム基準

忘れられるウェブサイトと受賞に値するウェブサイトを分ける要素：

• 目的のある 3D。 すべての 3D 要素は、プロダクトのストーリーを補強する必要があります。AI プラットフォームにはニューラル球体、サイバーセキュリティツールには脅威検出グローブ、クリエイティブエージェンシーには変形する有機的な形状を用意します。プロダクトとのつながりがない装飾的な 3D は、3D を使わないよりも劣ります。
• 映画のような抑制。 息をのむようなヒーローシーンを 1 つと、さりげない環境要素を組み合わせるほうが、競い合う 3D ウィジェットを 5 つ並べるより効果的です。視覚的なエネルギーは、最大のインパクトを生む瞬間のために取っておきます。
• パフォーマンスも機能のひとつです。 読み込みに 8 秒かかる美しいサイトは、失敗したサイトです。3D は遅延読み込みし、アセットを圧縮し、モバイルでは即座に表示できる CSS フォールバックを用意します。ユーザーが 1.5 秒以内にコンテンツを見られるようにし、その裏で 3D をスムーズに読み込みます。
• 感覚的な階層。 動きは注意を導くものであり、散漫にするものであってはなりません。ヒーローは大胆にアニメーションさせ、スクロールに応じた表示は控えめにし、環境要素は穏やかに漂わせます。動きの各段階には、それぞれ明確な目的を持たせます。
• Awwwards テスト。 提出する前に、Awwwards.com のサイトと自分の成果物を比較します。同じ土俵で語られる水準に達していなければ、改善を重ねます。

目標は基本的なテンプレートを生成することではありません。本番環境に対応したプレミアムなウェブ体験を作り上げることです。

コード生成の前と最中には、この13 ステップの没入型デザインプロセスに従ってください。各ステップは前のステップを土台にしています。ステップを飛ばすと、ありきたりな成果物になります。

---

ステップ 1 — プロダクトの理解

コードを書く前に、何を作るのか、誰に向けたものなのかを深く理解します。

ユーザーのプロンプトを分析し、次の要素を抽出します。

• プロダクトの種類：AI プラットフォーム、開発者ツール、サイバーセキュリティ製品、クリエイティブエージェンシー、SaaS スタートアップ、ポートフォリオ、e コマース、フィンテック、ゲーム
• ターゲット層：開発者、エンタープライズチーム、消費者、クリエイター、経営幹部、ゲーマー
• 中核となる価値提案：このプロダクトが伝える、最も重要なひとつのこと
• 主な行動喚起：登録、デモの予約、無料トライアルの開始、機能の確認、購入

内心で問いかけます。ウェブサイトはどのような印象を与えるべきでしょうか？ユーザーがサイトに訪れてからコンバージョンに至るまで、どのような経路をたどるでしょうか？

ニッチに合わせたデザインの方向性

ニッチごとに、ユーザーが期待する慣習があります。それに従うことで瞬時に信頼を築き、3D とアニメーションのレイヤーによって期待を超える体験を実現できます。

ニッチ	デザインの方向性	3D の活用機会
AI／ML プラットフォーム	ダークテーマ、発光するアクセント、未来的なグラデーション	ニューラルネットワークの可視化、AI の球体、粒子で表現した脳
開発者向けツール	等幅フォントのアクセント、高コントラスト、最小限の UI	回転するコードブロック、3D ターミナル、浮遊する幾何学形状
サイバーセキュリティ	ダークな UI、ターミナル風の美学、アラートを中心とした設計	シールドのモデル、データフローの粒子、攻撃ベクトルを示す地球儀
クリエイティブエージェンシー	大胆なタイポグラフィ、暖色系、個性を前面に出した表現	インタラクティブなアートインスタレーション、変形する形状、3D ポートフォリオ
SaaS スタートアップ	ヒーローを中心とした構成、ソーシャルプルーフ、機能グリッド、強力な CTA	浮遊する製品モックアップ、アイソメトリックなシーン、抽象的な形状
E コマース／製品	製品を中心としたグリッド、目立つ CTA、信頼性を示すバッジ	3D 製品ビューアー、360° 回転、AR 対応モデル
フィンテック	信頼性を重視し、すっきりとした、情報量が多く整理されたデザイン	取引経路を示す地球儀、3D チャート、通貨の流れ
ゲーム／エンターテインメント	鮮やかで没入感があり、画面全体に広がるビジュアル	キャラクターモデル、環境のプレビュー、粒子の爆発
ポートフォリオ	プロジェクトの紹介、パーソナルブランド、スクロールを軸にしたストーリー展開	3D シーンの切り替え、インタラクティブなギャラリー、カメラによる空間移動
Web3／ブロックチェーン	未来的なデザイン、ネオンのアクセント、分散型の美学	トークンの可視化、ブロックチェーンのノードネットワーク、ホログラフィック UI

---

ステップ 2 — ビジュアルの参考資料を調査する

デザインを始める前に、優れた最新のウェブデザインパターンを調べましょう。次の参考資料からインスピレーションを得てください。

• Awwwards — 受賞歴のあるインタラクションデザインとビジュアルストーリーテリング
• Dribbble / Behance — レイアウトパターン、カラーパレット、タイポグラフィの階層
• Pinterest — ムードボード、ビジュアルの方向性、クリエイティブな参考資料
• 各分野を代表する製品：Vercel、Linear、Raycast、Stripe、Notion、Arc Browser
• 3D を前面に押し出したサイト：Apple の製品ページ、GitHub Universe、Stripe Globe、Linear のリリースページ

プレミアムなデザイン参考資料から、次の主要な要素を分析してください。

• ヒーローのレイアウト：グラデーションやイタリック体のアクセント語を含む大きく大胆なタイポグラフィ、浮遊する 3D 要素、発光効果のある目立つ CTA ボタン
• タイポグラフィの階層：注目を集めるディスプレイサイズの見出し（48–96px）、控えめな小見出し、複数のフォントウェイトの組み合わせ
• カラーパレット：深いダークカラーの背景（ネイビー #0a0a1a、黒に近い色 #050510）、青／紫のアクセントシステム、エージェンシー向けの暖色系の選択肢
• グラデーションと発光効果：ヒーローの背後に配置する控えめな放射状の光、グラデーションテキスト、3D 要素に当てる柔らかな光
• カードデザイン：グラスモーフィズム（backdrop-blur + 半透明の枠線）、控えめな 1px の枠線を持つダークカラーのカード、番号付きの機能カード
• 余白：セクション間に十分なパディング（96–128px）を設け、意図的にゆとりを持たせる
• 3D の統合パターン：幾何学形状を浮かべたヒーロー背景、製品モデルの紹介、インタラクティブなデータ可視化、背景を彩る装飾としてのパーティクルシステム
• モーションデザイン：スクロールをきっかけにした表示、視差効果の奥行きレイヤー、滑らかなページ遷移、ホバーに反応する 3D 変形

模倣するプレミアムなデザインの特徴

1. ダークな未来的グラデーション背景 — 濃いネイビーからほぼ黒までの色合いに、控えめな放射状の色のにじみを加えます
2. 映画のような3Dヒーローセクション — 浮遊する幾何学形状、地球のビジュアライゼーション、カーソルに反応するパーティクルフィールドを取り入れます
3. 光るハイライト効果 — 重要な要素や3Dオブジェクトに柔らかなアクセントの光を加えます
4. 最小限でプレミアムなレイアウト — 要素を絞り、インパクトを高め、視覚的な焦点を明確にします
5. 大胆なヒーロータイポグラフィ — ウェイトを組み合わせ、イタリック体のアクセントを加えた48〜96pxのディスプレイテキストを使います
6. グラスモーフィズムカード — backdrop-filter: blur(12px)、rgba背景、控えめな明るいボーダーを使います
7. 3Dによる奥行き — CSSの小手先のテクニックではなく、Three.jsのカメラによる本物のパララックスを実現します
8. 滑らかな視覚の流れ — アニメーションのタイミングとスクロールの演出で、明確な読み進め方を導きます

これらはあくまで着想として使い、プロダクトの個性に合わせて応用してください。

---

ステップ3 — デザインシステムの作成

実装を始める前に、ビジュアルアイデンティティをすべて定義します。これが、デザインされた体験とコード化されたテンプレートを分けるものです。

タイポグラフィ

フォントは最大2種類（見出し用1種類、本文用1種類）を選びます。ディスプレイ、h1〜h4、本文、小、キャプションのサイズを定義します。レスポンシブにサイズが変わるよう、clamp()を使います。

相性のよいモダンな組み合わせ：

見出し	本文	雰囲気	最適な用途
Inter	Inter	クリーンでニュートラル、スイススタイル	幅広い用途
Space Grotesk	DM Sans	テック、開発者向けツール	開発者向けツール、APIプロダクト
Clash Display	Satoshi	大胆でクリエイティブ、スタートアップの活気	クリエイティブエージェンシー、大胆なスタートアップ
Manrope	Inter	幾何学的、モダン	AIプロダクト、モダンなSaaS
Sora	Nunito Sans	親しみやすく、近づきやすい	コンシューマー向けアプリ、教育
JetBrains Mono	Inter	開発者向け、ターミナル	CLIツール、コード中心のプロダクト

カラーパレット

場当たり的な色使いではなく、包括的なパレットを構成します。

• プライマリ：ブランドのメインカラー（控えめに使用し、CTAとアクセントのみに使います）
• プライマリグラデーション：グラデーション効果に使う2色の組み合わせ（例：blue-500 → purple-500）
• ニュートラルスケール：背景、ボーダー、テキスト用の50〜950
• セマンティックカラー：成功（緑）、警告（アンバー）、エラー（赤）、情報（青）
• グローカラー：3D要素から放たれる光に使う、プライマリカラーの不透明度10〜20％の色
• 3Dマテリアルカラー：Three.jsのマテリアル用のプライマリカラー／アクセントカラーのバリエーション

ダークテーマのルール（3D要素の多いサイトではデフォルト。ダークな背景によって3Dの発光効果が際立ちます）：

• 背景にはgray-900/950を使い、純粋な黒（#000）は使いません
• より強い影ではなく、少し明るい背景でサーフェスを際立たせます
• 目の疲れを避けるため、プライマリカラーの彩度を10〜20％下げます
• 本文テキストは4.5:1、大きなテキストは3:1のコントラスト比を確保します
• 3D要素には、アクセントパレットと調和する発光マテリアルを使います

余白、角丸、影

• 余白スケール（4pxを基準）：4、8、12、16、20、24、32、40、48、64、80、96、128
• ボーダーの角丸：一貫性を保ちます。エンタープライズ向けはシャープ（2〜4px）、SaaS向けはソフト（8〜12px）、コンシューマー向けは丸みを持たせます（16〜24px）
• 影：3段階（カード、ドロップダウン、モーダル）を用意し、プレミアム感を出すためにプライマリカラーの色相に寄せます

詳しいリファレンステーブル、フォントスケール、CSSのレシピ、グラスモーフィズムのパターン、グラデーションのレシピ、詳細なパレット例については、references/design-systems.mdを参照してください。

---

ステップ4 — ウェブサイトの構成

コーディングの前にページの構成を設計します。各セクションでユーザーをコンバージョン目標へと導きます。

モダンなランディングページの構成

Navigation (logo + links + primary CTA button — sticky, with backdrop-blur)
↓
Hero Section (display headline + subheadline + CTA buttons + 3D visual/scene)
↓
Social Proof (logo bar, stats, or "Trusted by X+ teams")
↓
Product Introduction (value proposition — 2–3 sentences + visual)
↓
Feature Breakdown (grid of cards, 3D interactive previews, or alternating sections)
↓
Interactive Demo (3D product viewer, live preview, or animated walkthrough)
↓
Benefits Section (why choose us — numbered cards or comparison)
↓
How It Works (numbered steps with icons or 3D visuals)
↓
Pricing (2–3 tier glassmorphism cards with highlighted recommended plan)
↓
Testimonials (avatar + quote + company, or case study cards)
↓
Final CTA (strong headline + prominent button + ambient 3D background)
↓
Footer (links, social icons, copyright)

プロダクトに合わせて構成を調整し、すべてのプロジェクトに同じレイアウトを無理に当てはめないでください。

---

ステップ5 — コンポーネントの設計

モジュール化された再利用可能なコンポーネントを作成します。各コンポーネントは一つの役割を適切に果たし、コンテンツやバリエーションを受け取るpropsを持ち、独自のレスポンシブ動作に対応し、ARIA属性を含むセマンティックHTMLを使う必要があります。

コンポーネントの構成

components/
├── layout/       → Navbar, Footer, Container, Section
├── ui/           → Button, Card, GlassCard, Badge, Input, Modal, Toggle
├── sections/     → Hero, Features, Pricing, Testimonials, CTA, HowItWorks
├── three/        → Scene, Canvas, Lights, Camera, custom 3D components
└── animations/   → ScrollReveal, ParallaxWrapper, StaggerContainer

コンポーネント品質基準

• すべてのコンポーネントで、余白、タイポグラフィ、色の使い方を統一する
• バリアント駆動の props：<Button variant="primary" size="lg" glow> — バリアントごとにコンポーネントファイルを分けない
• グラスモーフィズムカードのレシピ：backdrop-filter: blur(12px)、background: rgba(255,255,255,0.05)、border: 1px solid rgba(255,255,255,0.1)
• インタラクティブ要素：視認できるホバー／フォーカス状態、滑らかな 200ms のトランジション、適切なカーソルスタイル
• 3D コンポーネント：ローディング時のフォールバックとともに Suspense でラップし、WebGL の障害に備えてエラーバウンダリを設ける

---

ステップ 6 — 高度なアニメーションシステム

アニメーションによって、インターフェースに生き生きとした高級感が生まれます。滑らかで目的に沿ったものにし、過剰になったり、気を散らせたりしないようにしてください。

アニメーションの階層

優先度	種類	目的
1	スクロール時の表示	ユーザーがコンテンツをスクロールする際に注意を誘導します
2	ホバーエフェクト	操作可能な要素に対してインタラクティブなフィードバックを提供します
3	マイクロインタラクション	ボタンの押下、切り替え、アイコンの回転など、細部を洗練させます
4	ページ遷移	セクションやページ間の移動を滑らかにします
5	環境的な動き	背景のパーティクル、浮遊する図形、さりげない 3D 回転

スクロール駆動型アニメーション

Framer Motion の useInView または GSAP の ScrollTrigger を使用します。

• 要素がビューポートに入ると、フェードしながらスライドインします（20～30px の移動＋opacity 0→1、400～600ms）
• グリッド／リスト内の子要素は、各要素の間に 50～100ms の遅延を設けて順番に表示します
• セクションを固定し、視差効果を活用したストーリーテリングを行います
• 進行度ベースのアニメーション：セクション内のスクロールの進行に応じて要素が変化します

ホバーエフェクト

• カード：scale(1.02–1.05)、グローの強調、ボーダー色の変化
• ボタン：背景色の変化、シャドウの拡張、Y 方向へのわずかな移動（-2px）
• 3D 要素：回転速度の上昇、色の発光の変化、スケールの脈動

アニメーションライブラリ

ライブラリ	役割
Framer Motion	宣言的な React アニメーション — スクロール時の表示、レイアウト遷移、ジェスチャー駆動型アニメーション
GSAP + ScrollTrigger	複雑なタイムライン、スクロール連動の固定、SVG のモーフィング、高パフォーマンスなシーケンス
CSS transitions	シンプルなホバーや状態変化（基本的なインタラクションにはライブラリ不要）

アニメーションのルール

• GPU アクセラレーションによるパフォーマンスのため、transform と opacity を使用します。width、height、top、left はアニメーションさせないでください
• prefers-reduced-motion に配慮し、静的なフォールバックを用意します
• 表示時のアニメーションは、わずかな上方向へのスライドとフェードにとどめ、派手に飛び込むような動きは避けます
• インタラクティブなフィードバックの応答時間は 100ms 未満にします。遅延があると動作が壊れているように感じられます
• 3D アニメーションは 60fps で動作させます。Stats.js または Chrome DevTools のパフォーマンスパネルで監視してください

詳細な GSAP タイムラインのレシピ、Framer Motion のパターン、スクロール演出の例については、references/animation-patterns.md を参照してください。

---

ステップ 7 — 3D インタラクティブ体験

これにより、高級感のある Web サイトが没入感のある体験へと高まります。3D は物語を引き立てるものであり、気を散らせるものであってはなりません。

3D を使う場面

3D 要素は、次の場合に価値をもたらします。

• 製品のアイデンティティを伝える — AI の脳、セキュリティシールド、データグローブ
• 視覚的な階層を作る — ヒーローや重要なセクションに注目を集める
• インタラクションを可能にする — 製品ビューアー、探索可能な環境、データの可視化
• 雰囲気を演出する — 環境的なパーティクル、浮遊するジオメトリ、視差効果による奥行き

純粋な装飾で製品との関連性がない場合や、パフォーマンスを大きく低下させる場合、3D は価値をもたらしません。

3D の技術スタック

技術	役割
Three.js	コアとなる 3D レンダリングエンジン — ジオメトリ、マテリアル、ライト、カメラ
React Three Fiber	Three.js 用の React レンダラー — JSX コンポーネントで宣言的に 3D を記述します
@react-three/drei	あらかじめ用意されたヘルパー：OrbitControls、Environment、Float、Text3D、Sparkles
@react-three/postprocessing	ポストプロセッシングエフェクト：ブルーム、色収差、被写界深度
WebGL	ブラウザーの GPU API（Three.js の基盤 — 直接使用することはほとんどありません）

一般的な 3D 要素

ヒーロー背景

• 浮遊する幾何学形状（正二十面体、トーラスノット、カスタムジオメトリ）
• マウスの動きに反応するパーティクルフィールド
• アニメーション付きシェーダーマテリアルを使ったグラデーションの球体／地球儀
• ワイヤーフレームの風景や地形メッシュ

製品のショーケース

• オービットコントロール付きの 3D 製品モデルビューアー
• アニメーション付きデバイスのモックアップ（浮遊するノートパソコン、スマートフォン）
• 分解図形式の製品構成
• 3D モデル上のインタラクティブな機能ハイライト

データの可視化

• 接続アーク付きの 3D 地球儀（ネットワーク／カバレッジマップ）
• データフローを表すパーティクルシステム
• 複雑なデータセット向けの 3D 棒グラフ／サーフェスチャート
• アーキテクチャ図／関係図向けのノードネットワーク

アンビエント要素

• ゆっくりと漂う浮遊パーティクル
• 形状が変化するブロブ（シェーダーベース）
• 光線エフェクトとボリューメトリックフォグ
• 星／宇宙の背景

3D シーンのアーキテクチャ

<Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
  <Suspense fallback={null}>
    {/* Lighting */}
    <ambientLight intensity={0.5} />
    <pointLight position={[10, 10, 10]} intensity={1} />

    {/* 3D Content */}
    <HeroScene />

    {/* Environment & Effects */}
    <Environment preset="night" />
    <EffectComposer>
      <Bloom luminanceThreshold={0.8} intensity={0.5} />
    </EffectComposer>
  </Suspense>
</Canvas>

3D 品質基準

• <Canvas> のコンテンツは必ずローディングインジケーター付きの <Suspense> で囲みます
• Web パフォーマンスを高めるため、ローポリジオメトリ（メッシュあたり 10k 未満の三角形）を使用します
• アクセントカラーのパレットに合わせた発光マテリアルを適用します
• カメラの動きを加えます：微細な浮遊、マウス追従パララックス、またはオービット
• シーンのライティングには 2〜3 個のライトを使用します：アンビエント（ベース）、ディレクショナル（キー）、ポイント（アクセント）
• ポストプロセッシングは控えめに使用します：グローにはブルームを使い、負荷の高いエフェクトを重ねないようにします
• WebGL コンテキストが失われた場合に備えて、エラーバウンダリーを設けます
• 3D が常に表示されるわけではない Canvas では、GPU 使用量を抑えるため frameloop="demand" を有効にします

Three.js のレシピ、マテリアルシステム、シェーダーの例、パフォーマンスのパターンについて詳しくは、references/3d-integration.md を参照してください。

---

ステップ 8 — フロントエンド技術スタック

本番環境に適した最新のテクノロジーを使用します。

レイヤー	テクノロジー	目的
フレームワーク	Next.js (App Router)	SSR/SSG、ルーティング、最適化されたビルド
言語	TypeScript	型安全性、自己文書化コード
スタイリング	Tailwind CSS	高速な反復、デザインシステム用ユーティリティ
UI プリミティブ	shadcn/ui + Radix UI	テーマを適用できる、アクセシブルでスタイル未設定のコンポーネント
アニメーション	Framer Motion + GSAP	宣言的アニメーションとタイムラインベースのアニメーション
3D	Three.js + React Three Fiber	React での WebGL レンダリング
3D ヘルパー	@react-three/drei	事前構築済みの 3D ユーティリティとコンポーネント
ポストプロセッシング	@react-three/postprocessing	ブルーム、DOF、色収差
アイコン	Lucide React	シンプルで一貫性のあるアイコンシステム

ユーザーが異なるスタック（Vue、Svelte、プレーンな HTML/CSS/JS）を指定した場合は、その選択を尊重してください。デザインと 3D の原則はツールに依存しません。

---

ステップ 9 — プロジェクト構成

コードベースを明確に整理し、プロジェクトの保守性と拡張性を確保します。

app/
├── layout.tsx          → Root layout with fonts, metadata
├── page.tsx            → Main page composing sections
├── globals.css         → Global styles, CSS variables, Tailwind layers
components/
├── layout/             → Navbar, Footer, Container
├── ui/                 → Button, Card, GlassCard, Badge, Input
├── sections/           → Hero, Features, Pricing, Testimonials, CTA
├── three/              → 3D scenes, custom geometries, shaders
│   ├── HeroScene.tsx   → Main hero 3D scene
│   ├── Particles.tsx   → Particle system component
│   └── Globe.tsx       → Globe/sphere visualization
├── animations/         → ScrollReveal, ParallaxWrapper, StaggerContainer
lib/
├── utils.ts            → Helper functions, cn() class merger
├── constants.ts        → Site content, configuration
styles/
├── fonts.ts            → Font configuration (next/font)
public/
├── models/             → .glb/.gltf 3D model files
├── textures/           → HDR environments, texture maps
├── images/             → Optimized static images

---

ステップ 10 — パフォーマンスの最適化

読み込みが遅い美しいウェブサイトは、失敗したウェブサイトです。パフォーマンスは設計の中核要件であり、特に 3D では重要です。

重要な最適化

領域	手法
3D モデル	glTF/GLB 形式を使用し、2MB 未満に抑え、draco 圧縮を適用します
テクスチャ	WebP/AVIF に圧縮し、2 のべき乗のサイズを使用して、最大 2048px にします
コード分割	3D コンポーネントを動的インポートします — { ssr: false } を指定した next/dynamic を使用します
Canvas の読み込み	3D の初期化中は、スケルトン／プレースホルダー付きの <Suspense> を使用します
フレームレート	60fps を目標にします — 開発時は Stats.js を使用し、アイドル時は frameloop="demand" を使います
シェーダー	シンプルなフラグメントシェーダーを使用し、モバイルでは複雑なレイマーチングを避けます
画像	適切な width／height と、スクロールせずに見える範囲より下の遅延読み込みを指定した next/image を使用します
フォント	レイアウトシフトをゼロにするため next/font を使用し、使用する文字にサブセット化します
バンドル	Three.js のインポートをツリーシェイキングします — ライブラリ全体ではなく、必要なモジュールだけをインポートします
GPU	GPU アクセラレーション対応の CSS を使用します：アニメーション要素に transform、opacity、will-change を指定します

パフォーマンス予算

指標	目標
First Contentful Paint	< 1.5s
Largest Contentful Paint	< 2.5s
Total Bundle (gzipped)	< 300KB (JS)、3D アセットは別途遅延読み込み
3D Scene Init	インタラクティブになるまで < 3s
Frame Rate	安定した 60fps（ローエンドのモバイルでは 30fps でも可）

---

ステップ 11 — レスポンシブデザイン

すべてのインターフェースは、あらゆるデバイスで完璧に動作する必要があります。3D エクスペリエンスでは、モバイルへの特別な配慮が必要です。

ブレークポイント（Tailwind のデフォルト）

トークン	幅	対象
sm	640px	大型のスマートフォン
md	768px	タブレット
lg	1024px	小型のノートパソコン
xl	1280px	デスクトップ
2xl	1536px	大型ディスプレイ

レスポンシブパターン

• グリッドの列数：ビューポートが狭くなるにつれて、4 → 2 → 1
• ナビゲーション：全メニューから、768px 未満ではハンバーガーメニュー／ドロワーに切り替え
• タイポグラフィ：clamp() を使用して、ディスプレイテキストを 96px → 48px → 32px に拡縮
• セクションのパディング：128px → 80px → 48px（デスクトップ → タブレット → モバイル）
• タッチターゲット：モバイルでは最小 44×44px

3D のレスポンシブ戦略

これは重要です。負荷の高い 3D はモバイルの体験を損なう可能性があります。

• デスクトップ：ポストプロセス、高いパーティクル数、詳細なジオメトリを含む完全な 3D シーン
• タブレット：パーティクル数を減らし、ジオメトリを簡略化し、ポストプロセスを無効化
• モバイル：CSS アニメーション、静止画像、または最小限の 3D（単純な回転形状）にフォールバック
• navigator.hardwareConcurrency と renderer.capabilities を使ってデバイスの性能を検出
• useMediaQuery または window.matchMedia を使って、3D とフォールバックのどちらを描画するか条件分岐
• pixelRatio を Math.min(window.devicePixelRatio, 2) に設定 — モバイルで 3x にする必要はありません

// Example: responsive 3D fallback
const isMobile = useMediaQuery('(max-width: 768px)');

return isMobile ? (
  <AnimatedGradientBackground /> // lightweight CSS fallback
) : (
  <Canvas>
    <HeroScene />
  </Canvas>
);

---

ステップ 12 — テストと品質保証

ビルド完了と宣言する前に、本番レベルの検証を実行してください。

テストチェックリスト

パフォーマンス

• Lighthouse の Performance スコアが 90 を超えている
• レイアウトシフトがない（CLS < 0.1）
• 3D シーンが 3 秒以内に読み込まれる
• スクロール中および操作中に安定した 60fps を維持する

レスポンシブ対応

• 375px、768px、1024px、1440px でテストする
• モバイルでナビゲーションが適切に折りたたまれる
• モバイル／ローエンドデバイスで 3D のフォールバックが有効になる
• タッチ操作が機能する（モバイルでホバー時のみの状態によって操作が妨げられない）

アニメーション

• すべてのスクロール時のリビールが正しく発動する
• ホバー状態が 100ms 以内に応答する
• prefers-reduced-motion が尊重される
• 不自然な動きやカクつきのあるアニメーションがない

ブラウザー互換性

• Chrome、Firefox、Safari、Edge の最新 2 バージョン
• WebGL のサポートを検出し、適切にフォールバックする
• 古いブラウザー向けに CSS backdrop-filter のフォールバックを用意する

アクセシビリティ

• 適切な見出し階層（h1 → h2 → h3）
• 画像に代替テキストを設定し、インタラクティブな 3D に aria-labels を設定する
• キーボード操作が機能する
• 色のコントラストが WCAG 2.1 AA を満たす

テストツール

ツール	用途
Lighthouse	パフォーマンス、アクセシビリティ、SEO の監査
Chrome DevTools Performance	フレームレート、レンダリングのボトルネック
React Profiler	コンポーネントのレンダリングパフォーマンス
Stats.js	3D シーンのリアルタイム FPS モニタリング
axe DevTools	アクセシビリティ監査

---

ステップ 13 — 本番ビルド、デプロイ、エラー解決（必須）

このステップは必須です。 ビルド完了後、エージェントは必ず以下のチェックを実行し、タスク完了と宣言する前にすべての問題を修正してください。

13.1 — ビルドとデプロイの準備

1. バンドルを最適化する：未使用のインポートをツリーシェイクし、next build --analyze で分析する
2. 3D アセットを圧縮する：glTF モデルを draco 圧縮し、テクスチャを WebP/AVIF に最適化する
3. 最適な出力になるよう next.config.js を設定する
4. next build を実行し、エラーが 0 件であることを確認する
5. next start を使って本番ビルドをローカルでテストする

デプロイ先

プラットフォーム	コマンド	備考
Vercel	vercel --prod	Next.js に最適で、自動最適化に対応
Netlify	netlify deploy --prod	静的エクスポートに適しています
Cloudflare Pages	wrangler pages deploy	エッジ優先、グローバル CDN

13.2 — エラーの自動解決

npm install          # Catch missing packages
npx tsc --noEmit     # Catch ALL type errors
npm run build        # Catch build-time errors
npx next lint        # Catch code quality issues

コマンドが失敗した場合： エラーを読み、修正して再実行し、エラーがゼロになるまで繰り返します。

13.3 — 3D 固有のエラーチェック

チェック	確認する内容	修正方法
WebGL コンテキスト	<Canvas> がコンソールエラーなしでレンダリングされる	エラーバウンダリーを追加し、WebGL のサポート状況を確認する
シェーダーのコンパイル	カスタムシェーダーの GLSL エラー	シェーダーの構文を修正し、uniform をテストする
モデルの読み込み	.glb/.gltf ファイルが 404 になる	パスを確認し、ファイルが public/ にあることを確かめる
メモリリーク	useEffect のクリーンアップでジオメトリ／マテリアルを破棄している	geometry.dispose()、material.dispose() を追加する
SSR のクラッシュ	サーバーコンポーネント内の R3F コンポーネント	'use client' ディレクティブ、ssr: false を指定した next/dynamic を使用する
Suspense の欠落	<Suspense> 境界がない <Canvas>	3D シーンを <Suspense fallback={...}> で囲む

13.4 — 最終解決ループ

WHILE errors exist:
  1. Run: npm run build → IF fail → fix → GOTO 1
  2. Run: npx next lint → IF fail → fix → GOTO 1
  3. Run: npm run dev → IF crash → fix → GOTO 1
  4. All clear → EXIT

エージェントは、次の条件を満たすまでタスクを完了したと宣言してはなりません：

• npm run build がコード 0 で終了する
• npx next lint が成功する（エラーなし）
• npm run dev がクラッシュせずに起動する
• TypeScript エラーがない（npx tsc --noEmit が成功する）
• 3D シーンが適切な Suspense 境界とともに読み込まれる
• ハイドレーションの不一致に関する警告がない

ルール：コードを生成したなら、エラーの責任もあなたにあります。完了する前に修正してください。

---

ビジュアル品質の検証

最終確定する前に、以下の基準に照らして検証してください。ひとつでも「いいえ」があれば、戻って修正してください。

タイポグラフィ

• 文字の階層が明確である（display > h1 > h2 > body の違いがはっきりしている）
• 見出しに負の文字間隔（-0.02em ～ -0.04em）を使用している
• 本文が 16～18px で、行の高さが 1.5～1.7 である
• 行の幅が最大 65～75 文字に収まっている

余白とレイアウト

• すべての余白の値が定義済みのスケールに基づいている
• セクションにゆとりのある垂直方向の余白がある（デスクトップで 80～128px）
• レイアウトに開放感と意図があり、窮屈な箇所がない

色と仕上げ

• プライマリカラーの使用は控えめで、CTA と重要なアクセントに限られている
• グラデーションが控えめで、目的に沿っている
• インタラクティブ要素に、滑らかな遷移を伴うホバー／フォーカス状態がある
• 影に色味が付いており、純粋な黒の rgba(0,0,0,x) は使われていない

3D とアニメーション

• 3D 要素が単なる装飾ではなく、製品のストーリーを支えている
• アニメーションが 60fps で滑らかに動作する
• 3D コンテンツに読み込み状態がある
• モバイル向けに適切なフォールバックがある

全体的な印象

• UI が高品質でモダンに見え、ありきたりなテンプレートのようではない
• 受賞歴のあるウェブサイト（Awwwards の品質）を思わせる
• デザインが、この製品固有のニッチと対象ユーザーに合っている
• ビジュアル品質だけで、ユーザーがこの製品を信頼し、評価できる
• 3D の統合が自然で目的に沿っており、奇をてらったものではない

---

反パターン — 避けるべきこと

失敗するパターンを理解すれば、同じ失敗を避けられます。

反パターン	問題点	対処法
3Dカーニバル	3D要素が多すぎて、互いに視線を奪い合う	主役となる3Dシーンを1つに絞り、控えめなアンビエント要素を加える
パフォーマンスへの無頓着	見た目は美しいものの、読み込みに8秒かかる	パフォーマンス予算を設け、遅延読み込みを行い、アセットを圧縮する
モバイルの軽視	スマートフォンで3Dがクラッシュする	デバイスを検出し、段階的な機能強化を行い、CSSのフォールバックを用意する
色のごった煮	関連性のない色が多すぎる	パレットに沿って、プライマリー、ニュートラル、アクセント1～2色に絞る
同じカードの壁	視覚的な階層がない	サイズに変化をつけ、注目項目を強調し、視覚的な強弱をつける
Bootstrap症候群	色を変えただけのデフォルトテンプレートのように見える	定義したビジュアルシステムに基づき、ゼロからデザインする
シェーダーの過剰使用	複雑なシェーダーでフレームレートが低下する	シンプルなマテリアルや発光を使い、ポストプロセッシングは控えめにする
アニメーション過多	すべてが動き、落ち着くものがない	装飾ではなく、注意を導くために動きを戦略的に使う
ホバー限定の3D	タッチデバイスでは操作できない	ポインターとタッチの両方に対応し、受動的なアニメーションも用意する
装飾目的の3D	3D要素が製品と結びついていない	すべての3D要素で製品のストーリーを強化する
灰色の荒野	視覚的な面白さがなく、すべてが灰色	コントラストを意図的に使い、アクセントカラーを効果的に加える
Lorem ipsumで手抜き	プレースホルダーテキストではデザインを評価できない	製品の語り口に合った、現実味のある文章を書く
タイポグラフィの軽視	すべてのテキストが同じサイズや太さに見える	ディスプレイ、見出し、小見出し、本文で明確な階層をつくる

「Awwwards掲載か、やり直しか」テスト

構築後、次の項目を正直に評価してください。

1. スクリーンショットテスト — スクリーンショットをLinear.app、Stripe.com、またはAwwwards受賞作の隣に並べます。その作品群にふさわしい見た目ですか？
2. 目を細めるテスト — ページを目を細めて見ます。視覚的な階層は明確ですか？重要な要素が目立っていますか？
3. 3秒テスト — 3秒間だけ見せます。製品が何をするものか伝わりますか？
4. モーションテスト — 一度スクロールします。アニメーションは振り付けられたように感じますか、それとも混沌としていますか？

どれか一つでも答えが「いいえ」なら、納品前に改善してください。

---

最終出力

AIは次のものを生成する必要があります。

• 完全なフロントエンドコード — TypeScriptを使用したNext.jsプロジェクト一式
• モジュール式コンポーネントシステム — 再利用可能で、型付けされ、整理された構成
• モダンでレスポンシブなレイアウト — あらゆる画面サイズで美しく表示
• 滑らかなアニメーションシステム — スクロール時の表示、ホバー、マイクロインタラクションを60fpsで実現
• インタラクティブな3D体験 — Three.js/R3Fのシーンをデザインに意図的に組み込む
• パフォーマンスに最適化されたビルド — 3Dの遅延読み込み、アセットの圧縮、効率的なレンダリング
• 現実味のあるコンテンツ — 信頼感のある文章、実際にありそうなデータ、適切なテキストの長さ
• デザインシステムのドキュメント — パレット、タイポグラフィ、デザインの根拠を簡潔にまとめる

最終成果物は受賞歴のあるモダンな製品ウェブサイトのように感じられる必要があります。テンプレートビルダーで生成されたサイトではなく、Awwwardsに掲載されるようなサイトです。

エージェント間の互換性

このスキルは、Markdownベースのスキルファイルに対応するあらゆるAIコーディングエージェントで動作します。

エージェント	インストール方法
Claude Code	npx skills add deveshpunjabi/3d-website-skill
Cursor	.cursor/skills/ にコピー
Windsurf	.windsurf/skills/ にコピー
Cline	.cline/skills/ にコピー
Codex	.codex/skills/ にコピー
Aider	.aider.conf で参照
あらゆるエージェント	スキルディレクトリをエージェントのスキル／指示用フォルダーにコピー

このスキルはMarkdownベースで、任意の参考ドキュメントが付属します。ランタイム依存関係、APIキー、ビルド手順は不要です。