このテンプレートについて
Daisy Wildは640x476で記録し、ギャラリー用の画像ではなく仕様として残した。見出しは「`), the note LABELS (」で、ランディングページの残りはその周りに配置されている。ページ全体はライム #BDE84Fの下地、黒 #000000の文字でできている。納品物はReactとTailwind CSSで、640x476で記録しているため、コードを書く前に枠が決まっている。モーションは1400msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)に限っている。 ECのランディングページを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは640x476で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- ECブランドランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ランディングページをモデルに指示する人は、10,292文字のプロンプトを出発点に使う。
- 見出しをDaisy Wildと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 実装まで持ち込む数値. サイズは継承ではなく明記されています（16px刻みの余白、1400msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング）。書体やコピーを差し替えても、この関係は保たれます。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
- 大見出し級の数字. この行はランディングページの高い位置に、装飾ではなく根拠として置く。ラベルは数値の下、ブリーフ最小の段階に置くため、その行は装飾ではなくデータとして読めます。この参考は640x476で収録しました。
- 幅ごとに定義された挙動. スケールの上端だけが可変（12px〜16pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。ビューポートが狭くなっても、文字はサイズが変わるだけで役割は変わりません。
- 構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは640x476の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
短く、明記された時間
1つの時間がすべてのインタラクションを覆う（1400ms、cubic-bezier(0.22, 1, 0.36, 1)を使い）。ホバーと押下が同じ体系に読めるのはそのため。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。
現れ方が記憶に残る
見出しは一括でフェードインしない。セクションはビューポートに入るたびに現れる。文字が現れる順序そのものが語りを担うため、静止画との差はここで生まれる。入場は、読者の目が補足コピーに届く前に終わる。この参考は640x476で収録しました。
Daisy Wildの最初の読みの順序
このページの上部と、よくあるECのランディング画面を比べる。どちらも見出しとアクションを持つが、ここでは数値の行、背景のクリップが同じ強さで競合せず、固定の順序に収まる。 ECの読み手は、選択肢より先に訴求を受け取る。この参考は640x476で収録しました。
ECのブリーフが効く理由
ECのランディングページを発注するとき難しいのは、ファーストビューが何を言わないかを決めること。 Daisy Wildはそれを先に答えている。見出しの一行と、その後ろの数値の行、背景のクリップだ。 ECの読み手に、訴求へ至る最短の正直な道を示す。この参考は640x476で収録しました。
ランディングページを自社のものにする
一行、1書体、1アクセント。この3つの差し替えがデザインを最も変える。動かさないほうがよい値は16px刻みの余白、1400msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング。構成より差し替えのほうが安い。それがこの参考例の狙いだ。
よくある質問（FAQ）
Daisy Wildのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。640x476のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Daisy WildはReactとTailwind CSSにどこまで依存していますか？
Daisy WildはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Daisy Wildはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は640x476で収録しました。
