246 Shares

バズるサイトの6割はファーストビューにSNSボタンを設置していた!

ブログのファーストビュー

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

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

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

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

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

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

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

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

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

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

訪問者のブラウザサイズを解析して最適なブログ幅を探ってみよう

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

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

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

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

  • 大容量の動画像
  • JavaScript の多用
  • 外部ブログパーツの呼び出し(SNS 公式ボタンなど)

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

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

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

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

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

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

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

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

  • 広告
  • アイキャッチ画像
  • SNS シェアボタン(カウント)
  • 検索フォーム
  • パンくず

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

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

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

  • 閲覧環境は一般的な PC ビュー
  • ブラウザサイズは 1280 × 840 に固定
  • NAVER まとめやスライドシェアは除外
  • 複数記事がランクインしたサイトは上位記事のみ対象

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

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

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

アドセンスで稼ぎたい人へ贈る10のアドバイス

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

SNS ボタン設置率は 60.0 %

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

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

タイトル下に各SNSボタンが並んでいる

ログミーではタイトル下にSNS公式ボタンが並び、シェア数が表示されている

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

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

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

WordPress を使っていて、「公式ボタン並べたいけど表示が遅いし…」とお悩みであればいとも簡単に解決する方法があります。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cache

広告設置率は 57.1 %

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

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

FX2ちゃんねるでは広告が3つ設置されており、記事タイトルがギリギリ見える位置にある

FX2ちゃんねるでは広告が3つ設置されており、記事タイトルがギリギリ見える位置にある

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

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

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

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

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

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

シロクグロースハックブログでは、アイキャッチ画像の次に記事タイトルがある

シロクグロースハックブログでは、記事タイトルの上にアイキャッチがある

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

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

Girl

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

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

画像にテキストはいらない?

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

エローラさん素敵

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

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

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

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

保険の教科書では「例)医療保険」というテキスト(プレースホルダー)が表示されている

保険の教科書では「 例)医療保険 」というテキスト(プレースホルダー)が表示されている

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

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

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

パンくず設置率は 35.7 %

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

アプギガではホームへのリンクを「アプギガトップ」とサイト名を入れている

アプギガではホームへのリンクに「アプギガトップ」とサイト名を入れている

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

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

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

まとめ

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

  1. アイキャッチ画像(64.3 %)
  2. SNS ボタン(60.0 %)
  3. 広告(57.1 %)
  4. 検索フォーム(48.6 %)
  5. パンくず(35.7 %)

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

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

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

それでは、また。