こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。
今回は購入率（CVR）をアップする、商品詳細ページの見直し術をご紹介します！

こんなお悩みありませんか？

・スマホで商品画像が見切れてしまっている…
・価格や在庫の表示がなんかおかしい気がする…
・商品ページを見てもらっているのに、なかなか購入につながらない！

商品詳細ページが購入率に影響するわけ

デザイン質問掲示板へのお問い合わせで、もっとも件数が多いのが商品詳細ページに関するご相談で、なかでも価格・在庫・画像の表示に関するお困りごとは特に多くなっています。

トップページや商品一覧ページは「興味を持ってもらう場所」ですが、商品詳細ページはお客様が「買う・買わない」を決める場所です。
表示が崩れているページはそれだけで「このお店、大丈夫かな？」という不信感につながり、せっかく興味を持ってくれたお客様が離脱してしまいます。

画像枚数と売上の関係

makeshopのデータ分析によると、商品画像が5枚以上のショップはそうでないショップより月商に1.5倍以上の差があり、10枚以上では2倍の差が出る傾向にあります。

makeshopでは最大50枚のサブ画像（jpg・png・WebP形式、1枚あたり最大1MB）を登録できます。正面・側面・素材感・使用シーンなど、さまざまな角度から撮影した画像をどんどん登録してみましょう！

[難易度 ★★☆ ] 必見！よくある表示崩れパターンとNG例

サポートへのお問い合わせで多い「表示崩れ」のパターンをご紹介します。
ご自身のショップでも確認してみてください。

その1 ：価格表示が崩れている

▼症状

税込・税抜価格が重なって表示される、または価格が大きく・小さく表示される

▼原因

共通CSSに誤った指定が入っていたり、仕様のCSSをうっかり削除してしまっていることが多いです。また、!important を多用してCSSの優先度が競合しているケースもよく見られます。

その2 ：在庫表示がおかしい

▼症状

在庫があるのに「品切れ」と表示される、またはその逆のパターン。

▼原因

バリエーション設定と在庫管理の連携ミスや、CSVで一括アップロードした際のフラグ設定の誤りが考えられます。
デザインでは、条件分岐の構造が誤っていると意図しない表示になります。

その3 ：スマホで画像が見切れている

▼症状

スマホで商品画像が画面からはみ出す、または極端に小さく表示される。

▼原因

画像に px で固定幅が指定されていたり、レスポンシブ対応のCSSが設定されていない場合に起こります。

その4：画像の解像度が低い

登録している画像のサイズが小さいと、デザインによっては画像が引き延ばされて画質が粗くなってしまいます。サイズを見直してきれいな商品画像を登録しましょう！

[難易度 ★★☆ ] 価格・在庫・ボタンをデザインする

サポートサイトでは、「CSS」に貼り付けて使えるサンプルソースをご紹介しています。
ぜひご活用ください。

👉 カートボタンのデザインのサンプルはこちら
コピペだけでOK！カートに入れるボタンのデザインを変えてみよう！

👉 商品説明など、見出しのデザインのサンプルはこちら
コピペだけでOK！見出し(h2)のデザインを変えてみよう！

[難易度 ★☆☆ ] スマホ表示での画像最適化のポイント

スマホからのアクセスが大半を占める今、スマホでの見え方は特に重要です！

まずここから！レスポンシブ対応の基本CSS

前述の「よくある表示崩れ：その３」でも紹介した通り、スマホで画像がはみ出す場合、レスポンシブ対応の不足が考えられます。
スマホ用CSSの書き方については、以下の記事の「スマホ用のCSSの書き方」を参照してください。

👉 ベーシックモードからクリエイターモードに移行する方法！【2】レスポンシブにしよう

推奨する画像サイズの目安

用途	推奨サイズ	備考
メイン商品画像	800×800px以上	正方形が汎用的
サブ画像	800×800px以上	メイン画像と統一感を
スマホ向け	横幅800px以上	高解像度（Retina）端末対応
ファイルサイズ	1MB以内	makeshopの上限値

 

2025年12月リリース：ピンチアウトで画像を拡大できるようになりました！

上記のテンプレートで、スマホで商品画像をピンチアウトして拡大できるようになりました！
素材感や細部を確認したいお客様の不安が解消され、購入への後押しになります。

[難易度 ★☆☆ ] 購入率を上げる商品詳細ページ診断チェックリスト

最後に、商品詳細ページをセルフチェックできるリストをご用意しました。チェックを入れながら「診断する」ボタンを押すと、あなたのショップの状態を判定します！

いかがでしたでしょうか。
商品詳細ページの改善は、広告費をかけずに購入率を上げられるコスパ最高の施策です！
チェックリストで気になる項目が見つかったら、ぜひ優先度の高いものから対応してみてください。

設定で迷ったときは、makeshopのオンラインマニュアルやサポートサイトの記事もご活用ください。それではまた！