---
title: "Figma SitesにSNSフィードを埋め込む方法とは？"
date: 2025-05-09
modified: 2025-05-09
canonical_id: embed-social-media-feeds-figma-sites
locale_slug: embed-social-media-feeds-figma-sites
author: "osogovo"
category: blog
summary: "EmbedSocialのInstagramフィードやGoogleクチコミウィジェットを、iframeコードを使ってFigma Sitesに埋め込む方法を解説します。図解付きのステップバイステップガイドで、Figmaのページにリアルタイムのソーシャルプルーフを追加しましょう。"
draft: false
seo:
  og_image: "https://embedsocial.com/wp-content/uploads/2025/05/embed-social-media-feeds-figma-sites.jpg"
  og_image_alt: "Figma SitesにInstagramフィードを埋め込む手順"
  og_image_width: 920
  og_image_height: 480
  title: "Figma SitesにSNSフィードを埋め込む方法とは？"
  description: "EmbedSocialのInstagramフィードやGoogleクチコミウィジェットを、iframeコードを使ってFigma Sitesに埋め込む方法を、ステップバイステップガイドと図解で解説します。"
  structured_data: article
---
はい、できます！Figmaには[Figma Sites](https://www.figma.com/sites/)という新しいウェブビルダーが登場し、ノーコード環境でウェブサイトをデザインして公開できるようになりました。

Figmaのデザインを活用して、レスポンシブで見栄えのするランディングページやポートフォリオ、社内向けのプロジェクトページなどを作成できます。しかし、リアルタイムのソーシャルプルーフを使って、ページをもっとダイナミックにしたいと思ったことはありませんか？

これからは、InstagramフィードやGoogleクチコミスライダー、TikTokのメンションギャラリーなど、あらゆるEmbedSocialのウィジェットを、Figma Siteに直接埋め込むことができます。

## Figma Sitesとは？

> Figma Sitesは、Figmaのデザインを開発者の手を借りることなく、ライブで共有可能なウェブページへと変換できる、軽量な公開ツールです。

* * *

既存のデザインシステムを使って、マイクロサイトやキャンペーンページ、プレゼンテーションを公開するための手段だと考えてください。さらに埋め込み機能のサポートにより、EmbedSocialのライブウィジェットでページを強化できるようになりました。

## Figma SitesにInstagramやGoogleクチコミウィジェットを埋め込む手順

Figma Sitesでサポートされているのは`iframe`コードのみです。つまり、EmbedSocialウィジェットの**iframe埋め込みオプション**を使う必要があります。手順は以下の通りです。

### ステップ1：ウィジェットのiframeコードをコピーする

1.  EmbedSocialアカウントにアクセスします。新規ユーザーの方は[新しいアカウントを作成](/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget)してください。
2.  **「ウィジェット」**に移動し、新しいウィジェットを作成するか、埋め込みたいウィジェット（Instagramフィード、Googleクチコミ、TikTokなど）を選択します。
3.  エディター画面で、左側の設定パネルにある**「埋め込み（Embed）」**タブをクリックします。
4.  `iframe`コードをコピーします（JavaScript版は**使わない**ようご注意ください）。

![iframeコードでSNSフィードを埋め込む](https://embedsocial.com/wp-content/uploads/2023/11/get-iframe-embed-code-for-social-media-feed-1024x601.jpg)

### ステップ2：Figma SitesにHTMLブロックを追加する

以下の手順で、Figma Siteにコードを貼り付けます。

1.  Figma Siteのプロジェクトを開きます。
2.  **左側のパネル**から、➕ボタンをクリックして新しいブロックを追加します。
3.  ブロックの選択肢から**「Embeds」**を選びます。
4.  次に**「URL or HTML」**ブロックを選択します。コードを埋め込みたい場所に合わせて、ブロックの位置を調整する必要があります。  
    ![Figma SitesにInstagramウィジェットを埋め込む](https://embedsocial.com/wp-content/uploads/2025/05/steps-to-embed-widgets-in-figma-sites.jpg)
5.  右側に新しいHTMLパネルが表示されるので、そこに`iframe`コードを貼り付けます。  
    ![Figma Sitesにiframeコードを追加する](https://embedsocial.com/wp-content/uploads/2025/05/paste-iframe-code-figma-sites.jpg)

### ステップ3：位置を調整して公開する

-   埋め込み後は、**ブロックの位置**、**幅**、**高さ**を調整できます。
-   ウィジェットはFigma Siteのレイアウト内でライブ表示されるので、プレビューしながら他のコンテンツのスタイルを合わせて整えることができます。
-   **「Publish」**をクリックすると、変更がライブで反映されます。

こちらが、EmbedSocialのInstagramウィジェットを埋め込んだFigmaサイトのライブ例です。[実際の動作をご覧ください。](https://turn-flex-disco.figma.site/)

![EmbedSocialのInstagramウィジェットを埋め込んだFigmaサイトのライブ例](https://embedsocial.com/wp-content/uploads/2025/05/figma-instagram-widget-1024x612.jpg)

[ライブのFigma Siteを見る](https://turn-flex-disco.figma.site/)

## 始めましょう

これで、Figma Siteの中にフル機能のEmbedSocialウィジェットを設置できました。Instagramの UGC、お客様の声、配送可能なウィジェット、リアルタイムのGoogleクチコミなど、どんな内容でも表示できます。静的なデザインを、本物のコンテンツが息づく体験へと変える、シンプルな方法です。