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

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

Vertexは、ECブランドがランディングページで抱える課題を記録済みのブリーフ1本で解く。見出しは「Streamline the shop」で、ランディングページの残りはその周りに配置されている。配色は深いのブルー #020204の下地に絞り、書体はPoppins。この参考例は自己完結したHTMLファイル1つで組んであり、レイアウトの判断はそれとは独立に書かれている。ブリーフはモーションの予算を620msのトランジション、cubic-bezier(.4,0.2,1)、ループする動画の下地に使う。最初の画面で意図が伝わる必要があるECブランドのランディングページには、この参考が適している。以下に引用する値はすべてこのブリーフのもので、1920x1414の枠から最小の余白ステップまで含む。

対象

モデルに指示を出すなら、ランディングページから始めてcubic-bezier(.4,0.2,1)のイージングをプロンプトに保持させろ。
ECブランドランディングページを制作するチームが、見積もりを出す前に自己完結したHTMLファイル1つを記録に残したい。
制作の仕様を書き、批判的に検討する材料として158pxのブレイクポイントを探しているStudioのチーム。

含まれる内容

一行に収めたナビゲーション. バーは1行のテキストと1つの操作だけで、12px〜54pxの可変型サイズ、16px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。ラベルは158pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
パネルではなく背景の動画. ブリーフは動画を1920x1414、ループを6.9sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。1920x1414以上で書き出せば、coverの切り抜きはそのまま機能する。
新しい1つだけを示すピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にPoppinsの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。古くなったお知らせは外してください。
ブリーフに直書きされたサイズ. レイアウトは固定値（12px〜54pxの可変型サイズ、4カラムのグリッド、角丸12px、16px刻みの余白）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。

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

画像ではなくキャンバス

最初の画面は画像として送らず、ブラウザに組み立てさせる。 WebGLのキャンバス。レンダリングが自前の色を持つので、その周りの配色は静かに抑える。この参考は1920x1414で収録しました。

ミリ秒で書かれた時間

状態変化は620msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。値は短く、アニメーションではなくフィードバックとして読める長さだ。

EC・通販に効くところ

51,432文字のブリーフが、余分のない1画面を生む。値は明示されており（12px〜54pxの可変型サイズ、4カラムのグリッド）、言葉が変わっても構成が読めるのはそのため。 Vertexは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

ランディングページを支える数値

仕様はムードボードではなく、一冊の仕様書である。12px〜54pxの可変型サイズ、4カラムのグリッド、角丸12px、16px刻みの余白、620msのトランジションを固定し、メディアを1920x1414、6.9sのループ付きとして指定する。この細かさがあるからこそ、作り直しても設計が生き残る。コピーを変えても関係は保たれる。このランディングページに、初期値任せの部分はない。