product-page-design

商品ページのデザイン

概要

ズーム可能な画像ギャラリー、バリエーションセレクター（サイズ、色、素材）、数量コントロール、ソーシャルプルーフ要素を備えた、コンバージョン率の高い商品詳細ページ（PDP）を構築します。このスキルでは、レスポンシブなレイアウトパターン、プラットフォーム固有のカスタマイズ、コンバージョンを促進するコンポーネントの選択について説明します。ページ上部に表示されるヒーローセクションから、モバイルでの固定表示のカート追加バーまでを扱います。

このスキルを使用する場面

• 新しいオンラインストア向けに商品詳細ページをゼロから構築する場合
• 既存のPDPを最適化して、カート追加のコンバージョン率を高める場合
• 複数のオプションタイプ（サイズ＋色）に対応するバリエーションセレクターを実装する場合
• ズーム、サムネイル、スワイプに対応する画像ギャラリーを追加する場合
• レビュー、評価、在庫状況の表示などのソーシャルプルーフ要素を組み込む場合

主な手順

ステップ 1：マーチャントのプラットフォームを特定し、適切な方法を選ぶ

プラットフォーム	推奨される方法	理由
Shopify	OS2.0テーマ（Dawn、Sense、Craft）を使用し、Theme Editorでカスタマイズします。レビュー用アプリ（Judge.me、Loox）やバリエーション表示アプリで拡張します	Dawnの商品テンプレートには、ギャラリー、バリエーション、カート追加機能が標準で備わっています。Theme Editorを使えば、マーチャントはコードを書かずにレイアウトを設定できます
WooCommerce	WooCommerceの組み込み商品ページと、広くサポートされているテーマ（Astra、Kadence、Flatsome）、Storefront Customizerを使用します。YITH、WooCommerce Product Add-Ons、WP Reviewプラグインで拡張します	WooCommerceには、ギャラリー、バリエーション（属性＋バリエーション）、カートボタンが標準で備わっています。レイアウトの品質はテーマの選択によって決まります
BigCommerce	Theme EditorでCornerstoneテーマの商品ページをカスタマイズします。BigCommerceの組み込みレビューシステムを使用し、より高度なレイアウト制御にはShogunで拡張します	Cornerstoneには、PDPの主要なコンポーネントがすべて備わっています。BigCommerceのTheme Editorでは、コードを書かずにレイアウトを設定できます
カスタム／ヘッドレス	ギャラリーコンポーネント、バリエーションセレクター、固定表示のカート追加バー、SEO用の構造化データを備えた2列グリッドレイアウトを構築します	すべてのコンポーネントと操作を完全に制御できます。以下のパターンを参照してください

ステップ 2：PDPのレイアウトとコンポーネントを設定する

---

Shopify

レイアウトの設定（テーマエディター）：

1. オンラインストア → テーマ → カスタマイズに移動します
2. 商品 → デフォルトの商品テンプレートに移動します
3. 商品情報セクションを設定します：
   • 複数個セットの商品を販売する場合は、数量セレクターを有効にします
   • カートに追加の下に決済ボタン（今すぐ購入／Shop Pay エクスプレスチェックアウト）を有効にします
   • バリエーションセレクターのスタイルを設定します：選択肢が多い場合はドロップダウン、サイズ／カラーのスウォッチにはボタンを選択します
4. 商品メディアセクションで、ズーム画質を高めるためにメディアサイズを「大」または「特大」に設定します
5. テーマが対応している場合は、固定ヘッダーオプションを有効にします。スクロール中もカートに追加を表示できます

レビューの追加（最も重要なソーシャルプルーフ要素）：

• Shopify App StoreからJudge.me Product Reviews（無料プラン：レビュー数無制限、写真付きレビュー）をインストールします
• または、Loox（紹介プログラム付きの写真／動画レビュー、月額$9.99から）をインストールします
• どちらのアプリも、テーマコードを変更せずに、商品タイトルの下にレビューの星を、ページ下部にレビューセクション全体を追加します

見た目で選ぶ商品（カラー／サイズ）のバリエーションセレクターの改善：

• Variant Image Selectorをインストールするか、スウォッチ機能を標準搭載したテーマ（Prestige、Impulse、Flex）を使用します
• Dawnでは、テーマ設定 → バリエーションピルに移動し、ドロップダウンをクリック可能なボタンに置き換える設定を有効にします
• 画像付きカラーのスウォッチには、Variant Image機能を使って各カラーのバリエーションに個別の画像を割り当てます。ギャラリーは自動的に切り替わります

在庫の緊急性を示す表示：

• 「残りX点」のバッジを表示するには、Urgency BearまたはHurrifyアプリをインストールします。これらは実際のShopify在庫数を読み取り、偽の数字は表示しません
• または、商品 → [商品] → 在庫で在庫のしきい値を設定し、テーマに組み込まれた在庫僅少通知を有効にします

---

WooCommerce

レイアウトの設定：

1. WooCommerce → 設定 → 商品 → 表示に移動します
2. ズーム画質を高めるため、商品画像のサイズを「大」（最低でも600×600px）に設定します
3. WooCommerceの設定で商品ギャラリーのズームを有効にし、ホバー時のズームを有効化します

テーマレベルのレイアウト：

• Astra：外観 → カスタマイズ → WooCommerce → 商品ページに移動し、1列または2列のレイアウト、ギャラリーの位置、固定カートに追加を設定します
• Flatsome：組み込みのドラッグ＆ドロップ式UX Builderを使って、商品詳細ページのセクションを並べ替えます。Flatsomeには、固定カートに追加とスウォッチセレクターが標準搭載されています
• Kadence：Kadence → WooCommerce設定で、固定カートに追加を有効にし、ギャラリーのレイアウト（縦並びのサムネイル、横並びの帯状表示）を設定して、レビューの星の配置を調整します

レビューの追加：

• 写真付きレビュー、レビューリマインダー、「参考になった」投票機能を利用するには、WooCommerce Product Reviews Pro（WooCommerce.com、年額$79）をインストールします
• または、TrustpilotおよびGoogle Shoppingと連携するCustomer Reviews for WooCommerce（無料）を使用します

バリエーションセレクター（カラーのスウォッチ、サイズボタン）：

• Variation Swatches for WooCommerce（無料、WordPress.org）をインストールします。属性のドロップダウンを視覚的なスウォッチ（カラー、画像、またはボタン形式）に変換します
• 商品 → 属性 → [属性] → スウォッチタイプで、属性ごとにスウォッチの種類を設定します

---

BigCommerce

レイアウト設定（Cornerstone テーマ）：

1. ストアフロント → マイテーマ → カスタマイズに移動します
2. 商品ページで、次の項目を設定します。
   • 画像レイアウト：カルーセル、縦型サムネイルストリップ、または横型サムネイルストリップ
   • ギャラリーのズーム：ホバーズームを有効にします
   • 商品オプションの表示：オプションの種類ごとにドロップダウンまたはスウォッチボタンを選択します
3. テーマのバージョンが対応している場合は、追従型カートに追加を有効にします（Cornerstone 6+）

レビュー：

1. ストアフロント → 商品レビューに移動して、組み込みのレビューシステムを有効にします
2. レビューの最小文字数と、公開前にレビューの承認を必須にするかどうかを設定します
3. 高度なレビュー機能（写真付きレビュー、Q&A、レビューに関するメール）には、BigCommerce App Marketplace からPowerReviewsまたはYotpoをインストールします

ソーシャルプルーフアプリ：

• Judge.meとLooxは、Shopify に加えて BigCommerce でも利用できます

---

カスタム／ヘッドレス

レスポンシブな2カラムの商品詳細ページレイアウト：

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 768px) {
  .pdp-grid { grid-template-columns: 1fr; }
}

/* Gallery sticks while scrolling through product info on desktop */
.pdp-gallery { position: sticky; top: 2rem; align-self: start; }

在庫状況を追跡するバリエーションセレクター：

// VariantSelector.jsx — uses radio inputs for accessibility
function VariantSelector({ product, selectedOptions, onOptionChange }) {
  function isAvailable(optionName, value) {
    return product.variants.some(v =>
      v.options[optionName] === value &&
      v.inventory > 0 &&
      Object.entries(selectedOptions).every(([k, sv]) =>
        k === optionName || v.options[k] === sv
      )
    );
  }

  return (
    <div className="variant-selector">
      {product.optionNames.map(optionName => (
        <fieldset key={optionName}>
          <legend>{optionName}: <strong>{selectedOptions[optionName]}</strong></legend>
          {product.optionValues[optionName].map(value => (
            <label key={value} className={!isAvailable(optionName, value) ? 'unavailable' : ''}>
              <input type="radio" name={optionName} value={value}
                checked={selectedOptions[optionName] === value}
                disabled={!isAvailable(optionName, value)}
                onChange={() => onOptionChange(optionName, value)}
                className="sr-only" />
              <span className="option-btn">{value}</span>
              {!isAvailable(optionName, value) && <span className="sr-only"> (out of stock)</span>}
            </label>
          ))}
        </fieldset>
      ))}
    </div>
  );
}

追従型カートに追加バー（メインボタンが画面外にスクロールすると表示）：

function StickyBuyBar({ product, selectedVariant, onAddToCart }) {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = document.getElementById('main-add-to-cart');
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => setVisible(!e.isIntersecting));
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return visible ? (
    <div className="sticky-buy-bar" role="complementary" aria-label="Add to cart">
      <span>{product.name}</span>
      <span>${selectedVariant?.price ?? product.price}</span>
      <button onClick={onAddToCart} disabled={!selectedVariant || selectedVariant.inventory <= 0}>
        {selectedVariant?.inventory <= 0 ? 'Sold Out' : 'Add to Cart'}
      </button>
    </div>
  ) : null;
}

SEO 向けの商品構造化データ（JSON-LD）：

// Build server-side to avoid client-side injection
function buildProductSchema(product, reviews) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.images.map(i => i.src),
    description: product.description,
    sku: product.sku,
    brand: { '@type': 'Brand', name: product.brand },
    offers: {
      '@type': 'AggregateOffer',
      lowPrice: Math.min(...product.variants.map(v => v.price)).toFixed(2),
      priceCurrency: 'USD',
      availability: product.inStock ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
    },
    ...(reviews.totalCount > 0 && {
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: reviews.averageRating.toFixed(1),
        reviewCount: reviews.totalCount,
      },
    }),
  };
}

ステップ3：ソーシャルプルーフと信頼性を示す要素を追加する

プラットフォームを問わず、次の要素はカートへの追加率を直接向上させます。

1. タイトル付近の星評価 — レビューの平均評価と件数を商品名のすぐ下、価格の上に配置します
2. 在庫状況の表示 — 在庫が本当に少ない場合（10点未満）に限り「残り3点」と表示します。偽りの緊急性を演出しないでください
3. 信頼バッジ — カートに追加ボタンの近くに、安全なチェックアウト、無料返品、保証のアイコンを配置します。ほとんどのテーマには信頼バッジ用のセクションがあり、無料アプリを使うこともできます
4. 最近の購入通知 — Sales Pop（Shopify）やWooCommerce Sales Popupなどのアプリでは、「[都市名]にいる誰かが2時間前に購入しました」といった通知を表示できます。実際のデータがある場合のみ使用してください

ベストプラクティス

• ファーストビューのコンテンツを優先する — デスクトップでは、タイトル、価格、メイン画像、カートに追加ボタンをスクロールせずに表示します
• バリエーションセレクターにはセマンティック HTML を使う — クリック可能な<div>要素ではなく、<fieldset>/<legend>/<input type="radio">のパターンを使います。スクリーンリーダーはこれに沿って操作します
• ファーストビューより下の画像は遅延読み込みする — ヒーロー画像だけにloading="eager"を使い、サムネイルと2枚目以降の画像にはloading="lazy"を使います
• 比較価格を明確に表示する — 元の価格に取り消し線を付け、セール価格の横に表示します
• 在庫切れのバリエーションは非表示にせず、無効化する — ユーザーが商品のどのバリエーションがあるか理解できるよう、無効状態で表示します
• 緊急性の演出には実際の在庫データを使う — 「残り3点」と偽って表示しないでください。実際の在庫数を使うか、表示を削除します

よくある問題

問題	解決策
画像の読み込みによる CLS	画像に明示的なwidthとheightを設定するか、コンテナーにaspect-ratioを使います
バリエーションセレクターが URL を更新しない	選択したバリエーション ID で URL を更新するためにreplaceStateを使い、ページを共有可能にします
長いページ（モバイル）でカートに追加ボタンが隠れる	メインボタンが画面外にスクロールすると表示される、追従型のカートに追加バーを実装します
モバイルでギャラリー画像の読み込みが遅い	srcsetを使ってレスポンシブ画像を配信し、WebP／AVIF 形式を使います
レビューセクションによって初回読み込みが長くなる	レビューを遅延読み込みし、ユーザーがセクションの近くまでスクロールしたときに初期化します

関連スキル

• @image-zoom-360
• @responsive-storefront
• @accessibility-commerce
• @checkout-flow-optimization
• @search-autocomplete