Beauty CategoriesのEC・通販機能紹介セクションデザインとプロンプト

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

Beauty Categoriesは書き下ろされたブリーフ1本から組んだECの機能紹介セクションで、このページはそのブリーフを記録している。配色は白 #EBEBEBの下地、深いのオレンジ #251E18の文字、オレンジ #593C2Dのアクセント。納品物はReactとTailwind CSSで、640x470で記録しているため、コードを書く前に枠が決まっている。モーションの予算は150msのトランジション。初見用ではなく、作り直しに耐えるECブランドの機能紹介セクションのブリーフとして扱う。

対象

ECブランド機能紹介セクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
機能紹介セクションをモデルに指示する人は、4,038文字のプロンプトを出発点に使う。
見出しをBeauty Categoriesと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

ブリーフで固定した寸法. ここでは文字と余白を同じ1つのリストから取る（20px刻みの余白、150msのトランジション）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
声を1つに絞った配色. オレンジ #593C2Dは構図の中で唯一彩度を持つ値で、ほかはすべて白 #EBEBEBの上にあります。ボタン、リンク、小さな強調だけがこの色を借りるため、情報量の多いファーストビューでも読めます。#593C2Dと白 #EBEBEBのコントラストが、小さいサイズでもアクセントを読ませる。
同じ重みのパネル. 文章を流し込む場所にパネルを並べている。機能紹介セクションを見渡せるのはそのためだ。グリッドは1列に畳んでもパネルの順序を変えない。この参考は640x470で収録しました。
ベースラインに乗る数字. この行は機能紹介セクションの高い位置に、装飾ではなく根拠として置く。数値だけが#593C2Dのアクセントを持ち、周囲は文字色に留まります。

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

文字が分割して現れる

動きは1つの挙動に集中しているので（セクションはビューポートに入るたびに現れる）、ページがエフェクトの詰め合わせには読めない。アニメーションは読み込み時に一度だけ実行され、スクロールのたびには走らない。読んでいる途中でページが再演することはない。この参考は640x470で収録しました。

コントロールは共通の時間

アニメーションの予算は小さく、明示されている。150ms。適用先は入場ではなく状態変化だ。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。

Beauty Categoriesで最初に変えるもの

先に中身を変え、枠は後から確認する。コピーを差し替えている間、壊してはいけない値が20px刻みの余白、150msのトランジションだ。ここを動かすと、あとで枠ごと組み直すことになる。メディアのトリミングは守る。書体と同じだけ働いている。

この構図がECで効く理由

ECのページの多くは、ファーストビューが弱いとセクションを足す。これは逆に選択肢を削る。数値の行、カードグリッド、背景のクリップをこの順に置き、訴求を繰り返すものは置かない。 Beauty Categoriesは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は640x470で収録しました。