video-commerce-integration

動画コマース連携

概要

動画コマースでは、商品リンク、インタラクティブなホットスポット、ワンクリック決済を動画プレーヤーやライブ配信に埋め込むことで、受動的な動画コンテンツを直接購入できる体験へと変えます。サイト上のショッパブル動画は、静止画像のPDPと比べて商品ページのコンバージョン率を最大40％高めます。TikTokやInstagram LIVEによって広まったライブショッピングイベントは、静的なページでは再現できない緊急性と双方向性を生み出します。専用の動画コマースプラットフォーム（Tolstoy、Videowise、Firework）を使えば、ほとんどのストアでカスタム開発を行わずに、埋め込み、ホットスポットの作成、分析を利用できます。

このスキルを使う場面

• 既存のサイト内動画コンテンツに、商品を購入できるホットスポットを追加したい場合
• 商品のローンチやフラッシュセールに向けて、ライブショッピングイベントを計画する場合
• TikTok ShopやInstagram Shopping LIVEでは機能が制限されており、サイト内でネイティブな体験が必要な場合
• UGC動画コンテンツを商品ページで購入可能にしたい場合
• 動画コンテンツが購入コンバージョン率に与える貢献度を測定する場合

基本手順

ステップ1：適切な動画コマースプラットフォームを選ぶ

プラットフォーム	最適な用途	Shopify	WooCommerce	BigCommerce	価格
Tolstoy	ショッパブル動画のストーリーやフィード、Shopifyネイティブ	App Store	JS埋め込み経由	JS埋め込み経由	無料プラン、月額19ドル～
Videowise	LCP最適化を備えた高性能なショッパブル動画	App Store	—	—	月額99ドル～
Firework	エンタープライズ向けライブショッピング＋ショッパブルなショート動画	JS経由	JS経由	JS経由	カスタム料金
YouTube Shopping	YouTube動画を商品カタログにリンク	Google & YouTubeチャネル	Google Listings & Adsプラグイン経由	Channel Manager経由	無料
TikTok Shop	TikTok LIVEでのネイティブなショッピング＋動画への商品タグ付け	TikTokチャネル	TikTokプラグイン	TikTokチャネル経由	無料（手数料ベース）

おすすめ： ショッパブル動画のストーリーや商品ページへの埋め込みが目的なら、ShopifyではTolstoyを使いましょう。コード不要で、Shopifyカタログと自動的に連携します。商品レビューやチュートリアルのコンテンツを含むYouTubeチャネルをすでに運用している場合は、YouTube Shoppingを使いましょう。エンタープライズ向けのライブショッピング体験には、Fireworkを使いましょう。

ステップ2：ストアにショッパブル動画を設定する

---

TolstoyをShopifyで使う

1. Shopify App StoreからTolstoyをインストールします
2. Tolstoy → Videos → Uploadに移動し、商品動画をアップロードするか、TikTok／Instagramからインポートします
3. 動画エディターでTag Productsをクリックし、Shopifyカタログを検索して、動画内で商品が表示される箇所をクリックし、ホットスポットのタイムスタンプを設定します
4. Tolstoy → Widgets → Floating Buttonに移動し、商品ページにショッパブル動画のバブルを追加します（画面の隅に表示され、自動再生されます）
5. Tolstoy → Widgets → Video Carouselに移動し、商品説明の上にショッパブル動画の横スクロールを追加します
6. Shopifyのテーマエディターで、アプリセクション一覧から「Tolstoy」を検索し、ウィジェットを任意の位置にドラッグします
7. Tolstoy → Analyticsに移動し、再生率、カート追加率、各動画に起因する売上を確認します

---

YouTube ShoppingをShopifyで使う

1. Shopify Admin → Sales Channels → + → Google & YouTubeに移動します
2. Google Merchant CenterとYouTubeチャネルを接続します
3. YouTube Shoppingで、動画への商品タグ付けを有効にします
4. YouTube StudioでShoppingに移動し、Merchant Centerアカウントをリンクします
5. YouTube動画を編集してProductsをクリックし、カタログを検索して商品にタグを付けます
6. タグ付けした商品は、YouTube動画の下に商品棚として表示され、再生中はクリック可能なオーバーレイとして表示されます

---

WooCommerce

1. ショッパブル動画カルーセルの場合：WordPress プラグインディレクトリから VideoSuite または WP Video Popup をインストールし、ショートコードを使って商品ページに動画を埋め込みます
2. YouTube Shopping との連携の場合：Google Listings & Ads プラグイン（Google 公式プラグイン）をインストール → Google Merchant Center に接続 → YouTube Studio で商品タグ付けを有効にします（上記と同じ手順です）
3. ネイティブのライブショッピングの場合：TikTok for WooCommerce プラグインを使い、TikTok LIVE イベントを開催します（設定については @tiktok-shop-integration を参照してください）
4. カスタムコードを使わずに、充実したショッパブル動画体験を実現する場合：JavaScript の埋め込みコードを使って Firework を利用します — wp_enqueue_script() を使って、埋め込みスクリプトを WooCommerce テーマの functions.php に追加します

---

BigCommerce

1. YouTube Shopping の場合：BigCommerce Admin → Channel Manager → Google & Meta に移動して Google Merchant Center に接続し、YouTube Studio で YouTube Shopping を有効にします
2. ショッパブル動画ウィジェットの場合：BigCommerce → Storefront → Script Manager から Tolstoy または Firework の JavaScript スニペットを追加します（Scripts セクション → Create Script → All pages または特定のページ）
3. Tolstoy または Firework のダッシュボードから商品タグ付けを設定します — どちらのプラットフォームも、BigCommerce → Advanced Settings → API Accounts で生成した API 認証情報を使って BigCommerce のカタログに接続します

---

Custom / Headless

ヘッドレスストアでは、カスタムプレーヤーコンポーネントと商品ホットスポットのオーバーレイを使って、ショッパブル動画を構築します：

interface VideoHotspot {
  id:              string;
  productId:       string;
  timestamp:       number;     // seconds into video when hotspot appears
  displayDuration: number;     // how long it stays visible (seconds)
  position:        { x: number; y: number };  // % from top-left (0–100)
}

interface ShoppableVideo {
  id:           string;
  videoUrl:     string;        // HLS (.m3u8) or MP4 URL from CDN
  thumbnailUrl: string;
  hotspots:     VideoHotspot[];
  type:         'recorded' | 'live';
}

// React shoppable video player with time-based hotspot detection
import { useRef, useState, useEffect } from 'react';

function ShoppableVideoPlayer({ video }: { video: ShoppableVideo }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [activeHotspot, setActiveHotspot] = useState<VideoHotspot | null>(null);
  const [hotspotProduct, setHotspotProduct] = useState<Product | null>(null);

  useEffect(() => {
    const el = videoRef.current;
    if (!el) return;

    const onTimeUpdate = () => {
      const t = el.currentTime;
      const active = video.hotspots.find(h =>
        t >= h.timestamp && t <= h.timestamp + h.displayDuration
      ) ?? null;

      if (active?.id !== activeHotspot?.id) {
        setActiveHotspot(active);
        if (active) {
          fetch(`/api/products/${active.productId}`)
            .then(r => r.json())
            .then(setHotspotProduct);
        } else {
          setHotspotProduct(null);
        }
      }
    };

    el.addEventListener('timeupdate', onTimeUpdate);
    return () => el.removeEventListener('timeupdate', onTimeUpdate);
  }, [video.hotspots, activeHotspot]);

  return (
    <div style={{ position: 'relative' }}>
      <video ref={videoRef} src={video.videoUrl} poster={video.thumbnailUrl}
             controls playsInline style={{ width: '100%' }} />
      {activeHotspot && hotspotProduct && (
        <div style={{
          position: 'absolute',
          left: `${activeHotspot.position.x}%`,
          top: `${activeHotspot.position.y}%`,
          transform: 'translate(-50%, -100%)',
          background: 'white',
          padding: '12px',
          borderRadius: '8px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          zIndex: 10,
          minWidth: '200px',
        }}>
          <p style={{ fontWeight: 600 }}>{hotspotProduct.name}</p>
          <p style={{ color: '#666' }}>${hotspotProduct.price.toFixed(2)}</p>
          <button onClick={() => addToCart(hotspotProduct.id)}>Add to cart</button>
        </div>
      )}
    </div>
  );
}

LIVE ショッピングでは、Mux を使って HLS ストリームを作成し、WebSockets で現在注目の商品をすべての視聴者に配信します：

async function createLiveShoppingEvent(title: string, productIds: string[]) {
  const stream = await muxClient.Video.LiveStreams.create({
    playback_policy: 'public',
    new_asset_settings: { playback_policy: 'public' },
  });

  return db.liveShoppingEvents.create({
    title,
    streamKey:        stream.stream_key,   // configure in OBS/Restream
    playbackUrl:      `https://stream.mux.com/${stream.playback_ids[0].id}.m3u8`,
    featuredProducts: productIds,
    status:           'scheduled',
  });
}

// Broadcast the currently featured product to all live viewers
async function featureProductInLive(eventId: string, productId: string) {
  const product = await db.products.findById(productId);
  await wsServer.broadcast(`live:${eventId}`, {
    type:    'feature-product',
    product: { id: product.id, name: product.name, price: product.price,
               imageUrl: product.images[0]?.url },
  });
}

ステップ 3：ライブショッピングイベントを開催する（プラットフォームネイティブ）

すでに TikTok Shop または Instagram Shopping を利用しているストアでは、ネイティブの LIVE が最も手軽な方法です：

TikTok LIVE Shopping：

1. 紹介する予定のすべての商品が TikTok Seller Center で Active ステータスになっていることを確認します（審査には 24〜48 時間かかります）
2. TikTok アプリを開く → + をタップ → Go LIVE → ショッピングカートのアイコンをタップ → 紹介する商品を選択します
3. LIVE 中に商品をリアルタイムで固定したり、固定を解除したりできます — 視聴者は固定された商品カードをタップすると、アプリを離れずに購入できます
4. TikTok Shop の設定全般については @tiktok-shop-integration を参照してください

Instagram Live Shopping：

1. Facebook & Instagram チャネルを使って Meta の商品カタログを接続します（@social-commerce を参照してください）
2. Instagram を開く → LIVE を作成 → ショッピングバッグのアイコンをタップ → カタログから商品を追加します
3. LIVE 中に商品にタグを付けると、視聴者がタップできるリンクとして表示されます

Firework を使ったサイト内 LIVE：

1. Firework に登録し、ストアフロントに埋め込みスクリプトをインストールします
2. Firework → Live Events → Schedule に移動し、新しいライブイベントを作成します
3. Firework → Catalog → Import で商品カタログを接続します（Shopify、WooCommerce、カスタムフィードに対応しています）
4. イベント中、ホストは Firework プロデューサーダッシュボードから注目商品を操作できます — 視聴者には、サイト上に注目商品のカードがリアルタイムで表示されます

ステップ 4：動画コマースのパフォーマンスを測定する

指標	確認場所
動画再生率	Tolstoy Analytics / Firework Dashboard
ホットスポットのクリック率	Tolstoy Analytics → Interactions
動画経由のカート追加数	Tolstoy / Firework → Conversions
動画に起因する売上	Tolstoy → Revenue（UTM アトリビューションを使用）
LIVE ショッピングの注文数	TikTok Seller Center → Analytics / Firework → Live Reports

ベストプラクティス

• 商品が画面に表示されてから1～2秒後にホットスポットを表示します — 早すぎると不自然に感じられ、遅すぎると反応がよく、文脈に沿った表示になります
• ホットスポットカードはコンパクトに保ちます — 動画フレームの20％を超える面積をカードが占めると視聴時間が短くなります。商品名、価格、カートへの追加ボタンを配置した、最小限の200×120pxのカードを使用します
• 動画の読み込み時に、すべてのホットスポットの商品データを事前に読み込みます — 再生中のAPI遅延を防ぐため、動画プレーヤーの初期化時に、すべてのホットスポットの商品を1回のバッチリクエストで取得します
• すべての動画配信にHLSを使用します — アダプティブビットレートストリーミングにより、あらゆるネットワーク環境でスムーズに再生できます。MP4のソースファイルをアップロードし、MuxまたはCloudflare Streamを使ってHLSにトランスコードします
• LIVEイベントは決まった時間に開催します — 主要なタイムゾーンの火曜日と木曜日の午後7時に開催すると、リピーターを獲得できます。不定期のライブイベントは参加者が少なくなります
• ライブショッピングイベントは60分未満にします — 30～45分を過ぎると関心が急激に低下します。商品ラインナップとデモの順番を事前に計画します

よくある問題

問題	解決策
モバイルでホットスポットの位置がずれる	ピクセル座標ではなく、左上からの割合（％）による位置指定を使用します。割合指定なら動画要素に合わせて拡大縮小されます
ライブストリームの遅延により、商品の表示タイミングがずれる	OBSで低遅延のRTMP設定（5秒の遅延）を使用するか、WHIPを有効にして1秒未満の遅延にします
iOSのSafariで動画が読み込まれない	動画にH.264コーデックとAAC音声を使用していることを確認します。VP9はiOSで広くサポートされていません
Tolstoyの動画によってページの読み込みが遅くなる	Tolstoyはデフォルトで遅延読み込みを行います。パフォーマンス最適化を回避するカスタム埋め込みではなく、TolstoyのShopifyアプリブロックを使用していることを確認します
LIVEショッピングの商品が表示されない	イベント開始前に商品をActiveステータスにする必要があります。TikTokでは審査に24～48時間かかるため、前日までに商品を有効化します

関連スキル

• @tiktok-shop-integration
• @tiktok-ads-integration
• @ugc-campaign-management
• @product-launch-campaigns
• @social-commerce