公開日：2021年1月28日
最終更新日：2022年11月4日

みなさん、こんにちは。ECマーケティング支援・D2C支援を提供する株式会社いつも．のコンサルタントです。

みなさんの店舗ではスマホに最適化した、商品ページ作りは出来ていますでしょうか？

近年、スマホを使って買い物をされる方の割合が増えています。

特に外出自粛のなかでEC需要が高まっている今だからこそ、スマホに最適化したページの対策は、売上アップへの第一歩になります。

スマホ最適化されていないサイトは、検索結果の順位が下がってしまうというSEOにおける効果も指摘されており、そのようなサイトは、徐々に淘汰されるといっても、過言ではありません。

「すでに対策しているつもり、、、」

でも、実際には課題のあるサイトも多く見受けられるのが現実です。

そこで、本記事では、スマホ経由の売上アップに向けた商品ページ作りについて、トップページの構成と４つの施策からご説明します。

ぜひ、自社のスマホ商品ページのチェックにお役立てください。

まずはスマホサイトのトップページの構成から確認してみましょう。

 

【⇓動画でサクッと確認する⇓】

 

店舗の入り口から奥まで引き込むトップページ

はじめにスマホサイトの要と言えるトップページの基本構成から確認しましょう。

ヘッダー、メインカラム、フッターの3つで構成

情報量と使いやすさの両立が必要なスマホサイトの顔であるトップページには、ヘッダーとメインカラム、そしてフッターの3要素があることをしっかり理解していくことが大切です。
ページ最上部のヘッダーには、ショップのロゴやキャッチコピー、検索窓、電話番号、カテゴリーページや商品ページへのリンクを配置することが多いです。

ページを開いたときに最初に目に飛び込んでくる場所であり、購買意欲を喚起したり、商品を探しやすくしたりするためのコンテンツを優先的に配置するようにします。

ただし、スマホの場合はヘッダーにコンテンツを詰め込みすぎると使いにくくなってしまうので、コンテンツの一部は「メニューボタン」にしまっておいて、
ユーザーがメニューボタンをタップすると隠れていたメニューリストがポップアップする仕様など工夫をしましょう。
そしてメインカラムには主要なコンテンツを配置し、ショップが最も訴求したいことを思い切って打ち出すのが有効です。

大きなバナーを貼ってセール情報や新商品を告知することも多いです。

メインカラムにはその他に、商品ページへ誘導する画像や特集コンテンツのバナー、セール情報、ランキング情報、新着情報、イベント情報、ブランド名一覧などを掲載します。
ページの一番下に表示されるフッターには問い合わせ案内や店舗情報、特定商取引法に関する記載などを記載することが多いです。
フッターにもナビゲーションをなるべくたくさん配置して、ページの最下部までスクロールしたユーザーの回遊性を高めることが大切です。

スマホはPCに比べてスクロール操作がしやすいので、いきなりページの最下部を閲覧するユーザーも多くいます。スマホ特有の動きを考慮して最下部まで余念のない対策をしましょう。

スクロール対応のサイト内の回遊性がカギに

特にスマホの場合には、この回遊性が重要となります。
トップページは店舗の入口に当たることから、カテゴリーページや商品ページなどの「お店の奥」までユーザーを引き込まなくてはなりません。

スマホはリンクをタップするよりもスクロール操作が簡単です。そのため、一人当たりの閲覧ページ数は少なく、トップページから特集ページやカテゴリーページへ集中的に誘導するとともに、特集ページの内容を充実させて滞在時間を延ばします。

カテゴリーページのナビゲーションや検索窓、ランキング情報などを目立つ位置に配置することも有効です。

写真と動画でビジュアルを訴求

また、PCサイトに掲載している情報をそのままスマホに盛り込もうとすると、情報量が多すぎてページの読み込み速度が遅くなったり、ページが長くなりすぎて読みにくくなったりします。

かといって単に情報を省略するのではなく、写真と動画でビジュアルを訴求するなど、デバイスの特性に合ったサイト作りを意識していきましょう。

特にすきま時間に暇つぶしで見られることを想定し、スマホと相性のいい短い動画を用意することで、商品への関心を高めることができます。

以上、スマホ対応のトップページ構成について要点をお伝えしました。

続いて、スマホ対策の商品ページ作りの具体的な施策を見ていきます。

今すぐ確認！要チェックの4つの施策

商品ページ作りには、基本的な項目を抑えることが重要ですので、対策例を４つご紹介していきます。

１．メイン・サブ画像に訴求力、押せるバナーも

スマホでは、特にメイン画像を大きめとしますが、次に表示される２～７枚目ほどまでのサブ画像に訴求力の高いインパクトのある重要な情報を記載した画像を入れましょう。
また、バナーにして、矢印や「詳しくはこちら」などの文言を組み合わせることで、「押せる」ことをアピールするのも効果的です。

２．商品特徴は箇条書きで３つ、自社商品との比較も

商品の特徴は３つほどの重要情報に絞って箇条書きで入れましょう。
また、他の自社商品との比較説明を追加すると、商品の特徴がより明瞭になります。これは回遊性の向上にも有効です。

３．商品画像とテキストはセットで掲載

商品紹介コンテンツは必ず画像とテキストのセットで掲載します。これにより、転換率アップにも繋がります。
例えば、アパレルサイトなら、「Tシャツの写真」＋「発汗性の高いスポーツ向き」といったようになります。

４．スマホファースト

最後に、ユーザーが使いやすい「スマホファースト」なサイトとなっているか、特に注意したいポイントを以下に挙げます。

・PCページとスマホページでメタタグ（Webページの情報を、検索エンジンやブラウザなどに伝えるタグ）が揃っているか
・スマホページの情報がＰＣ版よりも省略されていないか
・スマホページの表示速度に問題がないか
・タップすると電話が掛けられるようにリンク設定があるか
・最下部にトップへの戻りボタン、ＰＣ版への切り替えボタンがあるか

上記の中に、1つでも思い当たる課題があれば、スマホファーストへ向けてすぐに改善しましょう。

以上、スマホ対応の商品ページの具体策についてお送りしました。
ポイントを意識して、スマホ経由の売上アップの近道としましょう。

スマホに最適化した商品ページ作成について、トップページの構成と４つの具体策をご紹介いたしました。

ぜひスマホサイトと商品ページの見直しにお役立ていただければ幸いです。

※スマホ対策の関連記事としては以下を合わせてご参照ください。
「楽天市場のスマートフォンサイトのリニューアルと今後の行方」

いつも．では、スマホの最適化はもちろん、これまでの支援経験・豊富なノウハウでそれぞれの店舗様に合った施策でご支援いたします。
ぜひお気軽にご相談ください。