このテンプレートについて
旅行ブランド向けにヒーローセクションを作り直す前にWanderful Heroを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Our smart itineraries shape around you — your rhythm, your vibe, your hunger for adventure」は、レイアウトが背負うために組まれた一行。ページはInterで組み、サイズはブリーフで固定している。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。初見用ではなく、作り直しに耐える旅行ブランドのヒーローセクションのブリーフとして扱う。
対象
- 旅行ブランドヒーローセクションの外観を差し替えるグロース担当は、訴求コピーを変えても640x470の画角を保ちたい。
- このヒーローセクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく15px〜17pxの可変型サイズ、11px刻みの余白を渡せ。
- 旅行ブランドヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 操作より前に置くリンク. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに640x470の構図の上に載るため、その下のメディアは端から端まで届きます。
- ブリーフに直書きされたサイズ. ここに目分量はありません。仕様が15px〜17pxの可変型サイズ、11px刻みの余白を固定し、残りのレイアウトはその値から導かれます。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。変えるのは題材で、刻みではない。
- 主張の代わりに数字. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じInterで組むため、装飾ではなくデータとして読めます。行の中に区切り線はなく、数字を分けるのは余白だけ。1つの数値に段落が要るなら、それは数値ではありません。
- 役割ごとに指定した字重. Interに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。サイズが大きくなるほど字間を詰めるため、15–17pxの範囲でディスプレイの行がまとまります。スケールは明記されています。それを使ってください。
モーションとインタラクション
セクションはスクロールで現れる
内容はスクロール位置に紐づく（背景のレイヤーが前景と違う速度で動く）。だからタイマーで動くのではなく、読者が動かす分だけ構図が変わる。スクロール挙動は一つだけなので、ページは別々の効果の連続には感じられない。この参考は640x470で収録しました。
インタラクションは局所に
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。インタラクティブな層は小さく保つ。この参考は640x470で収録しました。
Wanderful Heroで最初に変えるもの
白紙から始める場合と比べる。ここでは枠（640x470）と15px〜17pxの可変型サイズ、11px刻みの余白がすでに決まっているので、作業は構成ではなく差し替えになる。構成より差し替えのほうが安い。それがこの参考例の狙いだ。
ヒーローセクションの背後にある順序
ブリーフは4,223文字で、読み順を明示している。ナビゲーション、見出し、数値の行、背景のクリップをこの順に並べ、その間の距離を15px〜17pxの可変型サイズ、11px刻みの余白で決めている。順序を入れ替えれば、この距離も意味を失う。旅行の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを支える数値
開発者に渡すなら、役に立つ成果物はブリーフだ。15px〜17pxの可変型サイズ、11px刻みの余白を明記しており、2人の間で解釈する余地を残さない。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
Wanderful Heroの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,223文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
このWanderful Heroの項目はどういう構成になっていますか？
このページに引用している内容はすべて、収録された4,223文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Wanderful Heroのヒーローセクションを別の技術スタックで作り直せますか？
Wanderful HeroはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
