Webサイトのヘッダ...|独学でWebデザインの勉強をする人のためのまとめサイトです。


WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表
WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介

マンダラ塗り絵ダウンロードサイト
マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。






  • Webデザイン・レイアウト

Webサイトのヘッダー領域の高さはどう決める?

Webクリオンラインのビストロ・デュ・リヨン、トップページカンプを制作していて質問があります。

コンテンツ幅1280pxに対して、その後ヘッダー領域が210px、イメージエリアが300pxの高さなのですが、この210px、300pxという数値はどのように決めているのでしょうか?

サイトをつくるとき、いつも何となくやってしまうので、何か計算方法など目処をつけるための習慣があれば教えて下さい。

Webサイトのヘッダー領域の高さは、基本的にそのWebサイトの目的や伝えたいイメージで決めます。

例えば、Yahooのサイトのヘッダーは、情報量が多いのに高さが低い。余白が少ない。

header_side_yafoo

これは、ポータルサイトという意味で、優雅さは必要なく、どちらかというと緊張感が出ています。

 

一方、Appleのサイトのヘッダーは、情報量は少ないのに高さと余白がある分、洗練感が感じられますよね。

header_side_apple

 

ビストロ・デュ・リヨンもどちらかというと、広めの余白・高さをとっています。

header_side_bstro

 

こんな感じで、伝えたいイメージに合わせて、余白や幅を考えるといいと思います。

また、厳密に言えば、ファーストビュー(画面を開いた時にスクロールしないで見える情報)で見せたい情報によっても、ヘッダーの高さは変わることもあります。

ありがとうございます。

なるほど!まずpx数ありきではなく、何をヘッダー領域に盛り込むか、どんなイメージにしたいかを決めるということですね?

それが決まったら黄金比などを目安にして切りのいい数字でpx数に落とし込んでいく、という考え方で宜しいでしょうか?

はい!その考え方でよいと思います。

いろんなサイトの各領域の作り方もたくさん意識して見るとよいですよ!




Facebookページに「いいね!」をクリックしていただくと、当サイトの更新情報を受け取ることができるようになります。
ぜひ、「いいね!」していただけると嬉しいです!



Pagetop