「お客様の声」ページの作り方——構成とレイアウトの決め方
声はいくつか集まった。文章も載せられる形に整えた。あとはページにするだけ——ここで手が止まる方が多いようです。上から順に貼っていくと、なんとなく読みにくいページができます。悪いのは声ではなく、たいていはページの組み立てのほうです。
この記事で扱うのは、声の塊を1枚のページにどう組むかです。1件ぶんの掲載文の書き方や、先頭に置く声の選び方は例文と書き方の記事に、設置の手順は載せ方の記事にあります。
ページの骨格——上から5つの区画で考える
「お客様の声」ページを、声だけでできたページだと考えるとうまく組めません。声の前後に必要なものがあります。上から順に、次の5区画です。
2. 先頭の数件(いちばん読まれる場所)
3. まとまりごとの小見出しと、その中の声
4. 声以外の補強(実績の写真、よくある質問へのリンクなど)
5. 最後の行き先(申し込み・問い合わせ・料金ページ)
区画4は無くても構いませんが、区画1と5を省くと、読み手が入りにくく出ていきにくいページになります。差がつくのはこの2つです。
冒頭に置くのは、声ではなく1行
いきなり引用が始まると、読み手は「誰が何を言っているのか」を確かめるために一度止まります。冒頭には1〜2行の説明を置きます。書くことは3つです。誰の声か・どうやって集めたか・どこを見ればいいか。
創業の物語や「お客様を大切にしています」という前置きは、ここでは要りません。
最後の行き先を用意する
多くのページは最後の声で唐突に終わり、読み手は戻るボタンを押すしかありません。読み終えた直後がいちばん動きやすい瞬間です。末尾には次の一歩を1つだけ置きます。文言も「お問い合わせはこちら」より「初回のご相談(無料・30分)を予約する」のほうが押しやすくなります。
声のまとまりを、どこで切るか
5件くらいなら、切らずに一列で構いません。10件を超えたあたりから、小見出しで分けたほうが読みやすくなります。切り口は商売によって変わります。
- メニューが分かれている——サービス別に切る(整体なら「腰の施術」「産後の施術」)
- 同じサービスをいろいろな人が使う——客層別に切る(年代・立場・地域・法人か個人か)
- 悩みで選ばれる商売——相談内容別に切る(士業、修理業など)
大事なのは切り口を1つに絞ることです。サービス別と客層別を同時にやると、読み手はどの見出しを見ればいいのか分からなくなります。両方で見せたいときは、片方をページの構造に、もう片方は各件の名乗りに任せてください。
小見出しの文言は、こちらの用語ではなく読み手の言葉に寄せます。「月次顧問プラン」より「毎月の記帳と申告をお任せの方から」。読んだ人が「これは自分のことだ」と思えるかが基準です。
- 1件しかないまとまりは作らない。見出しの下がすかすかだと、そこだけ弱く見えます
- 順番は、いちばん多い客層から。多くの読み手が最初のまとまりで用が足ります
- まとまりが4つ以上なら、上部に名前だけの短い目次を置く。自分の場所へ飛んでもらうためのものです
専用ページと、各サービスページの分担
声の置き場所は、専用の「お客様の声」ページと、各サービスページや商品ページの2か所です。役割は分けます。
- 専用ページ——全部を置く場所。読み手が自分に近い声を探しに来る
- 各サービスページ——直結する声だけを置く場所。読み手は探しに来たのではなく、たまたま出会う
それぞれ何件置くかの目安は例文と書き方の記事にありますので、ここでは構造に絞ります。押さえるのは3点です。
- 抜粋の文章は書き分けない。同じ人が両方を見たときに、文言が違うと不自然に映ります
- 抜粋の下に「ほかの声を見る」の1行リンクを置く。これが無いと、専用ページに誰も来ません
- 専用ページの中に戻り道を作る。各件の「ご利用:◯◯」をサービスページへのリンクにしておくと、気になった人がそのまま説明へ進めます
スマホで見たときに崩れるところ
ページを整えるのはパソコンの広い画面ですが、読まれるのはほとんどがスマホです。横長の画面で気持ちよく並んだレイアウトは、縦長の画面では形が変わります。
- 1件の長さは、画面ひとつに収まるくらいまで。パソコンで4行のつもりが、スマホでは8行を超えることがあります
- 声の中の一言を見出しにして、太字で立てる。スクロール中の目に入るのは、実質そこだけです
- 声と声の区切りは、線か背景色で付ける。余白だけだと、狭い画面では文章がつながって見えます
- 名乗りは本文のすぐ下に置く。右寄せは、幅が狭いと本文と離れて浮きます
折りたたみを使ってよい場合
- 先頭の2〜3件は畳まない。全部畳むと、開く手間の前に離れてしまいます
- 畳むなら、長い声だけ。短い声まで一律に畳むと、開いた読み手が拍子抜けします
- 畳んだ中は開かれない前提で作る。見出しの一言だけで意味が通れば、開かれなくても損はありません
増えてきたときの組み替えと、古い声の扱い
声は少しずつ増えます。そのたびに末尾へ足すだけだと、ある時点でページが崩れます。変えるのは中身ではなく構造です。
- 10件くらいまで——切らずに一列。効く順に並べる
- 10〜30件——まとまりで切り、上部に短い目次を置く
- 30件を超えたら——まとまりごとにページを分けるか、一覧と絞り込みの形にする。積み続けると、スマホでは終わりが見えません
新しい声の入れ場所も先に決めておきます。末尾に足すだけだと、いちばん読まれる先頭の顔ぶれが何年も変わりません。まとまりの中の上のほうに差し込むか、古い1件と入れ替えるか、どちらかに決めておくと更新のたびに悩まずに済みます。
古い声は無理に消さず、利用時期を添えて下のほうへ動かせば十分です。ただし、もう扱っていないサービスの声と、当時と条件が変わっている声(価格・工期・営業時間・対応エリア)は外してください。今と違う話は、問い合わせのときの行き違いのもとになります。
やりがちな失敗3つ
1. 全部載せ
集まった声を、全部同じ扱いで並べてしまうものです。上から順に最後まで読まれることはまずないので、弱い声が混ざるほど、読み手が触れる数件の質が下がります。載せる声と、手元に持っておく声を分けるのが前提です。
2. 同じ調子の絶賛が続く
「丁寧」「親切」「また利用したい」。1件ずつは良い言葉でも、5件続くと1件も記憶に残りません。並べ終えたら、見出しの一言だけを上から縦に読んでみてください。似た言葉が続いていたら、順番を入れ替えます。書き直すのではなく並べ替えで直せます。
3. 肩書きだけ立派で、中身が薄い
「株式会社◯◯ 代表取締役」という名乗りの下に、「大変満足しました」の一行だけ。読み手が見ているのは肩書きではなく、その人の状況です。名乗りが「A様(40代)」でも、本文が具体的なら十分に届きます。
まとめ
- ページは5区画で考える。冒頭の説明と最後の行き先を省かない
- 冒頭は声ではなく1〜2行。誰の声か・どう集めたか・どこを見ればいいか
- 10件を超えたらまとまりで切る。切り口は1つに絞り、見出しは読み手の言葉で
- 専用ページは全部を置く場所、各ページは出会う場所。リンクは両方向に張る
- スマホでは1件を画面ひとつに収める。折りたたみは長い声だけ、先頭は畳まない
- 増えたら中身でなく構造を変える。条件が変わった声は下げずに外す
集めた声を台帳で管理し、選んで並べ、ページの形にして貼るところまでを軽くするツールとして、コエカベを準備しています。日本語で使えて定額の「お客様の声」ツールを目指し、事前登録を受け付けています。先行リリースの案内はこちら。
関連記事: 「お客様の声」の例文と書き方 / 「お客様の声」をホームページに載せる方法