このテンプレートについて
HAUL!は1832x1354で記録し、ギャラリー用の画像ではなく仕様として残した。「`. Next to the logo block, add the text」は、レイアウトが背負うために組まれた一行。カラースキームは白 #FFFFFFの下地、オレンジ #BB420Dのアクセントで、ページはInterで組む。納品物はReactとTailwind CSSで、1832x1354で記録しているため、コードを書く前に枠が決まっている。ページはモーションを0.8sのトランジションにとどめる。最初の画面で意図が伝わる必要があるAI・SaaSプロダクトのフッターには、この参考が適している。収録したプロンプトは1832x1354で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- フッターをモデルに指示する人は、4,329文字のプロンプトを出発点に使う。
- 見出しをHAUL!と同じ長さに保ったままフッターを書き換えるコンテンツ責任者のために作った。
- この構成は、見出しを差し替えてもInterのウェイトで同じリズムを保ちたいコンテンツチームに応える。
含まれる内容
- 明記された余白の刻み. ブリーフの寸法はすべて、測り直せる数値だ（50vhのセクション、0.8sのトランジション）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- 枠線のないカード. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネル間の余白は1つの値で、密度の高いグリッドが窮屈に見えないのはそのためだ。
- 1色のアクセント、1つの役割. ページの操作はすべてアクセントが担います。ボタンとリンクはオレンジ #BB420D、その後ろのフレームは白 #FFFFFFです。ほかはすべて白 #FFFFFFの上にあり、彩度の高い配色でも読めるのはそのためです。
- 構図そのものがコンテンツ. フッターは、コピーが何より先に届くように組まれています。階層は文字が担い、1832x1354のフレームが構図を保ち、補助の値は静かに留まります。ページは1832x1354の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
ポインター状態以外は何もしない
インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。この参考は1832x1354で収録しました。
スクロールが順序を進める
ここではスクロールが演出を担う（背景のレイヤーが前景と違う速度で動く）。下の静的なレイアウトは変わらない。スクロール挙動は静的ページと同じレイアウトを基準に測っているので、外しても何もずれない。レイアウトは効果を切った状態でも成立させる。この参考は1832x1354で収録しました。
HAUL!で最初に変えるもの
色ではなくコピーから始める。「`. Next to the logo block, add the text」を自社製品についての1文に書き換え、ブリーフのサイズでInterに組む。触れずにおくのは枠とスケール。
HAUL!を仕様として読む
仕様はムードボードではなく、一冊の仕様書である。50vhのセクション、0.8sのトランジションを固定し、メディアを1832x1354として指定する。この細かさがあるからこそ、作り直しても設計が生き残る。コピーを変えても関係は保たれる。このフッターに、初期値任せの部分はない。
フッターの再配置
セクションを隠して済ませるモバイル用レイアウトと比べる。これは隠さず、形を変える。セクションは50vhに固定。中身は減らさない。最後まで変えないのは順序。
よくある質問（FAQ）
HAUL!の背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,329文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
HAUL!のフッターを別の技術スタックで作り直せますか？
HAUL!はReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
HAUL!のデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1832x1354で収録しました。
