• 投稿日 2026/06/16
  • 最終更新日 2026/06/16

ECサイトにInstagram投稿・リールを埋め込む方法と効果

ECサイトにInstagramを設置する方法-アイキャッチ

📋 この記事のポイント


  • ECサイトへのInstagram埋め込みには「HTMLコード」「API」「専用ツール」の3つの方法があり、ECサイトでの活用には専用ツールが最も適している

  • Instagram投稿(UGC)をECサイトに埋め込むことでCVRが向上し、サイト離脱率の改善や滞在時間の増加も期待できる

  • リールは通常の埋め込みコードで掲載可能だが、ストーリーはHTMLコードでは対応不可。専用ツールを使えばストーリーも含めて自動更新できる

  • 商品ページやLPへの埋め込みが購買率向上に最も効果的。TOPページはブランドの世界観訴求、商品ページはリアルな口コミ表示に活用するのがおすすめ

「ECサイトにInstagramのリール動画を埋め込みたい」——そんな問い合わせが増えています。Instagramは国内で3,300万人以上(※Meta社公式発表)のユーザーに利用されており、現在も成長を続けています。購買前にInstagramで商品を検索する消費者も急増しています。自社ECサイトにInstagramの投稿やリールを埋め込むことで、サイト訪問者がそのまま購買に進む流れを作ることができます。

本記事では、ECサイトへのInstagram埋め込みの具体的な方法から、購買率(CVR)への効果、埋め込む場所ごとの活用戦略、実際の導入事例まで、実務で使えるノウハウを網羅します。ECサイトとSNSの連携全般についてはECサイトへのSNS活用ガイドも参考にしてください。

ECサイトにInstagramを埋め込む3つの方法

ECサイトにInstagram投稿を埋め込む方法は大きく3つあります。それぞれ難易度・自由度・運用コストが異なるため、自社の状況に合わせて選択してください。

① HTMLコードを使う方法(最も手軽)

Instagram公式が提供する埋め込みコードをコピー&ペーストするだけの方法です。プログラミング知識がなくても実装でき、フィード投稿・動画・リールに対応しています。

手順


  • PCブラウザ版のInstagramにログインし、埋め込みたい投稿を開く(スマホアプリからは不可)

  • 投稿右上の「・・・」メニューから「埋め込み」を選択する

  • 「埋め込みコードをコピー」をクリックしてコードを取得する

  • ECサイトのHTML編集画面を開き、表示させたい箇所にペーストする

⚠️ WordPressユーザーへの注意
ブロックエディターの「ビジュアル」モードではなく、必ず「HTML」モードに切り替えてからペーストしてください。ビジュアルモードに貼り付けると、コードがそのままテキストとして表示されてしまいます。

埋め込みコードはレスポンシブ対応のため、PC・スマホどちらでも適切なサイズで表示されます。ただし、投稿1件ずつ手動で行う必要があり、投稿が削除されるとエラー表示になるという運用上のデメリットもあります。

② Meta公式APIを使う方法(開発者向け)

MetaはInstagram用のAPIを2種類公開しています。APIを使うと、タイムラインの投稿を一覧表示したり、ハッシュタグで投稿を自動収集したりと、より高度な表示が実現できます。

種別 Instagram基本表示API InstagramグラフAPI
対象アカウント 通常アカウント プロアカウント(ビジネス・クリエイター)
主な機能 自分の投稿一覧の取得・表示 ハッシュタグ検索・メンション収集・インサイト取得
必要な知識 プログラミング知識が必要 プログラミング知識が必要

APIを活用すると柔軟なカスタマイズができる一方、Facebookの開発者アカウントの取得・設定が前提となり、技術的なハードルが高めです。社内にエンジニアリソースがない場合は、次の「専用ツール」の利用が現実的です。

③ 専用ツールを使う方法(ECサイトに最も適している)

EmbedSocialのような専用ツールを使うと、APIを直接扱うことなく、管理画面の操作だけでInstagram投稿の収集・表示・更新が完結します。ECサイト運営において特に重要な以下の課題を解決できます。


  • 自動更新:新しい投稿が自動でサイトに反映されるため、毎回コードを貼り直す手間がない

  • 複数投稿のギャラリー表示:グリッドやスライダーなど、ECサイトのデザインに合わせたレイアウトが選べる

  • ハッシュタグ収集:自社アカウントの投稿だけでなく、ハッシュタグを通じた一般ユーザー投稿(UGC)も自動収集できる

  • ストーリーにも対応:HTMLコードでは埋め込めないストーリーも、専用ツールなら表示可能

リール・ストーリー・フィード投稿、ECサイトへの埋め込みの違い

Instagramには複数のコンテンツ形式がありますが、ECサイトへの埋め込み可否と特性はそれぞれ異なります。

形式 HTMLコード 専用ツール ECサイトでの主な活用場面
フィード投稿
(写真・動画)
✅ 対応 ✅ 対応 商品ページのUGCギャラリー、TOPページのブランドフィード
リール ✅ 対応 ✅ 対応 商品の使い方動画、着用イメージ動画、インフルエンサー紹介
ストーリー ❌ 非対応 ✅ 対応 期間限定セール告知、著名人・インフルエンサーのシェア投稿

リールは通常の埋め込みコードで問題なく表示できます。一方、ストーリーはHTML埋め込みコードには対応していないため、EmbedSocialなどの専用ツールを使う必要があります。著名人やインフルエンサーが自社商品を紹介したストーリーをECサイトに常設表示したい場合は、専用ツールの導入をご検討ください。

EmbedSocialのAIテンプレート「ソーシャルメディアスライダー」

リール・ストーリーをECサイトに自動表示・自動更新

EmbedSocialなら、Instagramのフィード・リール・ストーリーを管理画面の操作だけでECサイトに埋め込めます。新しい投稿は自動更新されるため、コードを貼り直す手間がありません。

自社ECで全レイアウトを試す →

7日間の無料トライアル中はいつでもキャンセル可

ECサイトでInstagramを埋め込む効果——購買率(CVR)への影響

ECサイトにInstagram投稿を埋め込む最大の目的は、購買率(CVR)の向上です。なぜ埋め込みがCVRに効くのか、その背景を理解しておきましょう。UGC全般のコンバージョン活用についてはビジュアルコマースとは?2026年実装ガイドUGC活用でCVRを最大化する方法も詳しく解説しています。

サイト離脱を防ぎ、購買判断を後押しする

オンラインで商品を購入する前、多くの消費者はSNSやレビューサイトで「他の人の使用感」を調べます。ECサイト上に実際のInstagram口コミ投稿が表示されていれば、購入検討者が他サイトへ離脱する必要がなくなります。滞在時間が伸び、購入ページへの遷移率が高まるのです。

UGCが持つ「信頼性」の力

UGC(ユーザー生成コンテンツ)とは、企業ではなく実際のユーザーが作成したコンテンツのことです。ECサイトに掲載されたHTMLテキストの「お客様の声」と異なり、Instagramの実アカウントからの投稿は誰でも確認できるため、信頼性が格段に高く受け取られます。

📊 UGC活用によるCVR改善の実例
EmbedSocialを導入したECサイト事業者では、UGCをサイトに掲載することで商品ページからの購入率が向上した事例が多数あります。特に、ハッシュタグを通じた一般ユーザーの口コミ投稿を商品ページに配置した場合、「この商品を実際に買った人がいる」という証拠として機能し、購買の後押しになります。

リール動画が「使用イメージ」を伝える

写真だけでは伝わりにくい商品の使い方・サイズ感・着用感などを、リール動画でリアルに見せることができます。特にアパレル・コスメ・食品のレシピ動画、家具のサイズ感、雑貨の質感など「使ってみないとわからない」カテゴリのECサイトでは、リール動画の埋め込みが購買決定の大きな後押しになります。リールをウェブサイトに埋め込む詳細な手順はInstagramリールをウェブサイトに埋め込む方法【最新完全版】をご覧ください。

埋め込む場所別の活用戦略——どのページに置くか

Instagram投稿を埋め込む効果は、「どのページに置くか」によって大きく変わります。ページごとに来訪者の購買段階が異なるため、目的に合わせて使い分けることが重要です。

TOPページ——ブランドの世界観を伝える

TOPページに訪れるのは、まだ商品を決めていない「ブランド探索中」の訪問者です。自社公式アカウントの投稿をグリッド形式で表示し、ブランドイメージや商品の雰囲気を視覚的に伝えることが目的になります。


  • 推奨コンテンツ:公式アカウントのフィード投稿、スタッフ着用・使用シーン

  • 推奨レイアウト:グリッド表示(横3〜4列)、スライダー表示

  • 狙い:Instagramフォロワー誘導、ブランド認知の強化

商品ページ——リアルな口コミで購買を後押し

商品ページは最も効果が出やすい場所です。その商品を実際に購入・使用したユーザーのInstagram投稿(UGC)を、商品説明の下や「お客様の声」セクションに配置します。


  • 推奨コンテンツ:商品ハッシュタグ付きのUGC、インフルエンサー紹介投稿、リール動画

  • 推奨レイアウト:コンパクトなサムネイルグリッド(クリックで拡大)

  • 狙い:カート追加率・購入完了率の向上、離脱防止

LP・カートページ——購買直前の離脱を防ぐ

カートや購入確認ページで「本当に買っていいのか?」と迷う訪問者に向けて、実際の使用者の声を見せることが効果的です。購入直前の不安を解消し、離脱を減らします。


  • 推奨コンテンツ:高評価のUGC投稿(厳選された口コミ)、著名人・インフルエンサーのストーリー

  • 狙い:購入完了率(コンバージョン)の最大化

EmbedSocialを使ったECサイトへのInstagram埋め込み手順

EmbedSocialを使うと、管理画面の操作だけでInstagram投稿をECサイトに埋め込むウィジェットを作成できます。基本的な導入の流れをご紹介します。

STEP 作業内容 備考
1 EmbedSocialのアカウント登録・Instagram連携 Instagramのプロアカウントが必要
2 ウィジェットの作成(表示する投稿ソースの設定) 自社アカウント投稿・ハッシュタグ・メンションから選択
3 デザイン・レイアウトのカスタマイズ グリッド・スライダー・リストなど複数レイアウトから選択
4 埋め込みコード(1行)をECサイトに貼り付け WordPress・Shopify・独自ECなど主要プラットフォームに対応
5 以降は自動更新(新しい投稿が自動で反映) 管理画面から表示する投稿の選択・除外も可能

EmbedSocialはInstagramのほか、X(旧Twitter)・YouTube・TikTok・Facebookなど7種類以上のSNSに対応しています。複数のSNSを運用している場合でも、1つのツールで一元管理できます。

ECサイトで使えるEmbedSocialテンプレート例

EmbedSocialには100種類以上のウィジェットテンプレートが用意されており、ECサイトのデザインや目的に合わせてすぐに使い始めることができます。ここではEC向けに特に人気の高いInstagram連携テンプレートを2つご紹介します。

1. 商品連携ダークスライダー

EmbedSocialのAIテンプレート「商品連携ダークスライダー」

デザインの詳細
活用タイプ 🛒 ショッパブル / ✨ 高級感演出 / 📱 スマホ最適化
特徴 Instagramの投稿をそのまま「動くカタログ」へ変換
没入型の視覚効果: ダークモードで中央の投稿を強調し、視線を商品に集中させます。
シームレスな購買導線: 各投稿に商品名・価格・「Shop」ボタンを表示し、直接売上へ結びつけます。
自動スクロール: 投稿が右から左へ滑らかに流れるアニメーションで、モダンな躍動感を演出します。
向いている業種 ガジェット・コスメなど高級感を重視するブランドや、Instagramをカタログ化したいアパレル・ライフスタイル系EC全般。

🔗 ライブデモを体験する

2. 商品連携ショッパブルスライダー

EmbedSocialのAIテンプレート「商品連携ショッパブルスライダー」

デザインの詳細
活用タイプ 🛒 ショッパブル / 📈 セット買い促進 / ✨ ルックブック形式
特徴 1つのビジュアルに複数アイテムをタグ付けし、同時購入を促す
複数商品の紐付け: ライフスタイル画像上の各アイテムに直接購入リンクを設置し、「一式」を揃える導線を作ります。
シームレスな購入体験: クリックで商品名と価格がポップアップ表示され、インスピレーションから決済までを最短で繋ぎます。
向いている業種 モデルの全身コーディネートを提案するアパレルブランドや、空間のセット買いを狙いたいインテリアECサイトなど。

🔗 ライブデモを体験する

▶ すべてのテンプレートを見る(100種類以上)

主要ECプラットフォームでのInstagram埋め込み——EmbedSocialは使えるの?

「自分のECサイトでEmbedSocialが使えるか不安」という方のために、国内で利用者の多い主要プラットフォームごとの対応状況と手順をまとめました。

プラットフォーム EmbedSocial対応 埋め込み方法
Shopify ✅ 対応 PagesのHTML編集画面に埋め込みコードを貼り付け、またはテーマのliquidファイルに直接追加
WordPress
(WooCommerce等)
✅ 対応 ブロックエディターの「カスタムHTML」ブロックに埋め込みコードを貼り付け
BASE ✅ 対応可能 デザイン編集のHTML編集モードで、表示させたい箇所にコードを貼り付け
カラーミーショップ ✅ 対応可能 デザイン編集のフリー記述エリア(HTML)またはページ編集画面にコードを貼り付け

EmbedSocialの埋め込みコードはJavaScriptスニペット形式(<script>タグ)です。カスタムHTMLの貼り付けに対応しているプラットフォームであれば、基本的に動作します。独自開発のECサイトでも同様に利用可能です。

Shopifyへの埋め込み手順

ShopifyへのEmbedSocial導入は、EmbedFeedで作成したウィジェットの埋め込みコードを、ShopifyのPagesエディターに貼り付けるだけで完了します。専用アプリのインストールは不要で、コード一行で対応可能です。


  • EmbedFeed管理画面でウィジェットを作成し、「Embed」タブから埋め込みコードをコピー

  • Shopify管理画面 → Online Store → Pages → 「Add page」でページを新規作成

  • ContentエリアのHTMLエディター(<>アイコン)に切り替え、埋め込みコードを貼り付けて保存

  • 商品ページやトップページへの埋め込みはテーマの.liquidファイルを編集して追加することも可能

💡 TOPページ・商品ページへの埋め込み(Shopify OS 2.0)
「Pages」への埋め込みだけではサイトのトップページや商品ページには表示されません。TOPや商品ページに追加したい場合は、Shopify管理画面の「テーマカスタマイズ」からセクションを追加する方法が便利です。セクション追加ウィンドウで「カスタムLiquid」または「カスタムHTML」を選択し、EmbedSocialの埋め込みコードを貼り付けるだけで完了します。

WordPress(WooCommerce等)への埋め込み手順


  • EmbedSocial管理画面でウィジェットを作成し、埋め込みコードをコピー

  • WordPressのページ・投稿編集画面で「+」ブロックから「カスタムHTML」を追加

  • コピーした埋め込みコードを貼り付けて保存。サイドバーやフッターへの設置はウィジェット機能から同様の手順で追加可能

BASE・カラーミーショップへの埋め込み手順

BASEとカラーミーショップはどちらもHTMLの直接編集に対応しており、EmbedSocialの埋め込みコードを貼り付けることで表示できます。


  • BASE:管理画面 → デザイン → HTML編集 で、表示させたいページのHTML内の任意の箇所にEmbedSocialの埋め込みコードを貼り付け

  • カラーミーショップ:管理画面 → デザイン → テンプレート編集、またはページの「フリー記述エリア」に埋め込みコードを貼り付け

💡 どのプラットフォームでもEmbedSocialの埋め込みコードは共通
プラットフォームが変わっても、EmbedSocial管理画面で取得する埋め込みコード自体は同じです。「どこにコードを貼るか」がプラットフォームごとに異なるだけで、一度ウィジェットを作れば複数のページ・複数のサイトに使い回せます。

Instagramをウェブサイトに埋め込み表示する方法

ECサイトのInstagram活用を
コードなしで始める

EmbedSocialなら初期費用なし・管理画面操作だけでInstagram投稿をECサイトに埋め込めます。ハッシュタグUGCの自動収集、ストーリー表示、複数SNS対応もすべて1つのツールで完結。

EmbedSocialを試してみる →

7日間の無料トライアル中はいつでもキャンセル可

ECサイトへのInstagram埋め込み導入事例

EmbedSocialを活用してECサイトにInstagram投稿を埋め込み、成果を上げている事例をご紹介します。

富山県の老舗食品メーカー「かね七」様

Instagram上で商品購入者がハッシュタグ「かね七」をつけて投稿したレシピ画像・動画をEmbedSocialで収集し、ECサイトに掲載。一般ユーザーのリアルな活用シーンを商品ページに表示することで、購入後のイメージが伝わりやすくなり、購買率向上の効果が出ています。

カラーコンタクトブランド「N’s COLLECTION」様

カラー別の商品ページに、商品名のハッシュタグでフィルタリングしたUGCを配置。各商品ページの下部にInstagramのリアルな着用口コミを表示し、オンラインショップの商品詳細ページへの誘導ボタンを設置することで、ECサイトでの購買率向上を実現しています。

福岡県の化粧品ブランド「デルメッド」様

公式Instagram・Twitterアカウントの投稿をEmbedSocialでECサイトのトップページに連携。2つのSNSそれぞれにウィジェットを作成し、二段に分けてトップページに掲出することで、サイト訪問者がSNSの最新情報をECサイト上でそのまま確認できる導線を構築しています。

ECサイトへのInstagram埋め込みで注意すべきこと

他のユーザーの投稿には使用許諾が必要

自社アカウントの投稿を表示する分には問題ありませんが、他のユーザー(一般消費者・インフルエンサーなど)の投稿を営利目的のECサイトに掲載する場合は、投稿者への使用許諾が必要です。Instagramの利用規約上、投稿の著作権は投稿者に帰属します。EmbedSocialでは管理画面から使用許諾の申請を行う機能も備えています。許諾取得の具体的な手順はUGC二次利用許諾の取り方3選で詳しく解説しています。

投稿が削除されるとエラー表示になる

HTMLコードで埋め込んだ投稿は、Instagram上で削除またはアーカイブされると、ECサイト上でエラー表示(空白・エラー枠)になります。専用ツールを使って動的にコンテンツを管理すると、削除された投稿を自動的に別の投稿に差し替えることができます。

非公開アカウントの投稿は埋め込めない

非公開設定のInstagramアカウントの投稿は、HTMLコード・ツール問わず埋め込みができません。また、投稿者がアカウントを非公開に変更した場合、既に埋め込み済みの投稿も表示されなくなります。

ページ速度への影響を確認する

Instagram投稿の埋め込みは外部コンテンツの読み込みを伴うため、ページの表示速度に影響する場合があります。特に商品ページに多数の投稿を埋め込む場合は、Google PageSpeed Insightsなどで表示速度を確認し、遅延読み込み(Lazy Load)を設定することをおすすめします。

よくある質問(FAQ)

ECサイトにInstagramを埋め込むのは無料でできますか?


Instagram公式の埋め込みコードを使う方法は無料です。ただし、投稿1件ずつ手動で貼り付ける必要があり、自動更新・複数表示・ストーリー対応などには対応していません。EmbedSocialのような専用ツールは有料ですが、7日間の無料トライアルが用意されており、管理コストを含めた費用対効果を確認してから導入を判断できます。

InstagramリールをECサイトに埋め込む方法は?


リールはInstagram公式の埋め込みコードで対応しています。PC版Instagramにログインし、埋め込みたいリール投稿の「・・・」メニューから「埋め込み」を選択してコードを取得し、ECサイトのHTML編集画面に貼り付けるだけです。複数のリールをスライダー形式で自動更新表示したい場合は、EmbedSocialのような専用ツールの利用がおすすめです。

ストーリーをECサイトに埋め込むことはできますか?


Instagram公式のHTMLコードではストーリーの埋め込みはできません。ストーリーをECサイトに表示したい場合は、EmbedSocialのような専用ツールを利用する必要があります。EmbedSocialはストーリーの埋め込み・表示に対応しており、著名人やインフルエンサーが商品を紹介したストーリーをサイトに常設表示することが可能です。

他のユーザーのInstagram投稿をECサイトに掲載するには許可が必要ですか?


はい、必要です。他のユーザーの投稿はその投稿者に著作権があるため、営利目的のECサイトに掲載する場合は使用許諾を取ることが推奨されます。EmbedSocialでは管理画面から投稿者に使用許諾申請を送る機能を備えており、複数の投稿に対して効率的に許諾管理を行うことができます。

ShopifyのECサイトにInstagramを埋め込めますか?


はい、できます。EmbedSocialはShopifyを含む主要なECプラットフォームに対応しており、1行の埋め込みコードをShopifyの任意のセクションに貼り付けるだけでInstagram投稿のウィジェットを表示できます。WordPressや独自開発のECサイトにも同様の方法で対応可能です。

Instagramの埋め込みはSEOに影響しますか?


埋め込みによってページのコンテンツが充実するため、ユーザー体験の向上という観点からはSEOにプラスの影響が期待できます。一方、外部コンテンツの読み込みによってページ速度が低下する場合があるため、埋め込み数が多い場合は遅延読み込み(Lazy Load)の設定を検討してください。EmbedSocialのウィジェットはパフォーマンスを考慮した設計になっています。

ECサイトに埋め込むInstagram投稿はどれを選べばよいですか?


TOPページには自社公式アカウントのブランドイメージが伝わる投稿を、商品ページには実際の購入者によるUGC(ハッシュタグ口コミ)を、LPにはインフルエンサーの紹介投稿や高評価口コミを選ぶのが効果的です。ページごとに来訪者の購買段階が異なるため、それぞれの目的に合わせたコンテンツを選定することでCVRの向上が期待できます。

EmbedSocial AI UGCセクションジェネレーター

InstagramとECサイトの連携ならEmbedSocialにおまかせ

フィード・リール・ストーリーの埋め込みから、ハッシュタグUGCの自動収集まで。管理画面の操作だけで、コーディング不要でECサイトにInstagramを連携できます。資生堂プロフェッショナル・味の素冷凍食品など、多数の国内企業に導入実績があります。

売上につながるUGC活用を始める →

7日間の無料トライアル中はいつでもキャンセル可

この記事を書いた人
EmbedSocial Japan編集部
EmbedSocial Japan編集部
SNSやUGCの活用、Googleビジネスの管理(MEO対策)に活用できるSaaSツールやマーケティングノウハウの提供を通して、企業が広告に頼らずオーガニックに集客を加速できる未来を目指しています。
導入完了にあたってのご相談など
お気軽にお問い合わせください