STUDIO・ペライチにお客様の声を迷わず埋め込む手順3ステップ【2026年版】

STUDIOやペライチでホームページを作った。お客様から嬉しい声ももらった。あとは載せるだけ——のはずが、「Embedボックス」「タグ埋め込み」といった機能名を見た時点で手が止まる人は少なくありません。ノーコードツールは自由度が高い分、何を・どこに・どう貼るかの判断を自分でする必要があるからです。

私は業務効率化に特化したエンジニアとして、お客様の声を管理するサービス「Shinrai」を開発・運営しています。埋め込み機能を設計する過程でSTUDIO・ペライチ・WordPress・Wixそれぞれの仕様を実際に検証し、コピー1回で貼れる埋め込みコードの出し分けを実装しました。この記事では、その検証で分かった両サービスの埋め込み手順と、つまずきやすいポイントを整理します。

先に結論 — STUDIOとペライチ、それぞれの埋め込み方法

先に全体像です。両サービスとも「外部のコードを貼る」方法と「サービス標準の機能を使う」方法の2系統があり、選び方が変わります。

STUDIOには「お客様の声」専用のブロックが標準搭載されていません。そのため、STUDIOで声を載せる場合は基本的にEmbedボックスに外部のコードを貼るか、テキストブロックと画像ブロックを組み合わせて手作業でレイアウトするかの二択になります。一方ペライチは「お客様の声」ブロックが最初から用意されているため、件数が少なければコードを触らずに載せられます。この違いを知らずに「STUDIOにもお客様の声ブロックがあるはず」と探し続けてしまう人を、私はよく見てきました。

埋め込む前に決めておくこと — 声の入手方法と許諾

手順に入る前に、1つだけ確認してください。埋め込む声は、誰からどう許可を得たものかです。ここが曖昧なまま埋め込みだけ進めると、後から「載せていいと言った覚えがない」というトラブルに発展します。

声の入手経路は主に3つあります。

1. 自社のフォームやLINEで直接集めた声（許諾も同時に取れているので一番扱いやすい）
2. Googleマップの口コミを本人の許可を取って引用する声
3. 埋め込みツール経由でGoogleの口コミを自動表示する声（Places APIベースのツールなら規約上も正規ルート）

1と2は「誰が・いつ・どの文章の掲載を許可したか」を記録に残しておく必要があります。私が埋め込み機能と同じくらい台帳機能の設計に力を入れたのは、掲載後のトラブルの多くが「許可した／していない」の水掛け論から始まるのを実装前の調査で確認したからです。同意文のテンプレートと記録項目はお客様の声の掲載許諾はどう取る？同意文テンプレート付き完全ガイド【2026年版】にまとめています。Google口コミを引用する場合の依頼文例やスクショ転載がNGな理由は、Google口コミをサイトに載せる方法3選｜手順と注意点【2026年版】で解説しました。ここを飛ばして埋め込み作業だけ先に進めると、あとで貼り直す二度手間になります。

STUDIOに埋め込む3ステップ

STUDIOでの埋め込みは、Embedボックスという機能を使います。STUDIO公式ヘルプによると、Embedボックスを使うとHTML・CSS・JavaScriptのコードをページに追加でき、追加されたコードの内容に応じてiframeタイプかサンドボックスタイプのいずれかで動作します。

1. エディタの追加パネルからEmbedボックスをページに配置する。 声を表示したい位置（トップページの中段、料金表の直前など）にドラッグします。
2. 設定パネルの「埋め込みコード」欄に、埋め込み元から発行されたコードを貼り付ける。 口コミウィジェットサービスや自社で作った声の一覧ページのコードがここに入ります。
3. プレビューで表示を確認し、リンクの挙動をチェックする。 STUDIO公式の注意点として、Embedボックス内にリンク（aタグ）を貼る場合はtarget=”_top”またはtarget=”_blank”を属性に加える必要があるとされています。この指定が抜けていると、埋め込み枠の内側でリンク先が開いてしまい、ページ全体が崩れて見えるトラブルが起きます。

STUDIOにはページ単位・サイト単位でコードを追加できる「カスタムコード」という機能もあります。声を1件だけ載せるならEmbedボックスで十分ですが、複数ページに同じ埋め込みコードを繰り返し貼りたい場合は、カスタムコードで共通化しておくと更新のたびに全ページを直す手間が減ります。実装を検証した範囲では、Embedボックスは「ページ内の特定の場所」、カスタムコードは「ページ全体・サイト全体」という役割分担で覚えておくと迷いません。

ペライチに埋め込む2つの方法

ペライチは選択肢が2つあります。

方法1: 「お客様の声」ブロックに直接入力する

ペライチには「お客様の声」ブロックが標準で用意されています。編集画面の「ブロック追加」から選ぶだけで、コードを触らずに設置できます。ブロックは「文章＋画像」が1種、「文章＋画像（複数）」が3種の計4種類あり、ボーダーの有無や画像の見せ方が異なります。画像の縦横比によって表示形が変わることがあるため、写真館やサロンのようにお客様の顔写真を添える業種では、設置後に画像が意図通りの形で表示されているかをプレビューで確認しておくと安心です。

件数が少なく(目安として10件以下)、更新頻度も月1回程度であれば、コードを使わないこの方法が一番手間が少ないというのが私の見立てです。

方法2: タグ埋め込み機能で外部コードを貼る

口コミウィジェットサービスなど外部で生成したコードを表示したい場合は、ペライチの「タグの埋め込み」機能を使います。ペライチのヘルプセンターでは、この機能の詳細設定についてhead部分・body部分など埋め込み位置ごとの挙動が案内されています。声の件数が多く自動更新させたい場合や、Google口コミと自社の声をまとめて1つのウィジェットで管理したい場合は、こちらの方法が向いています。

10件を超えたあたりから、ブロックへの手入力は更新のたびに全件を見直す作業になりがちです。私が検証した範囲では、件数が2桁に乗った時点でタグ埋め込みに切り替える事業者が大半でした。

埋め込み後によくある3つのトラブルと対処

設置して終わりではなく、公開後に見つかることが多い3つの問題を先に共有します。

1つ目はスマホ表示の崩れです。 STUDIO・ペライチどちらもレスポンシブ対応のエディタですが、Embedボックスやタグ埋め込みで挿入した外部コードはエディタ側の自動調整の対象外になることがあります。PCプレビューだけで確認を終えず、実機かブラウザの端末シミュレーターで幅の狭い画面も必ず確認してください。

2つ目は表示が更新されないことです。 外部ツールの埋め込みコードは、多くの場合「コード自体は固定・中身は自動更新」という仕組みです。声を追加したのに反映されない場合は、埋め込み元のツール側で表示件数や並び順の設定が古いままになっていないかを確認します。

3つ目は埋め込み元の障害でエリアが空白になることです。 外部サービス側で不具合が起きると、埋め込み枠がそのまま空白表示になるケースがあります。私が埋め込み機能を設計する際、管理画面の障害時でも表示側は落ちない構成を優先したのは、この空白表示がユーザー体験として一番印象を悪くすると判断したからです。どのツールを使う場合でも、月に1度は表示を目視で確認する運用を組み込んでおくと安心です。

埋め込み前に確認しておきたい項目をチェックリストにまとめました。設置作業に入る前にコピーして使ってください。

□ 掲載する声について、本人からの許可が記録に残っている
□ 出典（Google口コミ／自社フォーム／LINE等）を明記している
□ 埋め込み後、スマホ幅の画面で文字や画像が切れていないか確認した
□ 埋め込み枠内のリンクにtarget="_top"またはtarget="_blank"を指定した（STUDIOの場合）
□ 半年に1度、表示崩れ・リンク切れを確認する予定を立てた

STUDIO・ペライチ以外に広げるときの考え方

WordPressやWixでも、考え方は同じです。WordPressはショートコードかブロックエディタの「カスタムHTML」ブロック、Wixは「HTML iframe」要素にコードを貼るのが標準的な方法で、STUDIOのEmbedボックス・ペライチのタグ埋め込みと役割はほぼ同じです。「コードをどこに貼るか」の呼び方がサービスごとに違うだけで、やっていることは共通だと分かると、他のツールへの引っ越しや複数サイトの運用でも迷いにくくなります。

構造化データで星を検索結果に出したい場合は話が別で、埋め込みコードとは別にJSON-LDというデータを追加する必要があります。しかも自社サイトへの自社レビューは2019年9月以降、Googleの方針変更で表示対象外になっているケースがほとんどです。この点はレビューの★は検索結果に出る？構造化データ3ステップ完全ガイド【2026年版】で詳しく整理しています。

よくある質問

Q. STUDIOの無料プランでもEmbedボックスは使えますか？ Embedボックス自体はプランを問わず使える機能ですが、独自ドメインの利用可否などプラン差はあるため、実際に使う前にSTUDIOの料金ページで自分のプランの対応範囲を確認してください。料金・プラン条件は変更されることがあるため、この記事では断定しません。

Q. コードを1つも書けなくても設置できますか？ ペライチの「お客様の声」ブロックは、コードなしで文章と画像を入力するだけで設置できます。STUDIOで同様にコードを使いたくない場合は、テキストブロックと画像ブロックを並べて手作業でレイアウトする方法になります。自動更新は諦める代わりに、コードは一切不要です。

Q. 依頼文はどう書けばいいですか？ 業種別の依頼文テンプレートをお客様の声の依頼文、どう書く？業種別テンプレート7選【2026年版】にまとめています。埋め込み作業の前に、声を集める段階のテンプレートとして活用してください。

Q. 何件くらい載せれば十分ですか？ 件数と効果の関係は業種によって幅があります。目安の考え方はお客様の声、何件あれば効果が出る？で整理していますので、埋め込み件数を決める際の参考にしてください。

まとめ

1. STUDIOには専用ブロックがないため、Embedボックスに外部コードを貼るのが基本ルート
2. ペライチは「お客様の声」ブロック（コード不要）とタグ埋め込み（外部コード）の2択。件数10件が切り替えの目安
3. 埋め込み前に許可の記録と出典表記を済ませておく
4. 公開後はスマホ表示・更新反映・障害時の空白表示の3点を定期確認する

コードの貼り方は数分で終わる作業ですが、「その声を載せていい理由」を先に固めておくかどうかで、公開後の安心感が変わります。設置作業に入る前に、許諾の記録だけは一度立ち止まって確認してください。