STUDIOにお客様の声を埋め込む方法【2026年最新・ノーコードで美しく表示】

「STUDIOで作ったポートフォリオやLPにお客様の声を載せたいけど、方法がわからない…」

STUDIOは日本発のノーコードWeb制作ツールとして、デザイナー・フリーランス・スタートアップに急速に普及しています。デザインの自由度が高くプロ品質のサイトが作れる一方、お客様の声の掲載となると「どうやって埋め込むの？」と迷う方が少なくありません。

• STUDIOにはお客様の声の標準コンポーネントがない
• CMSで手動管理すると更新の手間がかかる
• 声の収集とサイト掲載が分断される

この記事では、STUDIOにお客様の声を埋め込む方法を比較し、STUDIOのデザイン性を損なわずに美しく表示する方法を具体手順つきで解説します。

STUDIOにお客様の声を掲載する3つの方法

方法1: STUDIOのCMS機能で手動管理する

STUDIOのCMS機能を使って「お客様の声」コレクションを作り、手動でデータを入力する方法です。

メリット：

• STUDIO内で完結するため統一感が出る
• デザインの自由度が高い（STUDIOのデザイン機能をフル活用）
• 追加コスト不要（STUDIOのプランに含まれる）

デメリット：

• 声が増えるたびにCMSにログインして手動入力が必要
• 声の収集機能がない（別途メールやフォームで集める必要あり）
• 星評価やアバター画像の管理が煩雑になりがち
• CMS項目の設計に時間がかかる

向いている人： STUDIOのCMSを使い慣れていて、デザインを完全にコントロールしたい方。

---

方法2: Googleフォーム＋手動転記

Googleフォームで声を集め、STUDIOのCMSやテキストブロックに手動で転記する方法です。

メリット：

• 収集コスト0円
• Googleフォームの操作は簡単
• お客様にとっても入力のハードルが低い

デメリット：

• 集まった声をSTUDIOに毎回手動コピーする必要がある
• デザインの統一感を保つのに手間がかかる
• 件数が増えると管理が破綻しやすい
• 掲載許諾の管理が煩雑

向いている人： お客様の声がまだ数件で、試しに始めてみたい段階の方。

---

方法3: 外部ツール＋iframe埋め込み（おすすめ）

こえポストで声を収集・管理し、iframe埋め込みコードをSTUDIOに設置する方法です。

メリット：

• 声の収集→承認→表示が完全自動化
• 日本語対応の管理画面で迷わず操作
• Wall・Carousel・Popupなどプロ品質のデザイン
• 新しい声が追加されるとサイトに自動反映
• STUDIOのデザイントーンに馴染む洗練されたウィジェット

デメリット：

• 無料プランには件数制限がある（10件まで無料）
• iframeのため、デザインの完全カスタマイズは不可（ただしテーマカラー等は調整可能）

向いている人： 声の収集から表示まで手間をかけずに自動化したいすべての方。

こえポストなら無料で10件まで収集・表示可能。5分でセットアップ完了します。

---

3つの方法を比較

| 比較項目 | STUDIO CMS手動 | Googleフォーム+転記 | 外部ツール埋め込み | |---------|---------------|-------------------|-----------------| | コスト | 無料 | 無料 | 無料〜月額制 | | 声の収集 | 別途必要 | Googleフォーム | ツール内で完結 | | デザインの自由度 | ◎ | △ | ○ | | 更新の手間 | 毎回手動 | 毎回手動 | 完全自動 | | 運用負荷 | 高い | 高い | 低い | | スケーラビリティ | △ | × | ◎ |

STUDIOにこえポストを埋め込む手順【5分で完了】

ステップ1: こえポストに無料登録する

こえポストに無料登録し、ダッシュボードにアクセスします。メールアドレスだけで登録完了です。

ステップ2: 収集フォームを作成する

ダッシュボードから「フォーム作成」をクリック。業種を選ぶだけで最適な質問テンプレートがセットされます。

ステップ3: お客様に回答を依頼する

フォームのURLをメール・LINE・SNSのDMで送ります。レビュー依頼文のテンプレートを活用すると回答率が向上します。

ステップ4: 回答を承認する

ダッシュボードに届いた声を確認し、「承認」ボタンを押すだけです。

ステップ5: ウィジェットをSTUDIOに埋め込む

ダッシュボードの「ウィジェット」画面で好みのデザインを選び、埋め込みコードをコピーします。

STUDIOエディタでの操作：

1. STUDIOエディタでお客様の声を表示したいページを開く
2. 左パネルから**「追加」→「ボックス」**を選択してページに配置
3. ボックスを選択し、右パネルの**「iframe」**をONにする
4. 「URL」欄にこえポストのウィジェットURLを貼り付ける
5. ボックスのサイズ（幅・高さ）を調整する
6. **「公開」**ボタンを押して完了

ポイント： ウィジェットの高さは、表示する声の件数に応じて調整してください。Wall形式の場合は500px〜800px、Carousel形式なら300px〜400px程度がおすすめです。

---

STUDIOのデザインに馴染ませるコツ

背景色を統一する

こえポストのウィジェットは白背景がデフォルトですが、STUDIOのセクション背景色に合わせることで、まるでSTUDIOのネイティブコンポーネントのように見せられます。

余白（パディング）を意識する

iframeボックスの周囲に適切な余白を設けることで、STUDIOの他のセクションとの視覚的な調和が生まれます。上下に64px〜96px程度の余白を取るのがおすすめです。

セクション見出しをSTUDIO側で追加する

「お客様の声」「ご利用者の声」などの見出しテキストは、iframeの上にSTUDIOのテキストブロックで追加しましょう。フォント・サイズ・色をサイト全体と統一できます。

レスポンシブ設定を忘れずに

STUDIOのレスポンシブビューでiframeボックスのサイズを調整し、スマートフォンでも適切に表示されるか確認しましょう。

---

STUDIO × お客様の声の活用シーン

ポートフォリオサイト

デザイナー・エンジニア・フリーランスのポートフォリオに「クライアントの声」を掲載することで、新規案件の受注率が大幅にアップします。実績ページとセットで配置するのが効果的です。

コーポレートサイト

会社のトップページや実績ページに「お客様の声」を掲載することで、企業の信頼性と実績を可視化できます。BtoB企業の場合は社名・役職付きの声が特に効果的です。

ランディングページ（LP）

広告からの流入LPにお客様の声を掲載すると、CVR（コンバージョン率）が平均34%向上するデータがあります。CTAボタンの直前に配置するのがベストプラクティスです。

サービスサイト

SaaSやサブスクリプションサービスのサイトでは、「導入事例」としてお客様の声を活用することで、無料トライアルへの転換率が向上します。

---

よくある質問

Q: STUDIOの無料プランでも埋め込めますか？

A: はい。STUDIOの無料プランでもiframe埋め込みは利用可能です。ただし独自ドメインの設定にはSTUDIOの有料プランが必要です。

Q: サイトの表示速度は遅くなりませんか？

A: 埋め込みコードは非同期読み込みのため、ページの表示速度への影響は最小限です。

Q: STUDIOのCMSと併用できますか？

A: はい。STUDIOのCMSでブログやニュースを管理しつつ、お客様の声はこえポストで管理するという使い分けが可能です。それぞれの強みを活かした運用ができます。

Q: STUDIOから他のCMS（WordPress等）に移行しても使えますか？

A: はい。こえポストの埋め込みコードはすべてのウェブサイトビルダーに対応しています。サイトをリニューアルしても、お客様の声はそのまま引き継げます。

---

まとめ

STUDIOのデザイン性を活かしつつ、お客様の声を効果的に掲載するなら、外部ツール＋iframe埋め込みが最もバランスの取れた方法です。

STUDIO CMS手動管理はデザインの自由度は高いですが、運用負荷も高くなります。こえポストなら収集から表示まで自動化でき、STUDIOのデザインにも自然に馴染みます。

まずは無料でこえポストを試す →