Heritage GroveのEC・通販フッターデザインとプロンプト

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

Heritage Groveは1920x1424で記録し、ギャラリー用の画像ではなく仕様として残した。「Heritage Grove — Footer」は、レイアウトが背負うために組まれた一行。カラースキームはクリーム #EAE3DEの下地、ティール #0F454Fの文字、シェード #2A707Cのアクセントで、ページはPoppinsで組む。納品物は自己完結したHTMLファイル1つで、1920x1424で記録しているため、コードを書く前に枠が決まっている。ページはモーションを2sのトランジション、cubic-bezier(.22,1.36,1)、ループする動画の下地にとどめる。 EC・通販のフッターが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

ECブランドフッターを制作するチームが、見積もりを出す前にcubic-bezier(.22,1.36,1)のイージングを記録に残したい。
参考がただの出発点なら、デザイナーは自己完結したHTMLファイル1つを残し、フッターの残りを組み直せる。
AIビルダーを使う人で、モデルに任せるのではなく359pxのブレイクポイントが最初から入った仕様を求めている。

含まれる内容

一行に収めたナビゲーション. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#2A707Cの操作1つを、ブリーフで最小のタイプ段階に収めています。359px以下では、リンクは2行目に折り返さず折りたたむ。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
最下層に置く動画. 構図は1920x1424のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。ループは9.6sと短く、目にはタイムラインではなくテクスチャとして映ります。
必要な箇所だけ可変. 文字サイズは固定の段階ではなく240px〜52pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。狭いレイアウトは設計してください。潰して縮めないでください。
明記された余白の刻み. 値そのものが仕様です。16pxで固定した表示サイズ、100vhのセクション、52px刻みの余白、2sのトランジションは1920x1424での収録値で、スクリーンショットから推測したものではありません。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。

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

ループが環境演出を担う

背景の映像は9.6秒、1920x1424でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。

モーションは切れる

低減モーションは後付けではなく仕様に書かれている。有効にすると入場とループが止まり、構図は最終状態を保つ。モーションを切ってもレイアウトは同一なので、アニメーションに何も依存していない。モーションを切った状態で試す。この参考は1920x1424で収録しました。

Heritage Groveの最初の読みの順序

1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、ナビゲーション、数値の行、機能リスト、フォーム、背景のクリップを固定し、16pxで固定した表示サイズ、100vhのセクションを経路の明快さに使う。 ECの読み手は、選択肢より先に訴求を受け取る。

フッターの再配置

流動的なスケールと段階的なスケールは、広い画面では似て見える。ビューポートを狭めると差が出る。240px〜52pxのクランプか、固定の跳ね幅かという違いだ。ビューポートに応じて変わるのは尺度で、順番は変わりません。

ECのブリーフが効く理由

ECのページの多くは、セクションを増やし、グラデーションを増やし、主張を増やすことで失敗する。 Heritage Groveは逆を行く。ページは「Heritage Grove — Footer」と明言している。構図はクリーム #EAE3DEに留まり、操作にだけシェード #2A707Cを使う。意図して組んだと見えるにはそれで足りる。 Heritage Groveは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。