LPを作っていると、よくこんな言葉が出てきます。
「FVをもう少し強くしてください」
「ファーストビューで内容が伝わりません」
「FVにCTAを入れましょう」
初めてLPを作る人からすると、
FVって何？
ですよね。
FVとは、**ファーストビュー（First View）**の略。
簡単に言えば、
Webページを開いたとき、スクロールする前に最初に見える部分
のことです。
LPでは、この最初の画面がとても重要です。
1．事件発生！きれいなLPなのに「何のページか分からない」
AIにこんな指示を出したとします。
高級感のある、おしゃれなLPのファーストビューを作ってください。
するとAIが、
- 大きな写真
- 美しいグラデーション
- 英語のキャッチコピー
- キラキラした装飾
- おしゃれなボタン
を使ったデザインを作ってくれました。
見た目はすごくきれいです。
ところが、ページを初めて見た人に聞いてみると、
「これ、何のサービス？」
……困りました。
デザインはきれいなのに、内容が伝わっていません。
LPのファーストビューで最初に考えたいのは、「おしゃれかどうか」ではありません。
まず、
何のページなのか分かること。
ここから始めます。
2．ファーストビューには何を入れればいい？
商品によって違いますが、初心者ならまず次の4つを考えてみましょう。
① 誰のための商品・サービスなのか
② 何ができるのか
③ どんなメリットがあるのか
④ 次に何をしてほしいのか
例えば、初心者向け英会話講座なら、
英語をもう一度学びたい大人の方へ
中学英語から始める
やり直し英会話講座1日15分から、自宅で学べます。
【無料体験を申し込む】
こんな形です。
ページを開いた人が、
「あ、自分向けかも」
と思える情報が最初にあります。
3．キャッチコピーだけで全部伝えようとしない
ファーストビューでよくある失敗が、
キャッチコピーに全部詰め込むこと
です。
例えば、
あなたの人生を変える、新しい学びのカタチ。
かっこいいですね。
でも、これだけでは、
何の商品なのか分かりません。
英会話なのか、プログラミングなのか、転職サービスなのかも分かりません。
逆に、
60代から始めるオンライン英会話
なら、かなり具体的です。
コピーには役割を分ける方法があります。
例えば、
【誰向け？】
英語をもう一度学びたい大人の方へ
【メインコピー】
知っている英語を、
今度こそ「話せる英語」へ。
【補足】
中学英語から学び直せる
初心者向けオンライン英会話講座こうすると、メインコピーだけに全部背負わせなくて済みます。
分かりやすい説明＋印象に残るコピー
を組み合わせればいいのです。
4．「誰向け？」を入れると一気に分かりやすくなる
前回の記事で「ターゲットを決める」という話をしました。
そのターゲットをFVにも反映します。
例えば、
英会話を学びませんか？
より、
海外旅行で英語を話してみたい50代・60代の方へ
の方が、
「自分のことだ」
と思ってもらいやすくなります。
プログラミング講座なら、
プログラミングを学ぼう
ではなく、
AIにコードを書いてもらったけど、エラーになると困ってしまう方へ
でもいいわけです。
年齢や性別だけでなく、
「どんな悩みを持っている人か」
を示す方法もあります。
5．画像は「きれいだから」ではなく役割を考える
FVには大きな画像を使うことがよくあります。
ここでもAI画像生成は便利です。
ただし、
きれいな画像なら何でもいいわけではありません。
例えば、オンライン英会話なら、
- PCで英会話している人
- 外国人と楽しそうに話している人
- 学習している人
などを使えば、サービスをイメージしやすくなります。
一方、内容と関係のない美しい風景を大きく置いても、
「きれいだけど何のページ？」
となる可能性があります。
画像にも、
「この商品を使うとどうなる？」
を伝える役割を持たせてみましょう。
6．AIでFV画像を作るなら「文字の場所」まで考える
ここはAI画像生成とLP制作がつながるところです。
例えば、
カフェでパソコンを使っている女性
だけで画像を作ったとします。
人物が画面中央に配置されました。
ところがLPに入れてみると、
文字を置く場所がない。
そこで画像生成の段階から、
横長16:9。
人物を右側に配置してください。
左側にはキャッチコピーを配置するため、十分な余白を残してください。
と指定します。
すると、
┌────────────────────┐
│ │
│ キャッチコピー │ 人物
│ 説明文 │ ○
│ [ CTA ] │ /|\
│ │
└────────────────────┘というレイアウトを作りやすくなります。
画像単体ではなく、LPに配置した完成状態を考えて生成する。
これがポイントです。
7．ただし文字は画像に入れすぎない
画像生成AIに、
このキャッチコピーも画像に入れてください。
と頼むこともできます。
しかしLPでは、基本的には
文字はHTMLで配置する
方法がおすすめです。
理由はいくつかあります。
文章を変更するときに簡単ですし、PCとスマートフォンで文字サイズを変えることもできます。
また、画像に文字を焼き込んでしまうと、スマートフォンで縮小されたときに読みにくくなる場合があります。
基本は、
背景・人物・写真
↓
画像
キャッチコピー・説明・ボタン
↓
HTML/CSSと考えてみましょう。
8．CTAって何？
FVでよく出てくるもうひとつの言葉が、
CTA
です。
CTAは「Call To Action」の略です。
難しそうですが、
「次にしてほしい行動へ誘導するもの」
と考えればOKです。
例えば、
無料体験を申し込む
詳細を見る
LINEに登録する
資料をダウンロードする
などのボタンです。
LPを見た人が、
「興味ある。でも次はどうすればいい？」
とならないようにします。
9．ボタンは「送信」より具体的に
例えば、
[ 送信 ]だけでは、押したら何が起きるのか分かりません。
できれば、
[ 無料体験に申し込む ]のようにします。
資料請求なら、
[ 無料で資料を受け取る ]セミナーなら、
[ セミナーに申し込む ]です。
押したあと何が起きるのか分かる言葉
にすると親切です。
10．スマホでは「人物が消える」ことがある
PC用のFVを作った。
こんなレイアウトです。
┌──────────────────────────┐
│ │
│ キャッチコピー 人物 │
│ 説明 人物 │
│ [CTA] 人物 │
│ │
└──────────────────────────┘PCでは完璧。
ところがスマートフォンで開くと、
┌─────────┐
│ キャッチ │
│ コピー │
│ 説明 │
│ [CTA] │
│ │
└─────────┘人物がいない。
これは背景画像の表示位置やトリミングによって起こることがあります。
例えばCSSで、
background-size: cover;を使っている場合です。
cover は画面を背景画像で埋めてくれます。
便利ですが、画面の比率が変わると、
画像の一部が切れます。
人物が画像の端にいる場合、その人物ごと切れてしまうことがあります。
11．PCとスマホは「同じ画像を縮めるだけ」と考えない
これが非常に重要です。
PCは横長。
スマートフォンは縦長です。
そもそも画面の形が違います。
そのため、
PCのデザインをそのまま小さくすればスマホ版になる
とは限りません。
例えばPCでは、
文章 ｜ 人物だったものを、スマートフォンでは、
文章
人物
CTAと縦に並べてもいいわけです。
場合によっては、
PC用とスマートフォン用で別の背景画像を使う
方法もあります。
無理に同じ構図を維持する必要はありません。
12．FVを高くしすぎない
AIに、
インパクトのあるファーストビューにしてください。
と頼むと、大きな画像を画面いっぱいに配置することがあります。
もちろん、それ自体が悪いわけではありません。
ただし、FVが大きすぎると、
その下に続きがあることが分かりにくくなる
場合があります。
特にスマートフォンでは、
キャッチコピー
画像
説明
CTA
（まだFV）
↓
ようやく次のセクションとなり、最初の画面が長くなりすぎることがあります。
「全部をFVに入れる」のではなく、
最初に必要な情報を優先する
と考えてみましょう。
13．AIにFVを作ってもらうときの指示例
例えば、こんな依頼ができます。
初心者向けオンライン英会話講座の
LPファーストビューを作ってください。
ターゲット：
50代・60代で英語を学び直したい初心者
目的：
無料体験への申し込み
構成：
・ターゲットを示すサブコピー
・メインキャッチコピー
・短い説明文
・無料体験へのCTAボタン
・サービスをイメージできる人物画像
デザイン：
明るく安心感のある雰囲気
文字の可読性を最優先
過度なグラデーションや装飾は使用しない
画像：
人物は右側
文章は左側
文字を置く部分には十分な余白を確保
スマートフォン：
レスポンシブ対応
人物やCTAが画面外に切れないようにする
まずHTMLを書く前に、
ファーストビューの構成案を提示してください。ここまで渡せば、
「いい感じのFVを作って」
よりも、AIが目的を理解しやすくなります。
14．完成したFVを5秒だけ見てみよう
最後に簡単な確認方法です。
完成したファーストビューを、
初めて見る人のつもりで5秒だけ見る。
そして画面を閉じます。
次の質問に答えてみてください。
これは何の商品・サービスだった？
誰向けだった？
何ができる？
次に何をすればいい？
ほとんど答えられないなら、FVの情報設計をもう一度見直してみましょう。
逆に、デザインがシンプルでもこの4つが伝わるなら、
FVとしての役割はかなり果たせています。
今日の合格ライン
今回は、この5つを覚えておけばOKです。
- FVはスクロール前に最初に見える部分
- まず「誰向け・何ができる・メリット」を伝える
- CTAで次にしてほしい行動を示す
- AI画像は文字を置くスペースまで考えて生成する
- PCとスマートフォンでは見え方が違う
特に重要なのは、
「おしゃれなFV」より先に「何のページか分かるFV」を作る。
これです。
ワンポイント答え合わせ
次の2つなら、初心者向けプログラミング講座のFVとして分かりやすいのはどちらでしょう？
A
CREATE YOUR FUTURE
新しい可能性を、ここから。
B
AIにコードを書いてもらったけど、エラーになると困ってしまう方へ
AIと一緒に学ぶ
初心者向けWebプログラミング講座[ 講座の内容を見る ]
答え：B
Aの方がおしゃれなデザインを作りやすいかもしれません。
でもBなら、
「誰向けで、何のサービスなのか」
を初めて訪れた人でも判断できます。
LPは作品を見せる場所ではなく、訪問者に情報を伝え、次の行動につなげる場所です。
AIを使えば、きれいなファーストビューは以前よりずっと簡単に作れます。
だからこそ、
「何を作れるか」だけではなく「何を伝えるべきか」を人間が判断する。
ここが大切です。