responsive-storefront

レスポンシブなストアフロント

概要

モバイルファーストのレスポンシブデザインパターンをコマースストアフロントに適用し、コマースのトラフィックの大半が発生するスマートフォンで、快適にすばやく買い物できるようにします。主なパターンには、親指が届く範囲を考慮したレイアウト、スクロール時に表示される固定購入バー、タップ領域のサイズ設定、横スクロールせずに並び替わるレスポンシブな商品グリッドがあります。

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

• ストアフロントのトラフィックの50％超がモバイルデバイスから発生している場合（アナリティクスで確認してください）
• ストアフロントを一から構築し、CSS アーキテクチャを設計する場合
• 既存のストアフロントを監査し、モバイルでのユーザビリティの問題を確認する場合
• 商品詳細ページを実装し、固定購入ボタンのパターンが必要な場合
• モバイルのコンバージョン率を改善し、カート放棄を減らす場合

基本手順

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

プラットフォーム	推奨される方法	理由
Shopify	モバイルファーストの OS2.0 テーマ（Dawn、Sense、Craft）を使用します。いずれもデフォルトでレスポンシブに対応しており、Theme Editor でモバイルレイアウトを設定できます	Dawn は初期状態でモバイル PageSpeed スコアが90以上です。Theme Editor にはモバイル専用のレイアウト設定があります
WooCommerce	モバイルファーストの WooCommerce テーマ（Astra、Kadence、Flatsome）を使用します。いずれもレスポンシブなブレークポイントとモバイル用カートドロワーを標準で備えています	Astra と Kadence は Core Web Vitals で良好なスコアを示します。Flatsome はプラグインなしで固定ヘッダーとモバイルメニューを標準で利用できます
BigCommerce	設計段階からモバイルファーストの Cornerstone テーマを使用し、Theme Editor でブレークポイントを設定します	Cornerstone は BigCommerce のリファレンステーマであり、Google のモバイルユーザビリティテストに合格しています
カスタム／ヘッドレス	min-width メディアクエリを使用したモバイルファーストの CSS を記述し、レスポンシブな商品グリッド、固定購入バー、ボトムシート型カートドロワーを構築します	すべてのブレークポイントとタッチ操作を完全に制御できます。以下のパターンを参照してください

ステップ2：プラットフォームでモバイルレイアウトを設定する

---

Shopify

Theme Editor でのモバイル設定：

1. Online Store → Themes → Customize に移動します
2. 上部ツールバーの Mobile プレビューアイコンをクリックし、スマートフォンでの表示をプレビューします
3. Header settings を設定します：
   • Mobile menu type を設定します：Drawer（推奨）または Dropdown
   • スクロール中もナビゲーションを表示するため、Sticky header を有効にします
4. Collection page を設定します：
   • Products per row (mobile) を2（標準）または1（大きなカード）に設定します
   • モバイルでは Filters をサイドバーではなくドロワーとして有効にします
5. Product page を設定します：
   • 商品セクションの設定で Sticky add-to-cart を有効にします
   • モバイルでは商品情報の上にギャラリーを配置するよう、Media placement を設定します（これがデフォルトです）
6. Theme settings → Buttons で、タップ領域の要件を満たすため、ボタンの高さを少なくとも44pxに設定します

モバイルパフォーマンスのテスト：

1. Google PageSpeed Insights（pagespeed.web.dev）を開き、ストアの URL を入力します
2. Mobile タブを確認し、Performance スコア75以上を目指します
3. 最も一般的な修正方法は、Settings → Files で画像を圧縮し、大きな画像を WebP 形式の画像に置き換えることです

---

WooCommerce

Astra テーマのモバイル設定：

1. 外観 → カスタマイズ → ヘッダー → モバイルヘッダーに移動します
2. ハンバーガーメニューのスタイルと位置を設定します
3. 外観 → カスタマイズ → WooCommerce → ショップページで、**1行あたりの商品数（モバイル）**を 2 に設定します
4. 外観 → カスタマイズ → WooCommerce → 商品ページで、モバイル用の固定「カートに追加」バーを有効にします
5. 外観 → カスタマイズ → 全般 → コンテナーで、モバイル時のコンテナー幅が 100% になっていることを確認します（横方向のパディングに関する問題がないこと）

Kadence テーマのモバイル設定：

1. 外観 → カスタマイズ → WooCommerce → 商品アーカイブに移動します
2. モバイルの列数を 2 に設定し、カード間隔を調整します
3. 外観 → カスタマイズ → WooCommerce → 商品ページで、**固定「カートに追加」**を有効にします
4. Kadence → ヘッダービルダーで、モバイルヘッダーのレイアウトを設定します。Kadence では、要素（ロゴ、メニュー、カート）をドラッグして、モバイルヘッダーの別々の行に配置できます

Flatsome テーマ：

1. テーマオプション → WooCommerce → 商品で、モバイルの商品グリッドの列数を設定します
2. テーマオプション → WooCommerce → 商品で、**固定「カートに追加」**を有効にします
3. Flatsome の UX Builder にはモバイルプレビューモードがあります。これを使って、各ページのモバイルレイアウトを確認します

---

BigCommerce

Cornerstone のモバイル設定：

1. ストアフロント → マイテーマ → カスタマイズに移動します
2. ツールバーのデバイスアイコンを使って、モバイルでプレビューします
3. 全般 → レイアウトで、モバイルのブレークポイントとコンテナのパディングを設定します
4. 商品ページ → 画像で、モバイルのギャラリーレイアウトを縦積み（商品情報の上に画像を表示）に設定します
5. カートのモバイルオーバーレイを有効にします。これにより、モバイルでカートがサイドバーから下部シートに変わります
6. カテゴリーページ → 商品カードで、モバイルの列数を 2 に設定します

---

カスタム／ヘッドレス

モバイルファースト CSS の基礎：

/* tokens.css */
:root {
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --touch-target: 44px;     /* WCAG 2.5.5 minimum tap target */
  --content-max-width: 1200px;
}

/* Breakpoints: sm=640px, md=768px, lg=1024px */
/* Write base styles for mobile, add min-width queries for larger screens */

レスポンシブな商品グリッド（利用可能な幅に基づいて列数を自動調整）：

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--space-md);
  padding: var(--space-md);
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); }
}

/* Minimum 44px touch target on product card CTA */
.product-card__cta { min-height: var(--touch-target); display: flex; align-items: center; }

固定購入バー — メインの「カートに追加」ボタンがスクロールで表示範囲外になると表示されます：

export function StickyBuyBar({ product, onAddToCart }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const primaryBtn = document.getElementById('main-add-to-cart');
    if (!primaryBtn) return;
    const obs = new IntersectionObserver(([e]) => setVisible(!e.isIntersecting));
    obs.observe(primaryBtn);
    return () => obs.disconnect();
  }, []);

  return (
    <div className={`sticky-buy-bar ${visible ? 'visible' : ''}`} aria-hidden={!visible}>
      <img src={product.image} alt="" width="40" height="40" />
      <span>{product.name}</span>
      <span>${product.price}</span>
      <button onClick={onAddToCart} tabIndex={visible ? 0 : -1}>Add to Cart</button>
    </div>
  );
}

.sticky-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e2e8f0;
  transform: translateY(100%); transition: transform 0.2s ease; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
  display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem;
}
.sticky-buy-bar.visible { transform: translateY(0); }

モバイルカートドロワー（下部シートのパターン）：

.cart-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(400px, 100vw); background: #fff;
  transform: translateX(100%); transition: transform 0.3s ease;
  overflow-y: auto; overscroll-behavior: contain;
}

@media (max-width: 640px) {
  .cart-drawer {
    top: auto; width: 100vw; height: 85vh;
    transform: translateY(100%); border-radius: 16px 16px 0 0;
  }
  .cart-drawer.open { transform: translateY(0); }
}

.cart-drawer.open { transform: translateX(0); }

/* Checkout button stays within thumb reach */
.cart-checkout-btn {
  position: sticky; bottom: 0; background: #fff;
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
}

すべてのタッチターゲットを 44px に設定：

button, a, input[type="checkbox"], input[type="radio"], select, [role="button"] {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}

ベストプラクティス

• モバイルファーストの CSS を記述する — 最小画面向けのスタイルから始め、min-width メディアクエリを追加して拡大します。逆の方法では詳細度の競合が発生します
• env(safe-area-inset-bottom)を使用する — iPhone のノッチやホームインジケーターへの対応に必要です。これがないと、画面下部に固定されたボタンが隠れます
• 実機でテストする — ブラウザーの DevTools エミュレーションでは、iOS Safari の動的なビューポートの高さや、タッチスクロールの慣性を再現できません
• スクロールコンテナーでoverscroll-behavior: containを使用する — カートドロワー内でユーザーがスワイプしたときに、背後のページまでスクロールするのを防ぎます
• 全画面要素では100vhの代わりに100dvhを使用する — iOS Safari の動的ツールバーにより、100vhにはツールバーの高さが含まれ、オーバーフローが発生します
• <body>のフォントサイズを最低 16px に設定する — 入力欄にフォーカスしたときに、iOS Safari が自動ズームするのを防ぎます

よくある問題

問題	解決策
固定購入バーがフッターやチェックアウトボタンを隠す	IntersectionObserver を使って、フッターまたはチェックアウトボタンがビューポートに入ったときにバーを非表示にします
ツールバーの表示時に iOS Safari のレイアウトが跳ねる	100vhの代わりに100dvh（動的ビューポートの高さ）を使用します。@supports (height: 100dvh)でフォールバックを指定します
ピンチズームしないと文字が小さすぎて読めない	body にfont-size: 1rem（16px）を設定します。モバイルではこれより小さく設定しないでください
カートドロワー内でページがスクロールする	ドロワーを開いている間は<body>にoverflow: hiddenを適用し、閉じたときに元に戻します
モバイルで商品画像の読み込みが遅い	レイアウトのずれを防ぐためにwidth属性とheight属性を指定し、画面下部にある画像にはloading="lazy"を使用します

関連スキル

• @mega-menu-builder
• @quick-view-modal
• @accessibility-commerce
• @storefront-theming