quick-view-modal

クイックビューモーダル

概要

商品一覧ページから移動せずに、画像、バリエーション、説明、価格などの商品情報を確認し、カートに商品を追加できる、商品クイックビューのオーバーレイを実装します。クイックビューを導入すると、複数の商品を閲覧する買い物客の手間を軽減できます。バリエーション構成がシンプルな商品（バリエーション軸が1～2個）に最適です。

このスキルを使う場面

• コンバージョンデータから、買い物客が商品一覧ページを頻繁に離れる一方、商品詳細ページから離脱していることがわかる場合
• クイック選択に適した、シンプルなバリエーション構成（バリエーション軸が1～2個）の商品を扱う場合
• コレクションや検索結果の商品カードに「クイック追加」ボタンを実装する場合
• サイトの商品詳細ページが重い（画像が多い、レビューセクションがあるなど）ため、より軽いプレビューで手間を軽減できる場合

基本手順

ステップ 1：マーチャントのプラットフォームを確認して、適切な方法を選びます

プラットフォーム	推奨方法	理由
Shopify	テーマ（Dawn、Sense、Craft）でクイックビューを有効にするか、Quick View – Instant Preview アプリをインストールします	Dawn の組み込みクイック追加ボタンを使うと、コレクションページから商品を直接カートに追加できます。Quick View アプリを使うと、バリエーション選択機能付きの商品プレビューを表示できます
WooCommerce	YITH WooCommerce Quick View（無料）または WooCommerce Quick View Pro をインストールします	YITH Quick View は最も広く使われているオプションです。ホバー時に「Quick View」ボタンを追加し、ギャラリー、バリエーション、「カートに追加」ボタンを含むモーダルを開きます。カスタムコードは不要です
BigCommerce	Storefront → My Themes → Customize → Product Cards で Quick View を有効にします（Cornerstone テーマ）	Cornerstone には組み込みのクイックビューポップアップがあり、コーディング不要でテーマエディターから切り替えられます
カスタム／ヘッドレス	ネイティブの <dialog> 要素を使い、商品の遅延取得、バリエーション選択、フォーカス管理を備えたモーダルを構築します	<dialog> にはフォーカストラップと Escape キーで閉じる機能が組み込まれています。遅延取得により、初期ページの容量を抑えられます

ステップ 2：クイックビューを有効にして設定します

---

Shopify

組み込みのクイック追加（Dawn、Sense、Craft）：

Dawn のコレクションページには、モーダルを開かずに商品を直接カートに追加する「Quick Add」ボタンがデフォルトで含まれています。有効化または設定するには、以下の手順を実行します。

1. Online Store → Themes → Customize に移動します
2. コレクションページのテンプレートを開きます
3. Product card セクションで Quick add button を有効にします
4. ボタンのスタイルを設定します。Standard（「Quick Add」と表示）または Icon（＋アイコン）を選択します

注：Dawn のクイック追加は、バリエーションがない商品、またはバリエーション軸が1つの商品でのみ機能します（Color + Size など、複数のオプションタイプがある商品では、代わりに商品ページが開きます）。

クイックビューのフルモーダル（Quick View – Instant Preview アプリ）：

1. Shopify App Store からインストールします（無料プランあり）
2. このアプリにより、すべてのコレクションページの商品カードにホバー時の「Quick View」ボタンが追加されます
3. アプリの設定で、モーダルに表示する商品セクション（画像、説明、レビュー、サイズガイド）を設定します
4. 買い物客はコレクションページを離れることなく、すべてのバリエーションオプションを選択してカートに追加できます
5. テーマコードの編集は不要です。アプリブロック経由で挿入されます

---

WooCommerce

YITH WooCommerce Quick View（無料）：

1. WordPress.org からインストールして有効化します
2. YITH → Quick View → General Settings に移動します
3. Trigger を設定します。「Quick View button on hover」（推奨）または商品画像のクリックを選択します
4. Modal content を設定します。表示するセクションとして、Gallery、Price、Short Description、Variants（Add to Cart）、Reviews summary を選択します
5. Modal width と、モーダル内に「View full product」リンクを表示するかどうかを設定します（推奨）
6. Style でボタンのテキスト、色、位置を調整して、テーマに合わせます

このプラグインは、ショップ、アーカイブ、検索結果ページの .product 要素に「Quick View」ボタンを自動的に追加します。

---

BigCommerce

組み込みのクイックビュー（Cornerstone テーマ）：

1. Storefront → My Themes → Customize に移動します
2. Product Cards セクションを見つけます（テーマのバージョンに応じて、Global または Category Page の設定内にあります）
3. Enable Quick View をオンにします
4. 表示する要素を設定します：ギャラリー、オプション／バリエーション、「カートに追加」ボタン、価格
5. BigCommerce のクイックビューには、商品のすべてのバリエーションオプションと画像が表示されます

Cornerstone 以外のテーマの場合は、テーマのドキュメントを確認してください。クイックビューへの対応状況はテーマによって異なります。含まれていない場合は、BigCommerce App Marketplace から Quick View アプリをインストールしてください。

---

カスタム／ヘッドレス

商品カードのクイックビューボタン：

// ProductCard.jsx
export function ProductCard({ product, onQuickView }) {
  return (
    <article className="product-card">
      <div className="product-card__image-wrapper">
        <a href={product.url}>
          <img src={product.image} alt={product.name} loading="lazy" />
        </a>
        <button className="quick-view-btn"
          onClick={() => onQuickView(product.id)}
          aria-label={`Quick view ${product.name}`}>
          Quick View
        </button>
      </div>
      <a href={product.url} className="product-card__name">{product.name}</a>
      <p className="product-card__price">${product.price}</p>
    </article>
  );
}

/* Always visible on touch; appears on hover for mouse users */
.quick-view-btn { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity 0.15s; }
.product-card:hover .quick-view-btn, .product-card:focus-within .quick-view-btn { opacity: 1; }
@media (hover: none) { .quick-view-btn { opacity: 1; } }

ネイティブの <dialog> を使ったモーダル（フォーカスのトラップと Escape キーによる閉じる動作を内蔵）：

// QuickViewModal.jsx
import { useEffect, useRef } from 'react';

export function QuickViewModal({ isOpen, product, loading, onClose, onAddToCart }) {
  const dialogRef = useRef(null);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (isOpen) dialog.showModal();
    else dialog.close();
  }, [isOpen]);

  return (
    <dialog ref={dialogRef} className="quick-view-dialog"
      onClose={onClose}
      onClick={(e) => { if (e.target === dialogRef.current) onClose(); }}
      aria-label={product ? `Quick view: ${product.name}` : 'Quick view'}>
      <button className="close-btn" onClick={onClose} aria-label="Close quick view">&times;</button>

      {loading && (
        <div aria-live="polite" aria-label="Loading product details">
          {/* Skeleton loaders */}
          <div className="skeleton skeleton--image" />
          <div className="skeleton skeleton--title" />
        </div>
      )}

      {!loading && product && (
        <QuickViewBody product={product} onAddToCart={onAddToCart} onClose={onClose} />
      )}
    </dialog>
  );
}

バリエーション選択機能付きのクイックビューの本文：

function QuickViewBody({ product, onAddToCart, onClose }) {
  const [selectedVariant, setSelectedVariant] = useState(product.variants[0] ?? null);

  return (
    <div className="quick-view-body">
      <img src={selectedVariant?.image ?? product.images[0]} alt={product.name} />
      <div className="quick-view-details">
        <h2>{product.name}</h2>
        <p>${selectedVariant?.price ?? product.price}</p>

        {product.options.map(option => (
          <fieldset key={option.name}>
            <legend>{option.name}</legend>
            {option.values.map(value => {
              const variant = product.variants.find(v => v.options[option.name] === value);
              return (
                <label key={value}>
                  <input type="radio" name={option.name} value={value}
                    checked={selectedVariant?.options[option.name] === value}
                    disabled={!variant || variant.inventory === 0}
                    onChange={() => setSelectedVariant(variant)} />
                  {value}{variant?.inventory === 0 ? ' (sold out)' : ''}
                </label>
              );
            })}
          </fieldset>
        ))}

        <button className="btn-primary"
          disabled={!selectedVariant || selectedVariant.inventory === 0}
          onClick={() => onAddToCart({ variantId: selectedVariant.id, quantity: 1 }).then(onClose)}>
          Add to Cart
        </button>
        <a href={product.url}>View Full Details</a>
      </div>
    </div>
  );
}

モーダルが閉じたときにトリガーボタンへフォーカスを戻す：

const triggerRef = useRef(null);

function handleOpenQuickView(productId, triggerElement) {
  triggerRef.current = triggerElement; // store the button that was clicked
  openQuickView(productId);
}

function handleCloseQuickView() {
  closeQuickView();
  requestAnimationFrame(() => triggerRef.current?.focus());
}

ベストプラクティス

• 必ず「詳細をすべて表示」リンクを用意します — クイックビューはショートカットであり、代替ではありません。画像やレビューが多い複雑な商品には、完全な PDP が必要です
• 開いたときに商品データを遅延取得します — ページのデータ量を抑えるため、商品データ全体をカードの HTML に埋め込まず、必要になったときに取得します
• 読み込み中のスケルトンを表示します — データの取得には 100～300 ms かかります。スケルトンを表示すると、レイアウトシフトが発生したように感じるのを防げます
• 背景のクリックで閉じるようにします — モーダルのコンテンツ領域の外側をクリックすると、閉じるようにします
• 開いている間は body のスクロールを防ぎます — モバイルでは、ダイアログに overscroll-behavior: contain を設定すると、背後のページがスクロールするのを防げます
• シンプルな商品にのみクイックビューを使用します — バリエーション軸が 3 つ以上ある商品、サイズガイドや詳細な仕様表が必要な商品は、完全な PDP に移動させます

よくある落とし穴

問題	解決策
モーダルを閉じるとフォーカスが失われる	開く前にトリガー要素への参照を保存し、閉じた後に requestAnimationFrame 内で .focus() を呼び出します
タッチデバイスでクイックビューボタンが表示されない	@media (hover: none) を使って、タッチ画面では常にボタンを表示します。ホバーのみに依存しないでください
開いているモーダルの背後で body がスクロールする	モーダルが開いている間は body に overflow: hidden を設定し、閉じたときに元に戻します
画像が変わるとバリエーションの選択がリセットされる	selectedVariant は配列内の位置ではなく、バリエーション ID をキーとして状態に保持します
完全な PDP が必要な商品でもクイックビューが開く	オプションが 3 つ以上ある商品や、サイズガイドが必要な商品を検出し、代わりに PDP へ直接移動します

関連スキル

• @product-page-design
• @accessibility-commerce
• @responsive-storefront
• @faceted-navigation