Okoeウィジェットの設置ガイド【コピペで完了】
お客様の声を集めたら、次はWebサイトに表示する番です。しかし「レイアウトを自分で組むのは大変」「エンジニアに依頼する時間がない」と感じる方も多いのではないでしょうか。
Okoe（オコエ）なら、管理画面で生成されるHTMLタグを貼り付けるだけ。コーディング不要で、お客様の声をWebサイトに埋め込めます。
この記事では、ウィジェットの設置手順と5種類のデザインの使い分け、効果を高める設定のコツを解説します。
ウィジェット設置の3ステップ
ステップ1：ウィジェットを作成する
Okoeの管理画面にログイン
左メニューから「ウィジェット」を選択
「新規作成」ボタンをクリック
ウィジェットの名前（管理用）と表示タイプを選択
ステップ2：デザインをカスタマイズする
ウィジェットの作成画面では、以下の設定をカスタマイズできます。
表示タイプ：5種類から選択（後述）
テーマカラー：ブランドカラーに合わせてカスタマイズ
表示するテスティモニアル：タグでフィルタリングして、ページに合った声だけを表示
表示件数：一度に表示する件数を指定
プレビュー画面でリアルタイムに確認しながら調整できます。
ステップ3：HTMLタグを貼り付ける
設定が完了したら、「埋め込みコード」タブに表示されるHTMLタグをコピーします。
あとは、Webサイトの表示したい場所にこのタグを貼り付けるだけです。WordPressならカスタムHTMLブロック、Wixならhtml埋め込み、STUDIOならiframeで設置できます。
5種類のウィジェットと使い分け
Okoeには5種類のウィジェットデザインが用意されています。ページの目的やデザインに合わせて選びましょう。
1. カルーセル
スライド形式で複数のお客様の声を省スペースに表示します。自動再生にも対応。
おすすめの場所：トップページのセクション、LP
特徴：限られたスペースで多くの声を見せたいときに最適
2. グリッド
格子状に並べて一覧性を重視したレイアウト。多くの声を一度に表示できます。
おすすめの場所：お客様の声専用ページ
特徴：件数が多いほどインパクトが増す
3. リスト
縦に並べるシンプルなリスト表示。長文のコメントも読みやすく表示されます。
おすすめの場所：ブログサイドバー、導入事例ページ
特徴：テキスト量が多いレビューに向いている
4. メイソンリー
Pinterest風のタイル型レイアウト。カードの高さが自動調整され、動きのあるデザインになります。
おすすめの場所：お客様の声専用ページ、ポートフォリオ系サイト
特徴：ビジュアル重視のサイトに映える
5. ハイライト
特に印象的な1件のお客様の声を大きく目立たせて表示します。
おすすめの場所：料金ページ、購入ボタンの近く
特徴：「最も響く一声」をピンポイントで見せたいときに
効果を高める設置のコツ
ページの目的に合った声を選ぶ
すべてのお客様の声を一律に表示するのではなく、タグを使ってページごとに表示する声を変えましょう。
料金ページ：コストパフォーマンスに言及した声
機能紹介ページ：その機能に関する声
業種別LP：同じ業種の顧客の声
CTA（行動喚起）の近くに配置する
「無料で始める」「お問い合わせ」ボタンのすぐ上にお客様の声を配置すると、最後の一押しとして効果的です。ハイライトウィジェットとの組み合わせがおすすめです。
定期的に新しい声を追加する
ウィジェットは管理画面で承認されたテスティモニアルを自動的に反映します。新しいお客様の声を定期的に追加すれば、Webサイト側のHTMLを変更する必要はありません。常に最新の声が表示されます。
表示速度への影響
Okoeのウィジェットは非同期で読み込まれるため、ページの表示速度にほとんど影響しません。Core Web Vitalsへの影響を最小限に抑える設計になっています。
よくある質問
WordPressに対応していますか？
はい。カスタムHTMLブロックにタグを貼り付けるだけで設置できます。テーマやプラグインとの相性問題もありません。
1ページに複数のウィジェットを置けますか？
はい。異なるタグでフィルタリングしたウィジェットを複数配置できます。たとえば、ページ上部にカルーセル、下部にグリッドという構成も可能です。
スマートフォンでも正しく表示されますか？
すべてのウィジェットがレスポンシブ対応です。画面サイズに合わせて自動的にレイアウトが調整されます。
まとめ
Okoeのウィジェット設置は、3ステップで完了します。
管理画面でウィジェットを作成する
デザインと表示するテスティモニアルをカスタマイズする
HTMLタグをWebサイトに貼り付ける
5種類のウィジェットから、ページの目的に合ったデザインを選んで、お客様の声の効果を最大化しましょう。まだOkoeを使っていない方は、無料プランからお試しください。
