Cast and Renderの3D・ゲームランディングページデザインとプロンプト

このテンプレートについて

Cast and Renderは3D・ゲーム・エンタメブランド向けの実用的な参考だ。ランディングページはすでに配置され、寸法も測られ、いつでも作り直せる。色はニュートラル #F2F0ECの下地、ほぼ黒 #0A0908の文字に限り、Interで組んでいる。納品物は自己完結したHTMLファイル1つで、1920x1432で記録しているため、コードを書く前に枠が決まっている。結局、動きは3sのトランジション、cubic-bezier(.22.61.36,1)、ループする動画の下地に尽きる。3Dのランディングページを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは1920x1432で記録したので、このページで引用する値はすべてそこにたどれる。

対象

引き継ぎメモにcubic-bezier(.22.61.36,1)のイージングを書け。次のビルドがページから導き直さずに済む。
このランディングページを引き継ぐ外部チームには、最初のコミット前に自己完結したHTMLファイル1つをリポジトリへ固定する必要がある。
制作の仕様を書き、批判的に検討する材料として280pxのブレイクポイントを探しているStudioのチーム。

含まれる内容

余分を持たないバー. ナビゲーションは1行だけで、下に第2階層を持たない。280px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは280pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
文字の背後に全面配置したクリップ. 4.9sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。自動再生が使えないときは1920x1432のポスター画像が構図を保つため、レイアウトが崩れることはありません。
1書体、2つの役割. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。サイズが大きくなるほど字間を詰めるため、12–15pxの範囲でディスプレイの行がまとまります。
実装まで持ち込む数値. ここに目分量はありません。仕様が12px〜15pxの可変型サイズ、560vhのセクション、角丸999px、14px刻みの余白を固定し、残りのレイアウトはその値から導かれます。余白は文字と同じ単位で書かれ、そのまま比較できる。

モーションとインタラクション

スクロールが構図を進める

ページのスクロール挙動はスクロール連動の表示演出だけなので、この効果は構図の中で場所が決まっている。ページはスケジュールではなく読者のペースで変わる。効果を外した状態で構図を確認する。この参考は1920x1432で収録しました。

ミリ秒で書かれた時間

トランジションの指定は3s、cubic-bezier(.22.61.36,1)で。コントロールはこの時間に縛られる。イージングは再生時間と一緒に指定されている（3s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

Cast and Renderを仕様として読む

このページの関係はすべて検証できる値になっている。12px〜15pxの可変型サイズ、560vhのセクション、角丸999px、14px刻みの余白、3sのトランジション。 Cast and Renderが単に再現できるだけでなく作り直せるのはそのため。このランディングページに、初期値任せの部分はない。

Cast and Renderの最初の読みの順序

1画面、1つのアクション、その間にナビゲーション、お知らせのピル、数値の行、機能リスト、カウントダウン。ブリーフはファーストビューをセクションの積み重ねに任せず、この順序を本文で固定している。3Dの読み手は、選択肢より先に訴求を受け取る。この参考は1920x1432で収録しました。

このランディングページが立てる主張

このデザインは1画面で主張を完結させる。メディアは1920x1432の4.9sループ映像だ。雰囲気はメディアが、訴求はコピーが担い、両者を分けているのが12px〜15pxの可変型サイズ、560vhのセクション。 Cast and Renderは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。