TAIKOBAN/ヘルプセンター
← 戻る

ウィジェットの種類・埋め込み方法・カスタマイズ

ウィジェットは、承認済みの声をあなたのサイトに表示するための埋め込みパーツです。 スクリプトタグ1行で設置でき、Shadow DOM を使った軽量設計（gzip後5KB未満）で サイトの表示速度に影響しません。 この記事では、全ウィジェットタイプの特徴と設置方法を詳しく解説します。

ウィジェットの種類

TAIKOBAN では用途に合わせて複数のウィジェット表示形式を選べます。

カルーセル

横スクロールで声を順番に表示する形式です。 LP（ランディングページ）のセクション間やサービス紹介ページに最適です。 自動再生のオン/オフ、スクロール速度の調整ができます。 スマートフォンではスワイプ操作に対応しています。

グリッド

カード形式で複数の声を格子状に並べて表示します。 多くの声を一度に見せたい場合に適しています。 レスポンシブ対応で、PC では3列、タブレットでは2列、スマートフォンでは1列に自動調整されます。 実績紹介ページや「お客様の声」専用ページにおすすめです。

リスト

縦に並べてシンプルに表示する形式です。 サイドバーやブログ記事内の引用として埋め込む場合に適しています。 コンパクトな表示で、限られたスペースでも効果的に声を見せられます。

声のギャラリー

専用ページで全ての承認済みの声をまとめて閲覧できる形式です。 Masonry レイアウト（Pinterest風）で表示され、声の長さに応じて自動配置されます。 サイトのナビゲーションに「お客様の声」リンクを追加し、 このページに誘導する使い方が一般的です。 詳細は声の管理もご参照ください。

バッジ

平均評価と件数をコンパクトなバッジで表示します。 ヘッダーやフッター、CTAボタンの近くに設置して信頼性を補強する使い方に適しています。 例: 「4.8 / 120件の声」のような表示です。

フローティング

ページの隅に小さなウィジェットを常時表示する形式です。 クリックすると声の一覧が展開されます。 ページのレイアウトを変更せずに声を表示したい場合に便利です。

単一カード

1件の声を1枚のカードとして表示します。 特にハイライトした声をピンポイントで掲載したい場合に使います。 ブログ記事内の「お客様の声」引用や、LP のヒーローセクション近くに効果的です。

スライダー

カルーセルに似ていますが、1件ずつフェードイン/アウトで切り替わる形式です。 よりシンプルな見た目で、ヒーローセクションの背景として使う場合に適しています。

テキストのみ

写真や星評価を省き、テキスト本文と投稿者名だけを表示する形式です。 ミニマルなデザインのサイトや、テキスト引用として使いたい場合に適しています。

動画ウィジェット

動画のお客様の声を専用のプレーヤー付きで表示する形式です。 プロプラン以上で動画の声がある場合に利用できます。 サムネイル付きのグリッド表示で、クリックするとインラインで再生されます。

埋め込みコードの取得

ダッシュボードの「プロジェクト設定」画面を開き、「ウィジェット」セクションに移動します。 以下の手順で埋め込みコードを取得してください。

  1. 表示形式（カルーセル、グリッドなど）を選択
  2. カスタマイズオプションを設定
  3. プレビューで表示を確認
  4. 「コードをコピー」ボタンをクリック
  5. サイトの HTML にコードを貼り付け

埋め込みコードの例:

<div data-taikoban="あなたのウィジェットID" style="min-height: 200px;"></div>
<script src="https://taikoban.app/widget.js" async defer></script>

async と defer 属性により、ウィジェットの読み込みが ページ本体の表示をブロックしません。

技術的な仕組み

TAIKOBAN のウィジェットは以下の技術で高いパフォーマンスと互換性を実現しています。

  • Shadow DOM -- ウィジェットの CSS があなたのサイトの CSS と干渉しません。逆も同様です
  • gzip 後 5KB 未満 -- ページの LCP（Largest Contentful Paint）や CLS（Cumulative Layout Shift）に影響を与えません
  • Vercel Edge CDN 配信 -- 日本国内のエッジサーバーから配信され、5分間キャッシュされます
  • 遅延読み込み -- ウィジェットはページの基本コンテンツが読み込まれた後に描画されます
  • 事前コンテナ高さ確保 -- レイアウトシフトを防ぐため、描画前にコンテナの高さを予約します

カスタマイズオプション

ウィジェットの見た目は以下の項目でカスタマイズできます。

  • テーマカラー -- ブランドカラーに合わせて変更可能。ヘッダーやアクセントに使用されます
  • 表示件数 -- 最大表示件数を指定。例: カルーセルで最新5件のみ表示
  • タグフィルタ -- 特定のタグが付いた声のみ表示。例: 「接客対応」タグの声だけを表示
  • 背景色 -- 透明・白・ダークから選択。サイトの背景に合わせて選んでください
  • 角丸 -- カードの角丸サイズを調整（0px〜16px）
  • フォントサイズ -- 小・中・大から選択
  • 星評価の表示/非表示 -- 星評価を表示するかどうか
  • 投稿日の表示/非表示 -- 投稿日を表示するかどうか

レスポンシブ対応

ウィジェットは自動的にレスポンシブ対応します。 埋め込み先のコンテナ幅に応じて以下のように自動調整されます。

  • 320px〜640px（スマートフォン） -- 1列表示
  • 641px〜1024px（タブレット） -- 2列表示
  • 1025px以上（PC） -- 3列表示

追加の CSS や設定は不要です。

表示の確認とデバッグ

埋め込み後、ページを開くとウィジェットが自動的に読み込まれます。 表示されない場合は以下を確認してください。

  • 承認済みの声が1件以上あるか -- 未承認の声だけではウィジェットは表示されません
  • data-taikoban が正しいか -- ダッシュボードのウィジェット ID と一致しているか確認
  • セキュリティプラグインにブロックされていないか -- taikoban.app をホワイトリストに追加
  • CSP ヘッダーが設定されていないか -- script-src に taikoban.app を追加

詳しいトラブル対応はトラブルシューティングをご参照ください。

感情分析の仕組み

TAIKOBAN のアナリティクスでは、星評価をもとに声の感情を自動分類しています。 以下のロジックでポジティブ・ニュートラル・ネガティブを判定します。

感情スコアの算出

星評価（1〜5）を -1.0 〜 +1.0 の感情スコアに線形変換します。

感情スコア = (星評価 - 3) / 2

★1 → -1.0
★2 → -0.5
★3 →  0.0
★4 → +0.5
★5 → +1.0

分類しきい値

  • ポジティブ: スコア > 0.3（実質★4〜★5）
  • ニュートラル: -0.3 〜 0.3（実質★3）
  • ネガティブ: スコア < -0.3（実質★1〜★2）

日別の感情トレンドでは、その日に投稿された全評価の平均スコアを使用し、 上記のしきい値に基づいてバーの色を決定しています。 感情分布チャートでは、個別の評価ごとにポジティブ・ニュートラル・ネガティブに分類し、 割合を表示します。

関連ページ

ウィジェット | ヘルプセンター | TAIKOBAN