商品ページのデザインの成功例10選と売れる商品紹介ページの特徴

ネットショップの売り上げを伸ばすには、商品の品質や価格だけでなく、販売に使用するECサイトのデザインにもこだわる必要があります。この記事を通じて、商品ページを魅力的なデザインにするための工夫を知り、できそうな点は積極的に取り入れてみましょう。

商品ページとは

商品ページとは、ECサイトを訪問したユーザーが商品の機能や利点、価格などを知るページのことです。ユーザーは、商品ページの記載内容をもとに購入すべきかどうかを決定する場合も多いので、商品ページを制作する際は力を入れて取り組むことをおすすめします。

ほとんどの商品ページには、ユーザーがサイズや色、注文数を選択したり、商品をカートに追加したりできる機能が用意されています。また一般的に、商品ページには以下の情報が掲載されます。

• 商品名
• 商品の写真や動画
• キャッチコピー
• 購入ボタン
• 関連商品やおすすめ商品
• ユーザーレビュー
• 使用上の注意点
• サイズに関する表記
• 送料無料や返品の条件
• ノベルティプレゼントなどのキャンペーン情報

商品ページデザイン・レイアウトの成功例10選

1. YOKO CHAN

著名人に愛されるレディースハイブランドであるYOKO CHANの商品ページは、全体をモノトーンとしたり、モデルの顔が一切写っていない商品画像を掲載したりすることで、高級ブランドならではの空気感が伝わる造りとなっています。サイトで使用されているフォントを全体的に細字にすることで、気品あふれる印象を打ち出しています。

個別の商品ページには、複数の画角で撮影された商品画像の掲載に加えて、値段やカラーバリエーション、サイズがユーザーにとって見やすい位置に記載されています。見やすい位置にユーザーが知りたい情報を記載するのは、売り上げを伸ばすために必要な工夫です。さらに商品ページの下部には、商品についてさらに詳しく知りたい人向けに衣服の素材やデザイン、手入れの方法などが丁寧に説明されています。

その他の特徴：

• 「おすすめのコーディネート」で閲覧中の商品と着合わせできるアイテムが紹介されている
• 気に入った商品を保存しておける「お気に入り追加」ボタンがある
• 商品写真で起用されている服のサイズやモデルの身長が記載されている

2. SOÉJU

レディースアパレルブランドであるSOÉJUの商品ページは、各商品にまつわる背景を伝える「商品ストーリー」を前面に打ち出していることが特長です。また、その商品を紹介したYouTube動画がページに埋め込まれていたり、スタッフのコーディネート画像が各スタッフの身長とともに掲載されていたりして、商品を身近に感じられるようにする工夫が随所に散りばめられていることから、秀逸なデザインとなっています。

「サイズ／素材／取り扱い」のセクションに、各スタッフが複数のサイズを着用した画像が、身長や着用コメントとともに載せられているのも大きな特徴です。適切なサイズを選択しやすくなるため、結果的に購入や顧客満足度向上につながります。このように、ユーザーが知りたい情報をわかりやすく記載することは、売れる商品ページにするための大切な取り組みです。

その他の特徴：

• ページ全体は白や黒、グレーなどの落ち着いた色合いで統一され、ユーザーが快適に閲覧できるよう配慮されている
• 商品画像は開いてクリックすると画面全体に拡大表示される仕様になっている
• 商品ページ下部でユーザーの口コミを閲覧できる

3. ファミリア

老舗子ども服ブランドであるファミリアの商品ページは、子どもが着用した様子がよくわかるように複数のモデル着用写真が掲載されているのが特徴です。商品ページ自体は白背景に黒文字、アクセントにイメージカラーである「ファミリアブルー」（水色）を使用したシンプルなデザインに仕上げられていますが、商品の色に合わせてモデル着用写真の背景色を変えることで、印象に変化を加えています。たとえば「シャツ〈やまと × familiar〉」の商品ページに掲載されている画像の背景色は柿色、「パンツ（3分丈）〈familiar Made with Liberty Fabrics〉」の商品ページに掲載されている画像の背景色はベージュ色です。このように、商品の色がより映えるように工夫されているのも特徴といえるでしょう。

さらに、サイズガイドや仕上がり寸法も詳しく記載されているため、各サイズの違いを明確に把握できます。このように、購入後に「サイズが合わなかった」といったよくあるトラブルを避けるための工夫も見られます。

その他の特徴：

• 商品の詳細説明には、素材や原産国、洗濯表示などが細かく記載されている
• 検索機能が豊富で、ハッシュタグから検索したり、条件を指定して検索したりすることができる

4. 山と道

登山界隈の人気ブランド「山と道」の商品ページは、実際に使う場面がイメージしやすくなる構成となっていることが特徴です。たとえば各商品ページでは画面上部一面に、商品を着用したモデルが自然の中や山道を歩く様子を大きく収めた動画が掲載されており、登山やハイキングという場面で使用する様子が想像しやすくなるよう工夫されています。

また、商品一覧ページが用意されており、取扱商品の一覧が画像と文章でまとめて記されていることも特徴です。色や重さ、対象の性別といった基本情報が記載され、個々の商品ページに遷移しなくても大まかな情報を把握できるようにデザインされています。中でも重さの表記は、創業者自身がハイキングを深く理解し、ハイカーにとって荷物の重量が大切であることを理解したうえでの取り組みといえるでしょう。

加えて、個別商品ページの一部には、商品が完成するまでのストーリーがまるで雑誌の一ページのような美しい写真付きで収められており、商品に込められた思いやこだわりをうまく伝えています。このように、ハイカーを第一に考えていることを積極的に表現し、リピーターを増やせるような工夫が行われているのも、山と道の商品ページの特徴です。

その他の特徴：

• 商品に搭載されている機能を図で解説している
• ユーザーが困らないように、FAQを商品ページの下部に設置している

5. 土屋鞄

老舗ランドセルメーカーであり現在はランドセル以外の革製品も手がける土屋鞄の商品ページは、贈答用として購入しやすい工夫が随所に行われていることが特徴です。購入ボタンの上部には「ラッピングの指定」というオプションが設置されており、細やかな配慮が見て取れます。販売する商品の大半が革製品であり、ギフト用に購入するユーザーが多いことから、こうした独自の工夫を取り入れています。商品ページ上部にあるナビゲーションから「ギフト」に遷移できるようにデザインされている点も、土屋鞄ならではの工夫といえるでしょう。

加えて、ユーザーが直感的に欲しい商品を見つけられるようにデザインが工夫されているのも特徴のひとつです。ページ上部からアクセスできるカテゴリーは「鞄」と「財布・小物」に2つに分けられており、いずれかを選択すると、さらに細かいカテゴリーが表示されます。たとえば、鞄を選択すると、ブリーフケースやトートバッグ、バックパックなどが表示されます。

その他の特徴：

• 商品のレビューが掲載されており、ユーザーの実際の声が参考にできる
• 収納部分や設計上の工夫など、商品のこだわりポイントを簡潔に紹介している

6. KANADEMONO

木や金属の素材感を前面に出した、シンプルモダンな家具やインテリア製品を取り扱うKANADEMONOの商品ページは、画像とテキストを巧みに組み合わせて商品の魅力を伝える工夫が行われていることが特徴です。

各商品ページには多数の写真が掲載されており、商品の全体像だけでなく、細部まで確認できるようになっています。たとえば机の場合、全体の写真に加え、高さや厚み、脚の長さなどがよくわかるようなクローズアップ写真も掲載されています。

また、家具の商品ページには「FEATURES」というセクションが設けられ、各商品の特徴や、ダイニング用、デスクワーク用などの具体的な用途が文字と写真で説明されています。インテリア雑誌を彷彿とさせる造りとなっており、ユーザーがワクワク感を持ちながら使用シーンを具体的にイメージできる工夫がなされている点もポイントです。こうした工夫により、KANADEMONOの商品ページは売れるECサイトのデザインの条件を備えています。

その他の特徴：

• 商品を購入したユーザーの声がレビューで確認できる
• 脚の形や天板のサイズ、面取りなどを自由に選択できることがわかるように商品ページがデザインされている

7. FÖRNE

子どもとその保護者を対象に知育雑貨を販売しているFÖRNEの商品ページは、対象ユーザーに親しみを持ってもらえるように工夫されていることがポイントです。温かみを感じさせる優しいライトブラウンを基調としたデザインと柔らかい文体が相まって、親しみやすい印象を打ち出しています。統一感のあるデザイン、という売れる商品サイトの特徴を備えています。

一部の商品ページでは、商品の使い方や使うことでどのようなメリットがあるのかなどについてまとめられたコラム記事へのリンクが下の方に掲載されています。知育雑貨としての利点を詳細にまとめることで、子どもを持つ保護者の購買意欲をうまく刺激する工夫が施されているのは、FÖRNEならでは工夫といえるでしょう。このように、ブランドコンセプトを商品ページにうまく反映させつつ、売り上げを高めるための工夫を取り入れていたデザインに仕上げているのが特徴です。

その他の特徴：

• 商品ページにレビューが表示されており、購入の参考にできる
• レビューには店舗からの返信も合わせて掲載し、ユーザーが安心感を持てるようにしている

8. カキモリ

「たのしく、書く人。」をコンセプトとした文具店であるカキモリの商品ページは、全体的にシンプルで無駄のない美しいデザインにすることで、取り扱っている文房具がより映えるような工夫が行われています。「インク」「ノート」などジャンルごとの商品一覧ページが用意されており、そこでは白背景に商品が整然と美しく並べられています。

個別の商品ページでは、各商品においてデザイン上の工夫が施されている箇所やペン先をクローズアップした写真など、商品の質感や細部を確認できるような商品画像が掲載されており、ユーザーに商品の魅力を視覚的に伝えているのも特徴です。また、一部の商品ページには動画も掲載されており、実際に使用している様子を動きの中で確認できます。商品説明は簡潔で分かりやすく、商品の特徴や利点が数文でまとめられています。ユーザーが商品を選ぶ際に必要な情報を無駄なく伝えている点も、成功している商品ページデザインに多い特徴のひとつです。

その他の特徴：

• 各所にペンやギフトラッピング、カートなどの小さなイラストがサイトにちりばめられている
• 「もっと知る」のセクションでは、商品の使い方などを詳細に確認できる

9. Master & Dynamic

ニューヨーク発のプレミアムなワイヤレスイヤホンやヘッドホンを販売するMaster & Dynamicの商品ページは、商品の美しさや性能がよく伝わるよう、大きく精細な写真を多用していることが特徴です。一方、商品説明では要点を絞って各ポイントが数文程度で書かれており、写真の迫力が損なわれないような配慮が見て取れます。文字数を抑え、その分多くの写真を載せることで、ユーザーに知ってもらいたい魅力をうまく伝えています。

また、イヤホンやヘッドホンといった電化製品を扱うウェブサイトとしては珍しく、ベージュ色の背景と細い字体が採用されており、おしゃれかつプレミアムな雰囲気が伝わるような工夫が行われています。Master & Dynamicは高級路線のブランドであり、ターゲット層に適したデザインといえるでしょう。

その他の特徴：

• 「In The Box（パッケージの内容）」セクションでは、購入時に同梱されるものについて文字だけでなく画像でも示している
• 商品に関するSNS投稿を商品ページ下部で紹介している

10. Johnny Cupcakes

ポップな柄のTシャツを多く手掛けるJohnny Cupcakes（英語）の商品ページは、独創性の溢れる商品を目立たせるために、サイト自体は白、黒、エメラルドグリーンの配色でシンプルに構成されており、商品一覧ページの商品画像は大きく見えるように工夫が施されています。

個々の商品ページでは、サイズと色、数量、購入ボタンを大きく表示することで、注文しやすいデザインを心がけているのがわかります。購入ボタンを目立つように設置するのは、コンバージョン率を上げるために大切な工夫のひとつです。

Johnny Cupcakesでは、一定の金額以上を購入した顧客に、靴下やグリーティングカードを無料で提供しています。プレゼント獲得までにあとどのくらい購入する必要があるかを視覚的に示すため、商品ページではカートに商品を入れた際に購入額を示すメーターが表示されるようになっており、平均注文額を高める施策が行われています。

その他の特徴：

• 新商品を「Freshly Baked（焼きたて）」、セールを「Bake Sale（焼き菓子バザー）」と呼ぶなど、ユーモア溢れる工夫が各所に見られる
• 商品ページに環境保全活動に関する記載がある
• 商品一覧ページには並び替え機能があり、価格順や販売日順に商品を表示できる

売れる商品紹介ページの特徴

ユーザーの知りたい情報がわかりやすく記載されている

ユーザーが知りたい情報を見やすく記載するのは、ECサイトデザインの基本です。Nielsen Norman Groupの調査（英語）によると、成功しているECサイトの商品ページのほとんどには以下の情報や機能が用意されています。

• 「超速乾タオル」など特徴を伝えられる商品名
• 細部までわかる商品画像
• 商品の拡大画像
• 送料などの追加料金を含めた価格表記
• 色やサイズなどのバリエーション
• 商品の在庫状況
• 商品をカートに追加するボタン
• 商品がカートに追加されたことを伝える通知
• 簡潔でわかりやすい商品説明

上記の基本事項に加えて、販売商品や対象ユーザーに合わせた内容も掲載しましょう。たとえば、持ち運びが必須となるバッグを販売する場合は、重量をわかりやすい位置に記載するなどの工夫を行うのがおすすめです。

ターゲット層に適したデザインとなっている

デザインは、万人受けするものよりターゲット層に合わせたものにするほうが効果的です。たとえば、富裕層をターゲットにする場合、高級感を演出するためモノトーンなどのシックな色合いを使用し、細めの明朝体などフォーマルな印象を与えられるフォントを採用するとよいでしょう。

また、配色には細心の注意を払いましょう。特にテキストの色と背景色の組み合わせには、ユーザーへの配慮が求められます。たとえば、黒色の背景に紺色の文字を使用すると、視認性が低くなり、文章が読みづらくなります。テキストカラーを黒に、背景色を白にするなど、コントラストの高い色を選ぶと視認性が高くなるのでおすすめです。

統一感のあるデザインとなっている

画像、文体、デザインなどに統一感を持たせることで、商品やブランドおける世界観を確実にユーザーに届けられます。モノトーンを基調とした高級感溢れるデザインのページであれば、スーパーマーケットで見かけるような黄色の背景に赤文字で「大特価セール」のような表示を載せるのは避けましょう。ユーザーは違和感を覚え、購買意欲を失ってしまうかもしれません。

統一感を保つためには、配色やフォント、レイアウトなどのデザイン要素を統一し、全体の雰囲気が崩れないようにすることが重要です。完成後もサイトを自分の目で見て、違和感を覚える箇所がないかを確認しましょう。

商品画像・動画にこだわっている

ユーザーの購買意欲を刺激するために、商品を紹介する画像や動画にはこだわりましょう。商品画像は、使用イメージの写真と、商品そのものを単体で撮影した写真を用意するのが理想的です。たとえば、家具を販売する場合は、実際の部屋に設置した様子を撮影した写真を掲載すると、ユーザーは実際に自分が使っているシーンを想像しやすくなります。

また、細部をクローズアップした写真も用意するのがおすすめです。たとえば衣服を販売する場合、ポケットや縫い目などの細部の写真と、モデルが正面、側面、背面から着用した写真を掲載するとよいでしょう。また、動画を載せて動きのある中で商品を見せるのも効果的です。

ただし、掲載する画像や動画には使用するプラットフォームごとにガイドラインがあるため、注意しましょう。たとえば、Shopifyで掲載できる画像は、最大5,000×5,000ピクセル、ファイルサイズ20MB未満といった規定があります。準備した画像や動画が使用できないといった状況に陥らないように、前もって確認しておくことが大切です。

まとめ

魅力的な商品ページを制作するには、ターゲット層を意識した統一感のあるデザインを心がけ、商品を紹介する画像や動画にこだわることが重要です。商品ページとして利便性が高くなければ、売り上げを伸ばすのは困難になる可能性があるため、送料などの追加料金を含めた商品価格や色やサイズのバリエーション、在庫状況などが一目でわかるように記載することも求められます。ECサイトを構築する際は、これらのポイントを押さえ、本記事で紹介した成功例も参考にしながら商品ページを準備しましょう。

Shopifyには200種類を超えるデザインテーマがあるため、上記のポイントを取り入れた商品ページを制作できます。この記事で紹介した商品ページのなかにも、Shopifyで構築されたサイトが複数あります。デザインにこだわってECサイトを立ち上げたい人は、ぜひShopifyをご活用ください。

文：Yukihiro Kawata