このテンプレートについて
Vectrus Energyは書き下ろされたブリーフ1本から組んだ製造業のランディングページで、このページはそのブリーフを記録している。「Advancing resources for a cleaner future」は、レイアウトが背負うために組まれた一行。配色はグレー #C7CED7の下地、深いのブルー #1D3045の文字に絞り、書体はHelvetica, Arial。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションは200msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。製造業のランディングページを発注するなら、この構成から始めて主題だけ差し替える。
対象
- このランディングページは、1468x1080の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
- このランディングページにブロックを足していく社内チームには、500vhのセクション、40px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
- プロダクトマーケターで、コピーの背後に5.6sのループ映像があってもランディングページが読める状態を保ちたい。
含まれる内容
- 一行に収めたナビゲーション. 短いリンク列と1つの操作がランディングページの上に載り、寸法は500vhのセクション、40px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1468x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 文字として組む機能リスト. 機能はカードのグリッドではなくHelvetica, Arialのリストとして組むため、狭い画面でもページが密に、すばやく拾い読みできます。リストは見出しと同じマージンに左揃えで置きます。
- 明記された余白の刻み. レイアウトは固定値（500vhのセクション、40px刻みの余白、200msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージング）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
- 文字の後ろのメディア. クリップは1468x1080で5.6s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。1468x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
モーションとインタラクション
スクロールライブラリなしの環境モーション
背景の映像は5.6秒、1468x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。1468x1080以上で撮影または書き出す。
状態変化にも時間を与える
アニメーションの予算は小さく、明示されている。200ms、cubic-bezier(0.16,1,0.3,1)で。適用先は入場ではなく状態変化だ。スクロール位置を待つものはないので、触れた瞬間にページが反応する。見た目を作り替えても再生時間は残す。
ランディングページを自社のものにする
ブリーフはHelvetica, Arialを指定し、その隣にスケールを置いている。同じ比率を持つ書体に差し替えるかぎり、構成は保たれる。メディアのトリミングは守る。書体と同じだけ働いている。
ランディングページの背後にある順序
製造業の読み手は、1画面に着くと読む前に走査する。このレイアウトはそれに応える。ナビゲーション、見出し、数値の行、機能リスト、背景のクリップは走査される寸法で置き、500vhのセクション、40px刻みの余白が各停留点を区別する。製造業の読み手は、選択肢より先に訴求を受け取る。
ランディングページの再配置
ここでのレスポンシブは、尺度が変わり順序が変わらないこと。スケールは段階式ではなく可変、セクションは500vhに固定、ナビゲーションはモバイルメニューに畳まれる。読み順はブリーフが置いた位置にとどまる。最後まで変えないのは順序。
よくある質問（FAQ）
Vectrus Energyのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは8,300文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
手に入れたVectrus Energyのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された8,300文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Vectrus EnergyはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
