ECの商品ページでCVRが2倍変わる｜売れるページ構成7原則

いつもご覧いただき、ありがとうございます。運用支援の窓口の角田です。

以前、ある高級商材のLPを作ったときの話を、少しだけ聞いてください。徹底的に「洗練された高級デザイン」で組んで、商材も高級路線、デザインも高級寄り、ロジックは完璧に思えたのに、ほとんど売れなかったことがあるんですね。当時はかなり混乱したのを、今でも覚えています。

半ば破れかぶれで、和紙の背景を使った、デザイナー目線で言うと正直「ださい」とすら言える寄りのLPに切り替えてみました。すると、売上が跳ねたんです。なぜか――。後で気づいたのですが、実際の顧客の主層は年配の方々で、2000年代初頭のWEBデザインに親しみと安心感を覚えていたんですね。私たちは「自分たちの美意識」を、顧客に押し付けていた、ということでした。

商品ページについての記事は、ネット上にあふれています。それでも私自身がCVR（コンバージョン率：訪問者が購入に至る割合）というものを本当に理解したのは、あの和紙LPの失敗からです。今回はその経験と、自社EC「Fresk」で日々検証していることを混ぜながら、商品ページの構成原則を7つに整理してお話しします。

そもそも、商品ページの役割を勘違いしている人が多い

商品ページ＝商品の説明をする場所、と思っている方が、圧倒的多数です。これは間違いではないのですが、それだけで終わってしまうと、先ほどの和紙LPでの私と同じ失敗をすることになります。

本当の役割は、もう一段奥にあると感じています。お客様の頭の中で起きている「これ、買って本当に大丈夫かな？」という不安を、買う直前で解消すること。説明ではなく、納得を作る場所。私の中では、そう定義づけています。

この切り替えができていない商品ページは、どれだけ綺麗でも、どれだけ言葉が整っていても、売れません。これは現場で何度も実感してきたことです。

「顧客の現実」をまず見る

冒頭の和紙LPの話に戻ります。あの失敗の本質は、「高級商材は高級デザインで売れる」という、自分の中の思い込みでした。

商品ページを作るとき、誰しもバイアスがかかります。デザインが得意な人は「良いデザインなら売れる」、コピーが得意な人は「言葉で売れる」、エンジニアの方は「高速で動けば売れる」、と。自分の得意分野が、答えに見えてきてしまう。

ですが、商品ページの正解は、すべて 顧客の現実の中 にあると、私の中では思うんですね。誰が買っているか。何を不安に思っているか。どんな言葉に親しみを感じるか。どんな写真に「自分ごと」を感じるか。

ECの場合、顧客理解の出発点は、自分のサイトの過去のお客様のレビュー・問い合わせ・購買データです。データを舐めるように見て、自分の頭の中の「理想の顧客」と「実際の顧客」のギャップを潰す。これを抜きにして、デザインも文章も先に進められないんですね。

ファーストビューで「これは何の商品か」を即伝える

スマホでECを見るお客様は、商品ページを開いてから2秒で「自分向けかどうか」を判断する、と言われています。この2秒で離脱されないためには、ファーストビュー（スクロール前の画面）に、必要な情報を全部入れておくこと。

• 商品名＋短いキャッチコピー
• 魅力が一発で伝わるメイン画像1枚
• 価格と在庫状況

「下にスクロールすれば書いてあります」では遅いんですね。スクロールしてもらう前に、勝負はもう終わっている、というくらいの感覚でいいと思っています。

画像は「使用シーン」を最優先

Freskで一番大きな学びが、これでした。最初は、商品単体の白バック画像を、綺麗に撮ることに力を入れていたんです。ところが、実際にCVRに効いたのは「商品が、お客様の暮らしのどんなシーンに馴染むか」を見せる、シーン写真の方だったんですね。

順序の目安としては、1枚目に暮らしの中で使われているシーン写真、2枚目に商品単体（質感が分かる正面・斜め）、3枚目以降にサイズ感・ディテール・カラーバリエ。シーン写真がない商品は、見ているお客様の頭の中で「自分の生活にどう馴染むか」のイメージが、起こらないんですね。これが直帰率に、直結します。

レビューを「商品ページの上の方」に置く

商品ページにレビュー欄を置いている事業者さんは多いのですが、なぜか「ページの一番下」に追いやられているケースが目立ちます。これは本当にもったいない、と感じています。

レビューや「使ってみてどう変わったか」のお客様の声は、お客様にとって、事業者側の説明よりも、圧倒的に信頼度が高い情報源なんですね。中盤、スペックの直前か直後に、1〜2件レビューを目立つ形で置いてあげる。これだけで、CVRはわかりやすく動きます。

FAQで「買う前の不安」を先回りで潰す

カートに入れる直前の人が、頭の中で考えていること。それを商品ページのFAQで、ひとつずつ潰していくと、購入完了率が上がります。

FAQに入れるべき項目は、特別な分析をしなくても作れます。「問い合わせフォームから来ている質問」を集めて、そのまま商品ページのFAQに転写する。それだけです。よくあるのは、サイズ・返品可否・お届け日数・素材・ギフトラッピング対応の有無、あたり。聞かれなくなった分だけCSの負担も下がるので、副次的な効果も大きいんですね。

CTAボタンは「複数箇所」「同じ文言」

「カートに入れる」ボタンを、ファーストビューだけ、もしくはページ下部だけに置いているケースが、意外と多いです。お客様は、ページのどこで「買いたい」と思うか、こちらにはわからないんですね。

ファーストビュー直下、シーン写真直後、レビュー直後、FAQ直後――最低この4箇所には置く。そして、文言は「カートに入れる」で統一する。「購入する」「申し込む」と表記をブレさせると、お客様が一瞬迷って離脱してしまうので、ここは厳格にいきたいところです。

スマホでの見え方を最終チェックする

EC流入の8割前後は、スマホ経由です。にもかかわらず、PCで商品ページを作って「PCで見て満足してしまう」事業者さんが、まだまだ多いんですね。これは構造的な事故です。

公開前に必ず、スマホで読み直してください。1段落が長すぎないか、文字サイズが小さすぎないか、画像の縦長が圧迫感を生んでいないか、CTAボタンが親指の届く位置にあるか。「PCで見ると素敵だけど、スマホだと読みにくい」サイトは本当に多いです。検収はスマホで行う、ということを徹底するだけで、CVRは確実に変わってきます。

「CVRを上げる」を、ただの数字遊びにしない

最後に、私自身が忘れないようにしている話を、一つだけ。CVR改善というのは、ともすると「率を上げるゲーム」になりがちなんですね。A/Bテスト、ヒートマップ、ボタンの色を赤にして、緑にして――。

でも、本質は最初の和紙LPの話に戻ります。CVRが動くのは、私たちが 顧客の現実に一歩近づけた ときなんです。数字遊びとして向き合うか、顧客理解の表現として向き合うか。CVR改善の打ち手は同じでも、向き合い方で、長期的な結果は別物になっていきます。

顧客の現実に一歩近づく。少し間を置いてもう一度、お伝えしておきます。これがCVR改善の、本当の中心軸だと、私の中では確信しています。

商品ページに迷ったら、まず自分のサイトのレビューと、お客様の問い合わせを、3時間でいいので眺める時間を取ってみてください。そこに、答えはだいたい書いてあります。

最後までお読みいただき、ありがとうございました。今後とも、宜しくお願い申し上げます。