スマホ・ファーストビューの参考に！デザイン・レイアウトを人気ブログ10個に学ぶ

月間100万PVを超える人気個人ブログ。記事ページのスマートフォン・ファーストビューはどうなっているのか、その人気の秘密を探るため月間100万PV超え実績がある10の個人ブログを比較調査しました。

前回の「ブログのためにスマートフォン・ファーストビューを20サイト調査（企業サイトの記事ページ編）」とは大幅に違う傾向となりました。

ファーストビューを比較した10ブログ

今回は星の数ほどある個人ブログの中から、100万PVを超えている（超えたことがある）と言われている10のブログをピックアップしました。いずれも有名ブログですね。

1. まだ東京で消耗してるの？
2. gori.me
3. 和洋風KAI
4. 男子ハック
5. NUMBER333
6. おまえは今までスキャンした本の冊数をおぼえているのか？
7. すしぱくの楽しければいいのです
8. でじねこ.com
9. [N]ネタフル
10. ノマド的節約術

ファーストビューの要素

100万PV超え10ブログのスマートフォン・ファーストビューにある要素を分解し、スマートフォン実機(※)で見た場合にどのサイトのどの要素が表示されているか集計しました。

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

(※)Xperia Z3 Compactでの表示で集計しました。ディスプレイ解像度は1280×720のHD。

比較のために、20の企業サイトを調査した下記のグラフも合わせてご覧ください。項目の並びは同じ（企業サイト調査の際に「あり」が多い順）です。

企業サイトのファーストビュー

企業サイトを比較検討するために用意したスマートフォン・ファーストビュー7項目が、100万PV超えブログでは大幅に「なし」という結果に。

記事タイトル：70％

企業サイト調査では全20サイトがファーストビューに表示していた記事タイトルですが、100万PV超えブログでは30％がファーストビューにありませんでした。直帰率の悪化につながってしまう気がしますが、100万PV超えブログともなると既にファンがついていて気しない可能性もありますね。

検索：20％

検索機能はほとんどの100万PV超えブログが付けていません。企業サイトでは75％が付けていました。

メニュー：50％

他のカテゴリや特集への遷移など、実際のメニューそのものまたはメニューボタンを載せているのは半分。

広告：90％

広告は圧倒的に多い90％がファーストビューに掲載していました。営利を求める企業サイトが65％だったことを考えると、ファーストビューへの広告掲載は100万PV超えブログがやっているから、と単純に真似してしまうのはおすすめできません。

SNSボタン：10％

記事共有のSNSボタンはわずか10％がファーストビュー掲載と意外な結果になりました。替わりに記事下部にバイラルメディア拡大とともに広がってきた、大きなSNSボタンを付けているサイトもチラホラ。

アイキャッチ画像：40％

広告がファーストビュー掲載になっている分、アイキャッチ画像はファーストビュー外に追いやられて40％。

記事本文：10％

記事本文がファーストビューで見えるのはわずか10％（1サイト）。記事タイトルも見えない、アイキャッチ画像も見えない、そして記事本文さえも見えない、というファーストビュー・レイアウトのブログもあり、読者の視点から見るとどうなんだろうかとは思いますが、100万PV超えブログです、何かしらの戦略があるのでしょう…。

他記事へのリンク：50％

スマートフォン・ファーストビューで重要な7項目が、100万PV超えブログでは「なし」が多すぎたため、1要素増やしました。それが「他記事へのリンク」。実に50％、半分の100万PV超えブログがファーストビューに掲載しているのがこれです。

ブログによっては非常に広いエリアを他記事リンクに費やしており、検索がない・カテゴリがない、というファーストビューでの回遊性の低さはこちらで補われていました。

様々な記事へバラバラに来るアクセスを、意図的に特定の記事に誘導して集め、一時的なソーシャルシェア（特にはてなブックマークなど）を期待してのレイアウトでしょうか。

ファーストビュー・レイアウト

実際のスマートフォンでのスクリーンショットと合わせて、各サイトのファーストビュー・レイアウトを見ていきます。良いなと思ったデザインのサイトをブログの参考に活用ください。

なお、灰色に塗りつぶしてある部分は広告です。規約上、掲載NGのGoogle AdSense以外も含めて塗りつぶしています。

まだ東京で消耗してるの？

画像：まだ東京で消耗してるの？

何かと話題のイケダハヤト氏のブログ「まだ東京で消耗してるの？」のスマートフォン・ファーストビュー。このスクリーンショット、間違ってトップページを撮った訳ではないです、記事ページです。

今回調べた中で最も広告を強く打ち出していて、このページが何のページなのかはファーストビューからは判断できません。広告の次も人気記事へのリンクで、本文は更に下です。

余談ですがイケダハヤト氏は最近になってアフィリエイト関係の投稿が非常に多く、収益向上のみを追求するブログに切り替えたのでしょうか。

gori.me

画像：gori.me

iPhoneやMac情報がメインのブログ「gori.me」のスマートフォン・ファーストビュー。他記事へのリンクが3つ、サムネイル画像付きで表示され目立っています。

メニューカテゴリはブログの中心となる「iPhone」「Mac」「iPad」と、その他「カテゴリ一覧」に分かれていて、左の3カテゴリに興味がある人はカテゴリ一覧を開かなくとも移動できます。カテゴリ一覧はなかなか開かれないので、重要なものは表示させておくのは良い手ですね。

画面下部に写っているバナー広告は、タブのようなものを触るとすっと下に下がって消えます。このかたちの広告が10ブログ中6つもありました。流行りなのかな？

和洋風KAI

画像：和洋風KAI

今回調べた中では珍しい検索機能がファーストビューにある「和洋風KAI」。記事タイトルとアイキャッチ画像がしっかり見える配置で、読みたい読者のために余計なものは一切ありません。

広告も下部のバナー広告のみ、gori.meと同じくタブを触ると消えるタイプです。タブを触るときに誤タップしてしまうのはぼくだけだろうか…。

男子ハック

画像：男子ハック

本日の人気記事が最も目立っている「男子ハック」のファーストビュー。記事タイトルは画面下部に半分くらい見えています。

読者の実際の動きがどうなっているのか分かりませんが、読みたい記事があってアクセス→人気記事のタイトルを見て気になる→もともと見たい記事を読んでから上に戻ってくる、という流れなのでしょうか。

それであれば記事下に人気記事を出せば良い気もするので、読みたい記事があってアクセス→もっと読みたいものが人気記事にあるのでアクセス、という動きなのだろうか。

NUMBER333

画像：NUMBER333

「NUMBER333」もiPhoneやMacの記事を中心としたブログ。ファーストビューの下半分程度はスペシャルスポンサー（広告）ですが、記事タイトルがまでに余計なものがないので訪れた読者が迷うこともないレイアウト。

画面右上のメニュー横にあるマークには動きがあって、スルーされがちなメニュー機能に視線が行きやすくなっています。トップに行く遷移をわざわざ「HOME」で用意していあるのも珍しい。

おまえは今までスキャンした本の冊数をおぼえているのか？

画像：おまえは今までスキャンした本の冊数をおぼえているのか？

「おまえは今までスキャンした本の冊数をおぼえているのか？」長いですね、通称「おまスキャ」のファーストビューがこちら。

今回調査した中で唯一SNSボタンがファーストビュー、しかも上部に設置されています。

ぼくがイメージする普通のブログレイアウトだったのは、この「おまスキャ」を含めて3サイト（「和洋風KAI」と「ノマド的節約術」）しかありませんでした。

すしぱくの楽しければいいのです

画像：すしぱくの楽しければいいのです

「すしぱくの楽しければいいのです」を運営する「すしぱく」さんは無料写真素材PAKUTASOを運営している方。お世話になっているブロガーも多いのではないでしょうか。

ファーストビューにはサイトロゴ、カテゴリ、記事タイトル・アイキャッチ画像とシンプルな配置。カテゴリが結構なエリアを占めていますが、記事本体も十分見えるようになっています。

今回調べた中で唯一ファーストビューに広告がありません。

でじねこ.com

画像：でじねこ.com

「でじねこ.com」のファーストビュー。テキストのセンター寄せ・左寄せが混在、少しずつ違うフォントサイズでゴチャゴチャした印象。

ページ下部には例のタブを触ると消える広告の上にアイキャッチ画像が見えています。たまたまですが1ページで5回ドラゲナイしてます。

[N]ネタフル

画像：[N]ネタフル

「[N]ネタフル」のファーストビューには記事タイトルもアイキャッチ画像も見えません。しいて言えばパンくずリストに記事タイトルが含まれていますが、広告と他記事へのリンクに視線が行ってしまい、実機で見ている時にはその存在に気付きませんでした。

他記事へのリンク一覧の余白が少ないので誤タップしてしまいそうです。

ノマド的節約術

画像：ノマド的節約術

そして今回の調査の最後「ノマド的節約術」のファーストビューがこちらです。画面上部にメニュー・ホーム・特集・一覧・検索の機能が並んでおり、全体的にもシンプルなレイアウトです。

ある意味では、本当に普通のファーストビューで、100万PV超えです。ファーストビューはいろんな事をするべきじゃない、まず記事を読んでもらうことが大事、というお手本のようなブログです。

スマートフォン・ファーストビューまとめ

20の企業サイト調査とは全く異なる結果となった100万PV超え10ブログ。それぞれの視点・やり方でより多くの記事を見てもらえるよう工夫されています。

ちょっと広告や他記事へのリンクが目立つな、という個人的な思いはありますが、とは言え100万PV超えブログ。読者のためになると思った点はどんどん取り入れて行きたいものです。

あなたのブログやサイトに活かせる点があればうれしいです。企業サイトのファーストビュー調査はこちらの記事をご覧ください。