STUDIO で『お客様の声』を表示する3つの実践方法【デザイナー視点】

2026-05-14·6分で読めます·

STUDIOノーコードお客様の声テスティモニアルWebデザイン

STUDIO（スタジオ）は日本発のノーコードWebデザインツールで、デザイン自由度と運用の手軽さのバランスが秀逸なため、特にデザイナーや制作会社が好んで採用しています。

そんな STUDIO で運用しているサイトに「お客様の声」セクションを追加する3つの実践方法を、運用シナリオ別に解説します。

方法1：STUDIO CMS コレクションで管理

STUDIO の CMS 機能を使い、「お客様の声」用のコレクションを作成して投稿型運用する方法。

設定手順

STUDIO のダッシュボードから「CMS」を有効化
新規コレクション「testimonials」を作成
フィールドを定義（名前、コメント、会社名、評価、写真など）
表示用のテンプレートページを設計
個別の声を投稿として追加

メリット・デメリット

| 評価軸 | 内容 | |---|---| | ✅ メリット | STUDIO 内で完結、デザインの自由度が高い、検索エンジンに各声が個別ページとして認識される（SEO効果） | | ⚠️ デメリット | CMS プラン以上が必要（月額¥1,280〜）、投稿フォームは別途必要、承認ワークフローは手作業、複数サイトに同じ声を表示できない |

こんな方におすすめ

STUDIO 一本でサイトを完結させたい
お客様の声を個別記事ページとして SEO 最適化したい
月に2-3件のペースで追加し、デザインを丁寧に整えられる時間がある

方法2：テンプレートブロックでシンプル表示

STUDIO のテンプレートには「お客様の声」風のレイアウトブロックが用意されています。

設定手順

ページ編集画面で「ブロック追加」
「Testimonials」または「Reviews」カテゴリのテンプレートを選択
各カードのテキスト・画像を編集

メリット・デメリット

| 評価軸 | 内容 | |---|---| | ✅ メリット | 設定が最も簡単、追加コストなし（無料プランでも可） | | ⚠️ デメリット | 静的なため、新規追加のたびにブロックを増やす作業、複数ページに同じ声を出すには手動コピー、デザイナーらしいカスタマイズは限定的 |

方法3：外部 SaaS のウィジェットを埋込み

STUDIO の「埋め込み（カスタム HTML）」ブロックを使い、Koe などのテスティモニアル SaaS のウィジェットを設置する方法。

設定手順

Koe にアカウント登録（無料、メールのみ）
プロジェクト作成 → 収集フォーム URL が自動生成
お客様にフォーム URL を送信して回答を集める
ダッシュボードで承認、表示テーマ（カルーセル / Wall of Love / カード）を選択
ウィジェットコードをコピー
STUDIO の「埋め込み」ブロックに貼り付け

埋込みコード

<div data-koe-widget="YOUR_WIDGET_ID"></div>
<script src="https://koecollect.com/embed.js" async></script>

メリット・デメリット

| 評価軸 | 内容 | |---|---| | ✅ メリット | 収集→承認→表示が一気通貫、複数サイトに同じ声を瞬時に反映、月¥980〜、写真投稿・星評価対応 | | ⚠️ デメリット | 月額費用が発生、STUDIO 上でデザインを完全には統制できない（アクセントカラーのみ調整可） |

こんな方におすすめ

制作会社・フリーランスデザイナーが複数クライアントのサイトを運用
承認制で公開前に内容チェックしたい
ホームページ以外の EC・LP・キャンペーンサイトにも同じ声を再利用したい
お客様の声を CMS に縛られない形で蓄積したい（将来 STUDIO 以外への移行も視野）

| 項目 | CMSコレクション | テンプレートブロック | SaaS埋込み (Koe) | |---|---|---|---| | 月額 | ¥1,280〜（CMS プラン） | 無料〜 | ¥980〜 | | 設定難度 | ★★★ | ★☆☆ | ★★☆ | | 自由度 | ★★★ | ★★☆ | ★★☆ | | 運用負荷 | ★★★（手動投稿） | ★★★ | ★☆☆（自動） | | 承認ワークフロー | 手作業 | 手作業 | ✅ 標準搭載 | | 複数サイト共有 | ❌ | ❌ | ✅ | | 投稿フォーム | ❌（別途必要） | ❌ | ✅ 自動生成 |