このテンプレートについて
3D Character Studioは制作会社・スタジオ向けのランディングページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。「Glad you stopped in. Good taste tends to find us. Now, what are we building?」は、レイアウトが背負うために組まれた一行。カラースキームは赤 #800014の下地、明るいの赤 #E12444のアクセントで、ページはHelveticaNowDisplay-Mediumで組む。納品物はReactとTailwind CSSで、1740x1080で記録しているため、コードを書く前に枠が決まっている。ページはモーションを38msのトランジション、ループする動画の下地にとどめる。書いている間は開いておく。5,726文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- このランディングページは、レイアウトの中で13px〜32pxの可変型サイズ、26px刻みの余白が何を決めているのかを知りたい実装者に答える。
- このランディングページは、制作会社のコピーが6.6sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 見出しを3D Character Studioと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- ドロワーを持たない一行. ワードマーク、リンク、#E12444の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#E12444の操作だけがバーの中で重みを持つ要素です。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
- ブリーフに直書きされたサイズ. サイズは継承ではなく明記されています（13px〜32pxの可変型サイズ、26px刻みの余白、38msのトランジション）。書体やコピーを差し替えても、この関係は保たれます。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。数値がデザインで、残りは配置にすぎません。
- 全画面の動画、パネルなし. 動画は1740x1080の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。自動再生が使えないときは1740x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 1つずつ役割を持つ書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのHelveticaNowDisplay-Medium、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。サイズが大きくなるほど字間を詰めるため、13–32pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
見せ場は到達の順序
入場がページに到達の瞬間を与え、走り終わったあとの構図は変わらない。タイプライターのように導入文が打ち出される。完成した状態は静止画と同じ構図なので、動きの完了に何かが依存しているわけではない。要素は一つに抑える。増やすとページが演じ始める。この参考は1740x1080で収録しました。
ホバーは控えめに
ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は1740x1080で収録しました。
ランディングページの背後にある順序
ファーストビューを一度流し読みすれば、訴求はもう伝わっている。ナビゲーション、お知らせのピル、数値の行、背景のクリップは順に現れ、装飾的な区切りではなく13px〜32pxの可変型サイズ、26px刻みの余白で隔てられる。制作会社の読み手は、選択肢より先に訴求を受け取る。
3D Character Studioを仕様として読む
スクリーンショットはページがどう見えるかを伝え、ブリーフはなぜそうなのかを伝える。13px〜32pxの可変型サイズ、26px刻みの余白、38msのトランジションがその間を埋める。このランディングページに、初期値任せの部分はない。
ランディングページを支えるタイミング
ここのモーションをスクロール連動のページと比べる。どちらも動くが、これはブリーフが指定した場所（38msのトランジション、6.6sのメディアループ、タイプライター演出）だけ動くので、コピーが前に出たままになる。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
3D Character Studioのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。1740x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
3D Character Studioのランディングページを別の技術スタックで作り直せますか？
3D Character StudioはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
3D Character Studioはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1740x1080で収録しました。
