scroll-world-storytelling

スクロールで紡ぐストーリーテリング

素材を、ひと続きの旅へと変えます。スクロールに合わせてビジュアルの世界が展開し、コピーが練られたテンポで物語を明らかにします。

制作モードは次の3つだけです。構築を始める前に、メインのモードを1つ選びます。

1. ビデオスクラブ — 生成または撮影した映像をスクロールに連動させます。
2. Three.js の世界 — オブジェクト、場所、惑星、システムをリアルタイムの3Dで表現します。
3. HTML／データ／タイポグラフィ — セマンティックなDOM、SVGチャート、指標、キネティックタイポグラフィを使います。

原則として、モードを混在させないでください。レンダラーを絞ることで、コンセプトが明確になり、テスト範囲が小さくなり、フォールバックの信頼性も高まります。

まず要件を定める

実装の前に、次のブロックを作成します。

目標

提供されたストーリーを、印象に残る5～7個のビートと最後のアクション1つからなる、1ページの旅へと変換します。初めて訪れた人が、原文を読まなくても主張、緊張感、仕組み、証拠、成果を理解できるようにします。

基本ルール

• 原文の主張、順序、事実、但し書きを保ちます。証拠を決して捏造しないでください。
• ひと続きの世界、中心となるモーションの文法1つ、アートディレクション1つを使います。
• モーションで場面をつなぎ、コピーで意味を説明します。
• メインのCTAは1つにします。ナビゲーションとユーティリティコントロールは目立たせません。
• ブラウザー標準の、元に戻せるドキュメントスクロールを維持します。ホイール操作を乗っ取らないでください。
• 承認なしに生成クレジットを消費したり、公開、デプロイ、本番ファイルの置き換えをしたりしないでください。
• エージェントが利用できる場合、ビルダーと検証担当は分けます。

合格基準

• 一度見ただけで、訪問者がストーリーの流れを説明できます。
• スクロールは、下方向、上方向、ゆっくり、素早いフリックのいずれでも機能します。
• 継ぎ目で、目に見えるジャンプや点滅、意図しない逆再生が起きません。
• モバイル環境や、モーションを軽減する設定でも、ページの読みやすさが保たれます。
• 完了したという主張にはすべて、ブラウザー、コンソール、レスポンシブ表示、アセットの証拠が含まれます。

原文全体を読む

1. 記事または物語を最後まで読みます。
2. 対象のリポジトリ、フレームワーク、アセットパイプライン、現在のページを確認します。
3. 原文に記載された事実と、プレゼンテーション上のアイデアを分けます。
4. 提供されたブランドアセットと、可能であれば参考資料を2～3点集めます。
5. ストーリーを通じて実現したいアクションを1つ特定します。

ローカルに日次インスピレーションのアーカイブがある場合は、アートディレクションを決める前に、最新の撮影記事を1～2件、その静止画、代表的なローカルのモーションファイルを確認します。色使い、階層、素材、構図、モーションなどの原則を抽出し、レイアウトをそのまま模倣してはいけません。また、明示的な承認なしに、ローカルの参考ファイルを外部のジェネレーターにアップロードしないでください。

再利用の権利が不明な場合は、原文を言い換え、引用は短く抑えます。推薦コメント、指標、顧客の主張を捏造してはいけません。

ストーリーマップを作る

原文を5～7個のビートにまとめます。

1. フック — 提案、または意外性のある主張。
2. 従来のやり方 — 解消する摩擦や、覆す考え方。
3. 新しいルール — 道筋を変えるアイデア。
4. 仕組み — システムの働き方。
5. 証拠 — 最も強い根拠。
6. 成果 — 変化した最終状態。
7. アクション — 次のステップを1つ。

コードを書く前に、ビート台帳を作成します。

フィールド	制約
id	短く、安定したスラッグ
scene	ビジュアルの世界に存在するもの
eyebrow	2～4語
headline	3～8語
body	1文。できれば24語未満
evidence	原文にある正確な事実またはアセット
motion	明確な動詞句1つ
scroll weight	ビューポート高の0.7～1.8倍
CTA	前倒しが必要な場合を除き、最後のビートのみ

繰り返し述べられている主張はまとめます。段落ごとにシーンを作らないでください。

スタイルバイブルを作成する

以下を定義します。

• ムード：明確な形容詞を3つ。
• 世界のメタファー：あらゆる場面を収められる場所やシステムを1つ。
• パレット：名前付きの色を4〜6色。主役となる色面を1つ、アクセントを1つ含めます。
• タイポグラフィ：見出し用の書体と本文用の書体を1つずつ。
• 素材表現：紙、ガラス、粘土、写真、機械などのシステムを1つ。
• モーションの文法：前方への滑走、周回、クレーン移動、横方向のトラック、潜行、段階的なリビールから選びます。
• ペース配分：物語が立ち止まる箇所と、素早く展開する箇所。
• 除外項目：避けるべき視覚的な陳腐な表現を3つ。

生成メディアでは、すべてのアセットのプロンプトでスタイルの前置き文を一字一句変えずに再利用します。

モードを1つ選ぶ

選択肢	最適な用途	強み	主なコスト
ビデオスクラブ	映画的なリアリズム、場所、製品、事前レンダリングされたカメラ移動	精密なアートディレクションと写真のような仕上がり	アセットの容量とシーク調整の負担が大きい
Three.js の世界	惑星、オブジェクト、地図、システム、空間的なインタラクション	リアルタイムの奥行きと応答性の高いカメラ制御	WebGL のパフォーマンスとフォールバック対応
HTML／データ／タイポグラフィ	レポート、ローンチ、指標、エディトリアルストーリー	アクセシブルで鮮明、軽量でコンテンツ重視	写真のような演出効果は控えめ

物語の中心が根拠と数値である場合は、HTML／データを優先します。中心となるメタファーが空間的でインタラクティブな場合は、Three.js を優先します。映画的な映像表現がアイデアの核である場合は、動画を選びます。

モード1 — ビデオスクラブ

demo/video/index.html と demo/video/PROMPT.md を使用します。

ソースクリップを生成する

1. カットを入れず、6〜15秒の連続したカメラ移動を1つ選びます。
2. 生成前に、見た目が大きく異なるスタイルの検討案を3つ作成します。アクセントカラーだけでなく、主役となる色面、素材表現、ライティング、構図を変えます。
3. 重要な被写体は中央付近に配置し、見出しに使えるスペースを確保します。
4. 有料ツールを使用する場合は、最終レンダリングの前に短い調整用クリップを生成します。
5. 複数区間にわたる旅では、各区間を、前の区間を実際にレンダリングした最後のフレームから開始します。
6. 元データを保持し、プロバイダー、モデル、プロンプト、シード、尺、アスペクト比、権利を記録します。

ユーザーが Grok Imagine を指定した場合は、現在の動画インターフェースまたは API を使用し、「Video」を選択して、指定されたアスペクト比、尺、解像度を設定し、承認済みのスタイル検討案を生成します。要件に特別な指定がない限り、最初のランディングページ用の試作には、16:9、6〜10秒、720p を推奨します。手続き型のプレースホルダーを生成映像と称して代用してはいけません。

推奨するプロンプトの形式：

カットのない、連続した単一の［カメラ移動］。［冒頭］から［見せ場］まで、［世界のメタファー］の中を進みます。［正確なシーンの流れ］。［一字一句同じスタイルの前置き文］。中央に安全域を確保した構図、エディトリアルなコピー用の静かな余白、テキストなし、ロゴなし、キャプションなし。

モデルが必要な開始フレームを受け付ける場合、またはコネクターの両端のフレームを受け付ける場合を除き、シームレスなコネクターを約束しないでください。

スクラブ用にエンコードする

ffmpeg -i source.mp4 -an \
  -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 \
  -movflags +faststart output.mp4

• すべてのクリップで同じコーデックとエンコードプロファイルを使用します。
• 体験に音声が明示的に含まれない限り、音声を取り除きます。
• 応答性の高いシークができるよう、GOP を短く保ちます。
• バイト範囲リクエストに対応したホスティングを使用するか、スクラブを始める前に Blob URL へフェッチします。
• 動画が描画されるまでは、最初のフレームをポスターとして表示します。
• 正規化したスクロール値を1つの currentTime に対応付け、requestAnimationFrame 内でシーク要求をまとめます。
• 動きを抑える設定では、ポスターまたは順序どおりの静止画を、通常のドキュメントフローで表示します。

モード 2 — Three.js の世界

demo/threejs/index.html と demo/threejs/PROMPT.md を使用します。

1. 最終決定の前に、アートディレクションのスタディを 3 案作成します。それぞれでフィールドの色、オブジェクトのマテリアル、光の挙動、タイポグラフィとの関係、構図を変更します。シェーダーの色だけを変えてはいけません。
2. ソースに明確な根拠がない限り、暗い宇宙に青く光る惑星を置くようなありきたりな表現は避けます。
3. シーン、パースペクティブカメラ、レンダラー、ワールドグループをそれぞれ 1 つ作成します。
4. 主役のオブジェクトにメタファーを担わせます。彫刻、機械、アーカイブ、星座、都市、製品、または比喩的でない惑星系などが考えられます。
5. スクロールの進行度をカメラ位置、カメラの注視点、オブジェクトの回転、ライト、シーン状態に反映します。
6. 周囲の動きは控えめにします。主な演出を導くのはスクロールです。
7. デバイスのピクセル比は 2 以下に制限し、リサイズ時にレンダラーとカメラを更新します。
8. ページが非表示、または画面外にあるときは、継続的なレンダリングを一時停止します。
9. 終了処理では、ジオメトリ、マテリアル、テクスチャ、リスナーを破棄します。
10. WebGL が利用できない場合や、動きを減らす設定が有効な場合に備えて、静的な CSS／SVG ポスターを用意します。

ポータブルなデモでは、ローカルに配置したバージョン固定済みの Three.js ファイルを使用します。コアとなるレンダラーをリモート CDN に依存させてはいけません。

モード 3 — HTML／データ／タイポグラフィ

demo/html-data/index.html と demo/html-data/PROMPT.md を使用します。

1. セマンティックな見出し、段落、リスト、テーブル、実際のリンクから始めます。
2. 最も強い証拠を、棒、折れ線、範囲、傾き、比較のいずれか 1 つのチャート表現にまとめます。
3. DOM のチャートにパスや軸が必要な場合に限りインライン SVG を使用し、ラベルは選択可能なテキストとして残します。
4. 正規化されたスクロール値 1 つから、CSS カスタムプロパティを制御します。
5. トランスフォーム、不透明度、クリップパス、カウンター、SVG のストロークオフセットをアニメーションさせます。
6. チャートのスケールは正確に保ち、値はアクセシブルなテキストまたはテーブルでも示します。
7. JavaScript が無効でも、ページ全体を読める状態にします。
8. 動きを減らす設定では、補間を取り除きつつ、状態の変化と順序は維持します。

このモードを、ひそかに Canvas や WebGL に置き換えてはいけません。このモードの利点は、ネイティブなレイアウト、アクセシビリティ、鮮明でレスポンシブなタイポグラフィです。

ページ共通の要件

コンテンツとレンダラーのコードを分離します。

const story = {
  title: "The journey",
  cta: { label: "Begin", href: "#begin" },
  sections: [
    {
      id: "hook",
      eyebrow: "01 / Premise",
      title: "A destination, not a route.",
      body: "Define arrival clearly and let the system find the path.",
      evidence: null,
      scroll: 1.4
    }
  ]
};

すべての実行環境で、以下を満たす必要があります。

• 固定またはスティッキー表示のビジュアルステージ。
• スクロールの進行を担う仕組み 1 つと、設定駆動のチャプター。
• ネイティブな往復スクロールとキーボードフォーカス。
• シーンの開始点と終了点を変えない、ローカルなイージング。
• 状態が安定したら処理を停止します。ただし、周囲の動きが明確に必要な場合は除きます。
• 現在と次のアセットについて、サイズの大きいものを遅延読み込みします。
• セマンティックな見出し、実際に機能する CTA 1 つ、視認できるフォーカス表示。
• 通常の文書フローを使った、動きを減らす設定向けのバージョン。

新たに確認する

以下を確認します。

1. ストーリー — 各ビートが主張を前進させている。
2. タイミング — 各スクロール位置で適切な状態が有効になっている。
3. 逆方向 — 逆スクロールで直前の状態が正確に復元される。
4. パフォーマンス — 安定後に不要な処理がなく、デコーダーや WebGL に処理待ちが溜まっていない。
5. レスポンシブ対応 — 幅 390、768、1024、1440 ピクセルで確認する。
6. モバイル — 素早いフリック、画面の向きの変更、セーフエリア、読みやすいコピーを確認する。
7. アクセシビリティ — セマンティックな順序、視認できるフォーカス、コントラスト、動きを減らす設定を確認する。
8. 整合性 — すべての事実がソースと一致し、CTA が機能する。
9. コンソール — エラーやローカルアセットの読み込み失敗がない。
10. モードの確認 — 選択したレンダラーが実際に使われていることを確認する。

「構築、確認、最大の不足点を解消」を繰り返します。基準に照らして重大な不足がなくなったら終了します。

成果物

以下を提出します。

• ストーリーマップと最終ビート台帳。
• スタイルガイド。
• 選択したモードと、そのモードが適している理由。
• 動作するページと再利用可能なストーリー設定。
• アセット生成とページ作成に使用した正確なプロンプト。
• 該当する場合、出典、モデル、権利に関する注記を添えたローカルアセット。
• デスクトップとモバイルでの挙動。
• 検証の証拠と既知の制限事項。

3 モードのランチャーは demo/index.html から開始します。REFERENCES.md は外部資料の一覧として保持します。