シンプルなヘッダー

「シンプル イズ ベスト」という言葉があるように、シンプルで見やすいデザインは人の注目を集めると言われています。多くの訪問者がいるWebサイトも、シンプルで見やすくすることにより、訪問者が離れにくくなると考えられています。そこで、Webサイトを閲覧する訪問者の目に最初に飛び込んでくるヘッダーをシンプルにして、訪問者の心をつかむデザインの方法をご紹介します。

視界の端で認識してもらうシンプルなヘッダー

Webサイトを開くと、一般的には上部から読み込みが始まります。必然的に最初に表示されるのはヘッダーです。インターネット回線が遅いとき、ヘッダーだけが表示されたまま、読み込みに時間がかかるという経験をした方もいるでしょう。その間、訪問者はほかの作業をするかもしれません。しかし、わかりやすいシンプルなヘッダーであれば、利用者が視界の隅でヘッダーをとらえ、サイトがどんな情報を伝えているのかを知ることができます。なので、デザインの作り手としては一瞬視界に入っただけで内容が伝わるようなデザインを目指しましょう。

認識しやすいヘッダー

カードレイアウトに即したシンプルなヘッダー

サイトのメインで使用するサムネイル画像をカードレイアウトにして配置する場合、これを念頭に置いたヘッダーを作成するのがオススメです。ここで重要になってくるのは配色です。カードレイアウトは一段構成ですか?それとも複数?一段の場合、ヘッダーも一色で統一することができます。逆に複数の場合には、その数に合わせた配色を利用することができるでしょう。そうすることにより、訪問者にとって区別のしやすいデザインとなり、閲覧しやすくなります。
しかし、メイン部分はシンプルなのにヘッダーだけがカラフルだと訪問者は違和感を覚えるでしょう。ですから、ヘッダーのデザインはメイン部分のデザインにも注意を払い、サイト全体で一体感のあるデザインに仕上げることが重要です。

カードレイアウトに適したデザイン

見た目を良くするために余白を有効利用!

ヘッダーを見やすく、利用しやすいと感じさせるために、十分な余白を用意しましょう。現在、日本ではワイド画面のデスクトップ(16:9)が広く用いられているようです。ヘッダーには、文字を直接挿入することができますが、だからといって文字情報を入れ込みすぎると、いくらワイド画面であったとしても見づらくなってしまいます。
余白があると文字の視認性が高くなるだけでなく、情報の配置がわかりやすくなります。文字のサイズによりますが、一般的には余白を一文字分以上持たせることで隣との違いが分かりやすくなると言われています。

余白の活用

固定ヘッダーを今こそ活用しよう!

近年よく見かけるようになったのが、固定ヘッダーです。固定ヘッダーとは、サイトをスクロールしたときに、ヘッダーが常に上部に表示されるデザインです。
このデザインはとりわけ、1ページごとの情報量が多いサイトに有効です。こういったサイトではページをすべて見るためには、かなりのスクロール量が必要になります。そのようなときに固定ヘッダーであれば、必要としている別のページにスムーズに移動できるからです。
固定ヘッダーを訪問者に有効に利用してもらうためにも、シンプルなデザインを心がけましょう。固定ヘッダーから他の情報に移動できることをわかりやすく訪問者に伝えることができれば、情報量が多くても、より使いやすいサイトとなることでしょう。

固定ヘッダー
固定ヘッダー例

「シンプルなヘッダー」、それは、「訪問者に親切なヘッダー」と言い変えることができるかもしれません。利用しやすいと感じてもらうためには、シンプルで印象に残るデザインにしたり、サイト全体のデザインに合わせた配色を行ったりすることが重要です。シンプルなデザインでサイト全体の構成がわかりやすく、また、使いやすさを認識してもらい、リピーターとなってもらえるようなヘッダー作りを心がけましょう。