グーペ（Goope）にお客様の声を埋め込む方法【フリーページで高さ自動調整まで】
グーペで作った店舗サイトにお客様の声を埋め込む手順を解説。フリーページと外部パーツの使い分け、scriptタグで高さを自動調整する方法、飲食店・サロン向けの配置のコツまでまとめました。
お客様の声・口コミ活用の専門家チーム
✓この記事でわかること
「グーペで店のサイトを作ったけれど、お客様の声を載せる場所がない」
グーペ（Goope）は、GMOペパボが提供する店舗向けのホームページ作成サービスです。飲食店・美容室・サロン・教室など、実店舗の集客サイトとして使われています。メニュー・クーポン・予約・カレンダーといった店舗に必要な機能が最初から揃っているのが強みです。
一方で、「お客様の声」専用の機能はありません。ただしグーペはHTMLを自由に書ける枠が用意されているため、外部ツールのウィジェットをそのまま置けます。しかも、後述するとおりscriptタグが使えるので高さの自動調整までできる——これはAmeba OwndやGoogleサイトにはない利点です。
グーペにお客様の声を載せる3つの方法
方法1: お知らせ・ブログ機能で書く
グーペの「お知らせ」や「ブログ」に、いただいた声を記事として投稿する方法です。
メリット：
- 追加のツールがいらない
- 記事なので検索エンジンに読まれる
- 写真も一緒に載せられる
デメリット：
- 声が時系列の記事に埋もれる。一覧でまとめて見せられない
- 古い声ほど見つけてもらえなくなる
- 星評価を表現できない
- 声が増えるほど、投稿の手間がそのまま増える
向いている人： 声と一緒に施術例・料理写真などのストーリーを見せたい方。
方法2: フリーページに手打ちで並べる
グーペの「フリーページ」に、届いた声をHTMLやテキストで直接書く方法です。
メリット：
- 一覧ページとしてまとめられる
- レイアウトを自分で組める
- ページのURLが固定なので、メニューからリンクできる
デメリット：
- 声が増えるたびにHTMLを書き足す必要がある
- 体裁を揃えるのに毎回時間がかかる
- 掲載の同意を取ったかどうかを管理する場所がない
- スマートフォンでの見え方を自分で調整しないといけない
向いている人： HTMLに抵抗がなく、掲載する声を5〜10件で固定できる方。
方法3: 外部ツール＋フリーページ埋め込み（おすすめ）
こえポストで声を集め、埋め込みコードをフリーページに貼る方法です。
メリット：
- 収集→承認→表示までが自動でつながる
- 新しい声を承認すると、グーペを触らなくてもサイトに反映される
- 星評価・お名前・肩書きが整った形で表示される
- scriptタグが使えるので、件数が増えても高さが自動で合う
- QRコードを店頭に置いて、その場で声を集められる
デメリット：
- 無料プランには掲載件数の上限がある（こえポストは10件まで無料）
- 埋め込み枠の中のデザインは、グーペ側からは細かく変えられない
向いている人： これから継続的に声を集めたい店舗。
こえポストは10件まで無料。フォーム作成から埋め込みまで5分ほどです。
3つの方法を比較
| 比較項目 | お知らせ・ブログ | フリーページ手打ち | 外部ツール埋め込み | |---------|---------------|-----------------|-----------------| | 一覧で見せられるか | × | ○ | ◎ | | 更新の手間 | 毎回投稿 | 毎回HTML編集 | 自動 | | 星評価 | × | 手作業で表現 | ◎ | | 高さの自動調整 | — | — | ◎ | | 声の収集 | 別途必要 | 別途必要 | ツール内で完結 | | 掲載同意の管理 | 手元で管理 | 手元で管理 | フォームで取得 |
グーペにこえポストを埋め込む手順
ステップ1: こえポストに登録する
無料登録します。メールアドレスだけで、クレジットカードは不要です。
ステップ2: 収集フォームを作る
ダッシュボードの「フォーム作成」から業種を選びます。飲食店・美容室・サロン・教室など、業種ごとに適した質問がセットされた状態で作られます。
ステップ3: お客様に依頼する
グーペを使っている店舗なら、次の3つの導線が効きます。
- 会計時にQRコードを見せる。QRコード作成ツールでフォームURLからその場で作れます
- 予約完了メールやLINEに、来店後のお願いとしてURLを入れる
- レシートやショップカードにQRコードを印刷する
依頼の文面はレビュー依頼文の自動作成ツールで作れます。来店直後に依頼するほど回答率は上がります。
ステップ4: 届いた声を承認する
ダッシュボードで内容を確認し、掲載してよいものだけ「承認」を押します。承認していない声はサイトに出ません。
ステップ5: 埋め込みコードをコピーする
「ウィジェット」画面で表示形式を選びます。店舗サイトなら次の使い分けがおすすめです。
| 表示形式 | 向いている場所 | |---------|-------------| | カード一覧（Wall） | 「お客様の声」の専用ページ | | スライダー（Carousel） | トップページ、メニューページの下 | | ポップアップ | 予約ページ（申し込み直前の後押し） |
グーペではscriptタグ版のコードが使えます。 こちらを選ぶと、声を増やしても高さが自動で合うため、あとからグーペを編集し直す必要がありません。
ステップ6: グーペのフリーページに貼る
- グーペの管理画面にログインする
- 左メニューから「フリーページ」を開く
- 「新規作成」（既存ページに追加する場合はそのページの「編集」）
- 本文の編集エリアで、HTMLを直接編集するモードに切り替える
- 声を表示したい位置にコピーしたコードを貼り付ける
- ページタイトルとURLを設定して「保存」
- 必要ならメニューに追加して、サイト内から辿れるようにする
保存したら、実際の公開URLを開いて表示を確認してください。
トップページやメニューページなど、フリーページ以外に置きたい場合は「外部パーツ」機能から追加できます。設置できる位置はテンプレートによって変わるので、プレビューで確認しながら調整してください。
グーペで気をつけたいこと
編集モードを確認する
フリーページの編集画面が「見たまま編集」の状態だと、貼り付けたコードがそのまま文字として表示されてしまうことがあります。コードを貼るときは、HTMLを直接編集できるモードに切り替えてください。貼ったコードが画面にそのまま文字で出ていたら、これが原因です。
見出しはグーペ側で書く
「お客様の声」という見出しは、埋め込みの上にグーペの見出しとして置いてください。テンプレートのフォントと色がそのまま適用されるので、埋め込み部分だけ浮いて見えるのを防げます。見出しをテキストで書いておくと、検索エンジンにもページの主題が伝わります。
本文にも要約を書いておく
埋め込みの中身は、ページのコンテンツとしては検索エンジンに評価されにくいのが一般的です。「○○（店名） 口コミ」で検索されたときに拾ってもらうには、埋め込みの前後に文章を置くのが有効です。
たとえば「これまでにいただいたお客様の声を掲載しています。ご来店のきっかけや、施術後の感想などをそのまま載せています」といった数行でも効果があります。
スマートフォンで確認する
グーペのサイトは、来店前のお客様がスマートフォンで見るケースが大半です。埋め込みもスマートフォンでは1列表示になるので、公開後に必ず実機で確認してください。
業種別の置き場所
飲食店
メニューページの下が効きます。料理の写真を見て「おいしそう」と思った直後に、実際に食べた人の言葉が続くと来店につながります。予約ボタンがあるなら、そのすぐ上に置いてください。
美容室・サロン
料金ページの直下です。金額を見た瞬間がいちばん迷いの大きい場所なので、そこに「この値段を払った人の感想」があると効果的です。サロンの口コミを増やす7つの方法もあわせてご覧ください。
教室・スクール
体験レッスン申し込みページの手前です。保護者や受講者の声は、申し込みを決める最後の一押しになります。
整体・接骨院
症状別のページごとに、その症状で通われた方の声を出すのが理想です。ウィジェットを複数作れば、ページごとに違う声を表示できます。
よくある質問
Q: 貼ったコードが文字のまま表示されます
A: 編集画面が「見たまま編集」モードになっています。HTMLを直接編集できるモードに切り替えてから貼り直してください。
Q: scriptタグとiframeコード、どちらを使えばいいですか？
A: グーペではscriptタグ版をおすすめします。声の件数が増えても高さが自動で合うため、あとから調整する必要がありません。うまく動かない場合はiframeコードに切り替えて、高さを手動で指定してください。
Q: トップページに置けますか？
A: 置けます。フリーページ以外に設置したい場合は「外部パーツ」機能を使います。設置できる位置はテンプレートによって異なるため、プレビューで確認してください。
Q: サイトが重くなりませんか？
A: 埋め込みは遅延読み込みで、画面に入るまで読み込まれません。ページ本体の表示速度への影響はごくわずかです。
Q: Google口コミと両方やる意味はありますか？
A: あります。Google口コミは検索・マップからの発見に効き、自社サイトの声はサイトに来た人を予約・来店まで運ぶ役割を持ちます。役割が違うので、両方あるのが理想です。
Q: お客様の声を勝手に載せてよいですか？
A: 掲載の同意は必ず取ってください。こえポストのフォームには掲載可否の項目があり、同意した方の声だけを承認できます。あわせてステルスマーケティング規制の解説もご確認ください。
Q: あとでサイトを別のサービスに移しても使えますか？
A: 使えます。同じコードをWordPressやSTUDIOなどにも貼れます。対応プラットフォーム一覧をご覧ください。
まとめ
グーペは、埋め込みに関しては制約が少ない部類です。
- 「フリーページ」にコードを貼るのが基本。トップページなどは「外部パーツ」
- scriptタグが使えるので、高さの自動調整までできる
- 編集画面はHTMLを直接編集するモードに切り替える
- 見出しと数行の説明はグーペ側にテキストで書いておく
店舗サイトでは、来店を迷っている人の背中を押すのがお客様の声の役割です。会計時のQRコードから声を集める流れまで作ってしまえば、あとは勝手にたまっていきます。
関連記事
この記事を書いた人
こえポスト編集部
お客様の声・口コミマーケティングの専門チーム。サロン・クリニック・士業など、スモールビジネスが「お客様の声」を集めて売上につなげるための実践ノウハウを発信しています。
お客様の声の集め方Tips
お客様の声の効果的な集め方・活用方法を週1回お届け。 業種別の成功事例や、すぐ使えるテンプレートも配信します。