webgl-landing-steering

WebGL ランディングページ誘導スキル

このスキルを使って成果を導きます

コードを書く前に、ランディングページの目標を WebGL の方向性に対応づけます。

1) ページの意図を定める

主なコンバージョンとブランドのシグナルを特定します。

• プレミアム／ラグジュアリー／ミニマルで揺るぎない信頼感
• 技術／インフラ／データに関する権威性
• 遊び心／コンシューマー／ソーシャルな活気
• 映画のような演出／ローンチ／ストーリーテリングのインパクト

次の点も把握します。

• デバイス構成（デスクトップ中心か、モバイル中心か）
• モーションへの許容度（prefers-reduced-motion のポリシー）
• 本番環境での制約（期限、チームのスキル、保守予算）

2) WebGL の方向性を選ぶ

主となる方向性を 1 つ選び、ヒーローに重いエフェクトを 3〜4 種類混在させないようにします。

方向性 A：控えめな奥行き表現（コンバージョンを損ないにくい）

用途：可読性が重視される SaaS、生産性向上ツール、B2B ツール。

• ビジュアル：柔らかなグラデーションメッシュ、ゆっくりした視差のあるレイヤー、ライトブルーム
• モーション：振れ幅を小さくし、常にコピーより目立たないようにする
• スタック：Three.js のプレーンシェーダー、または軽量なシェーダーキャンバス
• ルール：ヒーローのテキストのコントラストと CTA の視認性を最優先する

方向性 B：データ／パーティクルによる知性の表現（技術的な信頼性）

用途：AI、インフラ、分析、開発者向け製品。

• ビジュアル：パーティクルの流れ、ノードネットワーク、ベクトル場、ワイヤーフレーム
• モーション：CTA エリアに向かう、意図的な方向性のある流れ
• スタック：Three.js とカスタムシェーダー／ポイント。密度の高いフィールドには、必要に応じて GPGPU を使用
• ルール：ランダムなきらめきではなく、「システムの挙動」を伝える

方向性 C：オブジェクト中心の 3D 製品演出（機能の明確さ）

用途：ハードウェア、製品ビジュアルが強いアプリ、ローンチ。

• ビジュアル：中央に配置した GLTF モデル、制御されたカメラの周回、素材のハイライト
• モーション：操作に応じた、またはタイムラインに沿ったリビール
• スタック：Three.js と GLTF／DRACO／KTX2 のパイプライン
• ルール：ヒーローオブジェクトは 1 つに絞り、ループを短くし、最初に意味のある描画が行われるまでの高速なフォールバックを用意する

方向性 D：没入感のある映画的なシーン（ブランドキャンペーン）

用途：驚きを与えることが主な KPI となるキャンペーンページ。

• ビジュアル：ボリューメトリック表現、重いポストプロセス、密度の高いシーン構成
• モーション：スクロールに応じた章立てを含む、振り付けられたシーケンス
• スタック：Three.js とポストプロセス。必要に応じて GSAP ScrollTrigger を使用
• ルール：静止画／モバイル向けのフォールバックを用意し、パフォーマンスの厳格な基準を設ける

3) ランディングページの種類別ガイダンス

• ウェイトリスト／ローンチ前：方向性 A または B。コピーの読みやすさと素早い読み込みを維持します。
• 製品機能ページ：方向性 A または C。抽象的なノイズではなく、製品の実態を示します。
• 価格／購入意向の高いページ：主に方向性 A。WebGL は装飾のみに留めます。
• エンタープライズの信頼性訴求ページ：控えめな色使いと少ないノイズで方向性 B を採用します。
• コンシューマーアプリの成長促進ページ：遊び心のある色使いで方向性 B を採用しつつ、CPU／GPU の負荷を抑えます。
• キャンペーン用マイクロサイト：方向性 C または D を採用し、低性能デバイス向けのフォールバックを明示的に用意します。

4) リリース前の品質基準

ビジュアルの複雑さを増す前に、次の基準を満たします。

1. メッセージの基準：

• ヒーローの見出しと CTA が 3 秒以内に読み取れること。
• WebGL によってオファーの理解が妨げられないこと。

2. パフォーマンスの基準：

• ピクセル比を制限します：Math.min(devicePixelRatio, 1.5-2)。
• 一般的なモバイルデバイスで安定したフレーム時間を目標にします。
• 重いアセットは遅延読み込みし、WebGL を使わないポスター／フォールバックをすぐに表示します。

3. アクセシビリティの基準：

• prefers-reduced-motion を尊重します（静止画または低モーションモード）。
• アニメーション背景の上でも色のコントラストを保ちます。

4. 信頼性の基準：

• コンテキストの喪失とリサイズに対応します。
• SPA のルート変更時に、ジオメトリ／マテリアル／テクスチャを破棄します。

5) リスク別の実装方針

• 低リスク（最速）：CSS とキャンバスによる錯視、最小限のシェーダー
• 中リスク：1〜2 個のメッシュを使った Three.js シーン、軽量なポストエフェクト
• 高リスク：複数パスのシェーダー、高密度のパーティクル、高度なポストプロセス

ユーザーがキャンペーン級の没入感を明示的に求めない限り、コンバージョン重視のページでは低〜中リスクを基本とします。

6) Codex スタイルの実行向けプロンプトテンプレート

WebGL のランディングページのヒーローセクションの構築を依頼されたときは、次のプロンプトパターンを使用します。

「[ブランドを表す形容詞]を取り入れた、[ページの種類]向けの[レーン] WebGL ヒーローを構築してください。 主な目標：[コンバージョン]。 制約：[デバイス構成]、[パフォーマンス予算]、[モーション低減ポリシー]。 まずフォールバックを実装し、その後 WebGL で拡張してください。 視覚的な複雑さよりも、ヒーローのコピーの明瞭さを優先してください。」

7) よくある失敗パターンと修正方法

• 失敗：「見た目はかっこいいのに、コンバージョンが下がりました。」
  • 修正：モーションの振幅を抑え、背景を暗くするか柔らかくし、CTA のコントラストを高めます。
• 失敗：「モバイルで動作がぎこちなくなります。」
  • 修正：パーティクル数を減らし、DPR の上限を下げ、負荷の高いポストプロセッシングを取り除きます。
• 失敗：「ビジュアルスタイルがありきたりです。」
  • 修正：ブランドに合った特徴的なモチーフを1つ選びます（グリッド、波、軌道、破片など）。
• 失敗：「チームがシェーダーの複雑さを保守できません。」
  • 修正：パラメーターをドキュメント化した、モジュール式の Three.js シーンに簡素化します。

このスキルを適用するときの出力形式

次の内容を返します。

1. 推奨するレーンとその理由
2. ビジュアル仕様（カラーパレット、モーションの挙動、構成）
3. 技術スタックと複雑さの段階
4. フォールバックの挙動
5. パフォーマンスとアクセシビリティのチェックリスト
6. 構築順序（まず MVP、次に拡張）