🧪 UV CARE バナー比較テスト
本番に当てる前に、5つのバリアント + 3つのスライド画像案を視覚比較するページです。
お気に入りのバリアントを教えてもらえれば本番反映します。
A
テキスト焼き込み画像 + 重ねオーバーレイ
画像にすでに「紫外線に、勝つ。」が入ってる + 上に Dawn の見出し/本文/ボタンを重ねる形。前回TOPに置いてバグった構成 — 文字が二重になる。
⚠ 文字が二重で読みづらい・情報量過多
B
クリーン画像 + Dawn オーバーレイ
画像はテキストなしのピンクグラデ + パール装飾のみ。上に見出し/本文/ボタンをオーバーレイ。Dawn の image-banner 標準形。
○ 文字読める、編集も簡単
C
クリーン画像 + ボタンのみ
画像のみ + 中央にCTAボタン1つだけ。視覚優先・最小限の情報。クリックで詳細はLPに任せる。
◎ シンプル・洗練感、ただし情報量ゼロ
D
画像左 / テキスト右 50:50
画像とテキストを横分割。テキスト読みやすく、画像も独立して見える。カタログ感あるレイアウト。
◎ 文字読みやすい、構造分かりやすい
E
縮小帯バナー (画像なし)
画像なし、グラデ背景のみの細い帯。邪魔せずさりげなく告知。featured collection の合間に挟みやすい。
○ 軽量・邪魔しない、夏告知としてさりげない
★
ヒーロースライド画像案 (3パターン比較)
ヒーロースライダーに2枚目として入れるならどれが良いか。多スライド表示なので情報量を抑えるのが鉄則。
案① 既存「紫外線に、勝つ。」(情報量多め)
案② 中央寄せ「紫外線対策、はじめよう」+ CTA
案③ 写真合成「夏のゴルフ、美肌のままで」+ LOOK 07 モデル
案④ 商品カード版 (バイザー + UVアームカバー) 60:40
案⑤ 改良版 (3商品カード白背景)
★案⑥ 商品透過版 (白カード削除、スポットライト + 影)
前回バグったのは案①？情報量多すぎ？お気に入りを教えてください