このテンプレートについて
Airlines Hero Sectionはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。配色は深いのインディゴ #20153Eの下地、インディゴ #56489Bのアクセントに絞り、書体はInter。この項目は、ページを生んだ技術スタック（自己完結したHTMLファイル1つ）を隠さずに書いている。結局、動きはループする動画の下地に尽きる。この参考例は、作り始める前にファーストビューを固めたい旅行ブランド向け。以下に引用する値はすべてこのブリーフのもので、1466x1080の枠から最小の余白ステップまで含む。収録したプロンプトは1466x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- 旅行の案件を提案し、クライアントへの初回返信に自己完結したHTMLファイル1つを載せる必要がある制作会社のためのものだ。
- 自社の見出しを書き、そのうえで計測値を変えずに自己完結したHTMLファイル1つでこのヒーローセクションを組み直せ。
- 旅行ブランドのヒーローセクションを作るチームで、スクリーンショットを写すのではなく実測値（100vhのセクション、14px刻みの余白）を求めている。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. リンクは同じ文字サイズで1行に並び、#56489Bの操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#56489Bの操作だけがバーの中で重みを持つ要素です。
- ブリーフで固定した寸法. レイアウトは比率ではなく絶対値で組む（100vhのセクション、14px刻みの余白）。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。差し替えるのは書体かコピーで、スケールではありません。
- 雰囲気を担うメディア1つ. 背景は1466x1080の2.2sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。ループは2.2sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 役割ごとに指定した字重. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
モーションとインタラクション
ホバーは意味のある場所だけに
ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。操作を確認しない状態は削る。この参考は1466x1080で収録しました。
タイムラインではなくループ
環境の動きは2.2秒の映像1本を1466x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。
旅行ブランドがここで得るもの
Airlines Hero Sectionは旅行ブランド向けのヒーローセクション参考であり、この対象読者が実際に抱える課題に答えている。配色は深いのインディゴ #20153Eとインディゴ #56489Bの2色に絞られ、書体はInterで組まれているので、借り物の流行に寄りかかる要素がない。制作を依頼するとき写すべきなのはこの部分である。表示サイズで約束を一つだけ置き、支える情報はすべてその下に収める。旅行の読み手に、訴求へ至る最短の正直な道を示す。
ヒーローセクションの背後にある順序
注意は偶然に任せず、導いている。順序はナビゲーション、見出し、数値の行、背景のクリップと進み、各停留点は100vhのセクション、14px刻みの余白に合わせて寸法を取るので、順番が崩れることはない。旅行の読み手は、選択肢より先に訴求を受け取る。
Airlines Hero Sectionで動くもの
この構成に既製のライブラリを載せれば、良くなるどころか騒がしくなる。ブリーフはホバー状態と押下状態、2.2sのメディアループ、ループするマーキーにとどめ、予算をそこに使う。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Airlines Hero Sectionのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは2,222文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Airlines Hero Sectionは自己完結したHTMLファイル1つにどこまで依存していますか？
この参考例はたまたま自己完結したHTMLファイル1つで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。
手に入れたAirlines Hero Sectionのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された2,222文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
