ECサイトを実際に運営していると、商品ページのデザインで悩んでしまうことも少なくありません。売れる商品ページを作成するには、基本となるポイントをよく理解しておく必要があります。
本記事では、ECサイトにおける商品ページデザインの基本や売れるページを作るために必要な要素、成功企業の事例などを解説します。
デザインの基本と3つのポイント
ECサイトの商品ページについて、デザインを考えるときには基本的なポイントをおさえておく必要があります。ここでは、3つの点についてそれぞれ解説します。
掲載する情報をシンプルにまとめる
商品ページは何よりも見やすさが重要であり、デザインにおいても、伝えたい情報がきちんと整理されたシンプルさが重視されます。販売する立場であれば、商品の魅力をできるだけ伝えたいと思い、多くの情報を掲載してしまいがちですが、情報過多になると重要なポイントが分かりづらくなり、悪い印象を与えることもあります。
関連する項目ごとにカテゴリ分けをしたり、画像やテキストの配置に規則性を持たせたりすることで、見やすいデザインを心掛けましょう。必要な項目が規則的に並んでいれば、多くの商品ページを見てもらえる可能性やサイトの回遊性も高まるはずです。
配色に気を配る
ECサイトにおいて、見やすいデザインを求めるなら、白をベースとしてアクセントカラーを1～2色追加するとよいでしょう。サイトを目立たせたいと思って、多くのカラーを使用すると、かえって見づらくなるので注意が必要です。
また、テキストの色と背景の色の組み合わせにも気を付けましょう。たとえば黄色の背景に白文字など、使用する色の組み合わせによっては文字が埋もれてしまい、文章そのものが読みづらくなる場合があります。
Webで検索するとさまざまな配色ツールが見つかるため、効果的に活用しながら配色を決めていくとよいでしょう。ユーザーの視点に立って、見やすい商品ページにしていくと、CV（コンバージョン）を高めることにつながるはずです。
購入までの流れをスムーズにしておく
ECサイトのデザインはシンプルな方が好まれますが、単にシンプルにしただけでは売れる商品ページにはなりません。訪問者の離脱率を下げ、次のページに遷移するまでの流れをスムーズに行えるデザインにする必要があります。
購入ボタンが見つけづらい場所にあったり、目立っていなかったりする場合は、ユーザーが購入ページにたどり着けず離脱してしまう可能性もあります。購入ボタンやカートなどの配置、おすすめ商品の表示内容など、ページ設計を考えながらデザインすることが大事です。
売れる商品ページを作るのに必要な要素
どのようなデザインにすればCVを高められるのかを知るためには、売れる商品ページ作成に必要な要素を理解しておくことが大切です。6つの点から、売れる商品ページの作り方をチェックしてみましょう。
ファーストビューにこだわる
Webサイトを訪れた際に、最初に目に入る画面をファーストビューといいます。サイトにアクセスして最初のページの印象が悪ければ、すぐに離脱されてしまうため、ファーストビューの見た目は重要です。
ファーストビューを改善するには、商品の魅力が伝わる画像やキャッチコピーなどを意識してみましょう。販売実績やセール情報など、アピールできる部分をしっかりと打ち出すことが大事です。
購入ボタンは分かりやすく配置する
商品ページのデザイン自体に問題がなくても、なかなかCVにつながらないことがあります。このケースでは購入までの導線がスムーズではなく、途中で離脱されている可能性があります。
「購入ボタン」の配置はとても重要であり、目立つ大きさや色で表示することが大切 です。また、商品ページの目立つ箇所に配置することも意識しておきましょう。
商品を見つけやすくする
ユーザーがECサイトを訪れても、ほしい商品が見つからなければ、当然ながら購入には至りません。そのため、商品を見つけるための「検索窓」をファーストビューの見える位置に配置しておくことが大事です。
また、カテゴリの一覧をECサイトの上部やサイドに表示しておくと、そこから商品ページに遷移しやすくなり、CVに結びつきやすいでしょう。
商品の購入につながる情報を過不足なくそろえる
商品ページは画像だけで構成されているわけではなく、必要な情報が不足していれば、購入にはなかなか結びつかないものです。商品の詳しい情報だけでなく、配達にかかる日数や配送方法などの情報も、ユーザーが購入を判断するには大事な要素です。
さらに、販売者に関する情報もきちんと見える箇所に配置しましょう。初めて利用するユーザーは、信頼できる販売者であるかといった点も気にするため、ユーザーが知りたい情報を分かりやすく伝えることが大切です。
サイトの回遊性を高める
ECサイトの場合、ユーザーは商品ページを見てすぐに購入するわけではなく、いくつもの商品を比較しながら購入するかどうか判断します。そのため、サイト内の回遊性を高めることが、売れる商品ページを作るためには必要です。
人気ランキングやよく閲覧されている商品など、他の商品ページにも誘導できる仕組みを取り入れましょう。
表示速度を改善する
ページの表示速度をチェックして、表示が遅ければ必要な改善を行うようにしましょう。スマートフォンを使っているユーザーの場合、サイトが表示されるまで3秒待てないといわれているため、表示速度が遅ければそのまま離脱される可能性が高くなります。
Googleから提供されている「PageSpeed Insights」などの解析ツールなどを活用すれば、サイトのURLを入力するだけで簡単に解析結果を得られます。改善のポイントを洗い出し、優先度の高い施策から実行してみましょう。
具体的な改善策としては、不要な画像を削除したり、画像サイズを圧縮したりする方法が挙げられます。商品ページの表示速度に問題がないかをチェックして、課題が見つかれば早めに対処することが大切です。
商品ページのデザイン例を紹介
優れたECサイトのページデザインには、参考になる部分が多くあります。ここでは、3つの事例を紹介します。
hi-cheese
「hi-cheese（ハイチーズ）」は、チーズケーキの専門店ですが、ECサイトでは各商品のイメージカラーが際立つようにデザインされています。ファーストビューには特集やキャンペーン情報などをあえて入れず、商品のイメージが伝わる写真をスライド形式で見せているのが特徴です。
購入ボタンは大きくて分かりやすく、カテゴリ分けもシンプルなので、目的とする商品にたどり着きやすいサイトの設計になっています。また、商品画像に「グルテンフリー」などのアイコンが付けられているのも、ユーザーが興味のある商品を見つけやすくするための工夫といえます。
購入者のレビューが掲載されているのも購入の後押しとなり、商品ページではほかの商品についても紹介されていて回遊性にも優れています。スマートフォンでも見やすいデザインです。
北欧、暮らしの道具店
「北欧、暮らしの道具店」は名称のとおり、北欧のさまざまなアイテムを販売している専門店です。ECサイトは白とグレーを基調としているなか、購入ボタンにはオレンジを使用し目立たせています。
写真やテキストなどの情報量も豊富で、実際に使ったときのイメージを持ちやすい点が特徴的です。商品ページという印象よりも、読み物として楽しめる作りとなっているため、読みやすさへのこだわりが感じられます。
CS online
「CS online」は、ギフトにぴったりな日用雑貨や食品などを数多く取り扱っているセレクトショップのECサイトです。デザイン事務所が運営しているECサイトであり、全体的に見やすいデザインとなっています。
おすすめの商品や人気商品にたどり着きやすく、「結婚祝い」や「出産祝い」「内祝い」といったタグがあるため、購入したい商品が具体的に決まっていなくても、ギフトの目的別に商品を探しやすいでしょう。
商品の画像やテキストも豊富で、詳しく情報が記載されています。スマートフォンで閲覧したときにも見やすいデザインとなっており、高い視認性が特徴です。
まとめ
ECサイトにおいて商品ページのデザインが最適化されていないと、CVRが伸び悩んでしまうこともあります。今回紹介したデザインの基本や売れる商品ページに必要な要素などを参考にして、ひとつずつデザインを改善してみましょう。
また、成功している企業や店舗のサイトデザインから学ぶことも、商品ページを強化するのに有効な手段となるはずです。
