カラーミーショップで『お客様の声』を埋め込む3つの方法【GMOペパボ運営EC向け】
カラーミーショップ(GMOペパボ運営)は、国内EC市場で長年実績のある中堅〜個人事業主向けプラットフォームです。月額費用が抑えられるプラン構成と、HTMLテンプレートの自由度の高さから、ハンドメイド作家・地方の実店舗EC・BtoC製造業まで幅広いショップが利用しています。
このカラーミーショップに「お客様の声」セクションを追加してCVRを改善する3つの方法を、実際の操作手順とともに解説します。
カラーミーショップの「お客様の声」表示における現状の課題
カラーミーショップには商品レビュー機能が標準搭載されていますが、表示位置は商品ページ内のみに限定されます。トップページや独自の「お客様の声」固定ページにまとめて表示したい場合は、別途対応が必要です。また、レビューのデザインカスタマイズ幅が狭いため、ブランド世界観に合わせたい場合は外部手段を検討する必要があります。
方法1:カラーミーショップ標準のレビュー機能を使う
カラーミーショップには標準でレビュー機能が含まれており、管理画面から有効化するだけで商品ページにレビュー欄が表示されます。
設定手順
- カラーミーショップ管理画面 →「商品管理」→「レビュー設定」
- レビュー機能をONに設定
- 購入者がレビューを投稿可能になる
- 管理画面で投稿されたレビューを承認・非承認できる
メリット・デメリット
| 評価軸 | 内容 | |---|---| | ✅ メリット | 追加費用なし、購入者と紐付くため信頼性が高い、管理画面から承認制で運用可 | | ⚠️ デメリット | 商品ページにのみ表示、トップページへの表示不可、デザインのカスタマイズ幅が限定的 |
こんなショップにおすすめ
- 商品ページのレビューで十分な小規模ショップ
- 購入実績と紐付いた客観的な評価を見せたい
- 設定工数をかけたくない
方法2:HTMLカスタマイズで固定ページに手動実装する
カラーミーショップはHTMLテンプレートの編集が可能で、固定ページやトップページのレイアウトを自由に変更できます。
設定手順
- 管理画面 →「デザイン」→「テンプレート編集」
top.html(トップ)または固定ページ用テンプレートを開く- 任意の位置にHTMLを挿入してお客様の声セクションを作成
サンプルコード
<section class="testimonials-section">
<h2>お客様の声</h2>
<div class="testimonial-card">
<p>「商品のクオリティに驚きました。リピートします」</p>
<p class="author">— 鈴木様(40代・主婦)</p>
</div>
</section>
<style>
.testimonials-section { padding: 48px 20px; background: #fafafa; }
.testimonial-card { max-width: 640px; margin: 20px auto; padding: 24px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.author { margin-top: 12px; color: #888; font-size: .9em; }
</style>
メリット・デメリット
| 評価軸 | 内容 | |---|---| | ✅ メリット | トップページ・固定ページへの自由配置が可能、デザインを完全にコントロールできる | | ⚠️ デメリット | HTML/CSSの知識が必要、声を追加するたびにテンプレート編集が必要、更新作業が属人化しやすい |
方法3:外部SaaSウィジェットを埋め込む(Koe)
HTMLカスタマイズの自由度を活かしつつ、収集・承認・表示の運用を自動化したい場合は、Koe のような外部SaaSのウィジェットを埋め込む方法が有効です。
設定手順
- Koe にアカウント登録(無料、メールアドレスのみ)
- プロジェクト作成 → 収集フォームURLが自動生成
- 購入者にフォームURLをメール・同梱チラシなどで送付
- 投稿が届いたらKoeダッシュボードで承認
- ウィジェットコードをカラーミーのテンプレートに貼り付け
埋込みコード
<div data-koe-widget="YOUR_WIDGET_ID"></div>
<script src="https://koecollect.com/embed.js" async></script>
カラーミーのトップページテンプレート(top.html)の適切な位置に上記コードを挿入するだけで動作します。
メリット・デメリット
| 評価軸 | 内容 | |---|---| | ✅ メリット | 収集から表示まで自動化、承認制で公開前チェック可、カラーミー以外のサイト・SNSにも同じ声を表示、日本語UI・円建て決済 | | ⚠️ デメリット | 月額¥980〜(Free プランは10件まで無料)、商品SKUとの直接紐付けはなし |
こんなショップにおすすめ
- 商品レビューとは別にショップ全体の体験談・ストーリーを見せたい
- 自社LP・Instagram・外部ブログなど複数チャネルに同じ声を展開したい
- 海外サービスのドル建て請求を避け、円建てで費用を管理したい
Shopifyアプリや海外SaaSとの比較
カラーミーショップはShopifyアプリ(Loox、Judge.me等)と直接連携できません。海外SaaS(Senja、Trustmary等)はUI・サポートが英語中心で、円建て請求に対応していないケースもあります。日本語UIと円建て決済に対応したKoeは、国内EC事業者にとって運用コストを予測しやすい選択肢です。
まとめ
| 方法 | 月額 | 設定難度 | 運用工数 | 複数サイト対応 | |---|---|---|---|---| | 標準レビュー機能 | 無料 | ★☆☆ | ★★☆ | ❌ | | HTMLカスタマイズ | 無料 | ★★★ | ★★★(手動更新) | ❌ | | Koe ウィジェット | ¥980〜 | ★★☆ | ★☆☆(自動化) | ✅ |
- 商品ページのみで十分:標準レビュー機能
- トップページに手作りで実装:HTMLカスタマイズ
- 収集〜表示を自動化・複数チャネル展開:Koe ウィジェット埋込み
Koe はFreeプランで10件まで永久無料、Pro月¥980で無制限利用、Business月¥2,980で複数プロジェクト管理に対応。カラーミーのHTMLテンプレートに1行貼り付けるだけで、収集から表示まで自動化できます。