ファーストビューに何を置く？はてなブックマークTOP100のサイトから学ぶ

ブログに訪れてくれた方が最初に目にする部分に何を置くか。これで読者の印象がかなり変わってきます。たとえば、広告だらけだとしたら「うわ…」とひかれてしまうかもしれません。

始めに見える部分を「ファーストビュー」（英語では Above the fold）と呼びますが、本日はここに着目してみましょう。

2014年はてなブックマークTOP100にランクインしたサイトから、ファーストビューにどのようなパーツが置かれているのか調べてみました。

シェア数の多いサイトの共通点を探り出し、ブログデザインの参考にしましょー。

ファーストビューデザインで気をつけるべきこと

データをご覧いただく前に、ちょっとだけファーストビューに関して解説します。

ブラウザサイズは人によって違う

まず忘れてはならないのが、ファーストビューは環境によって変わる、ということです。PC であればモニターの解像度は様々で、それに対するブラウザのサイズも人によって好みが分かれるところ。

自分がいつも見ているサイズをベースにデザインしてしまうと、実は訪問者のそれと大きくかけ離れているかもしれません。そうすると、サイドバーの重要な項目が見切れてしまったり、追尾型のシェアボタンなどが本文に重なったり、という結果に。

実際にどのくらいのブラウザサイズで見られているのか、ある程度知っておく必要があるということですね。

スマホやタブレットなど、すべての環境で見え方を計算して最適化するのは難しいのですが、常に読者目線を念頭におきながら設計しましょう。

ファーストビューは最速表示が求められる

WordPress のように動的にページが生成されるシステムの場合、どうしても表示が遅くなってしまいます。

たとえ静的に生成する場合でも、以下のようなものが表示速度を遅くする原因となります。

知識があればそれぞれの要素に対して適切な高速化を行うことはできますが、中途半端にいじってしまうと逆に遅くなったりページが真っ白になってしまったりと、初心者には敷居が高い部分。

でも、ページが表示されるのに何十秒もかかっていると読者はブログを読まずに去ってしまうので、速いに越したことはありません。

極端な話、速さを追求すると、外部読み込みなどを一切排除したテキストのみのサイトができあがります。これだとちょっとつまらないので、せめてファーストビューはすぐ表示されるよう調整するのが望ましいですね。

要は、読者が記事を読み進める前に表示が完了すればよいので、重いものは後方に配置しておくことで体感速度がアップします。

はてブTOP100から学ぶファーストビューデザイン

ファーストビューに必ず置くべきなのは、ブログタイトル、もしくはそれに変わるロゴです。

「上部のタイトル（ロゴ）をクリックすればホームに戻れる」というのは常識になっているため、奇をてらったサイトを作るのでなければ必須。

その他、ナビゲーションメニューや SNS フォローボタンなど、サイト（の目的）によって何を置くか変わってきます。今回は代表的なものとして、以下の5種類を取り上げてみます。

2014年のはてブ TOP100 にランクインしたサイトのうち、この5種類をファーストビューに配置しているサイトはどれくらいあったのでしょうか。

ブクマを通して今年を見る　2014年「はてなブックマーク 年間ランキング」100位まで

今回は以下の条件で調査を行いました。

2015年1月に各サイトを見て回ったので、バズった時点でのデザインと変わっているサイトがあるかもしれません。スマホ版は表示がまちまちだったので今回は見送っています。

また、ランキングは100位となっていますが、上記の条件からいくつかのサイトが除外対象となったため、全 70 サイトになりました。

ちなみに、1280 × 840 のブラウザサイズで当ブログの記事ページを見るとこんな感じです。

それでは、順番に解説していきます。

SNS ボタン設置率は 60.0 ％

タイトルにあるように「バズるサイト」が調査対象なので、まずは SNS ボタンとシェア数表示がファーストビューにあるのかを見てみましょう。

設置されていたのは、70 サイト中 42 サイト。タイトル下に設置してあるサイトがほとんどでした。

オリジナルデザインでシェア数を表示しているサイトもありましたが、公式ボタンを採用しているサイトが圧倒的多数。

公式ボタンは表示速度にかなり影響しますが、パッと見ただけでどの SNS でどのくらいシェアされているのかわかる、というメリットがあります。

シェア数は人気度のようなものですから、一定のシェア数が見込めるなら表示しておきたいところ。人につられて人はやってきます。

広告設置率は 57.1 ％

広告を設置していたのは、70 サイト中 40 サイトでした。

ファーストビューに広告を表示することは Google AdSense でも推奨されており、広告主にとっては必ず目につく場所ということで単価も高めになります。

もっとも、広告だらけにしてしまうとユーザビリティ低下につながり、検索エンジンの順位決定にも影響します。

アドセンスに限って言えば、単価は高くなるもののクリック率はかなり低いので、とくにブログタイトルまわりに設置するのはあまりオススメしません。

クリックだけを見れば、記事下が一番高くなります。

参考ブログとアドセンスで稼いでみたいあなたへ贈る10のアドバイス

アイキャッチ画像使用率は 64.3 ％

アイキャッチ画像とは、文字どおり読者の目をひきつけるものです。ファーストビューでこのアイキャッチが見えるのは、70 サイト中 45 サイトでした。

当ブログのように横幅いっぱいに大きくアイキャッチを置くのではなく、記事幅の半分ぐらいに設定してテキストを回り込ませているサイトもあります。

一般的に、人物、とくに顔を使うと読者の目をひきやすいと言われていますが、45 サイトのうちアイキャッチ画像に顔が使われていたのは 14 サイトでした。

記事のイメージに合わなければ、無理に人物画像を使う必要はありません。

また、画像にテキストを追加していたのは 45 サイトのうちわずか 7 サイトでした。画像だけでイメージを伝えられるものは、無理に加工しなくて良いのかもしれません。

ネタ記事なら入れたほうがいいかもｗ

アイキャッチはホームの記事一覧ページでサムネイルとして使用したり、SNS でシェアされるときに表示させることもできるので、ここら辺も考えて作ったほうが効果的です。

検索フォーム設置率は 48.6 ％

ファーストビューに検索フォームを置いているのは 70 サイト中 34 サイトでした。

日記ブログではほぼ必要ないと思いますが、技術的な内容が多かったり、ポータルサイトのようなつくりであればファーストビューに設置するのが良いでしょう。

個人的に他人さまのブログにある検索フォームを使ったことがないのですが、アクセス解析を見ると意外に使われています。

このブログではサイドバーの右上に Google カスタム検索を設置しており、スマホではタイトル下にも表示しています。

記事数が 10 ぐらいしかないなら、要りませんね。

パンくず設置率は 35.7 ％

ファーストビューでパンくずリストが見えるサイトは、70 サイト中 25サイトでした。意外に少ないな、というのが個人的な感想です。

microdata などで適切にマークアップしておけば、検索結果ページにパンくずが表示されます。ファーストビューに置くことでほんの少しだけ重要視される可能性がありますが、カテゴリーが適当なら逆効果。

パンくずの役割は読者が現在の位置を見失わないよう導くものですが、サイトの構成によってはまったく必要のないこともあります。とくに、階層が深くない場合は、タグやカテゴリー表示で代用してもかまいません。

読者がパンくずをたどって移動すると考えたとき、ブログではファーストビューではなく記事下に設置するほうが効果的かもしれませんね。

まとめ

以上、5項目を見てきました。設置率の多い順に並べてみます。

すべての要素を設置しているサイトもあれば、まったく設置していないシンプルなサイトもありました。

これらの要素を並べておけば必ずバズる、というわけではなく、最終的には記事の中身が問われるのは言うまでもありません。

試行錯誤しながらブログを育てていきましょー！

それでは、また。