レビューウィジェットをサイトに埋め込む方法

2026-02-12·5分で読めます·

レビューウィジェットテスティモニアルウェブサイト

レビューウィジェットとは

レビューウィジェットとは、顧客のレビューやテスティモニアルをウェブサイトに動的に表示するための埋め込みコンポーネントです。HTMLにコードを数行追加するだけで、ランディングページやブログに「お客様の声」セクションを設置できます。

手動でHTMLを書いてテスティモニアルを掲載する方法と比べると、ウィジェットには以下のメリットがあります。

新しいテスティモニアルを承認するだけで自動的にサイトへ反映される
カルーセル・ウォール・カードなど複数のデザインから選べる
モバイルレスポンシブに対応している
ページの読み込み速度への影響が最小限

主要なウィジェットの種類

カルーセル型

テスティモニアルが自動スライドで切り替わる形式です。複数の声をコンパクトに見せたい場合に適しています。ランディングページのファーストビュー下部に設置するのが一般的です。

ウォール・オブ・ラブ型

複数のテスティモニアルをグリッドやマソンリーレイアウトで一覧表示する形式です。「これだけ多くの人が使っている」という量感で社会的証明を強調できます。専用のテスティモニアルページや料金ページに向いています。

シングルカード型

1つのテスティモニアルを大きく・印象的に表示する形式です。特定の顧客の声を強調したい場合や、サービスの特定のベネフィットを訴求したいセクションで効果的です。

WordPressへの埋め込み手順

WordPressサイトへウィジェットを埋め込む場合、多くのツールがスクリプトタグを提供しています。詳しくは「JavaScriptウィジェットの作り方」も参考にしてください。

テスティモニアル管理画面でウィジェットを作成し、表示するテスティモニアルを選択する
生成された埋め込みコードをコピーする
WordPress の投稿・固定ページの編集画面を開く
「カスタムHTML」ブロックを追加してコードをペーストする
更新して表示を確認する

埋め込みコードの例（Koeの場合）

<div data-koe-widget="YOUR_WIDGET_ID"></div>
<script src="https://koecollect.com/embed.js" async></script>

YOUR_WIDGET_ID を実際のウィジェットIDに置き換えるだけで設置完了です。

詳しい埋め込み方法は「Webサイト埋め込み（iframe）の使い方」をご覧ください。

ノーコードツール（Wix・Squarespace）への対応

Wix や Squarespace などのウェブサイトビルダーでも、HTMLウィジェットまたは埋め込みコードを挿入する機能を持つプラットフォームであればレビューウィジェットを設置できます。主要なツールについては「口コミ収集ツール比較」で詳しく解説しています。

Wixの場合

「埋め込みHTML」要素（HTML iFrame）をページに追加し、上記の埋め込みコードを貼り付けます。

Squarespaceの場合

コードブロックを追加し、HTMLモードに切り替えて埋め込みコードをペーストします。

表示パフォーマンスへの影響

外部スクリプトを読み込む場合は、Core Web Vitals への影響に注意が必要です。Koe の embed.js は async 属性付きで読み込まれるため、ページ本体の描画をブロックしません。また、ウィジェットの初期化はDOMContentLoaded以降に行われるため、LCP（Largest Contentful Paint）への影響を最小限に抑えています。