ポケットラボ

webデザインをしていく際に、ヘッダーの高さはどれぐらいが最適なのだろうと思うときありませんか。もちろん、ヘッダーに置くコンテンツ量やデザインなどの状況によって変わってくるかとは思いますが、コーポレートサイトなどのサイトは共通していくかと思います。

今回はそのような素敵なサイトのヘッダーの高さはどれぐらいが”気持ちがいい””心地いい”のか様々なサイトのデザインから測ってみました。

ウチダ動物病院

手書き感がとっても可愛いウチダ動物病院さんのサイトです。犬が可愛い！すっごい暖かく、動物を愛しるーという思いがビンビン感じれるwebデザインがとっても素敵です。

ヘッダー高さは125pxとサイトロゴを結構大きく見せているところが気持ち良いですね。あ、ロゴが可愛い。

TAGAMI

おしゃれななデザイン、かわいい文房具を取り扱っている通販サイトTAGAMIさんのwebサイト。ヘッダーの開いているスペースにイラストが載せていてとってもキュート。こりゃ可愛い文房具売ってるぞー！！と見た瞬間からきっとワクワクしちゃうデザインです。

ヘッダーのサイズは150px。ヘッダーのトップに8pxの緑のラインが入っていて更に縫っているかのようなデザインが素敵！

大阪芸術大学

メインビジュアル部分がとっても大きくて、動きが面白い大阪芸術大学さんのwebサイト。ヘッダーもとてもシンプルで本当に必要最低限の機能しかありません。すっきりしていてとても綺麗です。

ヘッダーの高さは107pxということでサイトロゴ、ナビゲーション、検索欄だけの構成だとこのぐらいが綺麗なのかなーと思います。

所沢市民文化センター　ミューズ

所沢市民文化センター　ミューズさんのwebサイト。バナーがダイナミックにくるくるっとしているのですごい迫力がありますね。バナーに目が言ってしまいます。すごい！ドロップシャドウも掛かっているので、舞台の上を見ているような気分になります。

ヘッダーの高さは180pxと結構高めにとってあります。グローバルメニューもアイコンが付いて、サイズも大きいのでおばあちゃん、おじいちゃんが見たときはわかりやすいかもしれませんね。

東京情報大学

バナーの背景のイラストが印象的な東京情報大学さんのwebサイト。スカイツリーのイラストを使っているところで「あ、東京ね」ってことが一発でわかっちゃいますよね。スカツリー登りたい。ヘッダーの中にメニューやボタンなどがたくさんあるのにごちゃごちゃしてなくて綺麗にまとまっているのが素敵。

他言語にも変更できるのがタブっぽいデザイン！初めて見た！

ヘッダーの高さは160pxでした。グローバルメニューでは、アイコンに色がついていてとってもかわいいですね。

アイコンにボタンにラインなど、細かいところまで作りこまれているので全体的にすごく綺麗だなー。

松商学園高等学校

緑色が素敵な松商学高等学校のwebサイトです。”ザ・緑”というぐらい緑色がいい意味で印象に残るデザイン。資料請求ボタンが、バナーの上に被っているのが目につきますね。

ヘッダーの高さは142px。メニューが太く、フォントも太目フォントを使っているのとっても力強いですね。

kyokuto

背景がノートのテキスチャになっているkyokutoさんのwebサイト。ノートを扱ってますよ、と見ただけで伝わってくるようなデザイン。アイコンなども鉛筆で書いたような手書き風になっています。

ヘッダーの高さは140px。

まとめ

ヘッダーの高さは107pxから180pxの高さがあり、数えた数が少ないのですが平均で150pxぐらいでした。ノートPCなどの解像度からすると~170pxがいいのかなーと思います。

作るときはそういうところも意識して作って行きたいですね！