このテンプレートについて
Coffee Rewardsは1482x1080で記録し、ギャラリー用の画像ではなく仕様として残した。「Plum Parfait Latte」は、レイアウトが背負うために組まれた一行。配色は深いのオレンジ #070402の下地、#EDE4D8の文字に絞り、書体はHelvetica Now Display。納品物はVite。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。ブリーフはモーションの予算を0.7sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に使う。 EC・通販のランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは1482x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- プロダクトマーケターで、コピーの背後に5.9sのループ映像があってもランディングページが読める状態を保ちたい。
- ランディングページをモデルに指示する人は、5,054文字のプロンプトを出発点に使う。
- 見出しをCoffee Rewardsと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- ブリーフに直書きされたサイズ. レイアウトに勘で決める部分はない。ブリーフが16px刻みの余白、0.7sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングを明記し、実装はその値に合わせる。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
- 最下層に置く動画. 1482x1080の動画がコピーの背後で5.9sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。自動再生が使えないときは1482x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 語るのは大見出しのサイズ. 書体には混ぜるのではなく役割を割り当てています。 Helvetica Now Displayがディスプレイとインターフェースの両方を担います。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
- 役割ごとに指定した字重. Helvetica Now Displayがディスプレイとインターフェースの両方を担います。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。書体を変えてもサイズ段階はそのまま残してください。
モーションとインタラクション
ループが環境演出を担う
環境の動きはスクロール演出ではなく5.9秒の1482x1080ループから生まれる。だからページは落ち着き、文字は読める。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。
時間はブリーフ由来
コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに0.7s。イージングは再生時間と一緒に指定されている（0.7s）ので、作り直しの際に別の感触へ黙って差し替わることはない。見た目を作り替えても再生時間は残す。
ECのブリーフが効く理由
主張は見出しサイズで一度だけ出す。ページは「Plum Parfait Latte」と明言している。ランディングページの残りはすべてその一行を軸に並ぶ。見出し、お知らせのピル、数値の行、カードグリッド、背景のクリップが続き、最初の読みで競合する第二の約束はない。 ECの読み手に、訴求へ至る最短の正直な道を示す。
Coffee Rewardsで動くもの
欲張ったモーションは、たいていファーストビューの可読性を奪う。このブリーフは0.7sのトランジション、5.9sのメディアループ、ライブキャンバスを短く抑え、文字を待たせない。このランディングページで、動くために動く要素はない。
Coffee Rewardsを仕様として読む
16px刻みの余白、0.7sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングにコミットすることは、柔軟性と引き換えに再現性を得る取引。同じページを別のブランドで、新たな推測なしに作るのがこの参考例の狙い。このランディングページに、初期値任せの部分はない。
よくある質問（FAQ）
Coffee Rewardsのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。1482x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Coffee Rewardsを作り直すのにViteは必要ですか？
この参考例はたまたまViteで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。
Coffee Rewardsから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1482x1080で収録しました。
