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