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

製造・産業企業向けにヒーローセクションを作り直す前にCoreOSを読むと、構成とそれを支える仕様がここに揃っていることが分かる。ページ全体は黒 #2E3233の下地でできている。納品物はReactとTailwind CSSで、1468x1080で記録しているため、コードを書く前に枠が決まっている。動きは0.5sのトランジション、ループする動画の下地だけで完結する。製造・産業のヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは1468x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1468x1080の枠から最小の余白ステップまで含む。

対象

• このヒーローセクションを引き継ぐマーケターは、62pxで固定した表示サイズ、14px刻みの余白で書き直しが尺度を保ったか確認する。
• プロダクトマーケターで、コピーの背後に4.9sのループ映像があってもヒーローセクションが読める状態を保ちたい。
• 製造・産業企業ヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。

含まれる内容

• ページのグリッドに乗るバー. ナビゲーションは1行だけで、下に第2階層を持たない。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに1468x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
• 文字と画幅で1つの尺度. レイアウトは比率ではなく絶対値で組む（62pxで固定した表示サイズ、14px刻みの余白、0.5sのトランジション）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。根拠がなさそうに見える値こそ残す。
• 文字の背後に全面配置したクリップ. ミュートしたループクリップ1本が1468x1080のフレームを覆い、4.9sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。ループは4.9sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1468x1080以上にして、トリミングを正確に保ってください。
• コピーが先、装飾は後. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは1468x1080の1つの構図です。コピーが変わっても崩れないのはそのためです。

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

よくある質問（FAQ）