有名ブロガー、アフィリエイターの方の記事から学ぶシリーズも 3回目を迎えました。
ジャンル選び・キーワード選定を紹介してきましたが、今回は、ファーストビューについて、紹介します。
軽く見られがちですが、ファーストビューは、超重要!
直帰率に、がっつり影響が出ます!
有名ブロガーのクロネさん(@kuroneblog)さんも、
検索エンジンやSNSから流入したときの「ファーストビュー」に魂をこめる。
自分がお店に入ろうとして「あ、なんか間違えたな」と思って帰るようなことがブログでも起こる。
スクロールすればよさが分かってくれる?またまたご冗談を。
— クロネ@趣味ブロガー (@kuroneblog) July 11, 2019
と言われています。
ファーストビューは、サイトの直帰率改善で、最も重要な項目です。
ここでは、何故、それほど大事だと言われるのか、その理由と、どうすればいいのかを紹介していきます。
ファーストビューとは?
ファーストビューとは、ユーザーが、Webページにアクセスした時に最初に表示される部分。
スクロールせずに画面に表示される部分のことです。
タイトル下に画像を置く方が多いので、大体、「タイトル+画像」が、ファーストビューになっている記事が多いです。
画像を置く場合に、気を付けて欲しいのが、ユーザーは、画像を見に来ている訳では無いという事です。
もし、画像を置くなら縦幅の短い、横長の画像を使うと良いでしょう。
こんな意見を言われている方もいらっしゃいます。
Webサイトのファーストビューに「画像」を入れると、直帰率が良くなることが多い
ただし縦幅のある画像は、ファーストビューを圧迫するため、CVボタンへの誘導率が低い
横に細長い画像があれば理想的だが、カッコ良く切り出すのが難しい。横長のカッコ良い画像だけを集めた素材サイトが欲しい笑
— 垣内勇威|AIアナリスト (@yuikakiuchi) July 26, 2019
当サイト(SEO メモ)だと、以下の画像に表示されている、すべての部分が、ファーストビューという事になります。
うーん。イケてないですね。
最低限、どんな事が書いてあるのかぐらいは分かるかもしれませんが、どこにでもあるサイトって感じ。
あくまで、備忘録用のサイト、私が手を抜いているだけなので、悪い例だと思ってみて頂ければと・・・
良い例は、最後に事例として紹介しています。
あと、良く勘違いしている人がいるんですが、ファーストビューとは、TOP ページの事だけではありません。
検索後、クリックされ表示されたページの初期表示なので、すべての記事が対象になります。
ファーストビューは、何故、重要なのか?
タイトルでは、少し誇張して、表現しましたが、
ユーザーは、ページが表示されて数秒で、
- 自分好みのデザインか?
- 自分の欲しい情報が載っていそうか?
- 見やすい・分かりやすいか?
などを、一瞬で判断します。
大体、なんか違うなと思ったら、すぐに戻るボタンを押しますよね?
ユーザーは、少しでも違和感を感じると、すぐに検索結果画面へ戻ってしまうのです。
すると、当たり前ですが、直帰率は上がってしまいます。
一般的には、直帰率が上がると、サイト自体の評価も下がると言われているので、検索順位も下がる事になります。
また、Google でも、以下のように、ファーストビューを大事にしていると明言しています。
英語版ウェブマスターハングアウトまとめ(6/14)https://t.co/nLwpAF4zEL
注目トピック
・Googlebotの一部は各地域のIPを持っている(逆に、ほとんどはUSから来る)
・インデックスさせたいコンテンツを隠す場合は、JSよりCSSがおすすめ
・ファーストビューは常にではないが、他部分より重要視される— 【SEO研究所】サクラサクラボ (@sakurasakulabo) June 20, 2019
良いファーストビューとは?
これは、一概には言えません。
何故なら、その Web サイトのターゲットや、扱っている情報によって、変わるからです。
男性向けの商材を扱っているのに、女性向けのデザインにしても意味がありません。
育児の情報を求めているのに、辞書みたいな内容で書かれていたら読みませんよね?
即・離脱!
なので、答えは、ありません。
が、共通して大事にしなければいけないことはあります。
- ターゲットは、誰なのか明確にする
- 伝えたいメッセージは何か?
- 読むことで、どんなメリットがあるのか?
- 分かりやすいか?
- ターゲットに、読んでもらえるようなデザインになっているか?
ファーストビューで、そのページを離れてしまうユーザーの割合は、70%以上とも言われています。
離脱されないように、上記、5つの項目には、気を付けて、作成しましょう。
ファーストビューに最適な画面のサイズは?
そこまで、気にする必要はありませんが、気になる方もいると思うので、一応、紹介。
画面のサイズによっては、思ったようなデザインになりません。
なので、できる限り、使っている人が多いサイズを選ぶというのが、ベストな選択!
株式会社 SERENDEC さんが、様々な大手サイトを分析した記事
Web サイトの Width(横幅)について ~業界毎の主要 web サイト調査結果~
では、
PC:950px ~ 1100px
SP:700px ~ 800px
が良いと紹介されています。
あくまで目安ですが、ご参考に!
ファーストビューのデザイン事例
デザインに関しては、ちょっと得意分野ではないので、他人の力をお借りして・・・
以下の記事は、具体例を出しながら、分かりやすく紹介されています。

カスタマイズできるヘアケア「MEDULLA(メデュラ)」7つの質問に答えると自分だけのシャンプーが名前入りで届く。
ファーストビューが美しい。カラーテーマがじわっと切り替わる瞬間に注目。ビジュアルとしてのチャートとテキストエフェクトがマッチしている。#WEBデザインhttps://t.co/ICHdNz4pEJ— 好きなWebサイトを好きと言うだけの人 (@sukisai365) July 20, 2019
「人の第一印象は3秒で決まる」
これは記事も例外ではなく、ファーストビューの印象でユーザーに読まれるかが決まります。
ファーストビューの中で一番大きく目立つのが「アイキャッチ」。アイキャッチは記事の顔だと思って、3秒で魅力が伝わるように記事の要約をいれましょう。 pic.twitter.com/NUWXypcGFL
— afbライターのコンテンツ作成講座 (@affib_writing) August 1, 2019
コメント