Wall of Loveをウェブサイトに設置する方法（10分で完了）
Wall of Loveとは、お客様の声をウェブサイト上に一覧で見せる仕組みです。テキストのレビュー、動画クリップ、星評価、実名——それらを美しいレイアウトに並べて、訪問者が自由に閲覧できます。新しいお客様の声を承認するたびに自動で更新される、いわば「リアルタイムの信頼の壁」です。
Notion・Loom・Linearなどの企業もマーケティングサイトでこの手法を活用しています。なぜ効果的かは明確です。「自分たちの製品が素晴らしい」と言っているのは会社ではなく、何十人もの実際のお客様だからです。
ゼロからWall of Loveを10分で公開するまでの手順を、ステップごとに解説します。
Wall of Loveがコンバージョンを高める理由
手順に入る前に、なぜ効果があるのかを簡単に整理しておきます。
- **消費者の83%**が、ブランド発のコンテンツよりも他のユーザーの推薦を信頼している
- 販売ページにお客様の声を掲載すると、コンバージョン率が最大34%向上するケースがある
- 動画のお客様の声は、視聴者の62%の信頼度を高める（テキストのみは34%）
Wall of Loveはこれらの社会的証明を一箇所に集約します。訪問者は「これだけ多くの人が支持している」という量感、「ここが気に入った」という具体性、「実名・顔・動画がある」という信頼性を一目で受け取れます。大規模に信頼を築くための、最も効率的な方法の一つです。
ステップ1：お客様の声を集める
表示するには、まずお客様の声が必要です。メール・Slackメッセージ・スクリーンショット・レビューサイトなどに既にある場合は手動で追加できます。しかし最も効率的なのは、収集フォームを設定して自動的に集まる仕組みを作ることです。
収集フォームを作成して、共有リンクを用意しましょう。メールでお客様に送る、アプリ内に組み込む、サポート対応後に案内するなど、さまざまな場面で使えます。お客様は星評価付きのテキストレビューを投稿するか、ブラウザ内で直接動画を録画するかを選べます。
届いたお客様の声は「新規」ステータスでダッシュボードに蓄積されます。確認してから承認またはアーカイブするだけ。
Wall of Loveに表示されるのは、承認したものだけです。何を公開するかは常に自分でコントロールできます。
ステップ2：レイアウトを選ぶ
Wall of Loveは複数のレイアウトに対応しています。用途に合わせて選びましょう。
Masonry
最も人気のレイアウト。高さの異なるカードがPinterest風のグリッドに並びます。テキスト量の多いレビューと動画サムネイルが自然に混在して、「お客様の声が詰まっている」という充実感を演出できます。
向いている場所： ランディングページ、専用のお客様の声ページ、ボリュームを見せたい場面。
グリッド
すべてのカードが同じ高さで整列する均一なレイアウト。Masonryよりも整然とした印象で、お客様の声の長さが揃っているときにうまく機能します。
向いている場所： 製品ページ、会社紹介ページ、統一感のある洗練されたデザインにしたい場面。
Carousel
横スクロールで一つずつお客様の声を見せるスライダー形式。縦方向のスペースを取らないため、長いページの一部として自然に組み込めます。
向いている場所： ホームページのセクション、料金ページ、レイアウトを圧迫せずに社会的証明を入れたい場面。
リスト
カードを縦に積み重ねるシンプルな形式。一覧性が高く、モバイルでも見やすい。各カードが全幅で表示されます。
向いている場所： サイドバーウィジェット、幅の狭い領域、ミニマルなデザイン。
ステップ3：Wall of Loveを設定する
レイアウトを選んだら、細部を調整します。
- 表示するお客様の声を選択。 承認済みのものをすべて表示するか、このウォール専用に手動で選ぶか。
- 埋め込みに名前をつける。 複数のウォールを管理しやすくなります（例：「ホームページウォール」「料金ページカルーセル」）。
- 見た目を調整する。 サイトのデザインに合わせてスタイルを変更できます。
設定しながらリアルタイムでプレビューが確認できます。見た目そのままが、訪問者に届く表示です。
ステップ4：サイトに埋め込む
埋め込みコードをコピーして、3つの方法のいずれかで設置します。
スクリプトタグ（推奨）
HTMLに貼り付けるだけの<script>タグ一行。コンテナの幅に合わせてレスポンシブで表示されます。WordPress・Webflow・Shopify・独自構築など、あらゆるウェブサイトで動作します。
<script src="https://loveboard.io/embed/your-embed-id.js"></script>iFrame
JavaScriptを使えない環境向けの<iframe>埋め込み。柔軟性はやや下がりますが、どこでも動作します。
<iframe src="https://loveboard.io/embed/your-embed-id" width="100%" height="600"></iframe>ダイレクトリンク
Wall of Loveを独立したページとして開く公開URL。メール、SNS、埋め込みなしでリンクを共有したい場面で便利です。
ステップ5：確認して公開する
埋め込みコードを貼り付けたら、以下を確認しましょう。
- ページをプレビュー。 ウォールが正しく表示され、各画面サイズで見栄えが良いか確認する。
- モバイルで確認。 レスポンシブ対応ですが、実際のサイトでレイアウトが崩れていないか目視確認する。
- 自動更新をテスト。 ダッシュボードで新しいお客様の声を承認して、ウォールに反映されることを確認する。
以上で完了です。Wall of Loveが公開されました。
どこに設置すると効果的か
配置場所に迷ったときは、コンバージョンへの影響が大きい場所を参考にしてください。
ランディングページ
ファーストビューの下、料金セクションの上。製品を説明した直後に「実際に使っているお客様の声」を見せる流れが自然です。10〜20件のMasonry形式のWall of Loveを置くと、信頼感と勢いを同時に伝えられます。
料金ページ
購入の意思決定が最も起きやすい場所ですが、お客様の声が抜けているケースが多い。料金表の近くにCarouselや評価バッジを置くと、「払う価値があるか」と迷うタイミングで背中を押せます。
商品ページ（EC）
商品説明の下に、実際のお客様による動画レビューやテキストレビューを表示しましょう。特に動画は効果的です。誰かが実際に商品を手に取っている姿を見ることで、購入前の不安が和らぎます。
専用お客様の声ページ
/testimonials や /wall-of-love などのページを作ってナビゲーションからリンクする企業もあります。お客様の声が豊富に集まってきたら、「ブラウズできる信頼のページ」として機能します。
会社紹介ページ
チームの紹介やミッションを説明したあと、お客様の声のセクションを加えると信頼性が高まります。「私たちはこういう会社です」の流れに続けて「お客様はこう評価しています」と見せるのは、とても自然な構成です。
Wall of Loveを鮮度よく保つには
一度設置して終わりではありません。新しいお客様の声を継続的に追加することで、Wall of Loveの説得力は保たれます。
- 収集をワークフローに組み込む。 オンボーディング後・サポート完了後・節目の達成時に収集フォームのリンクを送る習慣をつくりましょう。
- 定期的に承認する。 週に一度ダッシュボードを確認して、新着のお客様の声を承認。ウォールを常に最新の状態に保ちましょう。
- 入れ替えを行う。 Carousel形式や手動選択の場合は、定期的に新しいものと差し替えましょう。
- テキストと動画を混ぜる。 両方の形式が混在していると、よりリアルで見応えのあるウォールになります。
まずはここから
10分もあればWall of Loveを公開できます。
- LoveBoardの無料アカウントを作成（クレジットカード不要）
- 最初の収集フォームを設定
- お客様の声を手動で追加するか、フォームをお客様に送信する
- Wall of Loveの埋め込みを作成
- 埋め込みコードをサイトに貼り付ける
無料プランには、テストに必要なものが揃っています。フォーム1つ・動画3本・埋め込み1つ。