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

Adventraは制作会社・スタジオ向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。見出しは「Home, Our Story, FAQ, Policies」で、ヒーローセクションの残りはその周りに配置されている。配色は黒 #303230の下地、グレー #CAC7BDの文字で、書体はInter。この参考例は自己完結したHTMLファイル1つで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションはループする動画の下地に限っている。制作会社・スタジオのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1856x1398で記録したので、このページで引用する値はすべてそこにたどれる。

対象

• 工数を見積もるプロダクトマネージャーは、自己完結したHTMLファイル1つを作業範囲として読む。
• 自己完結したHTMLファイル1つで運用中のプロジェクトに途中参加し、コピーの差し替えだけを担うデザイナーのために作った。
• この種のページを通常の工程で出すフロントエンド開発者は、自己完結したHTMLファイル1つを参照実装として使う。

含まれる内容

• 邪魔にならないナビゲーションバー. バーは1行のテキストと1つの操作だけで、60pxで固定した表示サイズ、100vhのセクションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1856x1398の構図の上に載るため、その下のメディアは端から端まで届きます。主張の強いファーストビューでも耐えるナビゲーションが必要なときに、このパターンをそのまま使ってください。
• 既定値に頼らない構成. リストは短く（60pxで固定した表示サイズ、100vhのセクション、16px刻みの余白）、システム全体を手作業で確認できる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
• オーバーレイなしのメディア. 構図は1856x1398のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。1856x1398以上で書き出せば、coverの切り抜きはそのまま機能する。
• 段差の大きいスケール. 書体はサイズと一緒に書いてある（Inter、60px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、60pxの範囲でディスプレイの行がまとまります。スケールは明記されています。それを使ってください。

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

よくある質問（FAQ）