ヘッダーとは、WEBサイトの上部エリアのことです。
ロゴやナビゲーションなどが入っているエリアになります。
大抵のWEBサイトは、ヘッダーを持っています。
※ こちらのレイアウトは基本形の一例です。状況によって作り変えましょう。
そしてヘッダーは、WEBサイトの操作性を左右する役割を持ちます。
他ページへのリンクがまとまっていることが多いからです。
特にナビゲーションは他のページに遷移する要となる動線。
分かりにくければ、離脱率の向上に繋がってしまいます。
今回は、ヘッダーについて解説していきます。
まず、いくつかのWEBサイトからヘッダーのデザインを紹介します。
デザインやレイアウトを参考に、レパートリーを頭の中に増やしてみてください。
デザインは基本的に引き出しの多さが決め手です。
見てきたデザインやレイアウトが多ければ、すばやく適切なヘッダーをイメージできます。
まず、基本的なヘッダーの形を見て、デザインをイメージ出来るようになりましょう。
ヘッダーデザインの解説
それでは、いくつかヘッダーデザインを解説していきます。
まずデザインやレイアウトの基本を把握してみてください。
基本的なヘッダー
![](https://base91.net/wp-content/uploads/2019/04/header2.png)
一般的なサイトの基本的なヘッダーです。
左にロゴがあり、右にナビゲーション。
お問合せ(今回はエントリーについて)がナビとは別枠に置いてあります。
また、ナビゲーションは英語と日本語を二重に使っています。
日本語だけだとデザインが寂しいし、英語だけだと分からない。
そんな時によく英語と日本語を併用したナビゲーションにします。
ロゴも英語と日本語が並んでいます。
スタンダードな形として覚えておくと良いでしょう。
![](https://base91.net/wp-content/uploads/2019/04/header9.png)
ただ、日本語だけでも、配置やデザインによってはシンプルに格好良いです。
レイアウトや空白の使い方によって、デザインの寂しさは消えます。
適材適所で使い分けていきましょう。
イラストアイコンつき
![](https://base91.net/wp-content/uploads/2019/04/header1.png)
よく見るヘッダーの1つです。
ただ、今回はナビゲーションにアイコンがついています。
アイコンをつけることでナビゲーションをわかりやすく出来ますね。
また、ナビゲーションのデザインがシンプルすぎる時もアイコンを使います。
空白が埋まれば、必然的にデザインに賑やかさが生まれます。
ナビゲーションとロゴの2段構え
![](https://base91.net/wp-content/uploads/2019/04/header4.png)
ヘッダーを2段に分けるパターンですね。
上にロゴマークやお問合わせ、重要なボタンなどをまとめています。
そして、グローバルナビゲーションを1列で下段に設置しておきます。
縦幅を広く取りますが、その分、ナビゲーションも扱いやすくなります。
アイコンもついていますし、わかりやすさを引き出したデザインですね。
メインビジュアルの上に
![](https://base91.net/wp-content/uploads/2019/04/header3.png)
最近、トップページに画像を大きく使うケースが多いですね。
メインビジュアルにヘッダーを重ねることで、より画像を広く見せることができます。
今回は、ナビやボタンが白いボックスで囲まれています。
もちろん視認性が確保できれば、敷かない場合もあります。
![](https://base91.net/wp-content/uploads/2019/04/header5.png)
こちらは、ナビやロゴがそのまま画像の上に載っています。
上記の場合、写真の選び方が重要です。
もしごちゃごちゃした画像を選んでしまえば、ナビが見にくくなりますからね。
背景と文字が重なって視認性が悪くなるからです。
今回は、上手く夜空にナビやロゴを配置し、視認性を確保しています。
最初からハンバーガーメニューで
![](https://base91.net/wp-content/uploads/2019/04/header7.png)
こちらも近年、よく見るケースです。
ナビゲーションを「ハンバーガーメニュー」にするタイプですね。
ハンバーガーメニューとは、右上にある、線が3弾に重ねられたボタンです。
クリックすると、ナビゲーションのリストが開きます。
ハンバーガーメニューは、通常、スマホサイトで使ってきました。
ナビゲーションをすべて表示する横幅が無い時に使います。
みなさん、一度は触れたことがあるのではないでしょうか。
ただ、近年、WEBサイトへ「スマホ」からアクセスされることが増えました。
というより、今やWEBサイトを見る時は、ほとんどスマホです。
だからこそ、パソコン/mac版もハンバーガーメニューにしても特に問題ありません。
特に、ナビゲーションが多くなる場合はうってつけです。
ハンバーガーメニューの方が優れた利便性を発揮するでしょう。
もし、ナビゲーションが10個あったとして、横に並べられていたら。
ごちゃごちゃして、どれを選べばよいかわからなくなるでしょう。
画面もシンプルに見やすくまとめることも出来ます。
横にヘッダーを配置
![](https://base91.net/wp-content/uploads/2019/04/header6.png)
メインビジュアルの真横にヘッダー要素を置くケースです。
今までの形より、少しコーディングが大変ですね。
ただ、ナビゲーションの数が多い場合、縦の方が多く配置できます。
もし、上記のデザインで上部にナビゲーションを置いたらどうなるか。
真横にすべてのナビゲーションを並べたとしたらどうでしょう。
全体的にごちゃごちゃしてしまい、視認性が悪くなります。
ナビの数やコンテンツの内容によっては、横に置くとスッキリします。
場合によって、使いこなしてみましょう。
縦書バージョン
![](https://base91.net/wp-content/uploads/2019/04/header8.png)
よく和の飲食店系に多いデザインですね。
ナビゲーションの文字が縦書になっているバージョン。
日本語は本来縦書ですし、縦にすることで和のイメージが強まりますね。
特に、和をイメージするWEBサイトの時に使うと良いかもしれません。
今回のミッション
これで、大体ヘッダーの形は把握できたでしょうか。
では、今回のミッションとして、自分でヘッダーを作ってみましょう。
まずは、何のサイトを作るかコンセプトを決めてください。
コンセプトの決め方が分からない方はこちらを参考にしましょう。
すでにコンセプトが決まっている人は、そのまま進んでください。
コンセプトが決まったら、ヘッダーのレイアウトを考えてみましょう。
すでにワイヤーフレームを作ってある場合も、改めて作ってみてください。
ひとまず練習ですので、気楽に進めましょう。
レイアウトアイディアが無い方は、紹介したサイトを参考にして構いません。
一度、紙に書いたりXDを使ったりしてレイアウトだけ作ってみましょう。
Photoshopでレイアウトをつくってみよう
下記はPhotoshopですが、レイアウトを作る様子を動画にしました。
作業風景や方法について、参考にしてみてください。
ヘッダーレイアウトのポイントはナビゲーションの使いやすさです。
すべてのページへの動線になる要素が詰め込まれています。
ヘッダーが分かりにくければ、WEBサイトを楽しんでもらえません。
とにかく、わかりやすさ、使いやすさを重要視してみましょう。
Photoshopで形にしてみよう
テーマを決め、レイアウトを決めたら、いよいよ形にします。
下記にデザイン作業の動画をご用意しました。
ヘッダーデザインの参考にしてみてください。
PSD : https://startout.work/mission/photoshop/2/header1.psd.zip
ポイントは「フォントの大きさ」「色」「余白のバランス」です。
この3つのバランスを整えれば、大抵、デザインの質は大きく改善されます。
自分でヘッダーを作ってみて、何か格好悪いと思ったら。
まずは「フォントサイズ」「色」「余白」を確認してみてください。
どのくらい余白をとっているのか。
フォントサイズはどれほどか。
色はどんな色合いを使えばよいのか。
動画のデザインと見比べながら、自分のデザインを微調整してみましょう。
もししっくり来なければ、他のサイトを真似しても構いません。
余白、フォントサイズ、色合いなど、他のサイトを参考にしてみましょう。
デザインのレベルアップに大事なのは観察力です。
誰かの作ったデザインを観察し、自分と何が異なるのかを調べます。
そして、取り入れることによって、デザインの質をあげていくのです。
なお、補足ですが今回のロゴはこちらのサイトからお借りしています。
ただし、本来アイコン素材をロゴとして使ってはいけません。
あくまでも今回アイコンを使ったのは、サンプルとしてお借りしたものです。
ロゴを作るのであれば、基本的にIllustratorを使って作ります。
Illustratorが使えない場合はPhotoshopを使って作っても良いでしょう。
公開するWEBサイトを作る場合、ご自身でロゴも作ってみてください。
ブランディングとしても、大きな要となるものです。
手っ取り早く練習だけしたい場合のみ、アイコン等を活用しましょう。