Ameba Owndにお客様の声を埋め込む方法【無料プランOK・HTMLブロックで5分】
Ameba Owndで作ったサイトにお客様の声を埋め込む手順を解説。HTMLブロックの使い方、scriptタグが動かないときの対処、無料プランでの制限、デザインを崩さない配置のコツまで具体的にまとめました。
お客様の声・口コミ活用の専門家チーム
✓この記事でわかること
「Ameba Owndのサイトにお客様の声を載せたい。でも、そういうブロックが見当たらない」
Ameba Owndは、無料で始められて見た目も整うため、サロン・教室・個人店・クリエイターのサイトとして広く使われています。ところが「お客様の声」となると、専用のブロックがありません。テキストブロックに手で書き写すしかない、と思っている方が多いはずです。
実際にはHTMLブロックが用意されているので、外部ツールのウィジェットをそのまま置けます。この記事では、その具体的な手順と、Ameba Owndでつまずきやすいポイント（scriptタグが動かないケース）の回避方法をまとめます。
Ameba Owndにお客様の声を載せる3つの方法
方法1: テキストブロックに手で書く
いちばん素直な方法です。届いた声をコピーして、テキストブロックに貼り付けます。
メリット：
- 追加ツールが一切いらない
- 文字サイズや色をAmeba Owndの機能で自由に整えられる
デメリット：
- 声が増えるたびに編集画面を開いて貼り付ける必要がある
- 星評価やお客様のアイコンを表現しづらい
- 誰から・いつもらった声なのかを管理する場所がない
- 声が10件を超えたあたりから、体裁を揃えるだけで消耗する
向いている人： 掲載したい声が2〜3件で、しばらく増える予定がない方。
方法2: 画像として貼る
いただいたメッセージやアンケート用紙をスクリーンショット・写真にして、画像ブロックで貼る方法です。
メリット：
- 手書きアンケートの「生っぽさ」がそのまま伝わる
- レイアウト崩れが起きない
デメリット：
- 画像内の文字は検索エンジンに読まれないため、SEOにはほぼ効かない
- スマートフォンだと文字が小さすぎて読めないことが多い
- 音声読み上げに対応できない（alt属性に全文を書くのは現実的でない）
- 個人情報の写り込みに毎回気を配る必要がある
向いている人： 手書きアンケートの雰囲気そのものを見せたい方。ただし、テキストの声と併用するのが前提です。
方法3: 外部ツール＋HTMLブロック（おすすめ）
こえポストのような収集ツールで声を集め、HTMLブロックに埋め込みコードを貼る方法です。
メリット：
- 声の収集→承認→サイト表示までが自動でつながる
- 新しい声を承認すると、Ameba Owndを触らなくてもサイトに反映される
- 星評価・お名前・肩書きが最初から整った形で表示される
- カード一覧・スライダーなど、表示形式を選べる
デメリット：
- 無料プランには掲載件数の上限がある（こえポストは10件まで無料）
- 埋め込み枠の中のデザインは、Ameba Ownd側からは細かく変えられない
向いている人： これから声を集めていきたい方、すでに数件以上たまっている方。
こえポストは10件まで無料。登録からサイト掲載まで、実際に5分ほどで終わります。
3つの方法を比較
| 比較項目 | テキスト手打ち | 画像で貼る | 外部ツール埋め込み | |---------|---------------|-----------|-----------------| | 準備の手間 | 小 | 小 | 中（初回のみ） | | 更新の手間 | 毎回手動 | 毎回手動 | 自動 | | SEOへの寄与 | ○ | × | ○ | | スマホでの読みやすさ | ○ | △ | ◎ | | 星評価の表示 | × | △ | ◎ | | 声の管理・許諾 | 手元で管理 | 手元で管理 | ツール内で完結 |
Ameba Owndにこえポストを埋め込む手順
ステップ1: こえポストに登録する
無料登録します。メールアドレスとパスワードだけで、クレジットカードは不要です。
ステップ2: 収集フォームを作る
ダッシュボードで「フォーム作成」を押し、業種を選びます。業種に合った質問がすでに入った状態でフォームができるので、そのまま使えます。文面を変えたい場合はあとから編集できます。
ステップ3: お客様に依頼する
できあがったフォームのURLを、メールやLINEで送ります。文面に迷ったらレビュー依頼文の自動作成ツールで作れます。サービス提供の直後に送るほど、回答率は上がります。
ステップ4: 届いた声を承認する
回答はダッシュボードに一覧で届きます。掲載してよいものだけ「承認」を押します。承認していない声はサイトに出ないので、内容を確認してから公開できます。
ステップ5: 埋め込みコードをコピーする
「ウィジェット」画面で表示形式（カード一覧／スライダー／ポップアップ）を選びます。
Ameba Owndでは「iframeコード」タブのほうをコピーしてください。 理由は次の見出しで説明します。
ステップ6: Ameba OwndのHTMLブロックに貼る
- Ameba Owndの管理画面から、対象のページを開いて「編集」
- 声を載せたい位置で「＋」（ブロック追加）を押す
- ブロックの種類から「HTML」を選ぶ
- 開いた入力欄に、コピーしたiframeコードを貼り付ける
- 「保存」→「公開」
以上です。公開後のページを実際に開いて、表示を確認してください。
Ameba Owndで気をつけたい3つのこと
scriptタグは動かないことがある
多くの埋め込みツールは「高さが自動で合う」scriptタグ版のコードを標準で案内しています。ですがAmeba OwndのHTMLブロックでは、scriptタグが取り除かれたり、実行されずに何も表示されないことがあります。
貼ったのに真っ白、という場合はほぼこれが原因です。iframeコードに切り替えてください。 こえポストのウィジェット画面には「iframe」のタブが用意してあり、そちらは単なるHTMLなので確実に表示されます。
高さは自分で指定する
iframeコードは高さが固定です。中身が入りきらないと下が切れてしまうので、コード内の height を表示形式に合わせて調整してください。目安は次のとおりです。
| 表示形式 | 高さの目安 | |---------|----------| | カード一覧（Wall） | 600〜800px | | スライダー（Carousel） | 320〜400px | | ポップアップ | 80px（本体は画面端に出るため枠は最小で可） |
掲載件数を増やしたときは、高さの見直しも忘れずに。スマートフォンでは1列表示になって縦に伸びるため、PCで合わせた高さだと足りなくなります。スマホ表示でも確認してください。
見出しはAmeba Ownd側で付ける
「お客様の声」という見出しは、埋め込みの中ではなくHTMLブロックの上にテキストブロックで置くのがおすすめです。サイト全体のフォントと色がそのまま適用されるので、埋め込み部分だけ浮いて見えるのを防げます。
どのページに置くと効くか
トップページの、申し込みボタンの手前
いちばん効果が出やすい位置です。サービス内容を読んで「よさそうだけど、どうしよう」と迷っている段階で声が目に入ると、そのまま申し込みに進みやすくなります。ページ最下部ではなく、ボタンのすぐ上に置いてください。
メニュー・料金ページ
金額を見た直後は、いちばん不安が大きくなる場所です。「この値段を払った人が、実際どう感じたのか」がその場でわかると、離脱を減らせます。
お客様の声の専用ページ
件数がたまってきたら、専用ページを作ってカード一覧で全件並べます。「○○ 口コミ」「○○ 評判」で検索した人の受け皿になり、検索からの流入が期待できます。
ブログ記事の下
Ameba Owndのブログ機能で記事を書いているなら、記事末尾に1〜2件のスライダーを置くのも有効です。記事を読み終えた直後は、サービスへの関心がいちばん高いタイミングです。
よくある質問
Q: Ameba Owndの無料プランでも埋め込めますか？
A: はい。HTMLブロックは無料プランでも使えます。独自ドメインの設定など一部の機能は有料プランが必要ですが、埋め込み自体に制限はありません。
Q: 貼ったのに何も表示されません
A: まずscriptタグ版を貼っていないか確認してください。Ameba Owndではiframeコードを使います。それでも出ない場合は、公開ページ（編集画面ではなく実際のURL）で確認してください。編集画面のプレビューでは埋め込みが描画されないことがあります。
Q: 下のほうが切れて全部見えません
A: iframeの height が足りていません。上の目安表を参考に数値を大きくしてください。スマートフォンでは列数が減って縦に伸びるため、PC基準の高さでは足りなくなります。
Q: サイトの表示が遅くなりませんか？
A: 埋め込みは遅延読み込み（lazy loading）で、画面に入るまで読み込まれません。ページ本体の表示速度への影響はごくわずかです。
Q: あとで別のサービスにサイトを移しても使えますか？
A: 使えます。埋め込みコードはHTMLを貼れるサイトならどこでも動くので、WordPressやSTUDIOなどに移行しても、集めた声はそのまま引き継げます。対応プラットフォーム一覧もあわせてご覧ください。
Q: いただいた声を勝手に載せてよいですか？
A: 掲載の同意は必ず取ってください。こえポストのフォームには掲載可否のチェック項目が含まれており、同意した方の声だけを承認できます。あわせてステルスマーケティング規制の解説もご確認ください。
まとめ
Ameba Owndでお客様の声を載せるなら、HTMLブロック＋iframeコードが最短です。
- 専用ブロックはないが、HTMLブロックで外部ウィジェットを置ける
- scriptタグは動かないことがあるので、iframeコードを使う
- 高さは手動指定。スマホ表示でも切れていないか確認する
- 置き場所は「申し込みボタンの手前」がいちばん効く
手で書き写す運用は、声が増えるほどつらくなります。集める仕組みごと持っておくと、あとから楽です。
関連記事
この記事を書いた人
こえポスト編集部
お客様の声・口コミマーケティングの専門チーム。サロン・クリニック・士業など、スモールビジネスが「お客様の声」を集めて売上につなげるための実践ノウハウを発信しています。
お客様の声の集め方Tips
お客様の声の効果的な集め方・活用方法を週1回お届け。 業種別の成功事例や、すぐ使えるテンプレートも配信します。