コンテンツへスキップ

記事: Shopifyの商品ページ改善方法|購入率を上げる解説

Shopifyの商品ページ改善方法|購入率を上げる解説

Shopifyの商品ページ改善方法|購入率を上げる解説

広告やSNS運用でストアの閲覧数も増えたが、売上が思ったより上がらない。

これは運用中によくある課題です。

売上 = セッション数×コンバージョン率×客単価

この式で検討した場合、まず確認したいのはコンバージョン率(購入率)です。

コンバージョン率が低い状態でいくら訪問数を増やす施策を行っても、穴が空いたバケツに水を注ぐようなものです。

購入につながらなければ集客施策との費用対効果が合いづらくなるため、集客に更なる投資を増やす前にコンバージョン率が低くないか確認しましょう。

本記事では、商品ページについての改善方法やどこを直すか迷ったときの進め方を紹介します。

まずは各商品ページ別でのコンバージョン率を確認

Shopifyの管理画面では、商品ページ別のコンバージョン率をそのまま出すことはできません。ページ別に表示されるのはランディングページ別の数字で、そのページから入ったセッションが最終的に購入したかを集計したものです。トップページから入って商品ページで購入した場合は、トップページの成果として計上されます。

商品ページごとの数字を見るなら、GA4を使います。ShopifyのGoogle & YouTubeアプリでGA4を連携しておくと、商品の閲覧、カート追加、購入が商品ごとに記録されます。GA4の「収益化」→「eコマース購入数」を開くと、アイテム名ごとに閲覧された商品数、カートに追加された商品数、購入された商品数が並んでいます。

カート追加数や購入数を閲覧数で割れば、その商品ページのカート追加率や購入率が出せます。閲覧数が少ない商品は数件の購入で率が大きく動くため、比べるときは期間を広めに取るとよいでしょう。

商品画像は綺麗か・ユーザーが欲しい画像が揃っているか

ページの最上位に商品画像とスライド式について解説します。

商品画像は綺麗・魅力的であるかは重要です。
最初にまずユーザーは商品の画像を見て
「着てみたい」
「美味しそう」
「品質が良さそう」
といった印象を0.5秒~1秒で判断をし、求めている商品でなければページ離脱をします。
なので商品画像は重要であり、以下の注意は必要です。
・背景に生活感がないか
・トンマナが揃っているか
・ピントがあっているか
・暗くないか
etc...

この画像が見える位置で、弊社では離脱率を3割ぐらいに留めるのを目標としています。

複数画像の剪定について

画像をスライド式または2列などで並べますが、ユーザー欲しい画像が揃っているか確認してください。

例えばアパレルやジュエリーなど見た目が重要な商品では様々な角度が必要です。
逆に同じ確度で類似のような画像は不要で、多くあるとユーザーにとってはスライド疲れといったことに繋がるため、
とりあえずあるもの沢山設定しておくというのは逆効果です。

商品説明やコンテンツにお客様からのよくある質問について記載があるか

重要なのは実際に寄せられた質問です。
届けたいターゲット層に合わせて、商品の特徴や説明などを魅力が伝わる構成・文章を作りますが、
実際に運用してみると、自分にあうサイズは?・裏面の見た目は?・発送までどのくらいかかる?などの質問がくることがあります。

ECでの購入は実際に手に取って見れない性質上、疑問や不安を払拭しないと購入を止めてしまうこともあります。
なので疑問を持ったユーザーがページを見たときに答えへたどり着けるかがポイントです。

ただし全ての内容を入れ込むとコンテンツ量がとても多くなってしまうため、重要ではないがよくもらう質問については「よくある質問」といった形のコンテンツで開閉式にまとめるのが効果的です。

ページ表示の速度が遅くないか

商品の表示を待つことが負担になっていないかも確認したい点です。toC商材はスマートフォンからの利用が多いため、パソコン上の確認だけで終えず、4G回線で実際に商品ページを開いて確かめる方法が基本です。画像や説明が表示されるまでに、体感でストレスを感じないかが目安となります。

Shopifyでは、画像を実装している部分のコードは、自動的にWebPに変換した軽量な画像を配信するよう設定されています。
ただし、カスタマイズ方法によっては、容量の大きな画像がそのまま設定されている場合もあるため、実際の表示は確かめたいところです。

ページスピードのスコアや改善方法を知りたい場合は、PageSpeed Insightsで測定するとよいでしょう。スコアはあくまで参考であり、高ければよいというものではありません。実際の待ち時間と合わせ、改善方法を知るための材料として扱う位置づけです。

スクロール率やタップの頻度・操作性を確認する

Clarityなどのヒートマップツールを導入することで分析が可能です。

スクロール率には明確な正解は無いため、コンテンツの入替をすることで改善されるか分析していきましょう。

タップについては「操作がしづらく何度もタップしている」といったユーザーの操作性を確認することが可能です。
せっかくユーザーがブランドに興味を持ったとしても、操作性が悪いとストレスに感じて購入せずに離脱することもあります。

どこを直すべきか悩む場合は一つずつ変更してその結果を分析する

確認した結果、明らかに全部直したほうがよい場合は、まとめて修正し、改善されるかを見る進め方で構いません。
一方、どこまで直すべきか、どこを直せばよいか分からない場合には、一つずつ変更して結果を確かめる方法も選べます。

ABテストの意味で、一番最初に目につくサムネイル画像を変えてみる、説明文を増やしてみる、商品の特徴を伝えるLPを直してみる、といった候補から一つを試す考え方です。何を変えたかと、その後の数字を対応させて考えることが目的。具体的な修正内容は、ここまでの確認で気になった点をもとに選びます。

変更前に見ていた商品別の訪問者数とカート追加数、スクロール率は、変更後も同じ条件で確認してください。対象ページや計測方法、比較する期間の長さをそろえることが基本です。数字の変化だけで効果を断定せず、訪問者数も含めた状況と変更箇所を照らし合わせて振り返ることが大切です。