Googleサイトにお客様の声を埋め込む方法【JavaScriptが動かない環境での正解】
Googleサイト（Google Sites）にお客様の声を埋め込む手順を解説。「埋め込み」機能の使い方、scriptタグが動かない理由と回避策、HTTPS必須の条件、高さ調整のコツまでまとめました。
お客様の声・口コミ活用の専門家チーム
✓この記事でわかること
「Googleサイトで作った社内向け・学校向けのページに、利用者の声を載せたい」
Googleサイト（Google Sites）は、Googleアカウントさえあれば無料で使え、Googleドライブやスプレッドシートとそのままつながるのが強みです。学校・自治体・士業・小規模チームのサイトで採用されています。
ただし、埋め込みに関してはかなり制約の強い環境です。ほかのサイトビルダー向けに配られている埋め込みコードをそのまま貼っても、多くの場合は動きません。この記事では、Googleサイトで確実に表示させる方法を説明します。
先に結論：Googleサイトでは「iframe」を使う
Googleサイトの埋め込み機能には、はっきりした制限が3つあります。
| 制限 | 内容 |
|------|------|
| JavaScriptが動かない | 貼り付けた <script> は実行されません |
| HTTPS必須 | http:// のURLは埋め込めません |
| 高さは手動 | 中身に合わせた自動リサイズはできません |
多くの埋め込みツールは、高さが自動で合うようにJavaScriptを使ったコードを標準で配っています。Googleサイトではこれが動きません。 貼ったのに枠が空のまま、という現象はほぼこれが原因です。
代わりに、iframeタグだけで完結するコードを使います。iframeはHTMLの標準機能なのでJavaScriptを必要とせず、Googleサイトでも問題なく表示されます。
こえポストのウィジェット画面には「script」と「iframe」の2つのタブがあります。Googleサイトでは必ず「iframe」のほうをコピーしてください。
Googleサイトにお客様の声を載せる3つの方法
方法1: テキストで直接書く
Googleサイトのテキストボックスに、届いた声を打ち込む方法です。
メリット：
- 追加の準備がいらない
- Googleサイトのテーマがそのまま適用され、統一感が出る
デメリット：
- 声が増えるたびに編集して公開し直す必要がある
- 星評価やアイコンを表現できない
- 誰の声か・掲載の同意を取ったかを管理する場所がない
向いている人： 掲載したい声が数件で、更新頻度が低い方。
方法2: スプレッドシートを埋め込む
Googleフォームで声を集め、回答が入るスプレッドシートをそのまま埋め込む方法です。Googleサイトならではの選択肢です。
メリット：
- Googleフォームでの収集からGoogleサイトへの表示まで、Googleだけで完結する
- 回答が増えると表示も自動で増える
- 追加費用が一切かからない
デメリット：
- 見た目が表そのもので、お客様の声としては読みづらい
- 掲載してよい回答とそうでない回答を、シート側で分ける手間がかかる
- 途中の列（メールアドレスなど）を隠す設定が煩雑
- スマートフォンでは横スクロールが必要になりがち
向いている人： 社内向けなど、見た目より運用の手軽さを優先する場面。
方法3: 外部ツール＋iframe埋め込み（おすすめ）
こえポストで声を集め、iframeコードをGoogleサイトに貼る方法です。
メリット：
- 収集から表示までが自動でつながる
- 掲載してよい声だけを承認でき、そのまま表示に反映される
- 星評価・お名前・肩書きが整った形で並ぶ
- JavaScriptを使わないiframeなので、Googleサイトの制約に引っかからない
デメリット：
- 無料プランには掲載件数の上限がある（こえポストは10件まで無料）
- 高さは手動で指定する必要がある（Googleサイト側の制限のため）
向いている人： 社外に向けて公開するサイトで、見た目を整えたい方。
3つの方法を比較
| 比較項目 | テキスト直接 | スプレッドシート埋め込み | 外部ツール＋iframe | |---------|------------|---------------------|-----------------| | 費用 | 無料 | 無料 | 無料〜 | | 更新の手間 | 毎回手動 | 自動 | 自動 | | 見た目 | ○ | × | ◎ | | 掲載可否の管理 | 手元で管理 | 手作業で選別 | 承認ボタンで完結 | | スマホ表示 | ○ | △ | ◎ | | 星評価 | × | △ | ◎ |
Googleサイトにこえポストを埋め込む手順
ステップ1: こえポストに登録する
無料登録します。Googleアカウントとは別に、メールアドレスで登録します。
ステップ2: 収集フォームを作る
ダッシュボードの「フォーム作成」から、業種を選びます。質問が入った状態でフォームができるので、必要なら文言を調整します。
ステップ3: 回答を依頼する
フォームのURLをメールやLINEで送ります。文面はレビュー依頼文の自動作成ツールで作れます。
ステップ4: 届いた声を承認する
ダッシュボードで内容を確認し、掲載してよいものだけ「承認」します。
ステップ5: iframeコードをコピーする
「ウィジェット」画面で表示形式を選び、「iframe」タブのコードをコピーします。scriptタブのコードはGoogleサイトでは動きません。
コードは次のような形をしています。
<iframe
src="https://koepost.com/w/xxxxxxxx"
title="お客様の声"
width="100%"
height="600"
style="border:none;overflow:hidden;"
loading="lazy"
></iframe>
ステップ6: Googleサイトに貼る
- Googleサイトの編集画面を開く
- 右側のパネルで「挿入」タブを選ぶ
- 「埋め込む」をクリック
- 上部のタブを「埋め込みコード」に切り替える（「URL」ではありません）
- コピーしたiframeコードを貼り付けて「次へ」
- プレビューが表示されるので「挿入」
- 挿入された枠を、ハンドルをドラッグして必要な高さまで広げる
- 右上の「公開」
手順7を飛ばさないでください。 Googleサイトの埋め込み枠は初期状態でかなり小さく、そのままだと中身の上部しか見えません。
Googleサイトでつまずきやすいポイント
「URL」タブではなく「埋め込みコード」タブ
「埋め込む」を押すと最初に「URL」タブが開きます。ここにウィジェットのURLを入れても、Googleサイトはページのプレビューカードを作ろうとするだけで、ウィジェットとしては表示されません。必ず「埋め込みコード」タブに切り替えてください。
枠の高さは中身に合わない
Googleサイトの埋め込み枠は、中のコンテンツに合わせて伸びません。枠のサイズがそのまま表示領域になり、はみ出た部分は枠内スクロールになります。
表示形式ごとの目安です。
| 表示形式 | 高さの目安 | |---------|----------| | カード一覧（Wall） | 600〜900px | | スライダー（Carousel） | 320〜400px |
掲載件数を増やしたら、枠も広げ直してください。
スマートフォンでの見え方を必ず確認する
Googleサイトはスマートフォンでは1カラムになり、埋め込みの中身も1列に折り返されて縦に伸びます。PCで合わせた高さでは足りなくなるため、公開後にスマートフォンで実際に開いて確認してください。編集画面のプレビュー切り替えでもある程度は確認できます。
社内限定公開のサイトでも表示される
Googleサイトを組織内限定で公開している場合でも、埋め込み自体は表示されます。ただしウィジェットの中身は誰でも見られるURLなので、社外に出したくない内容は載せないでください。
どんな場面で使えるか
学校・スクールのサイト
保護者や卒業生の声は、入学・入塾を検討している家庭がいちばん知りたい情報です。募集要項ページや説明会案内の手前に置くと効きます。
士業・コンサルティング
依頼を検討している人にとって、実績と依頼者の声は判断材料そのものです。料金ページの直下に配置すると、金額を見た直後の不安をやわらげられます。
自治体・非営利団体の事業ページ
参加者アンケートの結果を、表ではなく声のかたちで見せると、次回の参加者募集につながります。
社内ポータル
社内研修や制度の利用者コメントを集めて掲載する使い方もできます。この場合はフォームのURLを社内に限定して配布します。
よくある質問
Q: 貼り付けたのに何も表示されません
A: scriptタグ版のコードを貼っていないか確認してください。GoogleサイトではJavaScriptが動かないため、iframeコードを使う必要があります。また、埋め込むURLが https:// で始まっているかも確認してください。http:// は埋め込めません。
Q: 上のほうしか見えません
A: 埋め込み枠が小さいままです。挿入した枠を選択し、ハンドルをドラッグして高さを広げてください。
Q: 枠の中にスクロールバーが出ます
A: 枠の高さが中身より小さいときの挙動です。高さを広げると消えます。
Q: Googleサイトの無料版でも使えますか？
A: 使えます。「埋め込む」機能は個人のGoogleアカウントでも利用でき、追加費用はかかりません。
Q: SEOには効きますか？
A: iframeの中身は、埋め込み元ページのコンテンツとしては評価されにくいのが一般的です。検索からの流入を狙うなら、ページ本文にも要約や見出しをテキストで書いておくことをおすすめします。口コミとSEOの関係はGoogle口コミのSEO効果で詳しく解説しています。
Q: あとで別のサイトに移行しても使えますか？
A: 使えます。同じコードをWordPressやSTUDIOなどにも貼れます。対応プラットフォーム一覧をご覧ください。
まとめ
Googleサイトは埋め込みの自由度が低い環境ですが、iframeなら確実に動きます。
<script>は実行されない。iframeコードを使う- 埋め込みURLはHTTPS必須
- 「URL」タブではなく「埋め込みコード」タブ
- 枠の高さは手動で広げる。スマホでも必ず確認する
制限を先に知っておけば、設置自体は数分で終わります。
関連記事
この記事を書いた人
こえポスト編集部
お客様の声・口コミマーケティングの専門チーム。サロン・クリニック・士業など、スモールビジネスが「お客様の声」を集めて売上につなげるための実践ノウハウを発信しています。
お客様の声の集め方Tips
お客様の声の効果的な集め方・活用方法を週1回お届け。 業種別の成功事例や、すぐ使えるテンプレートも配信します。