このテンプレートについて
Infrastructureは書き下ろされたブリーフ1本から組んだSaaSのヒーローセクションで、このページはそのブリーフを記録している。「Ready to elevate your digital infrastructure?」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は深いのインディゴ #010002の下地、白 #DAD6DBの文字、ブルー #0F2F65のアクセント。納品物はReactとTailwind CSSで、2076x1498で記録しているため、コードを書く前に枠が決まっている。動きは4sのトランジション、ループする動画の下地だけで完結する。書いている間は開いておく。2,467文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- プロダクトマーケターで、コピーの背後に8sのループ映像があってもヒーローセクションが読める状態を保ちたい。
- 見出しをInfrastructureと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- SaaSの参考を比較するデザイン責任者で、深いのインディゴ #010002とブルー #0F2F65の上に組まれた一本を探している。
含まれる内容
- 余分を持たないバー. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#0F2F65の操作1つを、ブリーフで最小のタイプ段階に収めています。バーは独自の背景を持たずに2076x1498の構図の上に載るため、その下のメディアは端から端まで届きます。
- 明記された寸法. ブリーフは10px刻みの余白、4sのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- 全画面の動画、パネルなし. クリップは2076x1498で8s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。ループは8sと短く、目にはタイムラインではなくテクスチャとして映ります。
- アクセントの節度. 配色は下地と信号の2色（深いのインディゴ #010002とブルー #0F2F65）で、2色目は操作のために取ってある。#0F2F65と深いのインディゴ #010002のコントラストが、小さいサイズでもアクセントを読ませる。
モーションとインタラクション
短く、明記された時間
状態変化は4sと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。イージングは再生時間と一緒に指定されている（4s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
スクロールライブラリなしの環境モーション
環境の動きは8秒の映像1本を2076x1498で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。
ヒーローセクションの再配置
狭い幅のレイアウトは継承ではなく設計している。スケールは段階式ではなく可変。幅ごとに決まっているので、階層は再配置を越えて残る。再配置しても、どの幅でもアクションに届く。この参考は2076x1498で収録しました。
ヒーローセクションを自社のものにする
新しいコピーは、ブリーフが指定する見出しサイズ（10px刻みの余白、4sのトランジション）で組む。残りのスケールはデザインを変えずに追随する。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。
Infrastructureを仕様として読む
具体的な数値は古びる。2076x1498に合う値が自社の枠に合うとは限らない。それでもブリーフが10px刻みの余白、4sのトランジションを書くのは、明示された値のほうが明示されていない値より変更しやすいから。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
Infrastructureのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。2076x1498のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
InfrastructureはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Infrastructureの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は2076x1498で収録しました。
