このテンプレートについて
Brightlyは2046x1400で記録し、ギャラリー用の画像ではなく仕様として残した。「Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は黒 #050505の下地、明るいのオレンジ #F97316のアクセント。納品物はReactとTailwind CSSで、2046x1400で記録しているため、コードを書く前に枠が決まっている。結局、動きは3.5sのトランジション、ループする動画の下地に尽きる。この参考例は、作り始める前にファーストビューを固めたい制作会社・スタジオ向け。
対象
- このヒーローセクションは、制作会社のコピーが13.7sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 制作会社・スタジオヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ヒーローセクションをモデルに指示する人は、2,298文字のプロンプトを出発点に使う。
含まれる内容
- ページのグリッドに乗るバー. この行はコントラストを#F97316の操作1か所だけに使い、ワードマークとリンクは文字色に退く。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#F97316の操作だけがバーの中で重みを持つ要素です。
- 既定値に頼らない構成. ブリーフは数値を名指ししています（24px刻みの余白、3.5sのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。リストの最小値と最大値が、構図の可動範囲を決める。
- 効いてくるポスターフレーム. 2046x1400の動画がコピーの背後で13.7sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。ループは13.7sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 装飾のための色は置かない. ここでは色を配分する。アクセント1色（#F97316）と下地1色（黒 #050505）だけで、注意を奪う第3の色はない。#F97316と黒 #050505のコントラストが、小さいサイズでもアクセントを読ませる。
モーションとインタラクション
スクロールライブラリなしの環境モーション
背景の映像は13.7秒、2046x1400でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。
入場そのものが署名
入場の動きはページを囲む枠ではなく、ページ自身のメッセージに使う。見出しが一語ずつ現れる。入場は名指しした要素に限定されるので、レイアウトの残りは一切動かない。この参考は2046x1400で収録しました。
ヒーローセクションの再配置
流動的なスケールのコストは、正確なサイズを制御しにくいこと。代わりに得るのは比率の保たれた見出しで、ブリーフに100px〜24pxのクランプがあるのはそのため。どちらの状態も同じブリーフに書かれている。
Brightlyで動くもの
ページが落ち着かないときの原因は、たいてい登場演出の多さにある。これはその一覧を短く保ち、3.5sのトランジション、13.7sのメディアループ、一語ずつ現れる見出しで打ち止めにしている。このヒーローセクションで、動くために動く要素はない。
制作会社・スタジオがここで得るもの
テンプレートのヒーローと比べると、違いは引かれているものにある。カードグリッドもカルーセルも第二のCTAもなく、ナビゲーション、数値の行、背景のクリップだけが24px刻みの余白、3.5sのトランジションに合わせて寸法を取る。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
Brightlyのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。2046x1400のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
BrightlyはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Brightlyのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は2046x1400で収録しました。
