【UI改善】ファーストビューで抑えたいレスポンシブデザインのポイント


c9e42240

UIにおけるファーストビューの重要性

ファーストビューとは、ユーザがwebサイトに訪問した際、最初に表示されるページ領域のことです。
つまりユーザが訪問した際、必ず目にする領域になります。
このファーストビュー次第で離脱率やスクロールして表示される下部コンテンツの閲覧、滞在時間が大きく変わってくるため、ファーストビューをどのように設計するかは非常に重要なポイントとなります。
PC/スマートフォンそれぞれのファーストビューで抑えておきたいUIのポイントをご紹介します。

PCのファーストビューで抑える3つのUIポイント

【ポイント1】ユーザが欲する情報をファーストビューに収める

ファーストビューでユーザの求めている情報がないと判断した場合、ユーザはすぐにそのページを離れてしまいます。
「このサイトは求める情報がありそうだ」と判断してもらえるよう、ユーザの欲する情報がファーストビューに収まっていることが大切です。
ユーザが何を求めているのか、ユーザ視点に立って考えることが重要となります。

 【ポイント2】情報を詰め込みすぎず、興味をひく文言とビジュアルでひきつける

あれもこれもユーザに見て欲しいからといってファーストビューに多くの情報を詰め込みすぎると、ユーザが目的の情報にたどり着けずストレスを感じてしまいます。
ファーストビューでは、ユーザに「もっと見たい」と思わせる魅力的な「キャッチコピー」と「ビジュアル」で興味を引き、ページをスクロールしてもらうことが重要です。fv01

洋樽の有明産業株式会社のwebサイト
大きく配置したキャッチコピーとメインビジュアルでイメージを訴求し、ユーザの興味を惹いている

【ポイント3】ページがそこで終わっていると思わせない

最近はスクロールが前提のデザインも多くなってきましたが、ファーストビューで完結したような錯覚に陥るデザインのファーストビューは、情報がないと判断され離脱につながる可能性があります。
ページ下部にあるコンテンツもファーストビューの下部で見切れるように作ることでユーザの興味を引き、スクロールを促しましょう。

fv02

HORIEstyle(堀江スタイル)のwebサイト
地域の情報を発信するwebマガジン。記事にメリハリをつけ、トップ記事の下に新着記事が見切れるように作られてスクロールを促されるつくりになっている

スマホのファーストビューで抑える2つのUIポイント

レスポンシブwebデザインの場合、スマートフォンでも掲載する情報はPCと基本的に同じため、PCのファーストビューで抑えるポイントも基本的には同様になりますが、画面設計は一から考える必要があります。

【ポイント1】ナビゲーションはコンパクトに、コンテンツ領域を大きくする

小さな画面内に表示できる情報量を増やし、コンテンツが一番に見られることが重要になります。PCではすべて表示されていたナビゲーションも、スマホでは折りたたんでコンパクトにするなど、コンテンツ領域を大きくとる工夫をしましょう。

新卒採用2017 コーエーテクモ ホールディングス
PCサイトで一列に並んでいたグローバルナビゲーションは、スマホサイトではタップで開く形になり、メインコンテンツの領域が拡大されている

【ポイント2】無駄なものは省き、厳選された要素で構成する

PC同様、ファーストビューぴったりで終わるデザインは、ページ下部がないと判断されてしまいます。PCと比べてスマホではスクロールすることにそれほどストレスを感じないため、ファーストビューでは無駄なものを配置せず、ユーザを惹きつける要素を厳選して配置しスクロールを促すことが重要です。

株式会社ノハナ
大きく余白をとりゆったりとした雰囲気でキャッチコピーを見せることで、一番主張したい内容が目に飛び込んでくる。無駄をそぎ落としてシンプルに徹した構成が目をひく

UI改善に適したレスポンシブデザイン

レスポンシブwebデザインは、いろいろなデバイスに対応できる柔軟な表示が可能です。
ファーストビューの重要性を認識することで、それぞれのデバイスにあった最適なUIになるよう画面設計を行い、ユーザを惹きつける魅力的なwebサイト制作のヒントになれば幸いです。

SNSでもご購読できます。