商品詳細ページのレイアウトパターン：購買率を上げるUI設計

商品詳細ページはECアプリにおける最終的な購買決定の場所です。このページのUIがユーザーの購買意欲を高めるか、逆に迷わせるかが、コンバージョン率に直結します。本記事では、購買率を最大化する商品詳細ページのレイアウト設計を解説します。

商品詳細ページの基本レイアウト

ファーストビュー（スクロールなしで見える範囲）：

• 商品画像ギャラリー（画面の40〜50%を占める大きな画像）
• 商品名（1〜2行）
• ブランド名
• 価格・割引率
• 評価（スター＋件数）
• 購入ボタン（固定または画面下部）

ファーストビューで購買の判断材料（画像・名前・価格・評価）がすべて確認できることが理想です。

商品画像ギャラリーのUI

ギャラリー形式のパターン：

• スワイプ式（1枚表示＋ページインジケーター）：最も一般的
• サムネイルリスト（下部に小さなサムネイルを並べ、タップで切り替え）
• グリッドギャラリー（タップで全画面表示）

画像インタラクション：

• ピンチズームで拡大（衣類・精密機器など細部確認のニーズが高い商品に必須）
• 360°回転ビュー（家具・3C商品）
• AR試着（サングラス・コスメ）
• 動画（使用方法・素材感の確認）

価格と購入CTAのデザイン

価格表示のUI：

• 現在価格：大きく（24〜32sp）、目立つ色で
• 元値（取り消し線）と割引率：現在価格の横に小さく
• ポイント還元・クーポン適用後の最終価格も表示

購入CTAの配置：

「カートに追加」または「今すぐ購入」ボタンの配置は、スクロールしても常に見えるように「固定フッター」に配置する方法が最も効果的です。

固定フッターの構成：

• お気に入りアイコン（左端）
• カートに追加ボタン（中央〜大きめ）
• 今すぐ購入ボタン（右端、強調色）

バリエーション選択UIのデザイン

サイズ・カラー・素材などのバリエーション選択は、購買前の最重要操作の一つです。

カラー選択：

色の丸いスウォッチ（カラーチップ）で直感的に選択。選択済みは枠線で強調。

サイズ選択：

テキストボタン（S/M/L/XL）またはボタングリッドで選択。在庫なしは斜線でアウト表示。

サイズガイド：

「サイズガイド」リンクでモーダルを表示。採寸方法の図解と対応サイズ表を提供します。

商品説明・スペックのUI

スクロールエリアの商品説明部分は、情報量が多い場合にアコーディオン形式で折りたたみ展開できるUIが効果的です。

セクション例：

• 商品説明（展開可能、展開前は3〜4行表示）
• スペック・仕様一覧（テーブル形式）
• 素材・お手入れ方法
• 配送・返品ポリシー

関連商品・レコメンドのUI

商品詳細ページの下部に「他のお客様が見ている商品」「一緒に購入されている商品」を横スクロールで表示することで、クロスセル・アップセルが促進されます。

まとめ

商品詳細ページは「情報の充実度」と「購入への導線の明確さ」のバランスが重要です。大きな画像・明確な価格表示・固定CTAボタンを基本に、バリエーション選択・詳細情報・レコメンドを組み合わせることで、高コンバージョンの商品詳細ページを実現できます。