掲載2026年6月20日

STUDIOにお客様の声をきれいに載せる方法

デザインの自由度が高いノーコードツールSTUDIOで作ったサイトに、お客様の声をサイトの雰囲気を崩さずきれいに載せたい——そんな方に向けた記事です。STUDIOで声を見せる方法は、大きく分けて①デザイン機能で手作りするか、②埋め込みコードで自動表示するかの2通り。それぞれのやり方と、どちらが向いているかを整理して解説します。

方法①STUDIOのデザイン機能で手作りする

ひとつ目は、STUDIOが得意とするデザイン機能でカードを自分で組む方法です。ボックス・テキスト・画像の要素を組み合わせて、声ひとつを1枚のカード風にレイアウトし、それを横並びやグリッドで並べていきます。お客様のひとことを引用として置き、お名前やアイコン画像を添え、★マークを画像やテキストで表現する——STUDIOの自由なデザイン編集なら、サイト全体のトーンに完全に溶け込ませることができます。

メリットは、なんといってもデザインの自由度と統一感。フォント・余白・色をサイトの他のセクションとぴったり合わせられるので、「いかにも貼り付けました」という浮いた印象になりません。一方でデメリットもあります。

声が増えるたびに手作業：新しい声をもらうたびにカードを複製し、テキストや画像を差し替える必要があります。件数が増えるとこの更新がだんだん負担になります。
星評価や件数の管理が面倒：★の数を1枚ずつ手で調整したり、「全◯件」「平均★4.8」といった集計を手で書き換えたりするのは地味に手間で、更新漏れも起きがちです。

手作りは「最初の数件をきれいに見せたい」段階では最適です。固定の代表的な声を3〜5枚だけ、デザインにこだわって並べたいなら、この方法が向いています。

方法②埋め込みコード(エンベッド)で自動表示する

ふたつ目は、STUDIOの「埋め込み」要素(カスタムコード/Embed)を使う方法です。お客様の声を集めて管理しているツールが発行する埋め込みコードを、この埋め込み要素に貼り付けると、承認した声が星評価つきのカードで自動的に並びます。新しい声が増えても、STUDIO側を編集し直す必要はありません——一度貼っておけば、あとは集めた声が自動で反映されていきます。

手作りとの大きな違いは、更新の手間がほぼゼロになること。星評価カードのデザインもツール側で整っているので、自分で1枚ずつ作り込まなくても見栄えのする「お客様の声」セクションができあがります。Koevitaのようなお客様の声収集ツールでも、集めた声をそのまま貼れる埋め込みコードを用意しています。

ひとつ注意したいのは、埋め込みはサイトを公開してからでないと正しく表示されないことがある点です。編集画面やプレビューでは枠だけが表示されたり、何も出なかったりすることがあるため、「貼ったのに表示されない」と慌てず、まずは公開して実際のサイトで確認するのが基本です。

1埋め込み要素を置く

STUDIOの編集画面で、声を見せたいセクションに「埋め込み」要素(カスタムコード/Embed)を追加します。幅は100%にして、まわりの余白をサイトのデザインに合わせて整えておくとなじみます。

2埋め込みコードを貼る

お客様の声を管理しているツールで発行した埋め込みコードをコピーし、追加した埋め込み要素のコード入力欄に貼り付けます。コードの中身を理解する必要はありません。コピーして貼るだけです。

3公開して表示を確認する

サイトを公開し、実際のURLを開いて表示を確認します。プレビューでは出なくても公開後にきちんと表示されることが多いので、必ず公開後のサイトでチェックを。あわせて自分のスマホでも開き、カードが画面幅に合わせてきれいに並ぶかを見ておくと安心です。

STUDIOではどちらが向く?

2つの方法は対立するものではなく、見せたい声の数と更新頻度で選び分けるのがおすすめです。

手作りが向くケース：デザインに完全に溶け込ませたい、少数の固定された代表的な声を、こだわって魅せたいとき。更新がほとんど発生しないなら手作りの自由度が活きます。
埋め込みが向くケース：声がこれから増え続ける、星評価つきのカードを楽に並べたい、更新の手間をかけたくないとき。集めた声が自動で反映される仕組みのほうが、長く運用するほど得です。

トップページには手作りの厳選した代表の声を、別の「お客様の声」専用セクションには埋め込みで全件を自動表示する——というように、両方を組み合わせるのも有効です。

STUDIOのプランやプレビュー環境によっては、埋め込みコードが動かない・表示が変わることがあります。「プレビューで出ないだけ」なのか「公開後も出ない」のかを切り分け、後者ならプランの対応状況や貼り付け先(必ず段落でなく埋め込み要素か)を見直すと解決しやすいです。

よくある質問

Q. 手作りと埋め込み、両方を同じサイトに使ってもいい？

問題ありません。むしろおすすめです。トップページには手作りで厳選した代表の声を数枚、専用の「お客様の声」ページには埋め込みで全件を自動表示、という使い分けがよく合います。手作りは見せ方をこだわりたい場所に、埋め込みは更新を楽にしたい場所に、と役割で分けると無理がありません。

Q. 埋め込みコードを貼ったのに表示されません。

まず、サイトを公開した状態で確認しているかを見てください。STUDIOでは編集画面やプレビューだと埋め込みが表示されないことがよくあります。公開後も出ない場合は、コードを段落やテキスト要素ではなく「埋め込み」要素に貼っているか、ご利用プランがカスタムコードに対応しているかを確認しましょう。それでも解決しないときは、ツール提供元のヘルプで対応している埋め込み形式を確認するのが近道です。

まとめ

STUDIOにお客様の声を載せる方法は、デザイン機能で手作りするか、埋め込みコードで自動表示するかの2通り。手作りは自由度と統一感が魅力ですが、声が増えるたびの更新と星評価・件数の管理が手間になります。埋め込みは一度貼れば自動で反映され、星評価カードも楽にきれいに並びます。少数の固定の声をこだわって見せたいなら手作り、増え続ける声を楽に見せたいなら埋め込み——目的に合わせて選び、公開後のサイトとスマホで表示を確認しておきましょう。

← ブログ一覧へ