Superdesk

Shopify Visual UGCガイド · 2026年8月更新

Shopify商品ページにUGCを追加、テーマコードの編集なしで

お客様の写真・動画にShopify商品を一度タグ付けし、商品テンプレートにギャラリーブロックを一つ追加すれば、各商品ページがそれぞれに合ったコンテンツを表示します。

  • 商品テンプレート用ブロック1つ
  • 商品ごとの自動マッチング
  • デスクトップ・モバイル別の設定
alba-running.com/products/pace-one
Customer lacing a cobalt blue running shoe on pale stone steps@runwithmaya
ALBA RUNNING

Pace One

$118.00

コミュニティが愛用お客様の投稿4件
商品コンテキスト:Pace One一致する投稿のみ

簡単に言うと

Shopify商品ページにUGCを追加するには?

商品に連動するUGCギャラリーと接続したShopifyテーマアプリブロックを使用します。Superdeskでお客様のコンテンツを承認し、各投稿に該当するShopify商品をタグ付けして、商品ページギャラリーをカスタマイズしたら、Shopifyのテーマエディタで商品テンプレートにShoppable UGC Galleryブロックを追加します。ブロックは現在の商品を読み取り、一致する投稿を自動で表示します。

01

コンテンツのタグ付けは一度だけ

一つの投稿に、複数商品のコーディネート向けの正確なホットスポットを含め、一つまたは複数のShopify商品タグを付けられます。

02

テンプレートがコンテキストを提供

商品ページでは、あえて上書きを選ばない限り、ギャラリーブロックは現在のShopify商品を使用します。

03

各商品ページが常に関連性を保つ

同じテンプレートで、靴のページには靴、ジャケットのページにはジャケットを表示でき、個別の埋め込みを管理する必要はありません。

テーマエディタを開く前に

ギャラリーを配置する前に、コンテンツを準備

スムーズな導入は、承認済みで商品と紐づいたコンテンツから始まります。ストアプレビューが意味を持つよう、まずは以下を確認してください。

  • 1

    ShopifyストアにSuperdeskがインストールされている。

  • 2

    お客様の写真・動画がコンテンツライブラリで承認されている。

  • 3

    商品ページに表示したい投稿が、すべてその商品にタグ付けされている。

  • 4

    使用中のテーマがShopifyのアプリブロックまたはアプリセクションに対応している。

  • 5

    公開中のストアに変更を保存する前に、未公開のテーマをプレビューできる。

ステップバイステップのチュートリアル

コンテンツライブラリから、公開中の商品ページへ

これは現在のSuperdeskのワークフローです。順番にステップを完了し、公開前にコンテンツがある商品とない商品の両方をテストしてください。

  1. 01

    Superdesk · コンテンツライブラリ

    使用する写真・動画を承認する

    Instagram投稿、レビューメディア、お客様のアップロード、ストアのアップロードを取り込み、ストアで使用できるコンテンツを承認します。第三者のInstagramコンテンツの場合は、公開前に許諾フローを完了してください。

    • コンテンツがコンテンツライブラリに表示されている
    • ソースとクリエイターが正しい
    • 許諾ステータスが適切
    コンテンツライブラリ承認済み
    ギャラリーに使用可能
  2. 02

    Superdesk · 投稿エディタ

    各投稿にShopify商品をタグ付けする

    投稿を開き、Shopifyカタログを検索して、コンテンツに写っているすべての商品を紐づけます。投稿にコーディネート全体や複数商品が含まれる場合は、該当アイテムに直接ホットスポットを配置します。

    • 正しい商品・バリエーションが選択されている
    • ホットスポットが商品の上にある
    • 投稿の変更が保存されている
    Shopify商品を検索
    Pace Oneブルー · $118
  3. 03

    Superdesk · ギャラリー

    商品ページギャラリーを開く

    デフォルトの商品ページギャラリーを選択します。閲覧中の商品で絞り込むよう設計されているため、SKUや商品ページごとにギャラリーを作成する必要はありません。

    • 商品ページギャラリーが選択されている
    • 動的な商品コンテキストが有効なまま
    • プレビュー用のサンプル商品が選択されている
    商品ページギャラリーデフォルトギャラリー

    各商品ページで、このギャラリーはその商品にタグ付けされた投稿を表示します。

    動的な商品コンテキスト
  4. 04

    Superdesk · ギャラリーエディタ

    レイアウトを選び、実際の商品でプレビューする

    ギャラリーのスタイル、余白、列数、投稿の見た目、ホットスポット、クリック時の動作を設定します。デスクトップとモバイルのプレビューを切り替え、タグ付けされたコンテンツのある商品で結果を確認してから保存します。

    • デスクトップとモバイルの両方を確認した
    • 商品リンクが正しい商品ページを開く
    • ギャラリー設定が保存されている
    ギャラリーエディタ デスクトップ · モバイル
    変更を保存
  5. 05

    Shopify · テーマエディタ

    商品テンプレートにShoppable UGC Galleryを追加する

    SuperdeskからギャラリーIDをコピーします。Shopifyで、オンラインストア → テーマ → テーマをカスタマイズと進み、対象の商品テンプレートを開いて、セクションを追加 → アプリ → Shoppable UGC Galleryを選択。ギャラリーIDを貼り付けてセクションを配置し、保存します。

    • 正しい商品テンプレートが開かれている
    • ギャラリーIDが正確に貼り付けられている
    • 動的マッチングのため上書き商品が空欄
    Shopifyテーマエディタ商品 · デフォルト商品

    ギャラリーセクション

    保存
  6. 06

    Shopify · ストアプレビュー

    公開前にギャラリーをテストする

    タグ付けされたコンテンツがある商品とない商品の両方をプレビューします。画像・動画の投稿、ホットスポット、商品リスト、商品ページへのリンク、キーボード操作、モバイルレイアウトをテストします。コンテンツあり・なし両方の状態が想定通りに動作してから公開してください。

    • 一致するコンテンツが正しい
    • コンテンツがない商品に無関係なコンテンツが表示されない
    • モバイルでの操作が快適
    ストアQAプレビュー
    デスクトップ4列 · リンク正常
    モバイル2列 · はみ出しなし

ギャラリーはどこに配置すべき?

購入の決断を後押しする、配置を選ぶ

万能な正解の配置はありません。コンテンツが果たす役割から考え、購入導線を明確に保ち、自社ストアの分析データで実際の動きを比較しましょう。

01

商品情報の下

バリエーション選択を妨げずに、実際のお客様の利用シーンで商品を見せたい場合は、主要な商品詳細の後に全幅のギャラリーを配置します。

多くのストアに適したデフォルト配置
02

レビューの近く

お客様の声が、より大きな社会的証明の流れの一部である場合は、レビューエリアの隣や直前にVisual UGCを配置します。

お客様の声を重視する商品ページに有効
03

長いページでは上の方に

商品説明が長く、サイズ感、スケール、色、スタイリングの理解に実際の使用シーンが欠かせない場合は、コンパクトなスライダーを上の方に配置します。

CTAの見やすさとの兼ね合いを慎重にテスト

公開前チェックリスト

まず関連性を、次に見せ方をテスト

商品が合っていない美しいギャラリーは、ギャラリーがないより悪い結果になります。マッチング、動作、レスポンシブ対応の順に確認しましょう。

コンテンツの関連性

  • すべての投稿が現在の商品に関連している
  • 未承認のコンテンツが表示されていない
  • 複数商品の投稿が正しい商品リストを表示している
  • コンテンツがない商品には意図した空の状態が表示されている

購入者の操作

  • 画像・動画・モーダルの操作が正常に動作する
  • どの画面幅でもホットスポットが商品の上にある
  • 商品リンクが正しい商品ページに到達する
  • キーボード操作と閉じるボタンが利用できる

モバイルでの表示

  • テキストやコントロールがメディアを隠していない
  • 選択した列数が見やすい
  • 動画が音声で訪問者を驚かせない
  • 横方向のはみ出しが発生していない

トラブルシューティング

商品ページのUGCギャラリーが空、または正しくない場合

コンテンツからテンプレートの順に確認しましょう。多くの問題は、商品タグの未設定、誤ったギャラリーID、誤ったテンプレート、未保存の変更が原因です。

現象考えられる原因対処方法
アプリブロックが一覧に表示されない

テーマのセクションがアプリブロックに対応していないか、そのテーマでアプリが利用できません。

商品テンプレートで「セクションを追加 → アプリ」を試してください。Superdeskがインストールされ、テーマがShopifyアプリブロックに対応しているか確認します。

ブロックにギャラリーが表示されない

ギャラリーIDが未入力・誤入力であるか、Superdesk側のギャラリーが保存されていません。

「ギャラリーを埋め込む」からIDを再度コピーし、余分なスペースなしで貼り付け、Superdesk側を保存してからShopifyのテーマを保存してください。

商品に投稿が表示されない

閲覧中の商品にタグ付けされた承認済み投稿がありません。

コンテンツライブラリを開き、想定する投稿にその商品を正確にタグ付けして保存し、プレビューを更新してください。

どの商品ページにも同じ投稿が表示される

動的でないギャラリーが埋め込まれているか、テーマブロックで上書き商品が設定されています。

商品ページギャラリーを使用し、現在の商品がコンテキストを提供できるよう、上書き商品を空欄のままにしてください。

Superdesk側では変更が見えるが、Shopify側に反映されない

どちらか一方が保存されていないか、誤ったテーマ・テンプレートが開かれているか、キャッシュされたプレビューを見ています。

両方のエディタを保存し、有効なテンプレートとテーマを確認してから、キャッシュなしでストアプレビューを再読み込みしてください。

テーマを変更したらギャラリーが消えた

Shopifyのアプリブロックはテーマごとに設定されます。

新しいテーマを開き、公開前に商品テンプレートにShoppable UGC Galleryブロックを追加してください。

Shopify公式のアプリブロック手順

完全なワークフローを構築

集めて、承認して、タグ付けして、公開する

商品ページのブロックは、ストア側の最終ステップです。Superdeskは、Instagramでの発見、お客様のアップロード、レビューメディア、許諾、商品タグ付け、ギャラリーデザインまで、すべてをつなげます。

商品ページUGCのよくある質問

顧客ギャラリーを追加する前に、Shopifyストアが気になること

Shopify商品ごとに別々のUGCギャラリーが必要ですか?

いいえ。Superdeskの商品ページギャラリーは動的です。商品テンプレートにギャラリーブロックを一つ追加すれば、現在の商品を使って、その商品にタグ付けされた投稿を自動で取得します。

各商品ページにどのUGCを表示するか、Superdeskはどう判断していますか?

承認済みの各投稿に保存されたShopify商品タグが紐付けの根拠です。商品ページでギャラリーが読み込まれると、現在の商品IDを使って一致するコンテンツを返します。

一つのUGC投稿を複数の商品にリンクできますか?

はい。一つの投稿に複数のShopify商品をタグ付けできます。ホットスポットで位置を示し、ギャラリーの詳細表示で関連商品リストを表示できます。

Instagram投稿、レビュー写真、アップロードを一緒に使えますか?

はい。投稿が該当商品に紐づいてさえいれば、商品ページギャラリーは承認済みのInstagramコンテンツ、写真・動画のレビューメディア、お客様のアップロード、ストアのアップロードから表示できます。

ギャラリーの追加にShopifyテーマコードの編集は必要ですか?

対応するShopifyテーマであれば不要です。SuperdeskはShopifyのテーマアプリ拡張機能を使用しているため、ストアはテーマエディタでアプリセクションまたはアプリブロックとしてShoppable UGC Galleryを追加・配置できます。

商品ページのどこにUGCを配置すべきですか?

主要な商品情報の下、またはレビューの近くに全幅のセクションを置くのが良い出発点です。バリエーション選択とメインの「カートに追加」導線を明確に保ちつつ、自社の購入者の行動データで配置をテストしてください。

一致するUGCがない商品はどうなりますか?

ギャラリーは無関係な商品を代わりに表示すべきではありません。空の状態は意図的に扱いましょう。その商品向けのタグ付きコンテンツを追加するか、本当に関連性がある場合のみ設定済みのフォールバックを使うか、空のセクションを非表示にします。

ギャラリーはモバイルでも動作しますか?

はい。Superdeskはモバイル専用のレイアウト設定を提供しています。公開前に、実際の商品テンプレートをスマートフォンサイズのビューポートでプレビューし、列数、動画の挙動、ホットスポット、モーダル操作、横方向のはみ出しを確認してください。

Shopifyのテーマを変更した後は何をすればいいですか?

新しいテーマにSuperdeskのアプリブロックを再度追加し、確認してください。Shopifyのテーマ設定はテーマごとに個別のため、新しく公開したテーマでアプリブロックが自動的に有効になることはありません。

リアルなお客様のコンテンツを、 決め手になる場所に

Instagram投稿、お客様のアップロード、レビューメディア、自社のコンテンツから、商品に連動したギャラリーを一つのSuperdeskワークスペースで構築できます。
Shopify App Storeでの評価 5.0