このテンプレートについて
USD Haloは書き下ろされたブリーフ1本から組んだフィンテックのランディングページで、このページはそのブリーフを記録している。「An automated, reward-powered digital dollar built for native passive earnings and effortless connection into DeFi」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は白 #F5F5F5の下地、深いのインディゴ #2B2644の文字で、書体はInter。納品物はReactとTailwind CSSで、458x800で記録しているため、コードを書く前に枠が決まっている。フィンテックのランディングページを発注するなら、この構成から始めて主題だけ差し替える。
対象
- まず数値が要るデザイナー。13px〜16pxの可変型サイズ、100vhのセクション、すべて仕様からの引用である。
- ランディングページをモデルに指示する人は、8,531文字のプロンプトを出発点に使う。
- 見出しをUSD Haloと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 余分を持たないバー. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに458x800の構図の上に載るため、その下のメディアは端から端まで届きます。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
- ブリーフで固定した寸法. 寸法は458x800のレンダリングから読み取った（13px〜16pxの可変型サイズ、100vhのセクション、15px刻みの余白）。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
- 1行にまとめた根拠. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ランディングページが機能リストに変わるのを防ぐためです。数字は文字なので、独自に拡縮せずページのレスポンシブ挙動を引き継ぐ。この参考は458x800で収録しました。
- トーンを担うタイポグラフィ. 書体はサイズと一緒に書いてある（Inter、13–16px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、13–16pxの範囲でディスプレイの行がまとまります。
モーションとインタラクション
ポインター状態以外は何もしない
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は458x800で収録しました。
マーキーがリズムを担う
マーキーが構図を横切って無限にループする。書体はInterで、スクロールで動くものがなくてもページに動きが残る。帯は装飾なので、止めても外してもレイアウトは変わらない。
ランディングページの再配置
流動的なスケールのコストは、正確なサイズを制御しにくいこと。代わりに得るのは比率の保たれた見出しで、ブリーフに13px〜16pxのクランプがあるのはそのため。再配置を越えて残るのは階層だ。
ランディングページを自社のものにする
トレードオフは見分けのつきやすさ。 USD Haloを残しすぎると他人のページに見え、数値を残して中身を変えれば自社のページとして読める。別のブランドでも枠ごと再利用できる。この参考は458x800で収録しました。
USD Haloを仕様として読む
固定したスケールのコストは、即興の余地が減ること。13px〜16pxの可変型サイズ、100vhのセクションが構成の一貫性を保つ代わりに、新しい要素は置くのではなく合わせ込む必要がある。このランディングページに、初期値任せの部分はない。
よくある質問（FAQ）
USD Haloの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。458x800のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
USD HaloはReactとTailwind CSSにどこまで依存していますか？
USD HaloはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
USD Haloのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は458x800で収録しました。
