Task EngineのEC・通販ランディングページデザインとプロンプト

このテンプレートについて

Task Engineは判断の履歴を残しており、このランディングページを生んだブリーフは14,503文字。配色は白 #F0F0F0の下地、黒 #0D0D0Dの文字に絞り、書体はPlus Jakarta Sans。納品物は自己完結したHTMLファイル1つで、2104x1080で記録しているため、コードを書く前に枠が決まっている。モーションは2400msのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地に限っている。初見用ではなく、作り直しに耐えるECブランドのランディングページのブリーフとして扱う。収録したプロンプトは2104x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、2104x1080の枠から最小の余白ステップまで含む。

対象

引き継ぎメモにcubic-bezier(.16,1.3,1)のイージングを書け。次のビルドがページから導き直さずに済む。
プロトタイプを作らずに700pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
このページは、自己完結したHTMLファイル1つでECブランドランディングページを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。

含まれる内容

明記された寸法. 値そのものが仕様です。100vhのセクション、30px刻みの余白、2400msのトランジション、cubic-bezier(.16,1.3,1)のイージングは2104x1080での収録値で、スクリーンショットから推測したものではありません。リストの最小値と最大値が、構図の可動範囲を決める。
語るのは大見出しのサイズ. タイポグラフィはPlus Jakarta Sansです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。行の高さは単一の共通値ではなく、サイズの刻みに合わせる。
検証できる数値. 値そのものが仕様です。100vhのセクション、30px刻みの余白、2400msのトランジション、cubic-bezier(.16,1.3,1)のイージングは2104x1080での収録値で、スクリーンショットから推測したものではありません。リストの最小値と最大値が、構図の可動範囲を決める。ページを持ち込むときも、名指しされた値はそのまま使ってください。
文字の背後に全面配置したクリップ. ファーストビューは2104x1080のクリップ1本で、ほかの要素はすべてその上に配置されます。2104x1080以上で書き出せば、coverの切り抜きはそのまま機能する。

モーションとインタラクション

短く揃えた時間

状態変化は2400msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。イージングを変えるなら、時間も一緒に見直す必要がある。

タイムラインではなくループ

環境の動きはスクロール演出ではなく10.6秒の2104x1080ループから生まれる。だからページは落ち着き、文字は読める。映像が短いので切れ目なくループでき、解像度よりもその点が効く。

EC・通販に効くところ

このランディングページの判断を数え上げると、すべて1つの文書に行き着く。2104x1080の枠、書体、リズムを記した14,503文字だ。 ECの読み手に、訴求へ至る最短の正直な道を示す。

ランディングページの再配置

コピーが長いと、先に崩れるのは狭い幅のレイアウト。ここでは15px〜30pxのクランプが変化を吸収し、レイアウトは700pxで切り替わる、セクションは100vhに固定、モーションに低減モーションの分岐がある。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。