ファーストビューをデザインする際に、何を元に考えればいいかを明確にしたいと思い、調べてみました。

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

一説によると、webサイトを訪れたユーザーは、「自分にとって必要かどうかを、平均3秒以内に判断する」といわれているそうです。

 
という流れがあるとします。

・表示されたタイトルやdescriptionの内容と、ユーザーがイメージしていたサイトとのギャップがある
・ファーストビューで、「自分にとって必要かどうか」判断できない、「求めているものと近くない」感じがした
など、「思っていたサイトと違う」と感じてしまったことが離脱につながっています。

ファーストビューは、ユーザーのイメージと一致させることが大事だということがわかります。

1. ファーストビューに必要な要素を考える

1-1. メッセージとターゲットを考える

「誰に何を伝えるのか」を明確にします。
後述する「イメージをビジュアル化させる」作業は、これをベースに考えます。
 

1-2. 優先度の高い情報を選ぶ

各ページの性質によって、ファーストビューに優先して入れたい要素は変わってきます。

トップページは、入り口となるページであるため、「信頼」「お得」「欲しい商品&情報」などの情報の優先度が高くなります。

※リピーターの場合※
リピーターは既にサイトを信頼し、欲しい商品があって訪問します。
お得な情報は新規訪問者、リピーターどちらにも優先度の高い要素ですが、購入者としては導線やサイトの操作性が求められます。
 
ファーストビューでは、新規訪問者向けの情報と、リピーター向けの操作性を満たす画面設計をする必要があります。

2. イメージをビジュアル化させる

2-1. 2つの視点からキーワードをまとめる

ターゲットユーザーが求めていないキーワードで訴求しても、ターゲットユーザーには響きません。

そのため、「ターゲットユーザーに提供できる価値」と「自社（ブランドやサービスなど）がターゲットユーザーが求める価値」の2つの視点からお互いにマッチするキーワードを抜き出します。
 

2-2. キーワードに合うビジュアルをリサーチする

キーワードが決まれば、それに合うイメージを集めます。
自社のイメージと「合う」「合わない」が明確になるので、たくさん集められた方が良いです。

3. 配色を考える

配色はターゲットユーザーに共感を得る上で、大切な要素の一つです。

「ターゲットユーザーが求めるイメージ」、「自社がターゲットユーザーに与えたいイメージ」この2つの軸に沿った配色を考えます。
 

3-1. 「ターゲットユーザーが求めるイメージ」から配色を考える

自社のイメージカラーが確立されている場合は、そのイメージのままでOKです。

一方でイメージカラーが確立されていないブランドの場合は、色彩が持つ心理やイメージ、ターゲットユーザーに合わせた色を考えていきます。
目的のイメージに沿った配色を選ばないと、ターゲットユーザーから共感は得られません。また、ターゲットユーザーがどんな人なのか、動向も把握します。
 

3-2. 「ターゲットユーザーに与えたいイメージ」から配色を考える

ターゲットユーザーにどんなことを感じてほしいのかという、自社の意図を色で伝達します。
上記の2軸がマッチした配色を選びます。

4. メインコピー（キャッチコピー）を考える

 
一般的には商品の強みを端的に表す数字や実績など、アイキャッチ要素の強い情報を配置するのが効果的と言われています。

「そのページで何ができるのか」
「どんなユーザー体験をもたらすのか」
をコンパクトに訴求します。

また、「販売」「予約」「無料ダウンロード」のように、「機能」を提示することもあります。

5. キービジュアル（メイン画像）を考える

見た目を重視するあまり、ユーザーニーズから離れてしまうことは避けなければいけません。
無料素材サイトなどで手に入る画像は、一見クオリティも高く、スタイリッシュに仕上がっていますが、その反面具体性には乏しく、ユーザーに与える印象が希薄になることがあります。

「ターゲットユーザー」と「自社」の両方のイメージから外れないように気をつけます。

6. サブ要素を考える

メインコピーの下部に配置される「サブ要素」です。
メインコピーやキービジュアルで訴求した内容の補完や裏付けとなる部分です。

メインコピーで引きつけたユーザーの興味・関心を高めるために、「強み」だけでなく、「強み」が具体的にもたらすユーザーメリットまで踏み込んだ文章を考えます。

7. 導線を考える

ターゲットユーザーを、「予約・購入」といった具体的なアクションへ導く要素が導線です。
最近はスマートフォン対応として、コンテンツへの誘導をカットし、リンクボタンを設置するという手法も増えているようです。
 
これらの要素をはめこんだ最終のイメージが、最初に決めた「メッセージ」とつながっているかどうか確認し、問題がなければ完成です。