Talent Collectiveの制作会社・スタジオランディングページデザインとプロンプト

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

Talent Collectiveは書き下ろされたブリーフ1本から組んだ制作会社のランディングページで、このページはそのブリーフを記録している。色はグレー #BAB8B5の下地に限り、Geistで組んでいる。納品物はReactとTailwind CSSで、1904x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きは700msのトランジション、ループする動画の下地に尽きる。制作会社・スタジオのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、1904x1080の枠から最小の余白ステップまで含む。収録したプロンプトは1904x1080で記録したので、このページで引用する値はすべてそこにたどれる。

対象

このランディングページは、制作会社のコピーが6.5sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
見出しをTalent Collectiveと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
ランディングページをモデルに指示する人は、9,583文字のプロンプトを出発点に使う。

含まれる内容

邪魔にならないナビゲーションバー. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてGeistで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1904x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
既定値に頼らない構成. ブリーフは数値を名指ししています（40px刻みの余白、700msのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。余白は文字と同じ単位で書かれ、そのまま比較できる。
オーバーレイなしのメディア. メディアは物語ではなく雰囲気を担う。1904x1080の6.5sループがすべての後ろに敷かれる。自動再生が使えないときは1904x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
タイポグラフィとしての数字. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じGeistで組むため、装飾ではなくデータとして読めます。ラベルは1つのサイズで組み、長いラベルでも行の高さが変わらない。

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

意図を感じる速さ

仕様では状態変化ごとに時間が指定されている。トランジションは700ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。コントロール間で同じ値を再利用するので、時間がばらけようがない。ブラウザの既定値のまま出さない。

タイムラインではなくループ

6.5秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。映像が短いので切れ目なくループでき、解像度よりもその点が効く。1904x1080以上で撮影または書き出す。

ランディングページの背後にある順序

自社のコピーをこのランディングページに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、見出し、数値の行、機能リスト、フッターはそれぞれ1つの役割を担う。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は1904x1080で収録しました。

ランディングページを自社のものにする

テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても40px刻みの余白、700msのトランジションが固定されていること。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。

ランディングページの再配置

デスクトップの構図は1904x1080を基準に解かれ、狭い幅のレイアウトは継承ではなく設計されている（スケールは段階式ではなく可変）。モーションには低減モーションの分岐があり、メディアにはポスターフレームがあるので、自動再生が使えない環境でもページは内容を伝える。幅が変えるのは寸法で、読みの経路ではない。