このレッスンではサイトを訪れた方へ即座に概要を伝えるために必要な、ファーストビューの設計についてご紹介します。
せっかく検索エンジンなどでWebサイトに訪れたユーザーをすぐに帰してはいけません。できれば、いろいろなコンテンツを見ていってもらいたいですよね。ユーザーがすぐに帰らないようにするためのポイントは「重要なことがすぐに分かるようにしておくこと」です。5秒間以内でシンプルに概要が伝わるページが理想です。
ファーストビューとは
ファーストビューは、そのWEBページを開いたときに真っ先に目に入る部分を指します。
この中でも、グレーの背景色をつけたサイトタイトルやキャッチフレーズ部分のみを「ファーストビュー」と呼ぶこともあります。
画像が入っていることが多い部分ですよね。
そのほかにヒーロー、キービジュアルと呼ぶ方もいらっしゃいます。
どちらもWEBサイトにとって重要な部分であることがうかがえるネーミングです。
ファーストビューの重要性
Webには5秒間ルールと言われるものがあります。
これは、「5秒のうちに興味を惹かないと、閲覧者はすぐに他のページに移動してしまう」というものです。
せっかく来てもらったユーザーがすぐに帰ってしまったら悲しいですよね。
ビジネスにおいても大問題です。ですので、サイトの概要がすぐに伝わるコピーや画像を配置し、まずは興味を持ってもらう必要があります。
その役割を担っているのが、ファーストビュー（ヒーロー）なのです。
5秒で人は細々した文字をそうたくさん読めるものではありません。
ファーストビューのレイアウトを行う際には「一目でどんなサイトなのかが分かりやすくする」「魅力を伝える」この２つの両立を心がけましょう。
ファーストビューの代表的なレイアウト
ファーストビューには様々な表現タイプがあります。
代表的な構成と、実例をいくつか見ていきましょう。
1. ファーストビューで背景に画像を使う
サービスやサイトの内容にあった画像を大きく背景として配置するパターンです。
キャッチコピーの位置やフォントなども重要です。
下記イメージは「apple ipad」のファーストビューです。
大胆なレイアウトでインパクトがありますね。
「最も先を行くiPad。」のキャッチコピーが気になり、ユーザーは購入や詳細ページを開きたくなるでしょう。
下図は我々Skillhubのファーストビューです。
大きな写真と文言を配置しています。典型的なトップページのパターンと言って良いでしょう。訪れたユーザーは何ができるサイトなのかがすぐにわかりますね。
2. コンテンツを表示するファーストビュー
記事の一覧や商品一覧をファーストビュー内に持ってくるパターンです。
メディアサイト、通販サイトなどでよく使われています。
以下は「キナリノ」のファーストビューです。
ヒーロー画像を配置する代わりに、大きなアイキャッチ画像が２枚並んでいます。 それぞれ記事へのリンクでもありますね。 画像のテイストがあっているので、サイトの雰囲気も伝えつつ「面白い記事がありそう」とユーザーに興味を持たせる役割も果たしています。
3. 広告のためのファーストビュー
ややタイプとは外れてしまいますが、ヒーローエリアは非常に重要な箇所。
目に付きやすいところでもありますから、そこに「広告を載せる」ということはよくあります。
以下の「パズドラ 運営サイト」のようにキャンペーンについてのバナー等をファーストビュー内に置くという方法もあります。こうすることでユーザーに購買を促すこともできます。
いかがだったでしょうか？
ご紹介したサイトはぱっと見るだけ（5秒間以内）ですぐに、どんなサイトかわかりますよね。きっとユーザーは直帰すること無く、何かコンテンツを見て回ることでしょう。そうすることができれば、このトップページの役割は果たしていると言えます。
みなさんもトップページを作成、レイアウトする場合には「5秒間で内容を伝える」ということを意識して行ってください。
◆実習
ワイヤーフレームでファーストビューのレイアウトを作ります。
今回は背景画像+タイトル＆キャッチフレーズの3要素でシンプルに作ります。
まずホーム。
ここはWEBサイトの顔とも言える部分になりますので、高さを大きめに設定しておきます。
テキストサイズや位置については、デザイン時に調整します。とりあえず下記の２つが伝わるようにオブジェクトを配置してみましょう。
- 画像の上にテキストを配置することがわかるようにする
- どのくらい位置に、どのくらいのサイズ感で配置するかのイメージが掴めるようにする
カテゴリ以下のページでは、画像部分が広すぎるとコンテンツまでが遠くなることも考慮します。
そのページが何のページかを明確化しつつ、少しコンテンツも見えるように高さを減らしてみました。
詳細・問い合わせは、カテゴリーから複製し、テキストだけ打ち替えてください。
これでファーストビューの配置は完了です。