LPのファーストビュー、最初の画面で何を伝える？情報の順番の決め方

LPの制作を外部へ依頼している、あるいは社内で作り直していると、最初の打ち合わせで「ファーストビューに何を入れますか」と聞かれることがあります。商品やサービスの説明、強み、キャンペーンの案内、実績、問い合わせへのボタン。どれも必要に思えて並べた結果、公開後に「何のページなのか伝わりにくい」と言われてしまった、という心当たりはないでしょうか。

原因は、情報の多さだけではありません。要素を減らしても、読者がどの順で何を知りたいのかが決まっていなければ、伝わる順番にはなりません。そこでこの記事では、文言を考え始める前に、その画面が誰に何を伝える画面なのかを一文で決めます。そのうえで見出し・補足文・ボタンの役割を分け、写真や図を置く位置、スマートフォンでの確認順を整理します。読み終えたときに、自社のファーストビューで残す要素と削る要素を、社内で説明できる状態を目指します。

最初の画面が伝わらないのは、情報が多いからだけではない

ファーストビューが伝わらないと感じたとき、最初に手を付けたくなるのは要素を減らすことです。情報量が減れば画面は静かになりますが、静かになった画面が伝わる画面になるとは限りません。読者は最初の画面で、文字の多さではなく、自分に当てはまる話かどうかを確かめています。

読者は、自分に関係あるかどうかを最初に決める

読者が最初の数秒でしているのは、内容の理解ではなく取捨選択です。自分が対象なのか、どんな困りごとを扱っているのか、読み進める理由があるのか。この三つが画面から拾えないと、文字が少なくても読むのをやめてしまいます。反対に要素が多くても、対象と困りごとが一目で分かる画面なら、読者は自分に必要な情報を選び取れます。

• 自分が対象の読者かどうか
• 自分の困りごとを扱っているか
• 読み進めると何が分かるか

要素を減らすだけでは、伝わる順番は決まらない

要素を減らす作業は、置くものを決める作業ではありません。何を先に伝え、何を後から補うかという順番まで決めて、初めて削った理由を社内で説明できます。順番が決まらないまま減らすと、会社が言いたいことだけが残り、読者が先に知りたいことが抜けてしまいます。

ですから最初の画面を直すときは、要素の数を数える前に、読者がどの順で確かめるのかを書き出します。その順番が決まってから、残す要素と削る要素を選びます。

誰に何を伝える画面かを、1文で決める

前の章では、読者が最初の画面で自分に関係あるかを確かめている、という話をしました。この章では、その確認に答える準備として、画面の宛先を一文で決めます。見出しの言葉を練るのは、この一文ができてからです。

読者の状況を一文で書く

読者の状況とは、誰がどんな場面でこのページを開くかです。「Web担当者」のような職種名だけでは、読む人は自分を重ねられません。「外注先へ修正を頼みたいのに、どこを直したいのか言葉にできない」ところまで書くと、画面に置く言葉を選びやすくなります。

• 誰が（職種ではなく立場で）
• どんな場面で
• 何に困って
• 何を知りたいか

提供するものを一文で書く

次に、その状況に対してページが渡すものを書きます。商品名や機能の一覧ではなく、読んだあとに何ができるようになるか、という形にすると見出しへ移しやすくなります。

業種名から書き始めない

「LP制作会社の〜」のように業種名から始めると、読者は自分との関係を読み取るまで時間がかかります。主語は読者の状況にし、提供するものは動詞で終わらせます。長くなったら状況と提供を二文に分け、最後に一つへつなげます。

次の表は、架空のサービスを使った記入例です。実在する企業やサービスの事例ではありません。

一文ができたら、見出しはその一文を短くしたもの、補足文は判断材料として使えます。次の章では、この一文をもとに、見出し・補足文・ボタンの役割を分けます。

見出し・補足文・ボタンの役割を分ける

前の章で作った一文は、画面の宛先を決めるためのものでした。この章では、その一文を三つの要素へ分けます。見出し、補足文、ボタンは、同じことを言うために並んでいるのではありません。それぞれが答える問いを一つに決めると、文言を足すか削るかを社内で説明しやすくなります。

見出しには結論を置く

見出しが答えるのは「この画面は自分に何をもたらすか」です。読者は見出しだけを拾って読み進めるかを決めるため、結論を先に置き、条件や前置きは後ろへ回します。呼びかけだけの見出しでは、何が得られるかが残りません。一文で決めた宛先を、読者が自分の言葉として読める長さに削ったものが見出しです。

• 業種名や会社紹介から始める書き出し
• 「〜をお考えの方へ」だけの呼びかけ
• 条件を三つ以上並べた長い一文

補足文には判断材料を置く

補足文は、見出しで示した結論を信じてよいかを確かめる場所です。誰が対象か、どんな進め方か、費用をどう考えるか。読者が次の一歩を決めるのに使う材料を置きます。ここで新しい主張を始めると、見出しと補足文が同じことを取り合います。見出しで言い切れなかった条件を補う、という順序を崩さないようにします。

ボタンは行動を一つに絞る

ボタンは、押すと何が起きるかを一つに絞った場所です。同じ画面に「資料請求」「相談予約」「LINE登録」を並べると、選ぶ負担が読者に移ります。まず最も多い読者に取ってほしい行動を一つ決め、ほかの導線は文字リンクやページ下部へ回します。文言は、押した先で起きることを短く書きます。

三つの役割が分かれたら、次は画面の中での強弱です。役割が重なったまま文字の大きさだけを変えると、読者は再び迷います。次の章では、写真や図、実績をどこへ置くかを扱います。

写真・図・実績の置き場所を決める

前の章では、見出し・補足文・ボタンの役割を分けました。役割が決まると、次に迷うのが写真や図、実績の位置です。これらは画面をにぎやかにするために置くものではありません。読者が言葉だけでは確かめにくいことに答える場所へ置くと、画面の強弱が役割と一致します。

写真で伝える情報を選ぶ

写真は、言葉にすると長くなる情報を短く渡せます。作業スペースの広さ、道具の質感、人が集まる場の雰囲気などです。反対に、どのページにも使える無難な写真は、置いても判断材料になりません。その写真を見た読者が何を確かめられるかを一文で言えるかどうかを、選ぶ基準にします。

• 読者が確かめたいことに答えているか
• 言葉で説明するより短く伝わるか
• 説明文を添えないと意味が伝わらないか
• 掲載の許諾と、写っている状態が現在と合っているかを確認したか

図は説明が必要なときだけ置く

図が力を発揮するのは、関係や順番を言葉だけで追うと読みにくいときです。手順が三つ以上ある、前後の流れがある、二つの案を比べる。こうした内容は図にすると追いやすくなります。一方、一文で言えることを図にすると、読み手は図を読み解く時間を足すことになります。まず一文で書いてみて、それで足りるなら図は置きません。

実績も同じ考え方で置きます。数字や事例を多く並べるほど伝わるとは限りません。読者が「自分と同じ状況でも通用するのか」を確かめられる位置に一つ置くほうが、判断に使えます。数字を載せるなら、いつ時点の、何を数えた数字かを添えます。出典を確認できない数字は画面に入れません。

三つの案に正解はありません。写真を先に置く画面は雰囲気を、図を先に置く画面は仕組みを、それぞれ先に判断してもらう設計です。自社の読者が最初に確かめたいことが、どの案の一番上にあるかを照らして選びます。次の章では、この並びがスマートフォンの幅でも崩れていないかを確かめる手順を扱います。

スマートフォンで読み、順番を確かめる

前の章では、写真や図を置く位置を決めました。最後に確かめるのは、その並びがスマートフォンの幅でも同じように読めるかどうかです。PCで見慣れた画面をそのまま縮めたとき、伝わる順番まで同じになっているとは限りません。

画面の切れ目で、伝えたいことが途切れていないか

スマートフォンでは、要素は基本的に上から一列に積み上がります。PCで横に並んでいた見出しと補足文も、写真と説明文も、縦に離れます。スクロールのたびに画面が切り替わるので、その一つひとつで「この画面だけで何が言えるか」が問われます。目安は、すべてを最初の画面に収めることではなく、どの位置で止まっても一つのまとまった話が読めることです。

• 見出しと補足文が、別の画面に分かれていないか
• 対象や条件を書いた文が、途中で切れていないか
• ボタンが、その説明より上に来ていないか
• 写真と説明文が離れ、何の写真か分からなくなっていないか
• 横にはみ出した文字や、押しにくい大きさのボタンがないか

確認は、実際の端末で指でスクロールしながら行います。PCのブラウザ幅を狭めた表示では、改行の位置や写真の縦横比が実機と変わることがあるためです。読みながら各画面を撮っておくと、修正の依頼でも位置を共有できます。

次の表は、架空のサービスを例に、要素が上から積み上がるときの確認点を整理したものです。実在するページの例ではありません。

修正を依頼するときの伝え方

修正を外部へ依頼するとき、「なんとなく伝わらない」だけでは、相手は直す場所を選べません。位置・要素・症状の三つを組にして伝えます。「上から2画面目の補足文が、対象の条件の途中で切れて読めない」という形です。画面のスクリーンショットに番号を振り、番号で指すと話が早く進みます。

• 位置：上から何画面目か。要素名と一緒に書く
• 要素：見出し、補足文、写真、ボタンのどれか
• 症状：その画面を読むと、どう困るか
• 希望：どう読ませたいか。案は一つに絞らなくてよい
• 優先：今回直す範囲と、次回に回す範囲

直し方まで一つに決める必要はありませんが、優先順位は伝えます。すべてを一度に変えると、公開後にどこが効いたのか分からなくなります。まずは最初の画面、次にボタンの前後、という順で区切ると、確認と修正を繰り返しやすくなります。

公開したあとは、変更した日と変えた箇所を短く記録しておきます。反応を見るときも、何を変えた回かが分かると、次の判断に材料が残ります。最初の画面は一度作って終わりではなく、読者に合わせて順番を直していく場所です。