このテンプレートについて
Tech-Forwardは1464x1080で記録し、ギャラリー用の画像ではなく仕様として残した。「One Card, Zero Limits. Worldwide」は、レイアウトが背負うために組まれた一行。配色は白 #FDFBFAの下地に絞り、書体はInter。納品物はReactとTailwind CSSで、1464x1080で記録しているため、コードを書く前に枠が決まっている。モーションは0.8sのトランジション、ループする動画の下地で、コピーが主役のままになる程度に抑えている。フィンテックプロダクトのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、1464x1080の枠から最小の余白ステップまで含む。
対象
- まず100vhのセクション、13px刻みの余白から決めろ。配色は後からついてくる。このヒーローセクションを読ませているのは余白だ。
- プロダクトマーケターで、コピーの背後に6sのループ映像があってもヒーローセクションが読める状態を保ちたい。
- ヒーローセクションをモデルに指示する人は、3,400文字のプロンプトを出発点に使う。
含まれる内容
- 操作より前に置くリンク. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1464x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- ブリーフで固定した寸法. レイアウトは固定値（100vhのセクション、13px刻みの余白、0.8sのトランジション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。余白は文字と同じ単位で書かれ、そのまま比較できる。
- ループが背景になる. 6sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。ループは6sと短く、目にはタイムラインではなくテクスチャとして映ります。
- ファーストビューに置く根拠. 数字はInterで、本文よりも見出しに近いサイズで組む。数字は周囲のコピーと同じベースラインに乗り、行が1つの塊として読める。数値は1行に収めてください。
モーションとインタラクション
意図を感じる速さ
時間は短く揃っている（0.8s）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。イージングは再生時間と一緒に指定されている（0.8s）ので、作り直しの際に別の感触へ黙って差し替わることはない。挙動1つにつき時間1つ。
タイムラインではなくループ
背景の映像は6秒、1464x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。1464x1080以上で撮影または書き出す。
ヒーローセクションを支えるタイミング
ここのトランジションにはすべて数値が付いている。0.8sのトランジション、6sのメディアループを勘で調整し直すのではなく、値ごと移植できるのはそのため。このヒーローセクションで、動くために動く要素はない。
ヒーローセクションを支える数値
具体的な数値は古びる。1464x1080に合う値が自社の枠に合うとは限らない。それでもブリーフが100vhのセクション、13px刻みの余白を書くのは、明示された値のほうが明示されていない値より変更しやすいから。このヒーローセクションに、初期値任せの部分はない。
ヒーローセクションの再配置
流動的なスケールと段階的なスケールは、広い画面では似て見える。ビューポートを狭めると差が出る。28px〜13pxのクランプか、固定の跳ね幅かという違いだ。詰め込みのほうが安く済むが、保たない。
よくある質問（FAQ）
Tech-Forwardの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。1464x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Tech-ForwardはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Tech-Forwardの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1464x1080で収録しました。
