このテンプレートについて
F1 Racing Hubは書き下ろされたブリーフ1本から組んだライフスタイルのヒーローセクションで、このページはそのブリーフを記録している。配色は深いのブルー #0A0E1Cの下地、明るいのオレンジ #EDB40Bのアクセント。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。結局、動きは400msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地に尽きる。ライフスタイルブランドのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。
対象
- ライフスタイルブランドヒーローセクションの外観を差し替えるグロース担当は、訴求コピーを変えても1470x1080の画角を保ちたい。
- このヒーローセクションを引き継ぐマーケターは、13px〜120pxの可変型サイズ、42vhのセクションで書き直しが尺度を保ったか確認する。
- プロダクトマーケターで、コピーの背後に7sのループ映像があってもヒーローセクションが読める状態を保ちたい。
含まれる内容
- 操作より前に置くリンク. この行はコントラストを#EDB40Bの操作1か所だけに使い、ワードマークとリンクは文字色に退く。768px未満では、リンクが全画面オーバーレイに畳まれます。ラベルは768pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 1本のクリップが担う. 1470x1080の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。1470x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 幅ごとに定義された挙動. 幅の変化は文字自体で処理します。13px〜120pxのクランプが見出しをスマートフォンからデスクトップまで運び、モバイル専用の構図を必要としません。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
- ビューポート基準の計測. 寸法は収録時点のブリーフに13px〜120pxの可変型サイズ、42vhのセクション、20px刻みの余白、400msのトランジションとして書かれている。再現は近似ではなく検証になる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
モーションとインタラクション
ホバーは控えめに
インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態、必要なときに内容を送るスライダー）。状態が予測できるのはそのため。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。ポインターの効果はコントロールに留める。この参考は1470x1080で収録しました。
短く、明記された時間
時間は短く揃っている（400ms、cubic-bezier(0.16,1,0.3,1)で）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。
ヒーローセクションを自社のものにする
トレードオフは見分けのつきやすさ。 F1 Racing Hubを残しすぎると他人のページに見え、数値を残して中身を変えれば自社のページとして読める。触れずにおくのは枠とスケール。この参考は1470x1080で収録しました。
ヒーローセクションを支えるタイミング
短いモーション予算は、最初の画面の劇性を犠牲にする。代わりに可読性を買い、400msのトランジション、7sのメディアループ、ホバー状態と押下状態をライブラリなしで移植できるようにする。このヒーローセクションで、動くために動く要素はない。
ライフスタイルに効くところ
引き算は、ファーストビューに実績を置く余地を削る。このブリーフはそのコストを受け入れ、最初の画面を訴求に使う。13px〜120pxの可変型サイズ、42vhのセクションを固定してあるので、実績セクションは下に足しても作り直しにならない。ライフスタイルの読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
F1 Racing Hubの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは10,448文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
F1 Racing Hubのプロンプトはなぜここに掲載されていないのですか？
このページに引用している内容はすべて、収録された10,448文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
F1 Racing HubはReactとTailwind CSSにどこまで依存していますか？
F1 Racing HubはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
