優れた商品ページデザインの5つの例とそこから学べること

イントロ

eコマースサイトにアクセスする際、顧客の体験は最初からわかりやすく、目を引き、シンプルで、要点を押さえたものでなければなりません。商品ページのデザインは、ユーザーエクスペリエンス全体の中で最も重要な要素のひとつです。なぜなら、このページが最終的にブラウザを顧客に変えるからです。そのため、オンラインストアの商品ページをデザインする際には、注目の商品、高品質の画像、詳細な情報に焦点を当てる必要があります。

もしあなたが新しいウェブサイトを作成したり、eコマースサイトのパフォーマンスを最適化したりするのであれば、良いデザインはユーザーのニーズ**を理解し、それに応じて適応することから始まることを覚えておいてください。

ここでは、優れた商品ページをデザインする方法、ベストプラクティスの商品ページデザイン、商品ページを価値ある魅力的なものにするための主要な機能とは何かを探ってみましょう。

製品ページのデザイン方法

デザイナーによってデザインのプロセスは異なりますが、商品ページのデザインを学ぶ上で、誰もが心に留めておくべきことがあります。

1.高画質な画像を使用する

オンラインショッピングの体験は完全に視覚的なものであり、商品写真はどの商品ページにおいても非常に重要です。実店舗のように商品を触ったり試着したりすることができないため、画像はお客様が購入するかどうかを判断するのに役立ちます。

サイトを作成する際には、最適化された画像を使用し、常に最新の状態に保つようにしてください。最適化された画像は、適切なファイルタイプ、サイズであり、ページの読み込み時間を短縮できるように圧縮されている必要があります。また、ピントが合っていること、背景がシンプルであること、複数のアングルを提供することで、ユーザーが何を得ているのかを確認できるようにする必要があります。

2.説得力のあるコールトゥアクションを作成する

アクティブな表現は、顧客が製品を購入したり、製品について詳しく知るために行動を起こす動機となります。コールトゥアクション（CTA）ボタンを作成し、フォーマットする際には、短く、簡潔で、好奇心を刺激するようなものにしましょう。

3.情報量の多い商品説明文を書く

優れた商品ページには画像が不可欠であると述べましたが、優れた商品コピーも同様です。

商品説明では、お客様に各商品の詳細な情報をお伝えします。商品説明には、素材、色、特性などの詳細が含まれている必要があります。

商品画像と説明文が連動して、商品を買う気にさせなければなりません。

4.透明性のある価格表示

購入の決め手は、5つ星評価の製品、明確で説得力のあるコピー、素晴らしい写真だけでなく、価格も決定的な要素です。常に明確な価格を大きなフォントサイズで表示し、曖昧な割引や細字を避けるべきです。

5.ソーシャルプルーフを盛り込む

私たちは社会的な行動に影響されます。レストランで席を取るために並んでいる人を見たり、家族に商品を勧められたりすると、その商品を購入するかどうか決めるのに、他の人の行動や発言に影響されることが頻繁にあります。オンラインショッピングも例外ではありません。

実際、97％の顧客がオンライン・レビューが購入の意思決定に影響を与えると回答しており、商品ページのコンバージョンに好影響を与えるソーシャルプルーフを含めるのは当然のことだと言えます。

6.一貫性を保つ

ウェブサイトや各製品ページは、デザイン性が高いだけでなく、統一された色使いや、統一感のある画像などを使用する必要があります。

カラーパレット、特定のフォント、調和のとれた声のトーンを使って、ブランドの一貫性を確保する。視覚的な一貫性を保つには、Webサイト用のグラフィック・テンプレートを使用するとよいでしょう。

(画像出典：Envato Elements)

5つの美しい製品ページデザイン例とその理由

それでは、商品ページ制作の基本を押さえた上で、商品ページのウェブデザインで成功しているブランドの事例を見ていきましょう。

1.アップル

(画像出典：Apple / iPad）

なぜ効果があるのか？

このページでは、Appleのデザインチームが、製品とそのユニークな機能に焦点を当て、雑念のないインパクトのあるカスタマーエクスペリエンスを実現しています。コピーは短く、インスピレーションを与えるもので、ユーザーがスクロールを続けると、白い背景に際立つ簡潔な説明と製品画像で発見が続きます。

何を学ぶことができるのか？

画像やコピーなど、商品ページのデザインは「少なければ少ないほどよい」のです。

Appleは、製品ページを作る際に非の打ちどころのない仕事をしています。画像、余白、言葉、ディテールの一つひとつが注意深く選ばれ、全体としてクリーンで一貫性のある、製品を際立たせる外観を保っているのです。

このようにミニマムなデザインは、余計なものがないため、ページを構築する際にはシンプルなレイアウトを選ぶことが大切です。

2.クロニクルブックス

(画像出典：クロニクルブックス)

なぜ効果があるのか？

カテゴリーごとに明るい色を使い分けながら、商品ページではパーソナライゼーションに重点を置いています。Chronicle Booksでは、トップメニューから簡単にカテゴリーを選択し、関連するコンテンツを表示することができます。

(画像出典：クロニクルブックス)

現在閲覧しているページを離れずにカートに入れられる関連書籍を提案することは、すでにキュレーションされた商品群に興味を持たせる効果的な方法です。

何を学ぶことができるのか？

ユーザーが探しているものを確実に見つけ、できればそれ以上にショッピングカートのサイズを大きくしたいのであれば、商品ページでパーソナライズされたカスタマーエクスペリエンスを実現することが重要です。商品ページでは、必ずしも同じカテゴリーに属さないが、顧客の幅広い関心にマッチするような商品との関連付けを考えてみてください。

3.ファーフェッチディテールのすべて

なぜ効果があるのか？

ファッションe-tailerのFarfetchにとって、優れた商品ページは細部に宿るものです。顧客は、商品のケア、サイズ、価格、配送スケジュール、デザイナーに関する明確な情報を、すべて一箇所で得ることができます。今すぐには購入できない場合は、ウィッシュリストに追加するオプションも用意されています。

何を学ぶことができるのか？

顧客が自社や競合他社の製品ページを閲覧する際に、どのような情報を求めているかを聞いてみましょう。商品ページに表示する情報は、顧客が購入の意思決定をするのに役立つようなクエリの種類に合わせる必要があります。

(画像出典：ファーフェッチ)

4.ZARA：没入感を演出する

(画像出典：ZARA)

なぜ効果があるのか？

ZARAのウェブサイトでは、体験は商品ページそのものから始まるのではありません。トップページから、ZARAの最新コレクションを身にまとったモデルがキャットウォークを歩く、ハイファッションのランウェイショーの中にいるような体験ができます。ビデオの下には無限スクロールがあり、ユーザーはカタログから商品を探すのではなく、美しくキュレーションされたエディトリアル写真を見ることができるようになっています。

ZARAは多くの商品を提供し、常に在庫を更新していますが、商品カテゴリはほとんどありません。このカタログの簡素化により、ブラウジングがより分かりやすくなり、ユーザーは最大10個のフィルターを使って検索を絞り込むことができるようになりました。

(画像出典：ZARA／女性／パーティー）

何を学ぶことができるのか？

このような没入感のある商品ページは、無地の背景ではなく、エディトリアルスタイルで撮影されているため、作成に手間がかかります。また、ホームページ上の動画やInstagramで共有される画像など、サイト内外の幅広い体験に商品写真がどのようにフィットするかも考慮する必要があります。効果的に実施すれば、このアプローチは製品を販売するだけでなく、ブランドと顧客との結びつきを構築するのに役立つのです。

5.グロッシアーあなたの商品をヒーローに

(画像出典：Glossier）。

(画像出典：Glossier）。

なぜ効果があるのか？

美容ブランドGlossierにとって、製品はWebサイトの主人公であり、もちろん製品ページも含まれます。簡潔なコピー、ユーザーレビュー、カラーパレットピッカー、「トップレート」タグなど、商品画像の周辺にあるものはすべて、ユーザーに商品そのものの価値を伝えるためにデザインされています。画像ギャラリーは、製品のさまざまなバリエーションを紹介するのに役立ち、何を選ぶべきかを簡単に決めることができます。これは、化粧品のように、まず試してみるという選択肢を持たない商品にとって、非常に重要です。

何を学ぶことができるのか？

製品が主役なら、迷わず製品を前面に押し出しましょう。デザイナーはレイアウトやブランディング資産、追加グラフィックに気を取られ、製品がセールスポイントであることを忘れてしまうことがあります。また、製品に命を吹き込み、実際のユーザーからその価値を社会的に証明する必要がある場合、レビューが効果的に機能します。

優れた製品ページデザインの条件とは？

5つのベストプラクティスの商品ページデザインを見てきたように、良い商品ページには多くの要素がありますが、どの商品ページにも必要な必須要素があります。

Baymard Instituteの調査では、商品ページをデザインする際に従うべき95のガイドラインを提案しています。レイアウト、商品画像、画像ギャラリー、「購入」セクション、配送、返品、ギフトポリシー、商品バリエーション、説明、仕様、ユーザーレビュー、クロスセルとクロスナビゲーションなどです。

この調査によると、欧米の売上上位185のECサイトのうち、商品ページのパフォーマンスが「良い」または「許容できる」のはわずか18%に過ぎません。その中でも仕様が最も多い問題の一つです。

(画像出典：ベイマール研究所）

グッドデザインとは何か？

良いデザインを実現し、定義する方法は数多くありますが、ドイツの工業デザイナー、ディーター・ラムスが提唱するいくつかの原則は、デザインプロセスの指針となります。

1. 良いデザインは革新的です。
2. 製品を便利でわかりやすいものにする。
3. 美意識が高い。
4. 控えめであること。
5. 正直であること。
6. デジタルの世界ではそうでもないかもしれませんが、長持ちするのです。
7. 細部へのこだわりが感じられます。
8. 環境に配慮しています。
9. できるだけデザインを必要としない。

つまり、シンプルに、必要なものだけに絞り、使い勝手を悪くするような機能を追加しないことです。

製品ページデザインのベストプラクティス

もちろん、良いデザインは不可欠ですが、どんなビジネスも利益なしには成り立ちません。ですから、ビジュアルやフォーマットについて学ぶだけでなく、オンライン販売を増加させる製品ページのデザイン方法を学ぶ必要があるのです。

Shopifyと Nielsen Norman Groupの調査によると、買い物客が買いたいものを決めるのに役立つベストプラクティスは以下のとおりです。

1. 説明的な製品名
2. 正確な商品画像
3. 各製品の詳細な拡大表示
4. 価格、および追加料金の有無
5. 選べる明確な製品オプション
6. 可用性
7. カートへの商品追加時のわかりやすさ、追加された時のフィードバック
8. 情報量の多い製品説明

製品ページデザインテンプレート

ゼロからデザインするのが苦手な場合や、クリエイティブな素材が必要な場合は、商品ページのデザインテンプレートやオンラインデザインツール、Webテンプレートの利用を検討し、最適な結果を得ることが必要です。商品ページのデザインテンプレートを使用する利点は、プロセスの簡素化、時間の節約、ページ間の一貫性の確保などが挙げられます。

製品ページデザインチェックリスト

さて、ここまでベストプラクティスと一般的なハウツーを説明してきましたが、次にEコマースの商品ページをデザインする際に必要なチェックリストが必要な場合は、この記事で説明したことをすべてまとめてみましょう。

• 高品質で最適化された画像を選ぶ
• 説得力のあるCTAボタンを設置する
• 情報量の多い商品説明の作成
• 商品のバリエーションを表示する
• 価格の透明性を確保する
• ソーシャルプルーフやレビューを実証する
• 発送先情報を記載する
• ブランディングに一貫性を持たせる

自慢の製品ページをデザインする準備はできている

新しい商品ページをデザインすることは、とてもエキサイティングな冒険です。商品を輝かせ、数あるオンラインショップの中から際立つ存在にすること。

最終的に忘れてはならないのは、eコマースサイトを訪れるユーザーです。もちろん商品が主役ですが、最終的な決断を下すのはお客様なのです。