ファーストビューのデザインで意識するポイント

ファーストビューのデザインで意識するポイント

ユーザーがサイトに訪問したとき、ページの中で最初に目に入る部分のことを「ファーストビュー」といいます。

このファーストビューの印象次第で、その後ユーザーがサイトを読み進めるか離脱するかが決まるといっても過言ではありません。

今回は、ファーストビューのデザインで意識するポイントをご紹介します。

ファーストビューの重要性

サイトにアクセスしたユーザーの多くは、私たちが考えているほどサイト内の文章をしっかり読んではくれません。このサイトに自分が求めているものがない、思っていたページと違うと感じると、ユーザーはすぐにサイトから離脱してしまいます。

ユーザーはサイトに訪問してから3秒以内で読み続けるかどうかを判断するともいわれており、この時間にどのような情報を提供できるかによって、その後のユーザーの回遊率が変わります。ページによってユーザーに提供すべき情報は異なりますが、ユーザーが検索結果で表示されるページタイトル(title)やページ説明文(description)を見て思い描くイメージとコンテンツ内容に近づけることが大事だと言えます。ページに訪問した際、イメージに近いサイトであれば、自分にとって必要な情報であると判断して読み進めます。

また、ファーストビューではページの役割を明確にすることによって、ユーザーの行動を促しやすくなります。例えば商品紹介ページであれば、商品画像や商品の強みとなるキャッチコピーなどをファーストビューに入れることによって、このページが商品について書かれたページだということが理解できます。その際、単に商品パッケージの画像をそのまま使うのではなく、自社で撮影したオリジナルの画像、文字入れや加工を行った画像といった、より魅力的な画像や、商品を使うことで得られる体験イメージを伝える画像などを掲載すると良いでしょう。

そこに加えて、商品についてのお得な情報や有益な情報が書かれていることをファーストビューで示せれば、その後のユーザーの購買行動につながるのです。

次に、具体的にファーストビューのデザインのポイントをご説明していきます。

トップページのファーストビューデザインのポイント

トップページで重要なポイントは、「メインビジュアル」と「ナビゲーション」が目立つようにすることです。

メインビジュアルは「サイトの信頼性」と「ユーザーからどのように思われたいか?(誠実そう、おしゃれ、など)」の2つを決定づける要素になり得るため、デザイナーの腕の見せ所です。また、トップページではサイト内のさまざまなページを回遊させることが目的なので、デザイン性だけでなくスムーズな回遊を可能とするナビゲーションの位置やメニューの操作性といった、ユーザビリティの配慮を徹底します。

広告LPのファーストビューデザインのポイント

広告LP(ランディングページ)の場合、「メインビジュアル」「キャッチコピー」「申し込み(カートに入れる)ボタン」をファーストビューの中に含めることが大切です。

メインビジュアルとキャッチコピーは一目で分かるぐらい目立つデザインにして、両者に関連性を持たせましょう。例えば、「傷んだ髪にうるおいを」というキャッチコピーを使うなら、メインビジュアルは「うるおいのある髪を強調している女性」のメインビジュアルにするということです。

ここで気をつけたいポイントは、「ファーストビューの中に多くの情報を詰め込みすぎない」ということです。商品のメリットは複数あるのが通常であり、それを全て提示したいという運営者側の想いはありますが、多くの情報を詰め込みすぎると何が言いたいのかわからないファーストビューになります。それを避けるため、その中でも特に着目するメリットの訴求ポイントについて、シンプルにわかりやすく伝えるキャッチコピーを制作しましょう。

申し込みボタンは、一目でボタンだと分かる必要があるため、周囲に溶け込むような色やボタンサイズは避けます。目立つ色ややや大きめのボタンを設置することでユーザーの視認性が上がりますし、購入したいと思った時に見つけやすくなるので、CTR(クリック率)が上がることが期待できます。

また、ファーストビューでいくら気を引きたいからといって、広告LPの導線である広告バナーや、ファーストビュー後の広告文と乖離するようなファーストビューを制作してはいけません。信頼性に関わる問題ですし、ユーザー訪問時のイメージとかけ離れているとサイトを離脱する原因はおろか、そのサイトへの印象も下がる結果になりますので、広告文との整合性を意識しましょう。

まとめ

このようにファーストビューでは、ページの役割によって、ユーザーに提供する情報が異なります。訪問時のユーザーニーズに応えられているページであれば、ページの下部までくまなく読み進めていただくことができたり時間をかけてサイト内を回遊するなど、良い方向にユーザーの行動が繋がりやすくなると言えます。