STRUCTURE PROPOSAL ／ 商品ページ構成改善案
「探して来た人」と「知らずに来た人」を1ページで両立させ、検索・AI検索に読ませる構成へ。現行ページの実装調査にもとづく再設計案です。
FINDINGS
構成の話の前に、ソースを確認して分かった点です。指名検索での取りこぼしは、ほぼここが原因と考えられます。
Maison KOSÉ description というプレースホルダのまま。og:description も description。検索結果に出る説明文が機能していません。
SERUM VEIL DEEP REPAIR｜ONE BY KOSE。「セラムヴェール ディープリペア」「導入美容液」「ライスパワー」がどこにも入っていません。
_pc.png ／ _sp.png。テキストとして読める情報が極端に少ない。
DESIGN PRINCIPLE
PAGE MAP
現行27ブロックを19ブロックに再編。金色の行が位置を大きく動かすもの、太字が新規追加です。
HERO
現行は世界観の表現に振り切っていて、価格・容量・購入手段がありません。世界観を保ったまま、答えを入れます。
h1：ONE BY KOSÉ セラムヴェール ディープリペア｜薬用導入美容液
洗顔後、いちばん最初に使う導入美容液。
日本で唯一※、肌の水分保持能を改善する有効成分 ライスパワー®No.11 を配合。
※ 肌の水分保持能改善が認められた有効成分において。
変更点は4つ。①h1を商品名にする ②価格と容量を出す ③購入ボタンを置く ④66冠を上に上げる。キャッチと水彩ビジュアルはそのまま使えます。
NEW BLOCK
今回いちばん追加したいブロックです。ヒーロー直下に、この製品が何なのかを表で置きます。読む人にとっては早く分かり、AI検索にとっては引用しやすい形になります。
| どんな製品か | 洗顔後いちばん最初に使う、薬用の導入美容液（医薬部外品）。販売名：OBK 薬用導入美容液 |
|---|---|
| 有効成分 | ライスパワー®No.11（米エキスNo.11）／日本で唯一※、肌の水分保持能改善が認められた有効成分 |
| 期待できること | 肌がうるおいを保つ力そのものを改善。使うほどセラミド密度の高い、もっちりとした肌へ |
| 使うタイミング | 朝・夜の洗顔後いちばん最初／ポンプ2〜3回押した量 |
| 容量と価格 | 10mL 990円／60mL 5,940円／60mL付けかえ用 5,720円／120mL付けかえ用 9,900円（すべて税込） |
| 香り・処方 | グリーンフローラルの香り／無着色・弱酸性／アレルギー・パッチ・スティンギング・ノンコメドジェニック各テスト済み |
| 受賞 | ベストコスメ 66冠。美的 2024年下半期ベストコスメ 保湿美容液編 1位ほか |
この表は Product 構造化データ（名称・価格・成分・レビュー評価）と対応させます。「導入美容液とは」「セラムとは」といった質問に対して、AIがこのページを引用先に選べるようになります。
BLOCK DETAIL
現行ナビには「価格」「レビュー」「成分」がありません。買う前に確認したい項目が、ナビから辿れない状態です。テキスト化すれば内部リンクとしても機能します。
流入の大半が商品名での検索です。すでに商品を知っている人が最初に見る画面なので、「いくらで、どこで買えるか」を最初に答えます。
比較検討中の人は、まず仕様を確認します。ページを最後まで読ませる前に、事実を先に渡します。AI検索が引用する単位としても最適です。
現行はここに4画面分あり、商品に辿り着くまでが長い。共感パートは残しつつ、結論までの距離を縮めます。
順序は現行のままで問題ありません。見出しを画像からテキストにするだけで、検索・AIに拾われます。
ここが最大の変更点です。この4つは他社が書けない一次情報なのに、現在すべてモーダルの中にあります。本文に出せば、成分名や「水分保持能」での検索に対応でき、AIの引用先にもなります。
「洗顔後いちばん最初」は、この製品の構造的な強みです。使う順番を説明する内容は検索需要があり、他アイテムへの回遊も生みます。
使い方の直後に置くと、実感イメージがつながります。位置は現行と同じです。
口コミは購入判断の直前に効きます。現行は最下部近くにあり、価格情報より後。価格の前に移動させます。画像のままでは検索結果に星評価も出ません。
すでにテキストで実装されており、資産として機能しています。上部に要約、詳細はここ、という二段構えにします。
現行にFAQがありません。付けかえの互換性という重要な注意も、上部の画像バナー1枚だけです。FAQはAI検索でもっとも引用されやすい形式で、問い合わせ削減にも効きます。
7つも選択肢があるのに、現行は本文に一覧がありません。モーダルの中身を表にして本文化すれば、迷いが減り、価格での検索にも対応できます。
価格表の直後が最も検討されるタイミングです。バナーだけでは中身が分からず、離脱します。
購入を決めた人への客単価向上。位置は現行を踏襲します。
現行は同じ動画が2回ずつ出ています。整理のうえ、書き起こしを添えると内容が検索対象になります。
一般キーワードで獲得した訪問者を、この商品ページに集める受け皿になります。商品ページ単体では対応できない検索を、コラムで拾う設計です。
最下部で問題ありません。購入導線は追従バーが担うため、ここは「店頭で買いたい人」向けの案内に役割を絞ります。
現行どおり。CLUBは会員化＝再購入につながるため、リンク文言だけ具体的にします。
このページは縦に非常に長く、途中で買いたくなっても購入手段が画面にありません。追従バーは、この構成でもっとも効果が読める変更です。
STICKY CTA
現行は購入手段がヒーロー付近と最下部のモーダルのみ。中盤の解説を読んで「買おう」と思った瞬間に、ボタンが画面にありません。
PCは上部に細く固定、スマートフォンは画面下部に固定します。
COLOR SYSTEM
現行ページとボトルから採った色をそのまま設計トークンにしています。新しい色は足しません。役割だけを決め直します。
#2C2B7C基調色。h2見出し、購入ボタン、ヘッダー。ボトルの色#191849締め色。フッター、強調ブロックの背景#1FA5D8うるおい・水の表現。図解のライン、下線、アイコン#D9F1FAヒーロー背景、図解の面。現行の水彩トーンを継承#EFEDF8セクション交互の背景。白との切り替えでリズムを作る#B8974F信頼シグナル専用。受賞・冠数・第三者評価のみに使う使い方のルールを1つだけ決めます。ゴールドは受賞・第三者評価にしか使わない。現行では66冠バッジ以外にも装飾で金系が出てくるため、信頼の合図として弱くなっています。専用色にすると、スクロール中にゴールドが見えた瞬間に「評価の話だ」と伝わります。
PRIORITY
構成の全面改修を待たずに動かせるものがあります。3段階に分けました。
STEP 1 は構成変更を伴わないため、既存のページのまま対応できます。description が未設定のままである点だけでも、先に直す価値があります。