ホームページのキャッチコピーは3段で書く｜トップはインパクトより共感

インパクトだけでは、読んでもらえません。

最近は、トップページを開くと動画が流れたり、文字がふわっと浮かび上がったりするホームページが増えましたね。Claude CodeやCodexのようなAIに頼めば、動きのある画面も短い時間で作れるようになりました。

そうなると、「うちのトップページも、もっと目を引くものにしたほうがいいのだろうか」と気になってくると思います。

僕も以前は、トップページには動くものを置くのがいちばんだと考えていました。これまで400件以上のホームページの制作・支援に関わってきて、いまは順番が逆だと考えています。

動きより先に決めるのは、最初の画面でいちばん大きく見せる言葉、つまりホームページのキャッチコピーです。

僕がキャッチコピーを決めるときは、3段に分けて考えます。

誰のためのホームページか。どんな未来を期待できるか。何をもって、それができるのか。

この記事では、トップページでインパクトと共感のどちらを先にするかの目安と、キャッチコピーを3段で書く方法を、東京の美容室と東大阪の鍼灸院の実例と一緒に紹介します。

ホームページのトップページは、インパクトだけでは読んでもらえない

目を引くことと、読んでもらうことは別

人は、動くものに関心を奪われます。視界の端で何かが動けば、考えるより先に、目がそちらを向きます。

それなら、トップページには、画像が数秒ごとに切り替わるスライドショーや動画がいちばんいい。以前の僕は、そう考えていました。デザインのインパクトで人を引き寄せれば、そのままホームページの中にとどまってもらえる、と。

でも、それだけでは足りませんでした。

道で車のクラクションが鳴ると、誰でも振り向きます。ただ、振り向いた人が、その車に乗せてほしいと思うわけではありません。何だろうと一瞬そちらを見て、また前を向いて歩き出します。

トップページの動きも、これに近いところがあります。目は引けます。けれど、そのあとに「これは自分に関係がある」と思ってもらえなければ、その人は何も読まずに帰っていきます。

それに、動きのあるホームページは、もう珍しくありません。見慣れた人にとっては、動いているというだけでは、以前ほど手を止める理由にならなくなっているように感じます。

見る人は「自分に関係があるか」だけを確かめている

あらかじめ断っておくと、ホームページを見る人を下に見ているわけではありません。

僕自身、何か目的があってホームページを開くときは、自分のことしか考えていません。

このページは、自分にどんないいことをしてくれるのか。どんな役に立つ情報をくれるのか。頭にあるのは、それだけです。

関係がないと思えば、その場で別のホームページに移るか、見るのをやめます。

人は2つの気持ちで動く、とよく言われます。「快楽を求める」か、「痛みを避ける」かです。

そうだとすると、最初の画面（ファーストビュー＝ホームページを開いたとき、スクロールしなくても見える範囲）に書くことは決まってきます。

会社の紹介より先に、見ている人にとっての得を書く。あるいは、いま抱えている困りごとが、ここなら片づきそうだということを書く。

3秒で、自分のためのホームページだと思ってもらう

僕は、ホームページを開いてから3秒以内に「自分のためのサイトだ」と思ってもらえるかどうかを、ひとつの目安にしています。

そのために使えるのは、デザインと言葉です。そして、狙ったとおりに伝えやすいのは、言葉のほうだと考えています。

インパクトか共感かは、誰が見に来るかで決める

じゃあ、トップページに動きやインパクトは要らないのか。僕はそう思いません。合う業種と合わない業種があるだけです。

見た目そのものを買ってもらう業種は、インパクトが合う

アパレルや美容室のように、デザインや仕上がりの見た目そのものを買ってもらう業種では、写真が切り替わるスライドショーや動画が合うことがあります。

見た瞬間に「この雰囲気、好きだな」と感じてもらうこと自体が、選ぶ理由になるからです。

ただし、その場合にも順番があります。これは、あとで美容室の実例と一緒に書きます。

悩みや不安を抱えて見に来る人には、共感が先

一方で、お店の考え方や、ほかとの違いが、写真だけでは伝わりにくい業種があります。そういう業種では、動きよりも「何が書いてあるか」のほうが、ずっと大事です。

たとえば、30〜40代の女性に向けて、悩みや不安の相談にのるカウンセリングのホームページ。開いたとたんに画面のあちこちが動くトップページでは、見ている人が落ち着けません。

視覚的なインパクトより、まずは共感が大事だと、僕は思っています。

自分にとって大事な話を誰かに聞いてもらおうとするとき、見ず知らずの人には話しません。落ち着きのない相手なら、なおさらです。

ある程度親しくて、リラックスできる関係があって、はじめて話せます。それは、インターネットの上でも同じではないでしょうか。

交流会で名刺を交換したとたんに、こちらの仕事をひとつも聞かずに、自分の会社の説明を始める人がいます。話の中身がどれだけ立派でも、聞いているほうは、どうやってこの場を離れようかと考えています。

話を聞いてもらいたいなら、先に相手と親しくなっていないといけません。そうでないと、相手は心に壁を作ります。

成果の上がらないホームページと、成果の上がるホームページ。その大きな違いは、ここにあるのではないかと思います。お客さんの悩みに寄り添う前に、自分が伝えたいことを一方的に伝えているかどうかです。

画面の向こうにいる相手は、見えません。それでも、そこに人がいることを、細かいところまで思い描けるか。壁を越えてもらえるかどうかは、そこで決まります。

僕は、ホームページで成果を出すには、「見ない・読まない」「信用しない」「行動しない」という3つの壁を越えてもらう必要があると考えています。トップページの最初の画面が受け持つのは、1つ目の壁です。3つの壁については、こちらの記事にまとめています。

迷ったときの目安

どちらにしても、言葉は要ります。いくら目を引いても、誰に向けたお店なのかが伝わらなければ、その先が続かないからです。

僕がお手伝いした2つのお店を見ても、それがよく分かります。

動きを入れた美容室と、見やすさを選んだ鍼灸院

東京・武蔵小金井の美容室HAMONさん｜動きを入れたのは、誰に向けるかを決めたあと

東京・武蔵小金井の美容室HAMONさんは、ハイライトやブリーチを使ったデザインカラーが得意なお店です。オーナーの中村さんの技術を求めて、群馬から往復6時間かけて通うお客さんもいます。

リニューアル前のホームページについて、中村さんは対談でこう話しています。

1番は、見ても何の店かよくわかんない。美容室ってこと以外は何もわかんなかったんで、それに気づくのに6年かかったんで。

何が言いたいかというと、美容室のように見た目が大事な業種でも、「何が得意で、誰に来てほしいお店なのか」が伝わらなければ、ホームページは選ぶ理由にならない、ということです。

リニューアルでは最初に、中村さんのこだわりと、来てほしいお客さんのことを、細かく聞いていきました。

そのうえで、全員に向けたホームページにはしない、と決めています。色にこだわる人、色のことで困っている人に見てもらえればいい。そうでない人は、帰ってもらってかまわない。

ホームページを開いた最初の一瞬には、HAMONさんらしい、波紋のアニメーションを入れました。打ち合わせで僕は、ホームページは最初の3秒で帰られてしまう、という話をしていました。その3秒のための動きです。

このアニメーションは、同じ人には1日に1回しか出ないようにしてあります。毎回出てきたら、うっとうしいからです。動きは、読むじゃまになったとたんに、逆効果になります。

中村さんは、できあがったホームページを見て、「キャッチーな人にだけキャッチーでいいんだな」と思ったそうです。ほかの美容室のホームページは、男性も女性も、おじいちゃんもおばあちゃんも、全員に向けて作られていた。HAMONさんのホームページは、色にこだわる人や困っている人が見てくれればいい作りになっていて、そこが分かりやすい、と話してくれました。

リニューアル前の直近1年、ホームページからの予約はゼロでした。リニューアル後は、2か月で14件です。

すごいですよね。中村さんも対談で、お店としては記録的な数字だと話していました。

動きが合ったのは、美容室だからというだけではないと、僕は思っています。誰に向けたお店なのかを先に決めて、言葉にした。動きは、そのあとに足したものです。

東大阪の女性専門鍼灸院 はりとお灸ひなたさん｜不安を抱えて見に来る人のために、見やすさを優先した

東大阪の女性専門鍼灸院「はりとお灸ひなた」の西畑さんは、刺さないはりとお灸で、主に30代から50代の女性の体をみています。体の不調だけでなく、心と体の両方のケアを求めて来る方が多いそうです。

西畑さんは以前、5年ローンで200万円をかけて、別の制作会社にホームページを頼んでいました。ところが、制作の内容が雑で、対応にも問題があってトラブルになり、最終的にはほぼ全部をご自分で作り直しています。

ぞろ屋に相談してくれたときの、いちばんの希望はこうでした。鍼灸は、たくさんの人を集める必要はない。見に来てくれた人に、正しく想いが伝わるホームページにしたい。

鍼灸院のホームページを開く人は、いまその瞬間に、体のことで不安を抱えていることが多いです。そこへ、込み入った作りや、ごちゃごちゃしたデザインを見せると、逆効果になりかねません。

だから、ひなたさんのホームページでは、色合い、余白、写真の雰囲気といった細かいところまで、見やすさと安心感を優先しました。西畑さんが持っている、押しつけがましくない安心感を、画面でも感じてもらうためです。

その前の聞き取りでは、西畑さんの人柄や価値観、これまでの経験、なぜいまの仕事をしているのかまで聞いています。そこまで聞かないと、誰の力になれる鍼灸院なのかを、言葉にできないからです。

西畑さんは、そのときのことをこう振り返っています。

やっぱりここまでしないといけないよね、と感じさせられました

西畑さんによると、僕は最初に「鍼灸はむずかしい」と言ったそうです。それでも、誰に来てほしいのかを決めることが大事だという話は、受け取ってもらえました。

リニューアル後、常連さんからは「わかりやすくなった」という声が届いています。

西畑さんは一人でお店をされているので、新しいお客さんが一気に増えても、受けきれません。だから、問い合わせが急に増えた、という話ではありません。西畑さんが感じているのは、必要な人が、必要な情報にきちんと辿りつけるようになった、ということです。

もうひとつ、新しく来たお客さんの定着のしかたが、はっきり分かれるようになったそうです。はじめから信じてみようと思って来た人は、西畑さんの話もすんなり受け取ってくれる。

ホームページで「どんな人の力になれるのか」がはっきり伝わるようになったことが、関係しているのではないか。僕は、そう考えています。

もし、ひなたさんのトップページを、目を引くことだけを考えて作っていたら、こうはならなかったと思います。不安を抱えて見に来た人ほど、読む前に帰っていたはずです。

東大阪の女性専門鍼灸院、はりとお灸ひなたの西畑さんとの対談は、動画でも見られます。

ホームページのキャッチコピーは「誰のため・どんな未来・何をもって」の3段で書く

ここからは、最初の画面に置く言葉の話をします。

キャッチコピーの役目は、続きを読んでもらうこと

キャッチコピーは、最初の画面でいちばん大きく見せる一言のことです。

その役目は、ひとつしかないと僕は考えています。下へスクロールして、続きを読んでもらうことです。

アメリカのコピーライター、ジョセフ・シュガーマンさんは、1文目の目的は2文目を読んでもらうことで、2文目の目的は3文目を読んでもらうことだ、という考え方で知られています。気がついたら、すべり台をすべり降りるように最後まで読んでいた。それが理想だ、という話です。

そのためにキャッチコピーが見る人に感じてもらうことは、「これは自分のためのホームページだ」の一点です。

僕は、その一点を外さないように、キャッチコピーを3段に分けて書いています。

1段目｜誰のためのホームページか

最初に決めるのは、誰に向けて書くかです。

誰に向けるかが決まっていないと、キャッチコピーはぼんやりします。「どなたでも」「幅広く」と書いた言葉は、読んだ人が自分のことだと思えません。

僕がよく例に出すのは、ネイルサロンです。来てほしいお客さんを、「ほとんど一人で子育てをしている40代の女性」と決めたとします。

すると、「朝の5分が惜しい！子育てママのための、時短ネイルサロン」のような言葉が出てきます。読んだ人は、自分のためのお店だとすぐに分かります。

同じネイルサロンでも、「指先は、オシャレの最先端」と書くと、とたんにふわっとします。誰に向けた言葉なのかが、消えてしまうからです。

1段目は、キャッチコピーの上に、小さな文字で置きます。「◯◯でお困りの方へ」「◯◯をお考えの社長へ」のように、相手がどんな立場で、いまどんな状況にいるのかを書きます。

年齢や性別だけで絞るより、状況で書くほうが、読んだ人は自分のことだと気づきやすくなります。「40代の女性へ」より、「子どもを送り出したあとの1時間しか、自分の時間がない方へ」のほうが、当てはまる人には届きます。

2段目｜どんな未来を期待できるか

この2段目を、いちばん大きく見せます。

書くのは会社がやることではなく、頼んだあとにお客さんがどうなっているかです。パッと見た瞬間に、どんなことを期待できそうかを感じてもらいます。

ドラッグストアの風邪薬を思い浮かべてみてください。箱の正面にいちばん大きく書いてあるのは、たいてい「のどの痛み・熱に」のような言葉ですよね。成分の名前は、横や裏に小さな字で並んでいるだけです。

成分の名前を見て薬を選べる人は、多くありません。ほとんどの人は、自分の症状が書いてある箱に手を伸ばします。

キャッチコピーの並べ方もまったく同じです。いちばん大きく書くのはお客さんの未来で、会社がやること、つまり手段はその下に置きます。

会社がやることを、キャッチコピーにしない。僕がいちばん気をつけているのは、ここです。

未来を書くときは、「安心」「笑顔」「豊かな暮らし」のような、どの会社でも言える言葉に逃げてはいけません。

いつ、どこで、何をしなくてよくなるのか。何ができるようになるのか。その場面が目に浮かぶところまで具体的に書きます。

そうした未来の言葉は、机の上でひねり出すより、お客さんが実際に口にした言葉から探すほうが見つかります。

頼んでくれたお客さんに、「頼む前は、何に困っていましたか」「頼んだあと、何がいちばん楽になりましたか」と聞いてみる。返ってきた言葉が、そのままキャッチコピーの材料になります。

3段目｜何をもって、それができるのか

未来を語るだけだと、「本当にそうなるの？」と疑われて終わりです。だからキャッチコピーのすぐ下に、根拠になる一文を添えておきます。

ここに書くのが、会社としてやることです。どんな方法や体制で、その未来をかなえるのか。

強みの中から、いちばん具体的な事実を選んでください。「◯年」「◯件」「◯分以内」のように、数字で言えるものがあればここで使います。

具体的な事実は、強力な証拠になります。ただ、それをいちばん大きく書いてしまうと、お客さんが「で、それは自分にとって何がいいの？」と考えなきゃいけなくなります。だから、未来の下に置くんです。

3段で書いてみる

架空の例で、並べてみます。小さな会社の給与計算を引き受けている事務所です。

やっている仕事は、どちらも同じです。違うのは、どれをいちばん大きく見せるかだけです。

1つ目を読んで「うちのことだ」と思うのは、もう代行を頼むと決めている人だけです。2つ目は、毎月の締め日のあとに夜まで残っている社長が、自分の話だと気づきます。

書き終えたら、次の2つを自分に聞いてみてください。

最初の画面の下に、何をどの順番で並べるかは、こちらの記事にまとめています。

キャッチコピーで起きやすい失敗

失敗1｜会社がやることを、いちばん大きく書いている

「地域密着で30年」「最新の設備を導入」「初回のご相談は無料」。

どれも大事な情報です。ただ、これは3段目に置く言葉です。いちばん大きく書いても、読んだ人は、自分がどうなれるのかを思い描けません。

自分の仕事に誇りを持っている会社ほど、こうなりやすいと感じます。毎日向き合っているのは、自分たちがやることのほうだからです。

失敗2｜かっこいい言葉、ふわっとした言葉にしている

こういう、なんとなくいい感じのキャッチコピーを載せたホームページは、たくさんあります。でも、これを読んで、続きを読みたくなるでしょうか。何をしてくれる会社なのかも、分かりません。

かっこいいキャッチコピーが力を持つのは、テレビのCMや駅のポスターで、何度も何度も目にしてもらえる大手の場合です。くり返し見るうちに、その言葉と商品が、頭の中で結びつきます。

スモールビジネスのホームページは、そうはいきません。初めて開いた人に、その場で「自分のためのホームページだ」と分かってもらう必要があります。

僕も、センスのいい言葉は好きです。それでも、ホームページのキャッチコピーは、少しくらい野暮ったくても、誰に何を伝えるかがはっきりしているほうが、失敗がありません。

失敗3｜社内の多数決で決めている

キャッチコピーの案をいくつか出して、スタッフみんなの多数決で決める。よくある決め方です。

ただ、この決め方をすると、「なんかいい感じ」の案が選ばれやすくなります。僕もいろいろ試してきましたが、一見よさそうに見えた言葉が、お客さんには届かないことがあります。

社内の人は、自分の会社が何をしているのかを、もう知っています。だから、ふわっとした言葉でも、足りない意味を頭の中で補って読めてしまいます。初めて見るお客さんには、それができません。

選ぶ基準は、社内で人気があるかどうかではなく、先ほどの2つの問いにするのがおすすめです。

この話は、ポッドキャストの第37回「センスのいい中小企業こそハマるホームページのキャッチコピーの罠」でも話しています。