2013年10月6日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がいいのかなーと思います。