わかりやすい!と思わせるWebヘッダーを作るコツ

shunichi shiga
わかりやすいヘッダー

Webサイトで、最も利用者の目を引くのはヘッダーだとされています。ヘッダーがわかりやすいことは、利用者がどれだけサイトにとどまるかに直接影響があると言われており、非常に重要です。では、どうすれば利用者にとってわかりやすいヘッダーをデザインできるのでしょうか。今回は、利用者を意識したヘッダーのデザインのコツをご紹介します。

切り離せないwebヘッダーとアイキャッチの関係

ヘッダーとアイキャッチ

ヘッダーに注目してもらうために、アイキャッチを活用しない手はありません。その際、ヘッダーはいわばサイトの顔なので、どのようなアイキャッチにするかを慎重に考える必要があります。
まず、どんな情報を発信するサイトなのかを考えることで、どのようなカラーのアイキャッチを採用すべきかが見えてきます。次に、アイキャッチからサイト利用者に何を感じて欲しいのかを考えます。これらを明確にすることで、ヘッダーのデザインの方向性が定まるはずです。色を選ぶにしても、写真やイラストを利用するにしても、サイトのイメージに合わせたアイキャッチにすることがわかりやすいヘッダーをデザインする上で重要です。

サイトのイメージはヘッダーの幅で決まる!?

ヘッダーの幅

先ほど述べたように、ヘッダーはサイトの顔と言っても過言ではありません。
例えば、人の顔が極端に横に延びていたり、極端に細かったりする写真を見た時にどう感じるでしょうか?きっと違和感を覚えることもあるかと思います。同じように、サイトのヘッダーも「違和感なく利用できる幅」というものが存在すると言われています。
最近はタブレットやスマートフォンをはじめ、デスクトップPCでもワイド型ディスプレイを採用しているものが主流です。これらを利用しているときに、旧型のほぼ真四角に等しいディスプレイに最適化されたヘッダーのサイトを訪れると、「古いサイトだな」と感じられてしまう可能性が高いです。当然のことながらそういう印象を持たれたら、利用者はサイトから離れてしまいます。
上記は極端な例でしたが、発信する情報と利用される端末を意識してヘッダーの幅を考えることは、非常に重要なのがおわかりいただけたでしょうか。

スクロールを意識してヘッダーをデザイン

スクロールを意識

最近では、サイトの下部を見ようとスクロールした時に、ヘッダーが画面上部に固定されてスクロールについてくる仕様のサイトがあります。一長一短はあるものの、初めてサイトに訪れた利用者に親切な設計と言えるでしょう。なぜなら、サイトに不慣れな利用者はどこにどのコンテンツがあるかを詳しくは知らないため、ページ上部に常にヘッダーがあることでスムーズに自分の必要としている情報にたどり着くことができます。
利用者の操作している姿を想像して、スクロールすることまで意識したヘッダーデザインのような気遣いが、利用者に「わかりやすいサイトだった」と感じさせる鍵となります。

サイトの歩き方をサポートするヘッダー

サイトの歩き方をサポート

サイト利用者のことを考えるのであれば、どこに何があるのかをわかりやすくしましょう。1つのWebサイトの中だけでも非常に多くの情報が載せられています。利用者が、いかに速く、必要としている情報にたどり着けるかが、サイトの印象に大きくかかわると言えるのではないでしょうか。
ヘッダーを利用して、サイトの歩き方をサポートしましょう。コンテンツごとに分けられたメニューをヘッダーから開けるようにしたり、サポート情報を直接掲載したりすることもできます。
利用者をサポートできるヘッダーにするためには、シンプルである必要もあります。せっかくサポートできる情報を掲載しても、ヘッダー自体が複雑になっていることで利用者が敬遠してしまいます。

ヘッダーまとめ

デザインしたサイトを「わかりやすい」と感じてもらうために一番重要なことは、「利用者の立場になって考える」ことです。デザインする側は、そのサイトに関して多くの情報を持っていますが、利用者はそうではありません。利用者のことを考えて、ヘッダーをシンプルでわかりやすいデザインにしましょう。
サイトの利用方法と必要な情報がどこに掲載されているかがわかるようなヘッダーにすることで、「わかりやすいサイト」というイメージを利用者に持ってもらいやすくなりますので、是非試してみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。