読む人にも、書く人にも、
真に価値ある情報を。
wordpressの初心者向け情報サイト『webcode』
webデザイン

印象的なファーストビューを作るための16ポイント

sunset

ファーストビューという言葉を最近良く聞きますよね。Webデザイナーとしては確実に押さえておきたいポイントの一つです。

今回は、ファーストビューの重要性から、取り入れるべきポイントについて説明をしていきます。

ファーストビューとは

まず、ファーストビューとは何かについて簡単に知っておきましょう。これはWeb担当者フォーラムさんがすごく綺麗にまとめてくれているので参考にします。

ブラウザーでWebサイトを表示したときにスクロールせずに最初に見える範囲。閲覧者のディスプレーの解像度やブラウザーのツールバーの設定有無などで領域は変化する。サイトを表示したときに必ず見える位置にあるため、広告掲載エリアとしても価値が高い。

(参考:Web担当者フォーラム)

重要なのは、”スクロールせずに”最初に見える範囲という部分です。これは、次の重要性の話しにもつながります。

ファーストビューは何故重要?

では、ファーストビューは何故重要なのでしょうか。「わざわざ開いたサイトなら、スクロールして眺めるでしょ…」と思う方もいるようです。

ただ、自分でネットサーフィンをしている時を思い出して欲しいです。

「ページをぱっと開いて、見える範囲だけ確認して閉じるボタンを押す」なんてことがたまにありませんか?

そういう時の為に、しっかりファーストビューを作り込んでおく必要があるのです。

ヒートマップの結果にも出ている

heatmap - 印象的なファーストビューを作るための16ポイント

(出典:http://v1.userheat.com/)

実は、Web関連のツールで「ヒートマップ」というものがあります。上の画像がかなり説明してくれているのですが、ユーザーが読んでいる場所が分かります。

このヒートマップを使ったデータでも、ファーストビューは重要だと数字で出ています。

細かくはLIGブログさんのデータを参考に言いますが、ファーストビューからスクロールしてくれるのは約半数(約50%)程度だと言えます。

これは、1000人がページを見てくれても、ファーストビュー以外を見ているのは500人程度とのことなので結構残酷な数字です。(頑張ってデザイン作ってるのに…)

ファーストビューで気をつけるべきポイント

それほど重要なファーストビューについて、何を盛り込めばいいのでしょうか。今回は細分化してポイントを述べていきます。

要素としては「画像」「文章」「ボタン」「レイアウト」なので、それぞれについて説明します。

画像編

まずは画像に関してです。

1.画面サイズ以上のものを準備できているか

まず、画面サイズ以上のものであるかを確認してください。

などをCSSで使うと、勝手に覆ってくれると思いきや、それはあなたのパソコンの場合だけの可能性があります。

そもそも、ファーストビューのサイズはパソコン毎の表示領域によって変わりますから、しっかりとチェックしましょう。

2.ストック写真(フリー画像)じゃないか

ストック写真を使っていないかを確認しましょう。これは、Googleさんが直々に言っているので、考慮する価値はあるかと思います。

stock - 印象的なファーストビューを作るための16ポイント

(出典:https://material.io/jp/guidelines/)

3.文字を邪魔していないか

良くある問題が、画像と文章が被ることです。人の顔の上に文字が乗っかっていたり、背景と文字色が一緒になったりする例があります。

ファーストビューの全てのパーツを画像で準備する場合はあまり起こりませんが、一部HTMLで書く場合は注意しましょう。

文章編

次は文章に関してです。

4.伝えたい内容に優先順位がついているか

いくつか情報を盛り込む時に、優先順位を決めましょう。それによって、フォントのサイズや位置を調整手します。

僕が個人的にやっているのは、「この文章”のみ”だったとしたらどうか?」をそれぞれ考えます。

一番セーフなものの優先順位を高くしています。

5.同じ表現が登場しないか

これもよくありがちですが、同じ表現がされていないかです。似たような表現でも入れないほうがいいでしょう。

  • 「Webデザイナースクール」「デザインについて学べます」
  • 「Webデザイナースクール」「デザイナーになれます」

上のような表現は、重複が起こっています。デザイナースクールと謳っているのだから、デザインについて学べるのは普通なはずです。

こういった、重複表現はだいたい片方の言葉がいらないので省いていきましょう。

6.より短い表現にできないか

最後、文章が同じ内容を伝えているのであれば「より短く」を意識するべきです。

短い文章は、相手に伝わりやすく、印象を残しやすいです。

ボタン編

次は、ファーストビューのボタンに関してです。この項目については、さっきも登場したLIGブログさんがかなり参考になります。

ランディングページ(LP)はファーストビューで決まる!直帰率を改善するポイントまとめ

7.ファーストビュー内に入っているか

ファーストビュー内にそもそもボタンが入っているかを確認しましょう。

50%の人が離脱するのに、リンク先が貼られていないなら大問題です。

8.クリックできそうな形状か

次は、クリックできそうな形状かを確認しましょう。浮き出ていたり、縁取られていたりなど工夫をするべきです。

マテリアルデザインも、クリックできそうな形状にはなっていますが、世代によっては気づきにくいこともあります。

9.背景と同一になってないか

背景色と異なる色が使われているか(アクセントになっているか)を確認しましょう。

コントラストやビコロールなどの配色を上手く使うといいでしょう。詳しくは、下の記事で紹介しています。

https://webcodezero.com/colorscheme/

10.1つのみか

ボタンは1つの方がいいです。複数個あると、ユーザーはどれを押そうか迷っているうちにどうでもよくなり離脱してしまいます。

自分でネットサーフィンをしている時に、プランが複数個あると考えるのが面倒になる時があると思いますが、それに当たります。

レイアウト編

画像、文章、ボタンが用意できたら後はレイアウトです。

11.ファーストビューで収まっているか

まずは、全てがファーストビューで収まっているかを確認しましょう。

画像と同じように、デバイスによって少々サイズが異なったりするので注意です。

12.余白があるか

余白は必ず存在させるべきです。余白が無いほど敷き詰められたレイアウトは、多分情報量が多すぎます。

13.ユーザーの視線移動を考えているか

ユーザーの視線が自然に動く方向を意識しましょう。よく言われているのは、F字型とZ字型です。

この文字を描くように視線が動くと言われています。

f - 印象的なファーストビューを作るための16ポイントZ - 印象的なファーストビューを作るための16ポイント

(出典:https://www.idia.jp/report/the-law-of-z-and-the-law-of-f/

+α編

オプション的につけておいたほうが反応率が上がるものです。

14.限定感を出せないか

限定○○名などの、限定感が出せないかを考えてみましょう。

これはお客さんに「今じゃないとダメ」感を出させるためです。

どうしてもネットサーフィン中は、またあとで見ればいいかとなることが多いので、有効です。

15.ユーザーの不安を取り除けているか

作っているサイトが、昔から長く存在して信頼性のある会社じゃない限り、お客さんはリンク先がどこに行くのかが少し不安です。

どういうページに行くのかなどを表現できるといいですね。「詳しくはこちら」などの方が、何が見れるのかが分かりやすいです。

16.ユーザーが信頼してクリックできるか

満足度○○%!のような表記を見ますが、こういった信頼性を高める工夫がされていると尚良いです。

サイズはどれくらいが良いか

これはもう、オススメサイズをいきなりお伝えします。

  • 横幅:1000pxか1200px(MAXのサイズ)
  • 縦幅:500pxか550px

現在のディスプレイのシェアからでている数字です。

重要なのはファーストビューのみ?

ここまでファーストビューの重要性について述べてきました。

「じゃあ、ファーストビューだけ力を入れればいいの?」と言われると、そうでもありません。

個人的には、ユーザーが購買に至ったりする際には2タイプあると思っています。

  • 専門家などに相談しながら決めたい人
  • 自分で商品のスペック(情報)を閲覧して決めたい人

僕が思うに、前者はその分野に関して知識が少なく、後者はその分野に関して知識が多く、自分で選べる人です。

もし、お客さんに後者のタイプが多いのであれば、ファーストビュー以降のスペースで、スペックをしっかり記載しておきましょう。

まとめ

いかがでしたでしょうか。今回は、ファーストビューの要素について書いていきました。

まずは、画面サイズに入りきるように、取り入れてみてください。

WordPressでおすすめのプログラミングスクール

オンラインマンツーマンならCodeCamp

bgt?aid=160728030173&wid=010&eno=01&mid=s00000016159001010000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
CodeCampは、完全オンラインで、現役エンジニア講師のマンツーマンレッスンを受けられるプログラミングスクールです。

CodeCampは期間限定でWordpressコースを提供していますが、上場企業のグループ会社が運営していることもあり、これまでに2万人以上の受講実績があります。

プログラミング未経験者でも、WordPressのインストール、サーバーの準備、テーマの設定、プラグインの導入など、WordPressでサイトを構築するためのスキルを身につけることができます。

プログラミングのオンラインスクールCodeCamp0 - Wordpressでおすすめのプログラミングスクール

CodeCampの口コミはこちら

オンラインテキストを自習形式ならTechAcademy

bgt?aid=160728030174&wid=010&eno=01&mid=s00000016188001104000&mc=1 - Wordpressでおすすめのプログラミングスクール0 - Wordpressでおすすめのプログラミングスクール
TechAcademyは、1ヶ月の短期集中でWordpressについて学べる、完全オンラインのプログラミングスクールです。

基礎的なPHPの知識に加えて、サイト制作における企画・設計・制作・運用方法、WordPressテーマのカスタマイズ方法、プラグインを利用した機能の追加方法、オリジナルWordPressテーマの作成方法などを学ぶことができます。

TECH ACADEMYでは申込みから1週間の間、オンライン教材・メンターによるサポート等の学習システムを無料で体験することも可能です。

TECH ACADEMYの無料体験はこちら0 - Wordpressでおすすめのプログラミングスクール

TECH ACADEMYの口コミはこちら