制作のポイントと参考例をご紹介

WEBデザインにおいてヘッダーは超重要!制作のポイントと参考例をご紹介

ネットサーフィンしている中、ふと気になるサイトを見つけて読みすすめてしまうということはありませんか?

それは、ヘッダーが魅力的に設計されているからなのです。

そんな、人の目を引き付ける魅力的なサイトを「自分で作ってみたい!」と作り始めてみても

「ヘッダーってどうやって作ればいいの?」
「作るときのポイントは何?」

などと思い悩んで、手が止まってしまう方も多いのではないでしょうか?

この記事では、WEBデザインにおけるヘッダーの重要性、制作するときに役立つポイントを解説し、業界やテイスト別でオシャレな参考例をご紹介していきます。

WEBサイトのヘッダーはなぜ大切なのか?

サイトの第一印象はトップページで決まります。

ユーザーはサイトを閲覧するとき、どんな情報があるのか、読みすすめるべきかなどを3秒以内に決めると言われています。もし3秒で「何か違う」と判断すれば、すぐに離脱してしまうのです。

そのためにロゴや写真、コピー、サービス内容などを見やすく、ユーザーに伝わるようにデザインする必要があります。

また、ヘッダー内にお申込みボタンや、お問い合わせボタンを表示させているサイトをよく見かけませんか?

これらのボタンを押してもらうことも、サイトを作る重要な目的になります。
そのため、ボタンが分かりやすく、ユーザーにとって使いやすい設計にすることも大切です。

このようにヘッダーの良し悪しが、サイトの滞在時間に影響したり、お申込みなどの行動を取ってもらえるかどうかが決まるので、使いやすさが考慮された設計と、ユーザーの目を引き付けるデザインが必要となってきます。

魅力的なヘッダーを作るポイントとは?

ではどうやって、人を引きつける魅力的なヘッダーを制作するのでしょうか?
ポイントは4つあります。それぞれ見ていきましょう。

ターゲットを決める

WEBサイトは、ホームページやSNSを検索したユーザーの興味を引き、申し込みや購買などの行動に移してもらうことを意識してデザインする必要があります。

例えば、化粧品のサイトを作るとしましょう。

商品にもよりますが、20代女性がターゲットであれば、フレッシュさや透明感、若々しさのあるサイトをよくイメージされると思います。
そうすると、白や青をメインにして、黄色のアクサンとカラーを使ったり、明るいトーンで透明感を出したり……と方向性が決まってきますよね。

一方で、40代女性がターゲットであれば、どうでしょう?
この年代だと、アンチエイジングなどちょっと高級な化粧品をイメージしますよね。
そうなると、黒や紫、ゴールドなどを使った落ち着きとゴージャス感のあるデザインといったように、方向性が変わってきます。

このようにターゲットを決めることで、デザインの方向性が見えてくるのです。

WEBサイトとのバランスを意識する

WEBページ全体とヘッダーのテイストが合っているかどうかを意識しましょう。

例えば、弁護士事務所のサイトで赤やピンクを使ったインパクトのあるヘッダーが設置されていたらどうでしょう?ちょっと依頼しにくくなりますよね。
企業には、伝えたいイメージや決められたコーポ―レートカラーがあるので、そこから外れないようなテイストでヘッダーも制作する必要があります。

また、企業の採用サイトを見てみると、スタイリッシュな青を基調としたサイトや赤を基調とした力強いサイトが多く存在します。
青は誠実さ、赤は情熱が伝わるカラーです。

このように、「何を伝えたいか」でカラーやデザインのテイストが決まってきます。
どんな企業か?何を伝えたいか?を元に、サイト全体のイメージを考えてヘッダーをデザインしましょう。

フォントを工夫して効果的に文字を入れる

ヘッダーは、ユーザーがサイトを訪れたときに最初に目にする場所です。
そして、3秒以内にこのサイトに留まるかどうかを判断するので、一目でユーザーに伝えたいことが伝わらなければなりません。

そのため、ヘッダーのフォントは非常に重要になってきます。

・フォントが与える印象を踏まえて、サイトの雰囲気とマッチしたものを選ぶ
・特に読ませたい言葉のジャンプ率を高くしたり、色を変えたりして目立たせる
・背景に埋もれないよう、ドロップシャドウや光彩、境界線をつける

このような工夫をして、瞬時にユーザーに情報を届けるようなデザインをしましょう。

また、ユーザーが読む順番を考慮して、文字を配置することも大切です。

最初に視線が向く場所に、メインコピーや会社のロゴ。
ヘッダーを流し見した先に、お問い合わせボタンや申し込みボタンを配置する。

このようなことを意識するだけでも、ユーザーにとって見やすく、使いやすいヘッダーを作ることができます。

では、ユーザーが読む順番、つまり「視線の動き」について、次でお伝えしていきますね。

コチラの記事では、Webデザインで使う定番フォントをまとめています。ぜひ参考にしてみてくださいね▼

WEBデザインで誰もが使う定番フォント18選!基礎知識も解説します

ユーザーの視線の動きを考える

先ほどお伝えしたように、ヘッダーのデザイン・設計において、ユーザーの視線の動きを考えることは非常に重要です。

その理由は2つあります。

1つ目は、スムーズに情報を見つけさせるため。
2つ目は、ユーザーの視線の動きをサポートするためです。

人の視線で最も自然な動きが「上から下」への移動で、WEBサイトにおいては主に2パターンの動きを示します。

◇Zパターン
ユーザーの視線の動きが、アルファベットの「Z」の形をなぞるパターンです。

テキストが少ないヘッダー、画像メインのヘッダーであった場合、ユーザーの視線はまず左上から右上に移動します。その後左下へ動き、そのまま横へ移動するといったパターンです。

サイトの左上に会社のロゴが置かれているのは、ユーザーが最初に見ることを想定しているからなのです。

Zを意識して、一番に見せたい情報を左上、その次は右上のエリアに配置することを意識してみてください。

そうすることでユーザーに見せたい要素を導線に沿って配置し、適切な情報を適切なタイミングで提示することができます。

◇Fパターン

ユーザーの視線の動きが、アルファベットの「F」のように動くパターンです。
特徴は、左上から始まり右に移動した後、少し下に移動してまた左から右へ進み、また下へ・・・といった流れで移動していきます。

特にテキストが多いコンテンツでは、この視線の動きをする傾向があります。
グローバルメニューをヘッダー下部に配置する場合、この動きを意識してみるといいですね。

ただし、最後の方は読まれにくいということを念頭に置いておきましょう。

ヘッダーデザインの参考例

WEBデザインは、ユーザーにどんな情報や印象を与えたいのかによって、写真の大きさや構成、配色やフォントの使い方などが大きく変わります。

業界別、テイスト別で参考例をピックアップし、それぞれの特徴をまとめてみました。

業種別ヘッダーの参考例

まずは、各業界で押さえておきたいポイントをご紹介します。

飲食

飲食業では、シンボルとなる商品や店内の風景、オーナーシェフなどの大きく表示する写真を採用しているサイトが多いのが特徴です。

ポイントはこのサイトのように湯気を演出する、色彩で鮮やかに見せる、ツヤを出すなど、少し加工を加えること。

そうすることで、より料理が美味しそうに見え、「行ってみたい。食べてみたい」という気持ちをヘッダーで引き出すことができます。

参照:MENYA BIBIRI

宿泊施設

宿泊施設のサイトで押さえるべきは、「いかに旅館の魅力や情緒を伝えるか」といったところでしょう。

このサイトは、旅館の温泉から海が一望できる画像をファーストビューいっぱいに使用しています。
また空室検索・アクセス・お料理など、すぐ押せる場所にメニューを配置しているところもポイントです。

参照:【公式】料理宿やまざき|越前海岸・古民家の宿

金融

この業界で大切にしたいのが「信頼感」です。

そのためこちらのサイトは、アドバイザーやお客様の笑顔をヘッダーに用いて安心感を与えるデザインになっていますね。

少し明度を落とすことで、細めの明朝体でも文字を読みやすくし、またコーポ―レートカラーのゴールドともマッチさせたデザインになっています。

参照:IFA法人バリューアドバイザーズ

ECサイト

こちらのサイトは、おすすめの商品が日常にどのように溶け込むか、イメージを沸かせてくれる魅力的なヘッダーですよね。

このようにECサイトでは、ヘッダーでおすすめの商品を魅力的に見せ、いかに購買意欲をそそるかが重要です。
また、画像をクリックすればすぐに商品紹介ページに飛べるといった、使いやすさを考慮した設計も必要となってきます。

参照:波佐見焼オンラインショップ|アイユー(aiyu)

テイスト別ヘッダーの参考例

次に、テイスト別でどのような点に注意してデザインすると良いか、お伝えしていきます。

ポップ

ポップさを演出したい場合は、色の彩度を高めにし、色数を増やしてにぎやかにしてみましょう。

デザインにもよりますが、フォントはゴシック体がマッチしやすいです。

多くの色を使うにあたって押さえるべきは、彩度を統一するということ。
赤は鮮やかなのに、青はくすんだ色といったように、色によって彩度がことなると、まとまりがなくダサい印象となってしまうので、注意が必要です。

参照:イラストコミュニケーションサービスpixiv(ピクシブ)

シンプル

極端にデザインの要素を削ぎ落したヘッダーですが、余白バランスや画像の使い方で、洗練された印象を受けますよね。

ポイントは、余白をしっかり確保し、テキストや画像を計算して配置すること。

例えば、テキストと画像の高さを揃えたり、小さな文字でも読みやすくするために行間を広めに空けたり、といったところです。

シンプルゆえに、細部までこだわってデザインすることが大切です。

参照:【公式】SENNオフィシャルサイト-Less is beauty

クール

こちらのサイトは、コントラストが強く、少し彩度を落とした画像でクールさを演出しています。
斜めのデザインを使ったスタイリッシュなデザインも魅力的ですね。

クールなサイトを目指す場合は、使用する色数を減らし、トーンを揃えることが大切です。
その上で、インパクトを与えられるようなデザインを意識しましょう。

参照:【公式】完全遮光日傘UVO

ナチュラル

自然の温もりや温かみを演出したり、麻などの素材感を生かしたデザインが特徴のナチュラル。

このサイトは、柔らかな印象を与える画像に、テクスチャを加えたフォントを使って、優しさや温もりを演出していますね。

ナチュラルさを出す秘訣は、柔らかさを意識すること。

コントラストはつけず、柔らかで落ち着いたトーンの加工を写真に施したり、パステルカラーなどの優しい色合いで統一すると柔らかい印象を与えることができます。

また、素材には花や草といった、植物系を用いることもおすすめです。

参照:coneri(こねり)

キュート

ピンクとブルーのパステルカラー使いが可愛らしく、商品の見せ方も特徴的で目を引くサイトですよね。

キュートで女性受けするサイトを作る場合は、装飾を多めにし、線は細く繊細なものを使うのがポイントです。

またイラストやフォントに手書き風のものを使うと、ぐっと可愛さが増してオシャレになります。

参照:パルフェタムールピュリエット

他に魅力的な参考を探すなら

ここまで業種別、テイスト別のヘッダー参考例を紹介しました。

今回ご紹介したデザインはほんの一部で、他にも魅力的なデザインの参考例はたくさんあります。
あなたの制作の引き出しを増やすためにも、こちらのギャラリーサイトを参考にしてみてください。
ここでは、日本で人気のギャラリーサイトを2つ紹介します。

I/O3000

国内外を問わず他のサイトでは見ることのできない、珍しいサイトも掲載されているギャラリーサイトです。
カテゴリ、タグ、色などからサイトを探すことができ、シャッフルボタンを押せば全サイトの中からランダムでWEBページを表示できます。

高クオリティのサイトも多く、様々なインスピレーションで探すことができます。

I/O3000

SANKOU!

ビジュアルに優れた国内の高品質なWEBサイト、ECサイトなどのコンテンツが集まったギャラリーサイトです。

業種別・目的別など色々な角度から検索もでき、「シズル感」「素敵なバナー」といったデザイナー目線でのカテゴリもあるので、検索がしやすくなっています。

SANKOU!

もっと参考にするギャラリーサイトを知りたい方は、コチラの記事をチェックしてみてください▼

参考にするならココ!WEBデザインのおすすめギャラリーサイト一覧

まとめ

いかがだったでしょうか。
今回は、ヘッダー制作のポイントとデザイン参考例を紹介しました。

ヘッダーは、ユーザーがそのサイトを読むか読まないかを判断する場所で、そのデザインや設計は緻密に練る必要があります。

・サイトのイメージや伝えたいことは何か?
・ターゲットは誰か?

これらを念頭において、ユーザーへ瞬時に伝わるように作りましょう。

ぜひ、こちらで紹介したポイントを押さえて、サイトを制作してみてくださいね。
最後まで、お読みいただきありがとうございました。

関連記事一覧