---
title: "ウィジェットの種類"
description: "作成できるウィジェットのレイアウト、複数のソースを1つのウィジェットにまとめる方法、フローティングウィジェットについて解説します。"
---

すべてのウィジェットは、コンテンツに適用する**レイアウト**です。同じ投稿でも、グリッド、コラージュ、slider、小さなフローティング要素として表示できます。レイアウトは、出発点に選んだ[テンプレート](/docs/widgets/templates/)や、[AIデザイン](/docs/widgets/ai-design/)に依頼した内容で決まり、ソースに手を加えることなくいつでも変更できます。

このページでは、レイアウトの種類、複数のソースを1つのウィジェットにまとめる方法、そしてウィジェットをページ上にフローティング表示する方法を説明します。

## ウィジェットのレイアウト

-   **Feed** は定番のグリッドです。投稿を行と列に並べる、多くのソーシャルフィードやレビューウォールで使われるレイアウトです。

    ![レビューカードをグリッド状に並べたフィード形式のAgency Google Reviews Widgetテンプレート](https://embedsocial.com/admin/feedcdn/uploads/widget-templates/89160b01/89160b01d08b1844f3b92d971b6261913190b8305c29_1024x10241c5f27293915b6a6edad47525aa661a8.webp)

    実際の表示：[Agency Google Reviews Widget](/templates/agency-google-reviews-widget/)

-   **Collage** はメイソンリー形式です。大きさの異なるタイルを敷き詰めるレイアウトで、写真の多いInstagramのコンテンツに向いています。

    ![大きさの異なるタイルをコラージュ状に並べたFree Shoppable Instagram Widgetテンプレート](https://embedsocial.com/admin/feedcdn/uploads/widget-templates/8ae76f21/8ae76f217e7c3ed7b62cce04ddf7ec0fb5ede17d7ee0_1024x1024e2c9259595278595ff03b2bce6b7e533.webp)

    実際の表示：[Free Shoppable Instagram Widget](/templates/free-shoppable-instagram-widget-collage/)

-   **Slider** は投稿を横方向にスクロールし、1件または数件ずつ表示します。トップページの帯など、幅の狭いセクションに適しています。

    ![レビューカードを1件ずつ表示するBlue Single Reviews Sliderテンプレート](https://embedsocial.com/admin/feedcdn/uploads/widget-templates/3eeb6e3e/ba51b1ad32c8f1034e914b46ee3fcba8b8143df349fb_512x51294221a55a54277ee709b365974f74165.webp)

    実際の表示：[Blue Single Reviews Slider](/templates/blue-single-reviews-slider/)

-   **フローティングポップアップ**は、ページ内に配置するのではなくページ上に浮かせて表示します。レイアウトを変更せずに、サイトのすべてのページで機能します。

    ![ページ上にフローティング表示されたFloating Instagram Widgetテンプレート](https://embedsocial.com/admin/feedcdn/uploads/widget-templates/188ceaa3/188ceaa377817eca13594fbacb4c6775a5974676e093_1024x10247d333451f5dcb62018f9c3ca24a4f6a8.webp)

    実際の表示：[Floating Instagram Widget](/templates/floating-instagram-widget/)

-   **バッジ**はフローティング形式のコンパクト版です。画面の端に固定される小さな評価バーで、サイト全体でレビューのスコアを示すのに最適です。

    ![レビュースコアをコンパクトに表示するDark Floating Badge with Avatarsテンプレート](https://embedsocial.com/admin/feedcdn/uploads/widget-templates/b0f1b51d/b0f1b51da9476c1361cd9840194efc6357dc5ad0a9cd_1024x102461b34d48dd8da25adadcf6785b4449a7.webp)

    実際の表示：[Dark Floating Badge with Avatars](/templates/dark-floating-google-reviews-badge-with-avatars/)

**ソーシャルフィードウォール**は、Feedレイアウトにセクションやページの全幅を与えたものです。ソースから集めたすべてのコンテンツを1つのグリッドにまとめたもので、アプリが以前フィードと呼んでいたものにあたります。1つのウィジェットに複数のソースをまとめると（下の[コンボウィジェット](#コンボウィジェット)をご覧ください）、Instagramの投稿、レビュー、カスタムのエントリーを並べて表示できます。

**Wall of love**は、フィードレイアウトをページ全体の規模で使うものです。集めたレビューと推薦コメントのすべてを、ご自身のサイトの1ページにまとめたもので、いわゆるオールインワンのレビューページにあたります。[Wall of Love](/templates/wall-of-love/)のテンプレートから始めて、セクションではなく1ページを割り当ててください。

すべてのレイアウトは[テンプレートライブラリ](/templates/)で実際に動作するウィジェットとしてご覧いただけます。

## 評価バッジ

**バッジ**は、レビュー自体ではなく集計された評価を表示します。平均スコア、星、レビュー件数をコンパクトなバーにまとめてページの端に固定するため、1つ埋め込むだけでサイト全体をカバーできます。

作成方法は2つあります。[テンプレート](/docs/widgets/templates/)から '**Badge**' のテンプレートを適用するか、[AIデザイン](/docs/widgets/ai-design/)に作りたいバッジを説明します（例：「*ページ右下にGoogleレビューのフローティングバッジを作成して*」）。どちらの方法でも、表示する隅・色・サイズはあとから '**Settings**' や追加のプロンプトで調整できます。

バッジからリンクを設定することもできます。元のレビューのソースを指定すればクリックでGoogleやFacebookのページが開き、任意のURLを指定することもできます。

## コンボウィジェット

**コンボウィジェット**は、複数のソースから同時にコンテンツを取得するウィジェットです。1つのウィジェットでInstagramの投稿、Facebookの投稿、Googleのクチコミをまとめて表示できます。専用のウィジェットの種類があるわけではありません。'**Bulk sources setup**' で複数のプラットフォームを選び、ウィジェットを作成する前にソースの詳細を設定できます。既存のウィジェットの場合は、'**Sources**' タブを開き、表示したい接続済みのソースをすべて有効にします。

![Instagram、TikTok、Threads、YouTubeを選択したBulk sources setupの画面](https://embedsocial.com/images/docs/widget-types/widgets-combo-sources.jpg)

ソースは自由に組み合わせられます。複数のプラットフォームの投稿、複数のレビューソースのレビュー、レビューと投稿の組み合わせ、同じ企業の複数のロケーションなどです。各ソースはプランの利用枠で1件ずつカウントされ、埋め込みコードは変わらないため、公開中のウィジェットは埋め込み直しなしで追加したソースの表示を始めます。

![2つ以上のソースに接続されたウィジェットが並ぶWidgetsのページ](https://embedsocial.com/images/docs/widget-types/widgets-combo-result.jpg)

## フローティングウィジェットを作成する方法

どのウィジェットでもフローティング表示にできます。切り替えは専用のウィジェットの種類ではなく、ウィジェットの設定にあります。

:::steps
1. **Settingsを開きます。** ウィジェットエディタで左側のレールの '**Settings**' をクリックします。
2. **表示位置をFloatingにします。** '**Widget position**' で '**Inline**' ではなく '**Floating**' を選びます。
3. **フローティングする位置を選びます。** '**Float position**' で '**Bottom right**' などの隅を選ぶと、プレビューにその位置で固定されたウィジェットが表示されます。
![Widget positionがFloating、Float positionがBottom rightに設定され、プレビューでバッジがフローティング表示されている設定パネル](https://embedsocial.com/images/docs/widget-types/1-floating-widget-position.jpg)
4. **動作を調整します（任意）。** '**Show widget once per session**' をオンにすると、ページを表示するたびにポップアップが再表示されることはありません。
:::

> Inlineの場合は、ウィジェットを表示したい場所に埋め込みコードを貼り付ける必要があります。Floatingの場合はウィジェットが自分で位置を決めるため、コードはページ内のどこにあっても構いません。

使うウィジェットを選びませんか？[テンプレートライブラリを見る](/templates/)、または[無料トライアルを開始](/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget&lang=ja)してください。

## ウィジェットの種類に関するよくある質問

**ウィジェットを作成したあとでレイアウトを変更できますか？**

はい。別の[テンプレート](/docs/widgets/templates/)を適用するか、[AIデザイン](/docs/widgets/ai-design/)に新しいレイアウトを依頼してください。ソースとフィルターはそのまま維持されます。

**1つのウィジェットにいくつのソースをまとめられますか？**

接続しているソースの数だけまとめられます。プランで制限されるのはアカウント全体のソース数であり、1つのウィジェットで使えるソース数ではありません。

**ソースを追加したり表示位置を変更したりしたら、埋め込み直しが必要ですか？**

いいえ。埋め込みコードは変わらないため、変更は公開中のサイトに自動的に反映されます。

**フローティングポップアップとバッジの違いは何ですか？**

どちらもページ上に浮かせて表示します。ポップアップは投稿やレビューを表示し、バッジはスコアを示すコンパクトな評価バーです。

**フローティングウィジェットの埋め込みコードはどこに置けばよいですか？**

ページ内のどこでも構いません。フローティングウィジェットは自分で位置を決めるため、コードの場所は影響しません。

## 次のステップ

[テンプレート](/docs/widgets/templates/)で出発点となるデザインを選び、'**Sources**' タブでソースを指定して、[フィルター](/docs/widgets/filters/)で表示する投稿を絞り込みましょう。

> ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、[support@embedsocial.com](mailto:support@embedsocial.com) までメールをお送りください。喜んでサポートいたします 🙏