ランディングページ(LP)の一番上、ページを開いたユーザーが真っ先に目にする部分をファーストビューと言います。
ファーストビューの役割
ファーストビューの役割は、一瞬でユーザーの気持ちをつかむこと。
インターネットを見ていて、開いたページのタブを数秒で閉じた経験がある方がほとんどでしょう。
ページを表示したからと言って、ユーザーがそのページを最下部まで読んでくれるわけではないのです。
このため、ユーザーが興味を持つイメージ画像やキャッチコピーを掲載し、下のボディパートへ読み進めてくれるように促します。
- どんな人に適しているのか
- この商品（サービス）によって何が得られるのか
- どんなメリットがあるのか
こうした事を一瞬で伝え、ユーザーが「もっと詳しく知りたい」と思わせることができるかを第一に考えましょう。ページをスクロールダウンしてくれれば、ファーストビューのデザイン・構成は成功と言えます。
構成要素と制作ポイント
ファーストビューは、主に下記２つを主体に構成されています。
この２つを使って、一瞬でユーザーに情報を伝える必要があります。
- 目をひく画像（メインビジュアル）
- トップコピー（キャッチコピー/コンセプトコピー）
情報を伝えるために、トップコピーは特に重要です。
LPによっては稀に画像がない場合もありますが、コピーはマスト。 ユーザーに「このページを読んでみたい」「私の求めていたものだ」と思わせるために、ベネフィットを示す内容のコピーが使われます。
ベネフィットとは
ベネフィットとは、その商品やサービスが「ユーザー（お客様）をどのように変えてくれるか」です。ユーザーの立場から、自分にとってどんな良いことが起こるのかを示すことでキャッチコピーの訴求力が上がります。
トップコピー参考サイト
また、完結した形でベネフィット(利益)を示すのではなく、ベネフィットを感じさせる提案式のキャッチコピーもよく使われます。興味を持ったユーザーは「どんなサービスか」「何ができるのか」を知るために、ページをスクロールしてくれるでしょう。
https://kintone.cybozu.co.jp/jp/exe_lp/
全社の業務改革に ノーコードツール kintone | サイボウズ株式会社
キャッチコピーに関してはLP advanceのキャッチコピー一覧が参考になります。
ファーストビューのデザインを除外して、コピー(文字)だけの状態で見ると、ベネフィット型キャッチコピーの強さがより一層わかります。
典型的なファーストビュー事例
ファーストビューはトップコピーと画像がメイン。
ですが、それ以外の情報を入れ込むこともあります。
よく使われている、典型的なファーストビューの構成を見てみましょう。
1.シンプル/ベーシック型
- 画像
- トップコピー
- サブコピー
- サイト名 or 商品名
くらいの厳選された内容で構成された、シンプルなファーストビュー。トップコピーや画像のインパクトが強く伝わり、スッキリと見やすいです。
最もベーシックなファーストビューの形でもあります。
キャッチコピーの項目で紹介した参考サイトも、ほとんどがこのパターンですね。
広告からの流入がメインの場合、ユーザーは既に商品やサービスに興味を持っている可能性も高いです。ファーストビュー部分にもCTA（予約や購入などのボタン）を設置して、縦長のページを延々スクロールしなくてもすぐユーザーアクションが行えるようにすると効果的です。
https://www.forte-group.jp/lp/beaul/
エステサロンBeauL
https://www.kai-group.com/products/kamisori/product/kamikamisori.html
貝印の紙カミソリ
CTAがアプリのダウンロードだと、下記のようなレイアウトのLPもよく見かけます。
アプリのDL先（App Store/Google Play）リンクと、QRコードが表示されるタイプです。
https://nudge.cards/
Nudge(ナッジ)
2.金額・お得感を強調する
キャンペーンを行っている場合などは、“お得感”を示す部分を強調することもあります。トップコピーが一番目立つように書く、とは限らないのです。
ページによってはファーストビューのコピーはベネフィットや特徴ではなく、参加を呼びかけるような補助的な言葉が選ばれることもあります。
ユーザーに伝えたい情報の優先順位を決めておくことが大切ですね。
https://www.tokyoisea.com/acne/lp/
東京イセアクリニック
https://hikakunet3.com/nn-communications.html
【auひかり】NNコミュニケーションズ正規代理店
3.特徴や安心感を掲載する
売上実績など数字化された情報を、ファーストビューに掲載したデザインもよく使われます。
商品特徴や受賞歴、多くの人が利用していることを示す数字があることで、ユーザーの安心・信頼感を高めることができます。
4.ページ要約タイプ
上の安心材料・特徴の強調よりも、更にファーストビューに商品説明を盛り込んだタイプもあります。ファーストビューが一枚のチラシのような構成です。良くできていれば商品の全貌がスッキリわかりますが、失敗すると伝えたい情報が何かわからなくなるため注意が必要です。
健康食品や化粧品などでは、情報詰め込み型ファーストビューが結構見られます。
楽天やyahooの商品ページでもよく使われているパターンです。
https://item.rakuten.co.jp/tv-ya/aojiru-m1-1/
青汁三昧 M-1
実習
ファーストビューの参考をピックアップしてみましょう。
スクリーンショットを撮って、一覧でまとめます。
- シンプル型に該当するファーストビューを３つ集める
- 入れ込み型（3.特徴、4.ページ要約タイプどちらでも可)を３つ集める
- それぞれURL、業種、良いと思った点のメモを付属する
参考にするページはランディングページ、ランディングページ型トップページ、どちらでも構いません。
Google ドキュメントを使うと、簡単にまとめられます。
見本はこちら
なお、実習の提出は不要です。
自分のために作るデザインクリップですので、どちらの型に分類してよいかわからないけれど「良いな」と思ったデザインを別途保存したり、メモに素直な感想を書いても大丈夫。レッスンの復習をしつつ、自分だけのデザイン集を作るイメージです。
もちろん、規定の数以上を集めても構いません。
たくさんのランディングページを見てみてください。