CozyPawsのEC・通販ヒーローセクションデザインとプロンプト

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

CozyPawsはECブランド向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。色は白 #EFFDF0の下地、深いのグリーン #1A3D1Aの文字、明るいのオレンジ #E86A10のアクセントに限り、Interで組んでいる。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションは0.8sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に限っている。最初の画面で意図が伝わる必要があるECブランドのヒーローセクションには、この参考が適している。

対象

ヒーローセクションの構造はまるごと借り、1460x1080のフレームに照らして行ごとにコピーを差し替えろ。
まず数値が要るデザイナー。70vhのセクション、60px刻みの余白、すべて仕様からの引用である。
プロダクトマーケターで、コピーの背後に4.8sのループ映像があってもヒーローセクションが読める状態を保ちたい。

含まれる内容

ドロワーを持たない一行. 上段に載るのはワードマーク、4〜5本のリンク、#E86A10に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。リンクはワードマークより小さいサイズで組み、#E86A10の操作だけがバーの中で重みを持つ要素です。
ブリーフで固定した寸法. ブリーフの寸法はすべて、測り直せる数値だ（70vhのセクション、60px刻みの余白、0.8sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
ループが背景になる. 1460x1080の動画がコピーの背後で4.8sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。1460x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
規律をもって使う1書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。

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

時間はブリーフ由来

モーションはミリ秒単位で測る。0.8s、cubic-bezier(0.16, 1, 0.3, 1)で。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（0.8s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

ポインター状態以外は何もしない

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。状態が単純なので、どんなコンポーネント体系にも移植できる。この参考は1460x1080で収録しました。

ヒーローセクションを支える数値

ここでの決定はほぼすべて、確認できる値である。70vhのセクション、60px刻みの余白、0.8sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング。メディアは1460x1080の4.8sループ映像だ。書体はInterのままなので、差し替える側も同じ比率を守る必要がある。このヒーローセクションに、初期値任せの部分はない。

ヒーローセクションの背後にある順序

このヒーローセクションには明示された読みの経路がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。そこから視線はナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを順にたどる。1画面が箇条書きに見えないのはそのため。 ECの読み手は、選択肢より先に訴求を受け取る。この参考は1460x1080で収録しました。

このヒーローセクションが正しい理由

テンプレートがファーストビューをモジュールで埋めるのに対し、このヒーローセクションはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドで止める。差は70vhのセクション、60px刻みの余白に出る。空白を埋めるための余白はない。 CozyPawsは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。