#7 【1日10分で学ぶLP制作の基礎知識】魅力的なランディングページのファーストビューを構築する方法
ファーストビューの役割について
ファーストビューとは、ユーザーがランディングページに訪問した時に、一番最初に目に入る部分です。
●ファーストビューとは？
(別名) キービジュアル、ヘッダー画像、アバブ・ザ・フォールド(Above the Fold)
ユーザーがランディングページにアクセスした時、最初に表示される範囲のこと。スクロールしないと表示されない部分に関しては、ファーストビューとは言いません。
※ちなみに、海外ではファーストビューという言葉は伝わりません。目に見える境界線よりも上であることを示すアバブ・ザ・フォールド(Above the Fold)という言葉が使われています。
ファーストビューの役割とは、はじめてそのランディングページを訪問したユーザーの心を掴み、続きを読んでもらうことです。
ファーストビューのデザインは、ランディングページ制作における最重要部分になります。
なぜなら、魅力のかけらも感じない、気の抜いたファーストビューが表示されると、ユーザーはその時点で自分には関係ないと感じて離脱をしてしまうからです。
ファーストビューで離脱をされてしまうと、無駄な広告費の流出だけしかもたらしません。
もちろん、コンバージョンを獲得するためには、ファーストビューの後でスクロールして表示されるコンテンツの質も重要です。
ですが、この無数に広告が溢れかえっているWebの世界において、第一印象を可能な限り追求しておくことは、何も無駄なことではありません。
ファーストビューの重要な3つの構成要素
ファーストビューの構成要素で、最も重要なものは以下の3つのです。
実際にデザインを作っていく前に、この3つの要素についてあらかじめ考えておく必要があります。
(1)ヘッドコピー(+サブコピー)
ヘッドコピーとは、別名で「キャッチコピー」とも言われますが、ユーザーがページを開いた時、最初に目に入ってくる文字情報になります。
どのようなヘッドコピーがユーザーの心を掴むことができるのかは、商品のコンセプトやターゲットの種類により千差万別ですので、色々とテストをしながら正解を導いていくしかありません。
事前のリサーチに基づき、そのランディングページが自分にとって有益な情報であることを一瞬で理解させるようなヘッドコピーを用意しましょう。
(2)イメージ画像(写真・素材)
ヘッドコピーと共に重要なのが、文字情報と共に使用する写真や素材などのイメージ画像です。
その商品やサービスがユーザーにもたらす未来を示した画像や、セールスする商材に関連した写真など、文字情報だけでは伝えきれないような情報を伝えるものを用意しましょう。
(3)UI要素(電話・メールなど)
コンバージョンの目的に応じて、ファーストビュー内に電話番号を表示したり、メールボタンを設置することがあります。
あらかじめそのようなユーザーインターフェイスを設置しておくことで、ユーザーに向けて次に何をしてほしいのかを示すことができます。
なお、あまりにも多くのボタンを設置することは、ユーザーを迷わせるため推奨していません。あくまでもファーストビューの役割はそこでコンバージョンさせるためではなく、続きを読んでもらうためだからです。
ファーストビューのデザインに欠かせない5つのポイント
ここで、実際にファーストビューのデザインにおいて、意識するべきポイントを解説していきます。
①フォント
ファーストビューにおいて、フォントの選択は第一印象を大きく左右します。決して感覚的に決めたり、周りが同じように使っているから使う・・・などという考え方ではいけません。
フォントにも様々な種類がありますが、マニアックなフォントについてはひとまず置いておくとして、大きく分けると「明朝体」を使うのか、「ゴシック体」を使うのかで、デザインの印象は大きく分かれてきます。
例えば、ファーストビューを「コミカルでポップな印象」にしたい場合にはゴシック体(もしくは丸文字)を使用することが多く、固い印象のある明朝体はあまり使いません。また、「伝統的な代々受け継がれてきた歴史のあるイメージ」というものを表現したい場合には、明朝体を使用することが多いです。
もちろん、各フォントの文字の形状からどのような印象を受けるのかは人それぞれです。
ですが、そこで自分のセンスに頼ってフォントを決めては絶対にいけません。
関連する商品の電車広告や、新聞広告、雑誌などのヴィジュアルを見て、普段一般市民がどのようなイメージを頭の中に抱いているのかを常に観察するなどして、根拠をもってフォントを選択していきましょう。
②写真・イメージ画像素材
ファーストビューにおいて、どのような写真素材を選択するのかは、ランディングページ全体のデザインを決定するほど重要なことです。
どの写真を選択していくのかについては、方法を一般化するのは難しいのですが、普段デザイナーがどのような思考プロセスを経てファーストビューに使用する写真素材を決めているのか、まとめてみましょう。
このように、どのようなアプローチで写真素材を選んでいくのかは、ランディングページが扱っているテーマで異なります。
ですが、一番注意しなければいけないのが、必ず商品の内容やコンセプトを関連しているものを選ぶことです。もう少し細かく言えば、「なぜその写真を選んだのか？」について、たとえ初めて見る人でもわかりやすく説明できるように根拠をもって写真を選ぶということが大切です。
③配色
配色に関しても、フォントと同じく、決して適当に決めたりせずに根拠をもって選んでいくことが重要です。
ただ、色と言っても無数に存在しているので、結局どの色を選んだら良いのかわからない感じるかもしれません。
ですが、一見無限に選択肢があるように感じる配色の決め方でも、以下のようないくつかのアプローチがあります。
イメージ画像と同様、配色に関しても上記のように、扱っているビジネスのテーマやコンセプトに関連させることを重視してください。なぜその色を選んだのか、明確な根拠を持って答えることができることが大切です。
また、すでにホームページを作成しているのであれば、基本的にはその色と同系統のものを使用した方が無難です。
もし、そこで全く別の配色のランディングページを用意してしまうと、そのビジネスを初めて知るユーザーは、それが同じ会社が展開しているものであるにも関わらず、別の会社のものだと誤解してしまうかもしれないからです。
④レイアウトと余白
ファーストビューのレイアウトに関しては、どれだけの情報量を配置するかによりますが、意識するべきポイントは「余白」です。
デザインにおいて「余白」というのは、その商品やサービスに対する印象に大きく影響するからです。
ここで重要なデザイン用語に、「ホラーヴァキュイ」という言葉があります。
これは、余白があればあるほど人は高級感を感じ、逆に余白が埋め尽くされている商品に対して低価格だと感じるという法則です。
要するに、余白にはこうした法則があるので、例えばブランドや高級感を醸し出したいという場合は、あまりファーストビューを文字で埋め尽くすということはしません。逆に一定の余白をもたせて、シンプルなデザインにすることが多いです。
※もちろん、ファーストビューではある程度の文字がないとセールスにつながらないので、実際の商材に合わせてバランス良く調整していくことになります。
むやみやたらに配置するのではなく、このようなデザイン法則を意識しながら、余白を意識してファーストビューを組み立てていくことをお勧めします。
⑤幅
ファーストビューの幅に関しては、これという正解はありませんが、概ね以下のような形で制作されていることが一般的です。
基本的には上記のような幅で作成しておけば、特に問題はありません。
ファーストビューの表示領域というのは、時代が進み、パソコン本体の性能が上がってディスプレイが大きくなると共に、その最適なサイズも変化していきます。
例えば、10年くらい前では、人々が使っているパソコンの画面サイズも小さかったので、大体700px程度の幅があれば十分魅力的なファーストビューを構築できました。
ですが、今はMacbookなどの軽量ノートパソコンでも11〜12インチあるような時代なので、700pxではあまりにも表示される部分が少なく、せっかく直接的にアピールできるファーストビューの領域が勿体無いです。
ただ、1200px以上にしてしまうと、今度は逆に大きなパソコンを持っている人にしか見えなくなってしまうので、タブレットなども含めて様々な閲覧環境を考慮すると950〜1000pxあたりが妥当な幅です。
ファーストビューの具体的な事例
◎商品のもつデザイン性からアプローチした例
上記のファーストビューは、あくまで「商品が主役」という考えに立って、商品そのものがもつデザイン性を十分にアピールできるように作成しています。
毎日使っていても飽きずに使えるのか、同じ機能ならよりデザイン性に優れたものがほしいというユーザーの気持ちに応えるように、商品写真を全面に打ち出したファーストビューを構築しています。
また、配色やフォントに関しても、商品のデザインから受ける印象と関連した形状のものを選択しています。
◎商品がもたらす未来(ベネフィット)からアプローチした例
こちらのファーストビューでは、逆に商品を使用した先の未来を感じさせるように、文字や画像、商品、人物をバランス良く配置しながら構築をしています。
配色に関しても、商品のコンセプトやターゲット層に合わせて選択することで、自然とスクロールしてしまうデザインを施しています。
ファーストビューはランディングページの命
ファーストビューは、ランディングページにおける「命」といっても過言ではありません。
もちろん、たとえユーザーがファーストビューの続きをスクロールしたとしても、そこに中身のないコンテンツが並んでいるのは駄目ですが、いずれにせよファーストビューで認められないと、そのページが読まれることは絶対にありません。
アプローチの仕方によって、導かれるファーストビューの構成は様々なものになりますが、大切なのは決して感覚などで適当に判断したりせず、論理的に根拠を持ってレイアウトや配色を決めていくことです。
初めて自分のランディングページを見たターゲットに魅力的に感じてもらえるように、ファーストビューの構築については集中して取り組んでいきましょう。
本日のまとめ
というわけで、本日の話を1枚のカードにまとめました。
ランディングページ制作をより深く学びたいあなたへ
★無料配布している電子書籍
コネも人脈も実績もスキルも完全にゼロの状態からどのように年間100件&月商100万を安定的に維持できるWebデザイナーになるのかについて、必要な知識やスキルに加えて、私が辿ってきた具体的なプロセスと共に、約5万字の分量を費やして、徹底的に解説することに努めました。
片岡がどのような人間なのか知りたい方は、まずこのコンテンツからお読みいただければと思っています。
★片岡が運営するLP制作講座
・合計6時間半に及ぶランディングページ制作学習動画
・段階的・計画的に学習できる１ヵ月配信ステップメール
・自分のペースで学べる参加者限定サイト
・すぐに形にできるWordPressLPテンプレート
・参加者限定Facebookグループ
・講座受講者のみ参加できるオプション勉強会への無料参加権
・特典のセミナー映像30時間以上
といったコンテンツを収録している片岡LP作成メソッドの集大成です。
すでに250名以上が参加しており、この講座をきっかけにLP制作を自分の武器とすることができた参加者の方が数多くいます。
興味がありましたらぜひ募集ページだけでもご覧ください。
この記事が気に入ったらサポートをしてみませんか？