Shopifyの商品ページ：デザインが見せるべきもの

要点

Shopifyの商品ページは、客が買うかどうかを決める画面です。実物を見せ、バリエーションを間違えずに選べるようにし、合計でいくらかかるかを言い、知らない相手から買う不安を取り除く必要があります。そのほとんどは、すでにテーマの中にあります。このページを描くときにいちばん欠けていると見るのは、順番と優先度です。Baymardの調査では、半数を超える人が写真から始め、予想外の追加費用がカート放棄の理由としていちばん挙げられています。だからデザインはギャラリーから始まり、購入ブロックで終わります。送料、交換、期間はそこに見えている状態にします。以下に、ページの各部分に何が必要か、なぜか、アプリにすべてを頼らずテーマでどう組むかを書きます。

1. 客がページを見る順番

商品ページに着いた人は、上から下へ読みません。Baymardのユーザビリティテストでは、参加者の56%が、タイトルや説明を読む前に画像の探索から始めました。写真のあと、人は三つを探します。欲しいバリエーションがあるか、最後にいくら払うか、うまくいかなかったときに何が起きるかです。

これは描き方を変えます。スクロールせずに見えるページ上部には、ギャラリー、名前、価格、バリエーションの選択、購入ボタンが必要です。決定を助けるもの（送料、交換、レビュー）はフッターではなく、ボタンにくっつけます。残り（ブランドの話、関連商品、長い文章）はそのあとです。

商品ページを描くとき、私は各ブロックに簡単な問いを使います。これは今、決める助けになるか。なるなら上げます。きれいでも何も決めないなら、下げるか外します。

ストアをゼロから組んでいるなら、Shopifyストアの作成と調整のページが、この仕事がテーマ、カタログ、チェックアウトと一緒にプロジェクト全体のどこに入るかを示します。

Baymardが大規模ストアで見つけたこと

2026年3月に更新されたBaymardの商品ページ評価は、米国と欧州の大規模ストアを見ています。デスクトップで、商品ページが妥当以上とされたのは48%だけでした。モバイルでは38%まで下がります。ユーザー体験のチームがいる大規模ストアでも、ここではまだ間違えます。テーマを入れて見直していない小規模ストアは、同じ種類の誤りを繰り返しがちです。良い知らせは、誤りのかなりの部分が技術ではなく、デザインと内容だということです。

2. 写真ギャラリー：必要なもの

ギャラリーはいちばん見られ、いちばん売る部分です。きれいな写真だけでは足りません。各写真が一つの疑問に答える必要があります。機能するギャラリーには、少なくとも次の種類の画像があります。

• きれいなメイン写真： 商品全体、中立な背景、十分な光。コレクションとカートに出る写真です。
• 実寸の写真： 手、人、知っている物の横に商品を置く。Baymardの調査では、42%の人が写真から大きさを理解しようとし、大規模ストアの37%にはまだこの画像がありません。
• モデルの写真： 服、アクセサリー、体に着けるもの。評価されたストアの23%にはありません。
• ディテール： 縫い、質感、フィット、ラベル。ズームが機能すべき場所です。
• 説明の写真： 矢印、寸法、短い一文で大事な点を示した画像。サイトの52%は、いちばん売れている商品でさえこの種類の写真を使いません。
• 短い動画： 商品に動き、組み立て、ドレープがあるとき。

Shopifyでのサイズと形式

Shopifyは商品に、画像、動画、3Dモデル、YouTubeまたはVimeoの動画を受け付けます。写真について、公式の推奨は2048 x 2048 pxの正方形です。ヘルプセンターが、いちばんきれいに出やすいサイズとして指している大きさです。すべての写真を同じ比率に保つと、客が画像を切り替えたときにギャラリーの高さが飛ばず、作りの粗い店に見える小さな欠陥を避けられます。

モバイルのサムネイル

モバイルでは、他の写真があることを示すために、写真の下に点だけを出すストアが多いです。Baymardは、モバイルサイトの24%だけがサムネイルを使い、インジケーターだけだったとき、デスクトップ利用者の半数が他の写真を見つけるのに苦労した、と見ています。サムネイルは次に何が来るかを見せます。モデルの写真があると分かり、そこに直接行けます。コードを考える前に、テーマの商品セクションの設定で、ギャラリーがサムネイルを出せるか確認してください。

代替テキストは細部ではない

すべての写真に代替テキストが必要です。Shopifyは、支援技術が視覚に障害のある人へ画像を説明するために使い、SEOにも役立つ、と説明しています。上限は512文字ですが、推奨は125文字以下に収めることです。キーワードの繰り返しではなく、写真が何を写しているかを書いてください。「横から見た白い革のスニーカー、ベージュのゴム底」は機能します。「白いスニーカー 革 買う スニーカー」は機能しません。

3. バリエーション：選択を見えるようにする

色、サイズ、電圧、味はバリエーションです。単純に見えますが、ここで多くの売上が止まります。自分のサイズがあることに気づかない、選び間違える、購入ボタンが消えた理由が分からない、ということです。

Baymardの2026年の評価では、大規模ストアの57%が、サイズ選択にまだボタンを使っていません。プルダウンは選択肢を隠します。客はタップし、開き、スクロールし、閉じて、何があるかを発見しなければなりません。ボタンは一度に全部を見せ、在庫切れも明確にします。

描くときは、次の規則に従います。

• 少ない選択肢はボタン、多いときだけリスト。 ブラジルのサイズでPからGG、色が三つならボタンに収まります。番号がとても長いリストは、収まらないことがあります。
• 色は名前ではなく色見本。 「サンド」と「ベージュ」は多くの人を混乱させます。色見本が解決し、色が変わったらギャラリーの写真も一緒に切り替わります。
• 在庫切れは打ち消し線か薄表示で、消さない。 サイズが画面から消えると、その店はそのサイズを扱っていないのだと思います。打ち消し線なら、終わったと分かり、再入荷の通知を頼めます。
• 寸法表はセレクターの近く。 サイズの横に「寸法を見る」リンクを置き、ウィンドウかすぐ下のセクションを開きます。フッターに隠すと使われません。
• 選択中の状態はコントラストで。 太い枠か、塗った背景。グレーの微妙な差は、特に日向のスマホでは役に立ちません。

バリエーションは価格にも影響します。大きいサイズが高いなら、客が選んだ瞬間にページの価格が変わる必要があります。再読み込みも、差額を見せるためのカート待ちもなしです。

4. 価格、送料、合計をボタンのそばに

ここが売上にもっとも重く、もっとも多くのストアが後回しにする部分です。Baymardのカート放棄理由の一覧では、見ているだけの人を除くと、40%が高い追加費用（送料、手数料）で放棄し、12%は事前に合計を見たり計算したりできずに放棄しました。50件の調査を合わせた、文書化されたカート放棄率の平均は70.22%です。

問題が送料そのものであることはまれです。問題は驚きです。チェックアウトで初めて送料を知ると、金額が妥当でも、店が隠したと感じます。そして2026年に評価された大規模ストアの67%は、購入ボタンの近くに合計金額の目安をまだ出していません。

理想の購入ブロック

「購入」または「カートに追加」のボタンの周りで、客はスクロールせずに次を見つけられるべきです。

1. 強調した価格。以前の価格の打ち消し線は、プロモーションが本物のときだけ。
2. 支払い方法の要約。たとえば「Pix、カード、boleto」と、ストアが実際に提供する分割の条件。
3. 送料、または計算までの短い道：CEPの入力欄か、送料無料の規則を直接書いた一文（あなたのストアがそうなら「ブラジル全土、R$ X以上で送料無料」）。
4. 配送または発送の期間。おおよそでもよい。
5. 交換と返品へのリンク。一行で。

テーマの商品ページに送料計算の欄がないなら、アプリかテーマの調整で入れられます。何かを入れる前に、メッセージを決めてください。送料の規則をはっきり書いた一文のほうが、計算機より解決することがあります。

ボタン

ボタンは一つだけ、ページの他のどこにも出ない独自の色にします。「購入」と「もっと見る」が同じ色だと、目はどこへ行けばよいか分かりません。モバイルでは、説明を読むためにスクロールしたとき、下部に価格とボタンの固定バーがあると、決定がページ上部へ戻ることに依存しません。

ボタンのあとがチェックアウトで、そこでの選択は別です。Shopifyのチェックアウトを外部のものに替えるべきかが疑問なら、ブラジルのShopifyチェックアウト：標準、Yampi、Cartpandaの記事が、その判断で何が重いかを示します。

あなたのストアの商品ページが、この疑問にこの順番で答えないなら、今のプラットフォーム、プラン、URLを送ってください。まだShopifyストアを作っていないなら、作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談

5. 信頼：交換、レビュー、店舗が誰か

同じ放棄の調査で、19%の人はクレジットカードをそのサイトに預ける信頼がなくてやめ、13%は返品ポリシーが悪いためにやめました。信頼もデザインです。知らない店に払う前に、客が探す細部に現れます。

見えるところにある交換条件

Baymardの2026年の評価では、大規模ストアの44%が、商品ページの本文に返品ポリシーを出さず、リンクもしていません。一行のリンクです。さらに良いのは、規則を一文にすることです（「X日以内の交換、最初の交換は無料」）。ストアが実際にしていることに合わせ、完全なポリシーへのリンクを添えます。

レビュー

客のレビューは社会的証明ですが、本物で、決定の近くにあるときにだけ機能します。デザインで気をつけることは二つです。

• 評価と件数をタイトルの近くに。レビューまで下がるリンクを付ける。
• 客の写真をたどれるようにする。あるときだけ。服やサイズのある商品では、買った人の写真が、スタジオ写真の答えない疑問に答えます。

否定的なレビューに礼儀正しく返すことも数に入ります。読む人は、向こう側に人がいると分かります。

店舗が実在するサイン

フッターのCNPJ、見えるサポートの窓口、実在の人がいる「私たちについて」のページ、独自ドメイン。Canvaで描いた汎用のセキュリティバッジは、見た目ほど重くありません。重いのは、すべての細部で店が手入れされていることです。傾いた写真、誤りの文章、ページとカートで違う価格は、どのバッジが上げるより速く信頼を落とします。

6. 説明と仕様：ざっと読める文章

写真と価格のあと、一部の人は下へ読んで進みます。全部は読みません。一つの具体的な疑問の答えを探します（素材、寸法、電圧、洗い方、箱に何が入るか）。説明のデザインは、その探索を速くする必要があります。

• 最初の段落は短く、主な利点を書く。 誰のための商品か、何を解決するかを、二文か三文で。
• 仕様はリストか表に。文章の途中に隠さない。寸法、重量、素材、組成は別の行に。
• タブとアコーディオンは慎重に。 整理はしますが、隠します。情報が高いかどうかを決めるなら（寸法、期間、交換）、閉じたままにすべきではありません。
• 箱の中身。部品や付属品がある商品のとき。

メタフィールド：すべての商品で同じ構造

Shopifyでは、メタフィールドにより、組成、寸法、手入れの指示のような商品固有の情報を、説明とは別の欄に置けます。動的ソースのあるテーマでは、その欄をエディタからテーマへつなげられます。デザインの実務では、仕様表がすべての商品で同じ場所、同じ見た目に出る、という意味です。登録のたびに誰かが説明を手で整形することに依存しません。

7. 読みやすさ、コントラスト、速度

スマホで誰も読めないきれいなページ、またはメイン写真が出るまで時間がかかるページは、客がボタンに着く前に売上を失います。

コントラストと文字の大きさ

W3Cのアクセシビリティ基準であるWCAGの1.4.3は、通常の文字に少なくとも4.5:1、大きい文字（18ポイントから、または太字の14ポイント）に3:1のコントラストを求めます。商品ページでいちばん失敗するのは、薄いグレーの価格、写真の上の文字、明るい色のボタンに白い文字、です。テーマに当てる前に、ブランドの色をコントラストのツールで試してください。ブランドの主色が白い文字で通らないなら、ボタンには暗い文字を使うか、その用途だけ色を暗くします。

メイン写真が速度の指標

メイン写真は速く出る必要があります。Googleは、ページの見える部分でもっとも大きい塊が現れるまでの時間でこれを測ります。良いとされる目標は、訪問の75パーセンタイルで2.5秒以下です。商品ページでは、その塊はほぼいつもメイン写真です。画像、動画のポスター、背景画像もこの計算に入ります。

デザイナーにとって、これは三つの決定になります。Shopifyが推奨する大きさの写真にし、「品質を確保するため」に巨大なファイルを送らない。ページ上部で勝手に再生する動画にしない。ギャラリーの上に、自動で回るバナーのカルーセルを置かない。

8. Shopifyのテーマで商品ページを組む

この記事のほとんどは、プログラムせずにテーマエディタで解決します。私が辿る道は次です。

1. エディタを開く前にページを描く。 紙かFigmaに、ブロックの順をスケッチします。ギャラリー、タイトル、レビュー、価格、バリエーション、送料と交換のある購入ブロック、説明、仕様、レビュー、関連商品。
2. 標準の商品テンプレートを、その順で組む。 テーマのセクションとブロックにその順を入れます。
3. 商品の種類が求めるとき、別のテンプレートを作る。 Shopifyは商品テンプレートを複数許せ、商品へ1件ずつ、または一括で割り当てられます。上限は合計1000テンプレートです。服には寸法表を目立たせます。アクセサリーには不要です。
4. カタログを上げる前に、写真と代替テキストを揃える。 あとから商品ごとに直すと、時間がずっとかかります。
5. 仕様をメタフィールドにつなぐ。 仕様表がすべての商品で同じ見た目になります。
6. 構造化データを確認する。 商品の構造化データがあると、Googleは検索に価格、在庫、レビュー、送料、返品ポリシーを出せます。Googleのリッチリザルトテストで、テーマがすでにそのマークアップを出しているか、価格と在庫が正しく出るかを確認します。

公開前の確認リスト

プラットフォームを決める前にレイアウトを考えているなら、NuvemshopとShopify：12か月の総コストの記事が役立ちます。

よくある質問

商品ページに写真は何枚必要か

決まった数はありません。大事なのは、各写真が一つの疑問に答えることです。きれいなメイン、実寸、体に着ける商品ならモデル、ディテール、意味があるなら説明の写真。単純な商品なら、よく選んだ少ない写真で足りることがあります。

Shopifyの商品写真の理想のサイズは

Shopifyのヘルプセンターは、2048 x 2048 pxの正方形を推奨しています。上限は5000 x 5000 px（25メガピクセル）、1ファイル20 MB未満です。すべての写真を同じ比率にすると、ギャラリーが安定します。

商品ページに送料を出すアプリは必要か

テーマと、ストアの送料の規則によります。規則が単純なら、ボタン近くの明確な一文で足りることがあります。地域で送料が大きく変わるなら、CEPの欄が助けになり、アプリかテーマの調整から入れられます。

バリエーションはプルダウンか、ボタンか

選択肢が画面に収まるなら、ボタンです。Baymardは、大規模ストアの57%がサイズにまだボタンを使っていないこと、プルダウンはどの選択肢があり、どれが在庫切れかを隠すことを示しています。

Shopifyの無料テーマで良い商品ページは作れるか

出発点としては使えます。ページを売らせるものの大部分は、内容と順番です。正しい写真、明確なバリエーション、見える費用、説明された交換。有料テーマが助けるのは、無料テーマにない機能がストアに必要なときで、内容の不足を解決するためではありません。

まとめ

売れる商品ページは、客の疑問に正しい順で答えます。商品がどんなものか、自分のバリエーションがあるか、合計でいくらかかるか、うまくいかなかったら何が起きるか。Shopifyでは、そのほとんどをテーマエディタで組めます。揃えた写真、バリエーションのボタン、完全な購入ブロック、メタフィールドの仕様表です。ストアがすでにShopifyで動いていて商品ページの見直しがほしい場合も、これからストアを開く場合も、商品のURLと売っているものを送ってください。先にShopifyストアの作成と調整の進め方を見てください。まだShopifyストアを作っていないなら、作る前にご相談ください。ストアは開発ストアとして立ち上げ、完成した状態で構築してから、あなたの名義に移管します。

プロジェクトを相談