このテンプレートについて
Dotはライフスタイルブランド向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。カラースキームは白 #DEF0FCの下地、黒 #1A1A1Aの文字、明るいのブルー #0871E7のアクセントで、ページはInstrument Serifで組む。納品物はReactとTailwind CSSで、800x588で記録しているため、コードを書く前に枠が決まっている。モーションは100msのトランジションで、コピーが主役のままになる程度に抑えている。ライフスタイルのヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは800x588で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x588の枠から最小の余白ステップまで含む。
対象
- ライフスタイルブランドのヒーローセクションを作るチームで、スクリーンショットを写すのではなく実測値（14px〜72pxの可変型サイズ、14px刻みの余白）を求めている。
- ヒーローセクションをモデルに指示する人は、3,871文字のプロンプトを出発点に使う。
- 見出しをDotと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 操作1つだけの上段. リンクは同じ文字サイズで1行に並び、#0871E7の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#0871E7の操作だけがバーの中で重みを持つ要素です。行は1行に保つ。
- ビューポート基準の計測. レイアウトに勘で決める部分はない。ブリーフが14px〜72pxの可変型サイズ、14px刻みの余白、100msのトランジションを明記し、実装はその値に合わせる。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
- 構図そのものがコンテンツ. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、800x588のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは800x588の1つの構図です。コピーが変わっても崩れないのはそのためです。
- 主張の代わりに数字. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ヒーローセクションが機能リストに変わるのを防ぐためです。数値だけが#0871E7のアクセントを持ち、周囲は文字色に留まります。1つの数値に段落が要るなら、それは数値ではありません。
モーションとインタラクション
短く、明記された時間
トランジションの指定は100ms。コントロールはこの時間に縛られる。イージングを変えるなら、時間も一緒に見直す必要がある。
インタラクティブな範囲は狭く
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。状態は絞り、そのぶん書き切る。この参考は800x588で収録しました。
ヒーローセクションを支える数値
このヒーローセクションは目分量ではなく寸法で決まっている。14px〜72pxの可変型サイズ、14px刻みの余白はブリーフから来ており、レイアウトはその段階に合わせて組み、勘で寄せていない。このヒーローセクションに、初期値任せの部分はない。
このヒーローセクションが立てる主張
このページの約束は1つだけで、それを支えているのが14px〜72pxの可変型サイズ、14px刻みの余白。折り返しより下の要素には、同じ訴求を二度背負わせていない。ライフスタイルの読み手に、訴求へ至る最短の正直な道を示す。
Dotで動くもの
ページが落ち着かないときの原因は、たいてい登場演出の多さにある。これはその一覧を短く保ち、100msのトランジション、ホバー状態と押下状態で打ち止めにしている。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Dotの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。800x588のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Dotのヒーローセクションを別の技術スタックで作り直せますか？
DotはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Dotから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x588で収録しました。
