user-generated-content

ユーザー生成コンテンツ

概要

ユーザー生成コンテンツ（UGC）—顧客の写真、Q&A、最近の購入を示す情報—は、実際の顧客が商品を使い、気に入っていることを新規訪問者に伝える信頼できる証拠となり、商品ページのコンバージョン率を高めます。Judge.me や Yotpo などのレビューアプリには、UGC 写真の収集、商品に関する Q&A、ソーシャルプルーフのウィジェットが標準で含まれています。Okendo、Loox、Bazaarvoice などの専用 UGC プラットフォームは、Instagram や TikTok からの高度なコンテンツ収集機能を提供します。カスタム UGC パイプラインを構築するのは、モデレーションのロジック、権利管理、またはデータベースの要件が、これらのツールで対応できる範囲を超える場合に限ってください。

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

• 商品ページに、スタジオ撮影の写真以外に、顧客の実際の使用シーンを伝える写真が必要な場合
• 顧客同士が質問に回答できる Q&A セクションを構築する場合
• 「過去 24 時間に X 人がこの商品を購入しました」といった、緊急性を促す情報を表示する場合
• 商品ページのギャラリー用に、自社のブランドハッシュタグが付いた Instagram の UGC を収集する場合
• 現在の規模では、サードパーティの UGC プラットフォームの費用が高すぎる場合

主な手順

ステップ 1：プラットフォームを特定し、適切な UGC ツールを選択する

プラットフォーム	推奨ツール	理由
Shopify	Loox	写真レビューに特化しており、購入後に写真の投稿を依頼するメールを送信し、PDP にビジュアルギャラリーを表示します
Shopify	Okendo	写真・動画レビュー、Q&A、属性別評価（サイズ感、品質）、Instagram UGC の収集に対応した包括的な UGC スイートです
Shopify	Judge.me	無料プランに写真レビューが含まれています。Loox や Okendo に移行する前の、利用開始に適した選択肢です
WooCommerce	WooCommerce の標準レビュー機能 + WP Product Review	テキストレビューと星評価に対応します。写真の投稿にはメディアアップロード用プラグインを追加してください
WooCommerce	Yotpo for WooCommerce	写真レビュー、Q&A、ソーシャルプルーフを含む包括的な UGC に対応します
BigCommerce	Okendo または Yotpo	どちらも BigCommerce App Marketplace で利用できます
カスタム／ヘッドレス	S3 + モデレーションによる UGC API の構築	UGC データを自社のデータベースに保存する必要がある場合や、カスタムのレコメンデーションエンジンと連携する必要がある場合に必要です

---

ステップ 2：プラットフォーム別の設定

---

Shopify

オプション A：Loox（写真を重視する UGC におすすめ）

1. Shopify App Store から Loox をインストールします
2. 購入後の写真投稿依頼を設定します：
   • Loox → Emails → Photo Request Email に移動します
   • メールの送信を 注文の発送完了から 7 日後 に設定します
   • 写真付きレビューの投稿特典として、割引（例：次回注文が 10% オフ）を提供します。Loox はこの特典を依頼メールに表示します
3. 写真ギャラリーのウィジェットを設定します：
   • Loox → Widgets → Product Widget に移動します
   • 商品テンプレートで写真カルーセルを有効にします
   • 表示に必要な最低写真数を設定します（商品ごとに写真が 3 枚以上集まった時点でギャラリーを表示します）
4. モデレーション：
   • Loox → Reviews → Pending に移動し、投稿された写真を確認して承認します
   • 購入確認済みの写真付きレビューでは Auto-publish を有効にします

オプション B：Okendo（Q&A と Instagram を含む包括的な UGC）

1. App Store から Okendo をインストールします
2. レビューフォームで、サイズ感、品質、価値などのカスタム属性を収集するよう設定します。これらはレビューウィジェットの絞り込み検索オプションとして表示されます
3. Okendo → Features → Q&A で Q&A を設定します：
   • レビューの下に顧客同士の Q&A を表示するよう有効にします
   • 新しい質問が投稿されたときにチームへメール通知が届くよう設定します
   • スタッフが回答したときに、質問の投稿者へ自動でメール通知を送るよう設定します
4. Okendo → Channels → Instagram で Instagram を連携します：
   • ブランドの Instagram アカウントを連携します
   • Okendo はハッシュタグが付いた投稿をインポートし、投稿者に使用許可をリクエストできます
   • 権利が許諾された後にのみ、商品ページに公開してください

ソーシャルプルーフ通知ウィジェット（Loox と Okendo）： どちらのアプリにも「最近の購入」ポップアップウィジェットが含まれています。Loox → Widgets → Social Proof または Okendo → Widgets → Purchase Activity で有効にします。チェックアウトページではなく、商品ページとコレクションページに表示されるよう設定してください。

---

WooCommerce

WooCommerce 向け Yotpo：

1. WordPress プラグインディレクトリから Yotpo Reviews をインストールします
2. Yotpo は写真付きレビューのリクエスト、モデレーション、ギャラリー表示を処理します
3. 購入後に写真付きレビューをリクエストするタイミングを Yotpo → Settings → Review Requests で設定します
4. Yotpo → Features → Q&A で Q&A を有効にします

WooCommerce の標準レビュー＋写真アップロード：

1. WooCommerce → Settings → Products → Reviews で商品レビューを有効にします
2. WooCommerce Product Reviews Pro 拡張機能をインストールして、以下を追加します：
   • レビューフォームの写真アップロード欄
   • 購入確認済みユーザーによる投稿の制限
   • 個別レビューへの賛成票／参考になった票
3. Q&A には別途、WooThemes の WooCommerce Product Q&A または互換性のあるプラグインをインストールします

Instagram の UGC の収集： Tagembed または Smash Balloon Instagram Feed（WordPress プラグイン）を使用して、タグ付けされた Instagram の投稿を商品ページに埋め込みます。ハッシュタグまたはメンションで投稿を取得し、各商品に表示する投稿を選定できます。

---

BigCommerce

BigCommerce 向け Okendo：

1. Apps → Search "Okendo" に移動してインストールします
2. 設定は Shopify 版と同じです。写真付きレビュー、Q&A、Instagram のコンテンツ収集が同じように機能します
3. Okendo は BigCommerce の注文情報に自動的に接続し、購入確認済みユーザーによる投稿を制限します

BigCommerce 向け Yotpo：

1. BigCommerce App Marketplace からインストールします
2. 写真付きレビュー、Q&A、SMS によるレビューリクエストが含まれます
3. Yotpo のビジュアル UGC タブは、Instagram と TikTok でタグ付けされたコンテンツを商品ギャラリーで利用できるように取り込みます

---

カスタム／ヘッドレス

独自のデータベースに UGC を保存する必要があるヘッドレスストアフロントの場合：

// lib/ugc.ts

// Generate a presigned S3 URL for direct browser-to-S3 photo uploads
// Never route file uploads through your API server
export async function getPhotoUploadUrl(req: Request, res: Response) {
  const { productId, fileName, contentType } = req.body;
  if (!['image/jpeg', 'image/png', 'image/webp'].includes(contentType)) {
    return res.status(400).json({ error: 'Only JPEG, PNG, and WebP accepted' });
  }

  const key = `ugc/pending/${productId}/${req.session.customerId}/${Date.now()}-${fileName}`;
  const command = new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: key, ContentType: contentType });
  const uploadUrl = await getSignedUrl(s3, command, { expiresIn: 300 });

  await db.ugcPhotos.create({ data: { productId, customerId: req.session.customerId, s3Key: key, status: 'pending_upload' } });
  res.json({ uploadUrl, key });
}

// S3 ObjectCreated trigger: run content moderation then resize
export async function processUGCPhoto(s3Key: string) {
  const ugcRecord = await db.ugcPhotos.findFirst({ where: { s3Key } });
  if (!ugcRecord) return;

  // AWS Rekognition content moderation — auto-reject NSFW content
  const moderationResult = await rekognition.detectModerationLabels({
    Image: { S3Object: { Bucket: process.env.S3_BUCKET!, Name: s3Key } },
    MinConfidence: 75,
  });

  if ((moderationResult.ModerationLabels ?? []).length > 0) {
    await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: { status: 'rejected' } });
    return;
  }

  // Resize to thumbnail (200px), medium (600px), full (1200px) WebP variants
  const original = await s3.getObject({ Bucket: process.env.S3_BUCKET!, Key: s3Key });
  const buffer = Buffer.from(await original.Body!.transformToByteArray());

  for (const { suffix, width } of [{ suffix: 'thumbnail', width: 200 }, { suffix: 'medium', width: 600 }, { suffix: 'full', width: 1200 }]) {
    const resized = await sharp(buffer).resize(width).webp({ quality: 80 }).toBuffer();
    await s3.putObject({
      Bucket: process.env.S3_BUCKET!, Body: resized, ContentType: 'image/webp',
      Key: `ugc/approved/${ugcRecord.productId}/${ugcRecord.id}/${suffix}.webp`,
    });
  }

  // Auto-approve verified purchase photos; queue others for manual review
  const isVerifiedPurchase = await db.orderItems.findFirst({ where: { customerId: ugcRecord.customerId, productId: ugcRecord.productId } });
  await db.ugcPhotos.update({ where: { id: ugcRecord.id }, data: {
    status: isVerifiedPurchase ? 'approved' : 'pending_review',
    verifiedPurchase: !!isVerifiedPurchase,
  }});
}

// Product Q&A — submit and answer questions
export async function submitQuestion(req: Request, res: Response) {
  const { productId, question, authorName } = req.body;
  const q = await db.productQuestions.create({ data: { productId, question, authorName, authorEmail: req.session.customerEmail, status: 'pending' } });
  await notifyProductTeam({ questionId: q.id, productId, question });
  res.json({ questionId: q.id });
}

// Social proof feed: recent purchases cached for 5 minutes
export async function buildRecentPurchaseFeed() {
  const recentOrders = await db.orders.findMany({
    where: { createdAt: { gte: new Date(Date.now() - 86400000) }, status: 'completed' },
    include: { lineItems: { include: { product: true } }, customer: true },
    orderBy: { createdAt: 'desc' },
    take: 100,
  });

  const feed = recentOrders.flatMap(order =>
    order.lineItems.slice(0, 1).map(item => ({
      productId: item.productId,
      productName: item.product.name,
      buyerFirstName: order.customer.firstName,
      buyerLocation: order.customer.city ?? 'somewhere',
      purchasedAt: order.createdAt.toISOString(),
    }))
  );

  await redis.setex('social_proof_feed', 300, JSON.stringify(feed));
}

---

ステップ 3：Instagram の UGC の権利管理を設定する

ストアや有料広告で顧客のソーシャルメディアコンテンツを表示する前に、次の対応を行います。

1. 明示的に使用許諾を求める — Okendo と Yotpo には、Instagram ユーザーに DM で許可を求める、権利確認の組み込みフローがあります
2. 書面による同意なしに、Instagram のコンテンツを有料広告で使用しないでください — 法的責任が生じる可能性があります
3. 写真ごとに権利のステータスを記録する — 権利が確認済みのコンテンツのみを表示します。Okendo と Yotpo はこのステータスを自動的に記録します
4. （専用アプリを使わずに）オーガニックにコンテンツを収集する場合は、投稿にコメントするか、権利確認を求める DM を送り、回答の記録を保管します

---

ステップ 4：Q&A のモデレーションを設定する

未回答の質問があると、Q&A がない場合よりも信頼を損ないます。

Okendo と Yotpo の場合：

• 未回答の質問をすべて記載した日次メールのダイジェストをチームに送信するよう設定します
• スタッフが回答するまでの SLA を 48 時間に設定します。回答のないまま 7 日以上経過した質問はエスカレーションします

ベストプラクティス： 顧客同士の回答（ほかの購入者による回答）を有効にします。スタッフの負担が軽減され、顧客はサポート担当者よりも実体験に基づいた回答を提供できることがよくあります。

---

ステップ 5：UGC の効果を測定する

指標	ベンチマーク	確認場所
UGC 写真の投稿率	配送済み注文の 2～5%	Loox ／ Okendo のメール分析
顧客の写真が 3 枚以上ある商品	上位 50 商品の割合を追跡	アプリのダッシュボード
Q&A の回答率	7 日以内に 90% 以上	Okendo ／ Yotpo の Q&A レポート
ソーシャルプルーフウィジェットのクリック率	商品ページ訪問者の 1～3%	Loox／Okendo のウィジェット分析

ベストプラクティス

• 独自に構築する前に、Loox または Okendo を利用しましょう — S3 ストレージ、コンテンツモデレーション、権利管理、Instagram からのインポートに対応しています。これらを一から構築すると、2〜4 週間かかります
• 写真の投稿に少額のインセンティブを提供しましょう — Loox の「写真投稿で割引」機能を利用すると、インセンティブなしで依頼する場合と比べて、投稿率が3〜5倍に増加します
• 購入確認済みの写真は自動承認しましょう — リスクが低く、手動レビューのボトルネックを解消すると、UGC の量が大幅に増加します
• UGC 写真には購入確認済みバッジを表示しましょう — 顧客は実際の使用写真と演出された写真を見分けられます。このバッジによって信頼性が高まります
• 表示前には必ず AI コンテンツモデレーションを実行しましょう — 少なくとも自動スクリーニングを行わずに写真を承認してはいけません。AWS Rekognition や Google Vision SafeSearch を使えば、成人向けコンテンツを自動検出できます
• UGC を有料広告で使用する前に、明示的な許可を得ましょう — 書面による同意なしに顧客の写真を広告で使用すると、法的責任が生じます

よくある落とし穴

問題	解決策
不適切なコンテンツが商品ページに表示される	承認前にコンテンツモデレーションを有効にしましょう。Loox と Okendo は自動スクリーニングを実行します
ソーシャルプルーフのウィジェットに古いデータや偽の緊急性が表示される	キャッシュを5分に設定し、実際の購入シグナルのみを表示しましょう。データの捏造は、評判上および法的なリスクにつながります
Q&A セクションの質問が何週間も未回答のままになる	商品チームに毎日ダイジェストを送信しましょう。スタッフからの回答がないまま7日以上経過した質問は、Q&A がない場合よりも信頼を損ないます
UGC 写真によってページの LCP が遅くなる	Loox と Okendo は CDN 経由で写真を配信し、自動的にサイズ変更します。独自に構築する場合は、必ずサムネイルを200pxにリサイズし、遅延読み込みを使用しましょう
権利の許可を得ずに Instagram の投稿を有料広告で使用してしまう	投稿ごとに権利の承認状況を追跡しましょう。Okendo ではこれを自動で管理できます。確認済みの同意なしに広告に掲載してはいけません

関連スキル

• @product-reviews-ratings
• @personalization-engine
• @customer-segmentation