header_height_design

webデザインの”気持ちがいい”ヘッダーの高さは?

  • このエントリーをはてなブックマークに追加

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

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


ウチダ動物病院

Uchida dobutsu

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

Uchida dobutsu header

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

TAGAMI

Tagami bunbogu

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

Tagami bunbogu header

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

大阪芸術大学

Osaka gejutsu daigaku

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

Osaka gejutsu daigaku header

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

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

Bunka senta myu zu

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

Bunka senta myu zu header

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

東京情報大学

Tokyo joho daigaku

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

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

Tokyo joho daigaku header

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

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

松商学園高等学校

Massyo kouko gakko 

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

Massyo kouko gakko header

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

kyokuto

Kyokuto

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

Kyokuto header

ヘッダーの高さは140px。

まとめ

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

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

 

おすすめ記事

  1. スペシャル感がでるようなデザインを考える
  2. 国内の素敵なwebデザインをまとめてみました【赤色編】
  3. 国内の素敵なwebデザインをまとめてみました【黄色/オレンジ編】
  4. 背景にぼかし写真を使ったWebデザイントレンド17個
  5. 海外のスタートアップ企業、サービスのwebデザインのまとめ

関連記事

PAGE TOP