シーン方向設定 (Scene Direction) は何をしますか？
「没入型3Dサイト」と依頼すると、AIモデルがこれまでに見てきたすべての3Dデモの平均値、つまり紫色の夜に浮かぶ呼吸する球体、点線の地球儀、灰色の床に置かれた灰色の製品、あるいはどのセクションも同じような整然とした分割レイアウトを構築します。賞を獲得するサイトは別のことをします。被写体から生まれた一つのアイデア、そのオブジェクト独自の世界、ストーリーのビートごとに変わるカメラショット、光源と段階的な仕上げを備えた照明、個性のあるタイポグラフィ、インタラクションできる一つの仕掛け、そして本物のサイトのクローム。 そして、それらはスマートフォン上でもスムーズに動作します。
このスキルは、提示された方向性、アセットライブラリ、完全な仕上げパイプラインを備えたスターター、そして訪問者と審査員が見るようにページをレンダリングしてチェックする機能を提供します。3Dの方向性を決定します。もし、ページデザインスキル（taste-skill, impeccable, hallmark）、three.js APIスキル（cloudai-x/threejs-skills）、または公式GSAPスキルがインストールされていれば、それらの部分で活用してください。
<skill> はこのスキルのフォルダを指します。スクリプトはプロジェクトフォルダから実行してください。
実行手順
- インベントリ。 現実のものをリストアップします：被写体の名前、製造・販売するもの、所在地、数値、工芸品、提供されたモデルや画像。提供されたモデルがヒーローになります（references/object.md）。
- 方向性を提示（ディール）。 何も指定しないとカテゴリのデフォルトを選んでしまうため、スクリプトにディールさせます：
node <skill>/scripts/draw.mjs --kind <person|maker|product|place|brand|event|...> --brief "<一行で要約>" node <skill>/scripts/draw.mjs --direction <選択したID> --brief "<一行で要約>" --scenes <n>.scene-direction/sheet.mdを書き出します：ムード、世界観、照明、仕上げ、探すべきアセット、グラウンド、フォント、そして各シーンのショットとコピーの配置。これを採用してください。明示的な理由がある場合のみ再ディールし、その理由をレポートに記載してください。 - アイデアとライブな仕掛け （references/idea-and-devices.md）。このサイトでは、[被写体に属する何か] が [方向性の世界観または仕掛け] になる。 これは競合他社のテストに合格しなければなりません。一つのライブな仕掛けを追加してください。references/tells.md を参照してください。
- アセットを取得する （references/assets.md）。シートの
assets.mjsコマンドを実行します：HDRI、およびシートの忠実度に応じて被写体の周囲の世界のための小道具とサーフェス。選択する前にコンタクトシートを確認し、getコマンドでassets/に取得してください。 <skill>/assets/starter.htmlから構築する。 これはインフラストラクチャであり、レイアウトではありません：CSSのグラウンドを背景とするフルブリードのキャンバス、仕上げチェーン（HDRI、AO、ブルーム、ビネット、トーンマッピング、SMAA）、カメラ用のSHOTS、シーンごとのコピー配置（スクリム付き）、一つのクロック（gsap.ticker + Lenis）、ラインディスカバー、短いイントロ、ヘッダー、インデックス、フッター、ポインタードリフト、モーション軽減、品質ステップ。シートからFINISHを埋め、各セクションのdata-ground、data-shot、data-copy、data-chapterを設定してください。プレースホルダーのテキスト、タイトル、説明を置き換えてください。ViteやNext.jsでは、その部品を移植してください。- 世界とオブジェクトを作る （references/object.md, colour-world.md, finish.md）。被写体独自のものを object.md の水準でモデリングし、それを どこか に配置します：フェッチした小道具とサーフェス、部屋、谷、コレクション。シートのリグとフレーム内の光源でライティングしてください。
- ストーリー、ショット、モーション （references/scenes-and-motion.md, motion-and-type.md）。各シーンにビート、シートのショット、ディスプレイ書体のステートメントを割り当てます。場所の場合、カメラはジオラマの周りではなく、ルートに沿って世界の中を移動します（
pathシーン）。カメラの移動、スマートフォンバージョン、モーション軽減を計画してください。被写体の言語でクロームを装飾してください（references/chrome.md）。 - チェック。
node <skill>/scripts/check.mjs <folder-or-url> --out scene-check # イントロゲートがある場合は --click "Enter" を追加npm i -D playwright && npx playwright install chromium。プロジェクトに依存関係を追加したくない場合は、スクラッチフォルダで）。各シーンを静止点でデスクトップとスマートフォンで撮影し（scene-check/film-desktop.png、film-phone.png）、モーション軽減を有効にして再度ページを読み込み、フレームタイム、ページ重量、イントロの所要時間を報告します。書き出されたすべての画像を確認してください。 - 見て修正：上位3つ、最大3ラウンド （references/critique.md）。画像からルーブリックを採点し、最も弱い3つを修正し、チェックして再度確認してください。デザインを維持するための最小限の変更で問題を修正してください。問題が意図的なもの（重ねられたタイプ、意図的なクロップ、フォールドの下から現れるオブジェクトなど）である場合は、そのまま維持し、名前を付けてください。
- レポート。 方向性、アイデア文、ライブな仕掛け、使用したアセット、チェック結果、スコア、意図的に維持したものを記載してください。
野心的に、制限せずに
ブラインドテストでは、審査員は、小さな欠点はあってもリッチで雰囲気のあるページを、欠点はないが無難で整然としたページよりも常に好みました。欠陥を取り除くことは仕事の半分です。残りの半分は中身です：
- フルブリード。 3Dが画面を占有します。コピーはその上にスクリムを乗せて配置するか、またはオブジェクトの隣に配置し、レンダリングがオブジェクトから遠ざかるようにします。
- シーンごとに異なるショット。 コピーを入れ替えただけの同じカメラは使用しないでください。チェックは、スクロール全体で1つか2つのショットしかないページをフラグします。
- 大きなヒーロー。 最初の画面では、オブジェクトまたは世界がフレームの大部分を占め、その隣に名前が大きく設定されます。
- 空虚ではなく、世界がある。 部屋、テーブル、土地、コレクション、被写体に属する小道具、実寸で。
- 雰囲気と仕上げ。 時間帯と方向性のあるライト、シーン内で光る光源、コンタクトシャドウ、段階的に調整されたフレーム。リッチで、ミルキーではない：すべてのフレームは真の暗部と彩度の高い色を持ちます。フォグは世界の遠近感のためだけに使い、被写体の上には決してかけません。
- 個性のあるタイポグラフィ。 シートのディスプレイ書体をディスプレイサイズで、インベントリからの実際の単語と数字を使って、一行ずつ表示します。
- デモではなくサイト。 ヘッダー、インデックス、実際の連絡先のあるフッター、約2秒のイントロ。
最低基準：絶対に出荷してはいけないもの
- チェックからの ERROR：クラッシュ、白いキャンバス、読み込み失敗（モーション軽減時も同様）。
- 誤ってクロップされた被写体、またはスマートフォンの最初の画面で小さすぎる被写体。
- シーンの静止点で読めないステートメント、または単語がないスクロール範囲。
- スマートフォンよりも広いレイアウト。
- 隠されたネイティブカーソル、欠落したタイトル、説明、
h1、またはプレースホルダーコピー。 - 訪問者を数秒以上待たせるイントロ、またはチェックのGPU上で40 fps未満のフレーム。
- 古い、または一致しないthree.jsのバージョン。プロジェクトのバージョン、または以下のバージョンを使用してください。
タグ別の修正
- [errors]：何よりもまず最初のエラーを修正してください。一般的な原因は、コンストラクタ引数の入れ替え、宣言前の
let/constの使用、別のバージョンへのアドオンURL、インポートマップエントリの欠落、404、CORSによるテクスチャブロックです。 - [framing]：現在のアスペクト比に合わせてショットごとにフレーミングを調整してください（references/framing.md）。
- [ambition]：シートから各シーンに独自のショットを割り当ててください（references/scenes-and-motion.md）。
- [story]：ステートメントのないフレーム。各シーンの単語が画面に表示されている間は画面上に保持し、ハンドオーバー時のみフェードアウトさせてください（スターターのループはこれを実行します）。
- [labels]：重なったりクリップされたテキストやラベル、スマートフォンのツールバー（references/labels.md）。
- [legibility]：テキストの背後にあるシーンを落ち着かせるか、何かを動かす前にスクリムを強化してください（references/legibility.md）。ブルームする明るい面は明るすぎます：しきい値を下げるのではなく、ライトを下げてください。
- [usability]：審査の基本：ネイティブカーソル、タイトル、説明、言語、一つの
h1、代替テキスト、モーション軽減（references/chrome.md）。 - [performance]：ピクセル比、シャドウマップサイズ、AO品質、小道具の削減、テクスチャの縮小（references/finish.md §7）。
固定バージョン
2026-11-03 に npm と jsDelivr で確認済み（スターターのインポートマップ）：
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao は three/examples/jsm/… をインポートするため、そのエントリを保持してください。postprocessing 6.39 は three r187 までをサポートします。r187 の注意点：PCFSoftShadowMap は廃止されました（代わりに PCFShadowMap と shadow.radius を使用）。HDRLoader が RGBELoader を置き換えました。outputEncoding/sRGBEncoding は廃止されました。GSAP 3.13+ には SplitText（gsap/SplitText.js）が含まれています。
リファレンス
| ファイル | 読むタイミング |
|---|---|
| references/idea-and-devices.md | ステップ3：アイデア文、仕掛け、ライブな仕掛け |
| references/tells.md | ステップ3、およびレポートの前に再度 |
| references/assets.md | ステップ4：忠実度、小道具の発見と配置、予算 |
| references/object.md | ステップ6：提供されたモデル（カラーバリエーション含む）、コード構築オブジェクトの水準、ディテール、マテリアル |
| references/colour-world.md | ステップ6：パレットから背景、ライト、マテリアルへ。トーンマッピング。フォグ。グレイン |
| references/finish.md | ステップ6：ライトリグ、HDRI、コンタクトシャドウとAO、ポストチェーン、パフォーマンス |
| references/scenes-and-motion.md | ステップ7：ビート、ショット用語、カメラ移動、パス、スマートフォン |
| references/motion-and-type.md | ステップ7：一つのクロック、イージングと継続時間、ディスカバー、イントロ、タイプスケール、モーション軽減 |
| references/chrome.md | ステップ7：ヘッダー、インデックス、フッター、カーソル、マークアップ、サウンド |
| references/critique.md | ステップ9：ルーブリックと「見て修正」ループ |
| references/framing.md, labels.md, legibility.md | 該当タグの問題を修正するとき |
| references/example-furkanboran.md | 水準を確認するため：実際のサイトを分解した例 |
| library/directions.json | スクリプトがディールする12の方向性 |
クレジット
ディールされた方向性、アイデア文、競合テスト、「一つのライブな仕掛け」、「見て修正」ループ、そして制限だけでは薄味になるという警告は、taste-skill（MIT）から翻案されました。署名と方向性のローテーションは hallmark（MIT）から、Experienceモードは impeccable（Apache-2.0）から、アーキタイプ用語は awwwards-3d（MIT）から来ています。モデル、テクスチャ、HDRIは Poly Haven（CC0）から来ています。実例とそれから翻案されたパターンは、Furkan Boran による furkanboran.info からのものです。README.md を参照してください。