ブログのPCヘッダーはどのくらいの高さが適切?100万PV越えの人気ブログを検証してみた

 

どうも、hirokiです。

今回はブログのヘッダーはどのくらいの高さが適切なのか、月間100万PVを越える人気ブログを参考にして色々と検証していきたいと思います。

時代はモバイルファーストの時代ではあるので、そこまでヘッダーの高さを気にする必要もないかもしれないですが、それでもまだまだPCからのアクセスを無視することはできません。

人気ブログは果たしてヘッダーをどのように設定しているのか?

是非ブログ作成の参考にしてみてください。

LIG inc.

2015y06m05d_070728659

LIGさんは比較的ヘッダーが大きめですね。

メニューバーも含め高さはおおよそ445ピクセルです。

特に広告を貼っているわけではなく、その時々で読んでほしいコンテンツをヘッダーで最大限にアピールしています。

また、面白い一言もあったりして、こういった遊び心が読者をひきつけたりもしているのかもしれません。

このようにヘッダーで注目のコンテンツを際立たせるのもありかもしれません。

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

2015y06m05d_071655258

まだ東京で消耗してるの?さんはとてもシンプルなヘッダーですね。

ヘッダーはブログのタイトルと強化しているインスタグラムのフォローボタンのみです。

高さはおおよそ260ピクセルです。

特にヘッダーでブランディングをしようとか、広告費を得ようということは考えていないようです。

情報量はブログタイトルとインスタグラムのフォローボタンだけであるにも関わらず260ピクセルの高さを確保することで、よりブログタイトルが際立っていますね。

あえてヘッダーで空間を演出しているようにも感じます。

NUMBER333

2015y06m05d_072433248

NUMBER333さんはかなり大きなヘッダーを使っていますね。

高さはメニューバーを含めるとおおよそ725ピクセル以上はあります。(メニューバーを抜いてもおおよそ520ピクセル)

そしてヘッダーではドカンとブログ名をアピールしているのと、その下にブログの簡単な説明とPV数をブランディングしています。

ヘッダーがここまで大きいブログってあまり見たことないのですが、やはりコンテンツが良ければアクセスは十分稼げるということですね。

でじねこ.com

2015y06m05d_073144648

でじねこ.comさんのヘッダーは印象的なロゴマークと注目の記事がずらっと並んでいます。

高さはメニューバーも含めておおよそ218ピクセルです。

「ヘッダーで読んでほしい記事をアピールする」という考え方はLIGさんと同じですね。

読んでほしい記事がある場合はヘッダーでアピールするというのは一つの有効手段と言えそうです。

ノマド的節約術

2015y06m05d_073910644

ノマド的節約術さんはとてもシンプルなヘッダーです。

ブログのロゴと簡単なブログの説明、そしてカスタム検索が設置されているのみとなっています。

高さはおおよそ145ピクセルとそれほど高くありません。

ヘッダーで何かしようということは基本考えずに、全てコンテンツ勝負といった感じですね。

和洋風KAI

2015y06m05d_074729194

和洋風KAIさんのヘッダーは印象的なロゴと、記事カテゴリーのバナーとなっています。

高さはおおよそ228ピクセルです。

ヘッダーで印象的な写真を使ったカテゴリー分けをしているのはデザイン的にとても見やすいですね。

これならメニューバーよりもより視認性が高くクリック率も上がりそうな気がします。

カテゴリーが整理されているブログ運営者はこういったやり方もありかもしれません。

gori.me

2015y06m05d_075226399

gori.meさんは非常にシンプルなヘッダーです。

というか、むしろヘッダーではなくもはやメニューバーです。

ブログのロゴと右側にメニューが表示されていて、高さはおおよそ77ピクセルと低く設定されています。

これによりすぐにメインコンテンツに目がいくようになり、すぐ下の記事が読まれやすくなります。

コンテンツ重視の場合はこのようにあえてヘッダーを目立たせないというのもひとつのテクニックですね。

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

2015y06m05d_075745101

すしぱくの楽しければいいのです。さんのヘッダーは印象的なロゴとタイトルのみです。

高さはおおよそ200ピクセルです。

ちょうどロゴが目立つ高さでもあり、かつコンテンツを邪魔をしない絶妙な大きさだと思います。

ヘッダーをシンプルにすることで導線がわかりやすくなりそうです。

BP.Labo

2015y06m05d_080237027

BP.Laboさんのヘッダーはブログタイトルロゴとかんたんなブログの説明、そして各種SNSへのリンクとなっています。

高さはおおよそ150ピクセルです。

ヘッダーは極力シンプルにしてすぐにコンテンツを見てもらえるような作りと言えます。

全体的に白を基調にしてクリーンなイメージですね。

まさにシンプルさを極めたお手本のようなヘッダーです。

Chikirinの日記

2015y06m05d_080627492

Chikirinの日記さんのヘッダーは超どシンプルな「ザ・ヘッダー」です。

ヘッダーはブログタイトルのみです。

高さは184ピクセルです。

ヘッダーがシンプルなブログほどコンテンツの質が問われるので、コンテンツが良いChikirinの日記さんだからこそのヘッダーだと思います。

まとめ

ひとまず月間100万PV越えの人気ブログのヘッダーを検証してみましたので、ちょっとヘッダーの高さを整理してみたいと思います。

LIG inc. 445
まだ東京で消耗してるの? 260
NUMBER333 520
でじねこ.com 218
ノマド的節約術 145
和洋風KAI 228
gori.me 77
すしぱくの楽しければいいのです。 200
BP.Labo 150
Chikirinの日記 184
平均 242.7

今回紹介したブログのヘッダーの高さの平均は242.7ピクセルとなりました。

確かに、色々なブログを見ていて大体このくらいの高さが丁度見やすくてよさそうな感じがしました。

ということで、僕のブログもメニューバー下のトピックスが流れる部分まで含めると丁度240ピクセルという高さにしてあります。

ヘッダーをどのようにするかでブログの特徴がでると思いますし、当然訪れた人が一番最初に目につく部分でもあるので、「どんなコピーにするか」「どんなロゴを使うか」「どんなコンテンツを重視するか」などはもちろんしっかりと考える必要がありますが、「高さ」という部分も細かいようですがとても大事な要素となります。

是非みなさんのブログでヘッダーを作成する際に参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

hiroki

月間20万PVのメディアを運営したりなんやかんやしたりしてます。サッカーと音楽とトイプードルが好き。主な著書に「ブログに書くことがない!と思った時に読む本」など