このテンプレートについて
Velora Hero Sectionは旅行ブランド向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。「Rent Your Dream Luxury Car Today」は、レイアウトが背負うために組まれた一行。カラースキームは黒 #0A0A0Bの下地、白 #FFFFFFの文字で、ページはArchivoで組む。実装は自己完結したHTMLファイル1つだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。モーションはループする動画の下地で、コピーが主役のままになる程度に抑えている。旅行ブランドのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1500x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- AIビルダーを使う人で、モデルに任せるのではなく自己完結したHTMLファイル1つが最初から入った仕様を求めている。
- 競合の旅行ヒーローセクションを作り直すチームが、フレームワークを決める前に自己完結したHTMLファイル1つを明示したい。
- 自己完結したHTMLファイル1つから組み始めるなら、先に100vhのセクション、56px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。
含まれる内容
- 背景を持たないナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてArchivoで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1500x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 明記された寸法. 寸法は収録時点のブリーフに100vhのセクション、56px刻みの余白として書かれている。再現は近似ではなく検証になる。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
- 最下層に置く動画. メディアは4.9sのクリップ1本で、1500x1080の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。1500x1080以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは1500x1080以上にして、トリミングを正確に保ってください。
- 主張ではなく数値の行. 数字はArchivoで、本文よりも見出しに近いサイズで組む。行の中に区切り線はなく、数字を分けるのは余白だけ。数字を枠で囲まない。
モーションとインタラクション
インタラクティブ層はコントロール
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。この参考は1500x1080で収録しました。
ループが環境演出を担う
4.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。この参考は1500x1080で収録しました。
ヒーローセクションを自社のものにする
ブリーフはArchivoを指定し、その隣にスケールを置いている。同じ比率を持つ書体に差し替えるかぎり、構成は保たれる。構成より差し替えのほうが安い。それがこの参考例の狙いだ。
ヒーローセクションを支える数値
このヒーローセクションは目分量ではなく寸法で決まっている。100vhのセクション、56px刻みの余白はブリーフから来ており、レイアウトはその段階に合わせて組み、勘で寄せていない。このヒーローセクションに、初期値任せの部分はない。
ヒーローセクションの背後にある順序
マーケティングページが折り返しの下に実績を積んで期待するのに対し、このヒーローセクションはナビゲーション、見出し、数値の行、背景のクリップを読み手の前に出し、残りは引いておく。旅行の読み手は、選択肢より先に訴求を受け取る。この参考は1500x1080で収録しました。
よくある質問（FAQ）
Velora Hero Sectionを作り直すのに自己完結したHTMLファイル1つは必要ですか？
Velora Hero Sectionは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
このVelora Hero Sectionの項目はどういう構成になっていますか？
このページに引用している内容はすべて、収録された3,216文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Velora Hero Sectionの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。1500x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
