集客できるランディングページデザインの作り方｜ファーストビューで「読む・離れる」が決まる

ランディングページを作るとき、サービスの特徴、お客様の声、料金、よくある質問と、下まで丁寧に作り込んでいるのに、最初の画面が弱い。これでは、せっかく用意した説明まで届きません。

集客を目的としたランディングページでは、ファーストビューにもっと力をかけるべきだと思っています。

もちろん、最初の画面だけで申し込みが決まるわけではありません。ただ、その先を読んでもらえるかどうかを左右する場所です。ここで興味を持たれなければ、下にどれだけ良いことを書いていても、伝える機会がなくなってしまいます。

ページ全体を均等に整える前に、まず最初の一画面で「自分に関係がある」「もう少し知りたい」と感じてもらえる状態を作ります。

ファーストビューで、続きを読む理由を作る

ページを作っている側は、商品についてよく知っています。下に何が書いてあるかも、どこを読めば魅力が分かるかも知っている。

でも、初めて訪れた人には、その前提がありません。

広告を見て少し気になっただけかもしれないし、別のサービスと比較している途中かもしれません。その人に「最後まで読めば分かります」と期待するのは、少し作り手に都合がよすぎると思うのです。

最初に必要なのは、誰に向けた、何のサービスで、どんな良いことがあるのかが伝わることです。

たとえば、デザイン講座のページに、大きく「あなたの可能性を、次のステージへ」と書いてあったとします。言葉の雰囲気は良くても、何を学ぶ講座なのか、自分が対象なのかまでは分かりません。

「ソフトは使える。でも、仕上がりに自信がない人へ」
「文字・余白・配置を学ぶデザイン講座」

実際の講座内容がこれに合っているなら、こちらのほうが読む理由を判断できます。自分の悩みと、学べる内容がつながるからです。

気の利いた言葉を考えることに時間を使うより、相手が何を見て「自分のことだ」と感じるのかを考えたい。ファーストビューの文章は、そこから作ります。

キャッチコピーと写真で、同じ魅力を伝える

文章を明確にしても、写真が別の印象を与えていたら、伝わり方は弱くなります。

先ほどの初心者向け講座なら、難しそうな制作画面や、高度な作品だけを大きく見せると、「自分にはまだ早い」と感じる人もいるでしょう。

作品が美しいことと、その写真が申し込みを検討する人に役立つことは、分けて考える必要があります。

僕なら、文字や余白を直すことで見やすくなった制作物を、改善前と改善後で見せることを考えます。

自分の作品と比較できて、「この違いを学べるのか」と想像できるからです。掲載するなら、実際の教材や使用許可のある制作物を使います。

ここで見せたいのは、講師の技術力だけではありません。受講する人が何を理解し、何を直せるようになるのかです。

写真を選ぶときも同じで、おしゃれな素材から探し始めると、伝えたいことが素材に引っ張られます。先に「この画像で何を理解してもらいたいか」を決めておくと、選ぶ基準がはっきりします。

広告から訪れるページなら、広告で興味を持った内容が、最初の画面でも確認できるようにします。添削に興味を持ってクリックしたのに、講師の経歴ばかりが大きく出てきたら、知りたいことを探し直させてしまうからです。

スマホの一画面で、情報の優先順位を決める

伝えたいことが決まったら、スマホの画面で組み立てます。ここで難しいのは、情報を入れることより、何を大きく見せるかを決めることです。

講座名、キャッチコピー、写真、特徴、価格、特典。どれも大切に見えるので、つい全部を目立たせたくなる。でも、全部が強いと、最初に読む場所が分からなくなります。

僕なら、まず一番伝えたい言葉と、それを理解するための画像を置きます。そのうえで、対象者やサービスの種類が曖昧になっていないかを確認します。

講座名を大きくしすぎて、何を学べるのかが小さくなっているなら、大小を入れ替える。補足が長くて画像を圧迫するなら、補足を短くするか、次の画面へ移す。文字を小さくして全部を収める前に、情報の役割を見直します。

文字と余白で、伝える順番を見せる

文字の大きさや太さは、読む順番を作るために使います。強調したい箇所が増えるたびに色や書体を足していくと、かえって優先順位が崩れます。

また、見出しと説明の間は近づけ、別の内容との間には余白を取る。こうした基本が整っていると、どの言葉がどの説明につながるのかを迷わず読めます。

完成したら、制作画面を拡大したまま判断せず、実際のスマホで開きます。改行が不自然ではないか、背景と重なって文字が読みにくくないか、肝心の内容が画面の下に隠れていないか。端末によって見える範囲が変わることも含めて確かめます。

ファーストビューに力を入れるとは、装飾を増やすことではなく、この一画面で理解できる状態まで詰めることだと思います。

改善するときは、最初の画面だけを見てもらう

自分で作ったページは、何度も見ているうちに分かりやすいと感じてしまいます。書かれていないことまで、頭の中で補えるからです。

そこで、対象に近い人に、まずファーストビューだけを見てもらいます。こちらから説明せずに、何のサービスだと思ったか、自分にどんな良いことがありそうかを聞いてみる。

想定した内容と違う答えが返ってきたら、文章や写真、目立たせる順番を見直します。「おしゃれですね」という感想だけでは、伝わったかどうかは判断できません。

理解してもらえたら、次は何を知りたくなったかを確かめます。それが次の画面に置く情報の手がかりになります。料金が気になったのか、学習内容なのか、受講できる条件なのか。相手の関心に沿って、ページの続きをつなげていきます。

集客できるランディングページデザインを作るなら、下まで完成したことをもって安心しないことです。

最初の画面を見ただけで、誰に何を提供するページか分かるか。そして、その人が続きを読みたいと思えるか。僕なら、この二つを確認できるまで、ファーストビューを作り直します。