![ヘッダーサイズはどのくらい?](https://dot-launcher.com/wp-content/uploads/2019/03/ヘッダーサイズ-1024x538.png)
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
こんにちは。お絵かきニートの藤依しのです。
このブログをリニューアルするにあたって、まずはヘッダーロゴを設定してみます。
しかし、さっそく問題が…
なんと、これだけネット上にブログ関連の情報があるにも関わらず
「ブログのヘッダーって、結局どんなサイズが最適なの?」
ということに関しては、あまり情報がないのです!
![ななしちゃん](https://dot-launcher.com/wp-content/uploads/2019/03/ななしTwitterアイコン.png)
いや、流石に何かしらあるでしょ。
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
微妙に知りたい情報とは違うんですよー。
あったとしても、テーマごとの最適サイズだとか、設定方法だとか…そうではなくて、もっとデザイン的な『どう見せるか』に関する情報が知りたかったのです。
というわけで今回は、『見せ方』という観点から、自分なりにどのくらいのサイズが丁度良いか結論を出してみました!
参考ページ
![ななしちゃん](https://dot-launcher.com/wp-content/uploads/2019/03/ななしTwitterアイコン.png)
『見せ方』と言っても、デザイン的な知識はないじゃないですか。
どうやって最適なサイズを見つけるんですか?
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
まずは他のブログを参考にして考えてみます。
今回参考にしたのはこちら!
- WordPressテーマ『JIN』のデモサイト
![JINデモサイト](https://dot-launcher.com/wp-content/uploads/2019/03/スクリーンショット-2019-03-31-15.35.03-1024x604.png)
- WordPressテーマ『THE THOR』のデモサイト
![THE THORデモサイト](https://dot-launcher.com/wp-content/uploads/2019/03/スクリーンショット-2019-03-31-15.35.33-1024x593.png)
- おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ
https://saruwakakun.com/design/gallery/cool-blog
- ブロガーが注目すべき人気・有名ブロガー20人のブログサイト
https://hiroki-suzuki.com/popularity-blogger
これらのデモサイト・及び著名のブロガー様たちから、何が学べるか考えていきたいと思います。
参考から見えてきた、ヘッダーの見え方
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
ヘッダー(タイトル文字・タイトルロゴの部分)に着目すると、大きいと感じるのは縦幅200px(ピクセル)から。
縦150px程度であれば、基本は小さく見えます。が、カテゴリーメニューがある場合は、まだちょっと大きいと感じるかもしれません。
縦幅が100pxを切ると、ヘッダーの下にメニューがあってもそれほど目立ちませんね。
![ななしちゃん](https://dot-launcher.com/wp-content/uploads/2019/03/ななしTwitterアイコン.png)
ヘッダーは大きいほうが目立って良さそうですけど、有名なブログにも意外に小さめなヘッダーが多いのが面白いですね。
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
素人目でなんとなくわかるのは『大きい場合と小さい場合』では、ページを開いた時、どこに目がいくかが異なること。
たとえば大きいヘッダーの場合は、やっぱりロゴに目が行きやすくなります。
![ヘッダー大きめ](https://dot-launcher.com/wp-content/uploads/2019/03/ヘッダー大きめタイプ-1024x538.png)
ロゴに目がいくということは、ブログタイトルを覚えてもらいやすくなるということ。
一方でページを開いた時、画面の半分ほどがヘッダーで埋まっていたら、ちょっとうっとうしく感じるかもしれません。
逆に小さめである場合、ヘッダーロゴよりも、記事に目が行きやすくなります。
![ヘッダー小さめ](https://dot-launcher.com/wp-content/uploads/2019/03/ヘッダー小さめタイプ-1024x538.png)
この場合、どんな記事があるかすぐに見てもらえます。
ただし、その分ブログのタイトルは覚えてもらえないかもしれません。
![ななしちゃん](https://dot-launcher.com/wp-content/uploads/2019/03/ななしTwitterアイコン.png)
結局、大きめか小さめか、どっちのほうが良いんですか。
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
ブログのタイトルを知ってほしいなら『大きいヘッダー』
「そんなことより内容だ!」の人は『小さめのヘッダー』で良いんじゃないでしょうか。
また、下にカテゴリーメニューを入れるか入れないかでも、微妙に印象が変わります。
たとえばロゴを左寄せにして右側にメニューを入れると、よりコンパクトな印象になります。細めのキレイなデザインを採用しているサイトは、このパターンが多いですね。
![ヘッダー左寄り](https://dot-launcher.com/wp-content/uploads/2019/03/ヘッダー左よりタイプ-1024x538.png)
僕的には、小さいほうがスッキリしていてオシャレというイメージがありました。
ただシンプルでオシャレに見せるには、センスが問われますので難しいところですね。
初心者の人は、高さ200px前後のヘッダーを用意するのが無難でしょう。
実際にヘッダーを設定してみる
せっかくなのでヘッダー用意して実際に設定してみました。
さっきから画像にチラチラ映ってましたが、用意したのがこちらです。
テストとして作ったけど、意外に良くできている気がします。
![タイトルヘッダー](https://dot-launcher.com/wp-content/uploads/2019/03/タイトルヘッダー-1.png)
ヘッダーの設定は、使っているテーマによって違う気がするので割愛。
(ちなみにこのブログではWordpressテーマ『cocoon』を使用しています)
それでは実際に設定してみます。
![ヘッダー設定後](https://dot-launcher.com/wp-content/uploads/2019/03/スクリーンショット-2019-03-31-18.12.01-1024x577.png)
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
というわけで。小さめのヘッダーにしてみました!
個人的には「まぁこんなもんかな」という印象ですね。
![ななしちゃん](https://dot-launcher.com/wp-content/uploads/2019/03/ななしTwitterアイコン.png)
やはりこれだけ小さいと、ヘッダーロゴ自体はかなり地味に見えますねー。
デザインがシンプルなせいもあるかもですが。
![藤依しの](https://dot-launcher.com/wp-content/uploads/2019/03/しのTwitterアイコン.png)
とはいえ、まず記事に目がいくのは大きな利点です。
結局ブログにおいて一番重要なのは記事であって、ユーザーも文章読みにきているわけですからね!
まとめると、ブログのヘッダーサイズは
- 記事を目立たせたいなら、縦幅150px以下
- ブログタイトルを目立たせたいなら、縦幅200px以上
が良さそうです!