サイトに訪れた方が一番最初に目にする「ファーストビュー」は
パッと見３秒で興味を持って次を見てくれるかが決まると言われるぐらい、重要な箇所です。
ランディングページの見直しする上で、ファーストビューの改善は効果があると考えています。
以下のファーストビューは、実際に弊社で見直しした事例で、見直し前のデザインはたしかにキレイなデザインでしたが、キャッチコピーの印象が残らず、またスマートフォンで見ると全く見えない残念なものでした。
デザインを見直しすることにより、ベネフィットが伝わりやすいデザインになったと考えております。
今回はファーストビューの役割を整理して、改善のコツとしてまとめたいと思います。
1.ファーストビューの役割とは
ファーストビューとは、広告等から訪れたお客様が最初に目にするものです。
期待してクリックして最初に表示されるファーストビューがその人の期待感と合っているか、満足させているかで見る人は次を読み進めるかどうかを判断します。
なので、ファーストビュー周りは商品が持っている魅力を伝わりやすいレイアウトでデザインする必要があります。
2.伝わりやすいレイアウト
人の目線の動きには決まった動きがあると言われています。
左から右、上から下へ視線が移動し、全体として左上から右下の方向に視線は流れていくと言われています。その視線を誘導するのに有名な２つの法則「Zの法則」「Fの法則」を紹介します。
2-1 Zの法則
Zの法則は、画面を「Z」字に見ていくという法則です。
左上～右上～左下～右下とZの形にユーザーの視線が移動するので、この導線上に伝えたい情報を配置すると効果的だといわれています。
2-2 Fの法則
「Fの法則」は「F」字に見ていくという法則です。こちらはホームページに見られるパターンです。左上のロゴ部分からヘッダーが目に入り、見出し・メニュー、記事と読み進めていくような移動です。
ランディングページについても、この２つの法則に従って、左に文字、右に写真を持ってくるレイアウトが一般的です。
ただし、商品イメージを強く出したい場合は、左に写真、右に文字といったレイアウトにする場合もあります。
3.ファーストビューにおけるデザイン要素と役割
3-1.プリヘッド
ファーストビュー最上部にレイアウトしているターゲットへの呼びかけの部分になります。
これは、ターゲットをきちんと絞る役割があります。
3-2.キャッチコピー
ターゲットに対し、いかに自分事として興味・関心を持たせて次を読ませる役割があります。デザインの中で一番目に留まるようにデザインする必要があります。
3-3.写真
キャッチコピーと同じぐらい大事なもので、文字情報以上に写真のイメージが読み手に大きく印象を与えます。キャッチコピーとイメージが合っていないと違和感になっています。
3-4.アイコン
キャッチコピーだけで伝えきれない商品の魅力を簡潔にアイコンにしてレイアウトすることにより、目に留まりやすい効果があります。
3-5.フォント
フォントは雰囲気によって変わりますが、あまり特徴的なものはかえって見づらくなるため、オーソドックスなフォントを選択するのがベターだと思います。
上記の要素を、先ほどの「Zの法則」「Fの法則」に合わせてレイアウトすることにより、
伝わりやすいファーストビューになります。
4.スマートフォンのデザインについて
スマートフォンについては、先ほどの2つの法則とは異なりで、縦長の画面レイアウトを意識して上から見やすいレイアウトでデザインにする必要があります。
以下はスマートフォンで見た時のデザインです。
PC画面のデザインのままだと、画面サイズが異なるため、文字が小さくなり見ずらい印象となります。ＰＣのデザインとは別に、スマートフォン用のデザインを用意するのが望ましいです。
まとめ
レイアウトや各パーツの役割を意識してデザインすることにより、見やすく・伝わりやすいファーストビューになると思います。
また、スマートフォンでは、縦長レイアウトを意識してデザインするべきです。
＼無料プレゼント／
今なら無料レポートプレゼント！！
期間限定！今すぐお読みください
