ホームページ作成のヘッダーデザインとは？作成手順・デザインのコツを解説

ホームページのヘッダーとは？

ヘッダーはホームページ上部に表示される部分であり、メニューやページタイトルなどを掲載するケースが一般的です。ホームページのすべてのページに共通する情報を表示できることから、ホームページの顔といわれています。

ユーザーにコンバージョンしてもらうようページに誘導する重要な役割を担っているため、ホームページ作成にはヘッダーの活用が必要不可欠です。

ユーザーがどのページを開いても常に上部に表示されるため、今どのページにいるか、どうすると行きたいページに飛べるかを示す道しるべになります。

ホームページのファーストビューはユーザーの離脱率に影響する

ヘッダーはホームページのファーストビューに表示されるため、ユーザーの離脱率に大きく影響します。ファーストビューとは、ユーザーがページを表示してはじめに目に入る部分のことです。

ファーストビューはブランドイメージの統一を担っており、ユーザーに企業やサイトのイメージを伝える重要な役割があります。ファーストビューで注目を引き、ホームページの内容まで読んでもらえるよう工夫することが大切です。

ホームページにおけるヘッダーの3つの役割

ホームページにおけるヘッダーの役割はさまざまですが、主な役割は以下の3つです。

ヘッダーの役割は、ウェブデザインの中でユーザー体験を向上させ、サイトの目的を達成するために重要な要素です。

1. 他ページへ誘導する

ヘッダーは通常、サイト内の異なるセクションやページへのリンクを提供します。訪問者はサイト全体を簡単かつ迅速に探索でき、必要な情報にアクセスできます。

メニュー項目やナビゲーションリンクがヘッダーに配置され、ユーザーが簡単にサイト内を移動できるようになるでしょう。

2. ブランディング効果が得られる

ヘッダーはウェブサイトのブランディングにおいて重要な役割を果たします。企業や団体のロゴ・カラースキーム・およびタイポグラフィなどの要素がヘッダーに配置され、サイト全体の統一感と専用感を提供します。

訪問者はヘッダーを通じて即座にサイトの特定のブランドを識別できるでしょう。

3. ホームページに統一感を持たせられる

ヘッダーはサイト全体に一貫性をもたらす重要な要素です。同じヘッダーデザインが各ページで繰り返されることで、ユーザーにとってサイト内のナビゲーションが一貫していると感じさせ、統一感が生まれます。

ユーザーエクスペリエンスを向上させ、サイトのブランディングを高めるのに役立ちます。

ホームページにおけるヘッダーの作成手順3ステップ

ホームページにおけるヘッダーの作成は、サイトのデザインや機能によって異なりますが、一般的な手順は以下のとおりです。

サイトの目的や要件にあった効果的で魅力的なヘッダーを作成できます。

1. 目的を決める

ホームページにおけるヘッダーの作成手順の最初のステップは、ヘッダーの目的とサイトの要件を明確に定義することです。ナビゲーションの要件・ブランディング要素・機能要件を明確に把握します。

ヘッダーのデザインと機能がサイトの目的と整合するようになります。

2. デザインを作成する

具体的なデザインの作成を行いましょう。レイアウトの設計が重要で、ナビゲーションメニューの配置・ブランディング要素の配置・機能要件の組み込みを確立します。

視覚的なデザイン要素も決定しましょう。カラースキーム・フォント・ボタンのスタイルなどをデザインの一部として考慮します。レスポンシブデザインも重要であり、異なるデバイスや画面サイズに対応するデザインを考慮しましょう。

3. 動作をテストする

HTML・CSSおよびJavaScriptを使用してヘッダーを実際にコーディングし、異なるブラウザやデバイスでテストします。「CSSプロパティが一部のブラウザで正しく表示されない」「JavaScript機能がブラウザで動作しない」などの問題が挙げられます。

発生した問題に対して修正を行い、ユーザビリティや機能の正確性確認しましょう。修正が必要な場合は、追加の改善を加え、最終的にサイトの目的に適したヘッダーを完成させます。

ホームページ作成におけるヘッダーデザインのコツ7選

ユーザーを離脱させないホームページを作成するためのヘッダーデザインのコツ7選を紹介します。

ユーザーの目線に沿ったヘッダーをデザインすることで、ユーザーに長く滞在してもらえる可能性が高まるでしょう。

1. ユーザーの視線に沿った配置を意識する

ユーザーが見やすいホームページを作成するには、ページ上でユーザーがどの順番で目線を動かすかを意識することが重要です。

目線の動きに配慮してコンテンツを配置することで、ユーザーに長く滞在してもらえる可能性が高まります。ヘッダーの配置やデザインも、ユーザーの目線移動に沿った設計にすることがポイントです。

ユーザーがホームページに目をとおす順番はある程度決まっており、主に以下の4パターンに分けられます。

Zパターン

視線移動でよく知られている目の動きが「Zパターン」です。人は並べられた項目を見る際、最初に左上から右へ横スライド、次に右端から左下へ斜めに動かし、最後に右へ横スライドすることが多いです。

視線の導線がアルファベットのZに似ていることから、ZパターンもしくはZの法則と呼ばれます。

ホームページにおいてもZパターンの目の動きが多いため、とくに初めて訪れるユーザーを意識する際におすすめの配置方法です。ヘッダーの内容も左から右へ読まれることを意識して、コンテンツを配置するといいでしょう。

Fパターン

「Fパターン」は、左から右へ横スライドを繰り返す目線の動きです。右下のコンテンツには目がとおされない傾向にあるため、アルファベットのFに似た動きになります。

ホームページでは、リピーターの目線の動きに多いです。ヘッダーの内容はZパターンと同様に、左から右へ読まれることを意識してコンテンツを配置するといいでしょう。

Nパターン

縦書きのホームページやヘッダーに多いのが「Nパターン」です。右上から下へ、次に右下から左上へ移動し、最後に下へ目線を動かす導線がアルファベットのNに似ています。

縦書きの場合は右上からスタートする場合が多いため、最初に目をとおしてほしいヘッダーやコンテンツを右上に配置するといいでしょう。

グーテンベルグダイアグラム

グーテンベルグダイアグラムは、ななめ読みの目線のことを指します。ホームページの場合、左上からスタートし、ページ右下まで一気に目がすべっていくイメージです。

文字情報を並べる場合や、均一のレイアウトで作成する場合に起こりやすい目線の動きとなり、とくに左上や右下部分は注目度が高いです。

2. 固定ヘッダーを検討する

ユーザーがスクロールしてもヘッダーが常に表示される「固定ヘッダー」を検討しましょう。近年は固定ヘッダーが増えており、特にBtoBやECサイトなどで主流です。

誘導したいページへのリンクを配置するため、固定ヘッダーはいつでもヘッダー内の対応するリンクが強調表示されている必要があります。

固定ヘッダーからキャンペーンページや新商品ページへ誘導することにより、ユーザーが情報を見つけやすくなるのが特徴です。

固定ヘッダーは必ずしも導入したほうがいいわけではないため、メリットやデメリットを把握したうえで検討しましょう。

固定ヘッダーのメリットデメリット

ユーザーがページ内をどれほどスクロールしても、すぐにコンバージョンへ訴求できる導線が作られるところがメリットです。資料請求や購入ページにすぐに飛べることで、ユーザーの離脱を防止できます。

他にも、ユーザーがどこを閲覧しているのかわからなくなった場合に、すぐにトップページへ戻ることも可能となることが便利なポイントです。

固定ヘッダーは常に表示されているため、邪魔になることがデメリットです。近年は持ち運びできる小型のPCやスマホ利用が増えているため、小さい画面で常にヘッダーが表示されているのはユーザーのストレスになることもあります。

ユーザーの邪魔にならないよう工夫することが重要です。

固定ヘッダーは背景色を透過する

固定ヘッダーを設置するうえで、ユーザーの邪魔にならないような工夫としてヘッダーの背景色を透過する方法があります。背景色が透過されることで圧迫感がなくなり、固定ヘッダーを目立たなくさせることが可能です。

ヘッダーは下にスクロールすると途中で表示されなくなり、上にスクロールすると再度固定ヘッダーが登場する工夫もされています。固定ヘッダーとはいえ、ユーザーが必要となる場面でのみ表示させることも重要な考え方です。

3. ヒーローヘッダーを検討する

固定ヘッダー以外にも、ヒーローヘッダーと呼ばれる種類があります。ヒーローヘッダーとは、ホームページにアクセスした際、動画や画像などが画面いっぱいに展開されるデザインのことです。

いきなり映画の予告編が始まったようなワクワクする印象を与えることも可能なため、インパクト性を重視したい場合におすすめの手法です。

ヒーローヘッダーを導入する際は、メリット・デメリットを踏まえたうえで検討しましょう。

ヒーローヘッダーのメリットデメリット

ヒーローヘッダーのメリットは、ファーストビューでインパクトをもたせてユーザーの興味を引きつけられることです。

デメリットは、下にページが続いていることがわかりづらいことです。スクロールバーやマウスアイコンなどを表示し、スクロールが可能であることをわかってもらうための工夫が必要となるでしょう。

他にも、使用する動画や画像によってはテキストが読みにくくなることもあるため、注意が必要です。

4. 違和感のないヘッダー幅を意識する

違和感のないヘッダー幅を意識することもホームページ作成におけるコツです。ページ全体のバランスを見たときに違和感を抱いてしまうと、ホームページ全体のクオリティを下げてしまう要因となります。

とくに、最新の端末を意識したデザインは最低限必須です。明らかに旧型ディスプレイに合わせたままのデザインでは、Web知識のほとんどない一般ユーザーにも「古い」という感覚を持たれてしまいます。

ユーザーは新しいデザイン性に敏感であり、古いと感じるとサイト離脱の一因となるため注意しましょう。

5. ユーザーの邪魔にならないデザインにする

ヘッダーは、ユーザーの邪魔にならないデザインにすることを意識しましょう。スクロール中に不要なアピールをしてくるヘッダーには不満の声が出てしまいます。

情報の取得中には邪魔にならず、ユーザーが必要とするときにすぐ利用できるデザインにすることが重要です。

6. サイト全体の道案内を意識する

ヘッダーの役割である「サイト全体の道案内」を意識することも重要なポイントです。ユーザーは、自分が知りたい情報だけがすぐに見つかるサイトを高く評価します。

ヘッダーからアクセスしたいページにすぐ飛べるようにしていれば、サイト滞在時間の伸びによるSEO効果も期待できるでしょう。 

必要としている情報にすぐにたどり着けるホームページにするために、ヘッダーデザインを工夫することが大切です。

7. アイキャッチを意識する

ヘッダーのデザインを考える際は、デザイン性を盛り込んだアイキャッチを意識するといいでしょう。見栄えをよくするイラストや美しい写真をアイコンに挿入すると、視覚に強く訴えることが可能です。

テキストだけでアプローチするよりも見やすくなり、ユーザーの離脱を防ぐ効果があります。カーソルを合わせるとロゴが変化するような、インタラクティブ性を持たせる工夫も効果的です。

PCサイトのホームページ作成で参考にしたいヘッダー事例4選

ホームページ作成で参考にしたいヘッダー事例を、実際のサイトをもとに紹介します。PC向けとスマホ向けで意識するポイントも異なるため、それぞれの特徴をみていきましょう。

スマホの普及にともないPCサイトのデザインもスマホに寄せ、シンプルなデザインが採用されるケースが多いです。

1. ブランドロゴが中央にあるデザイン

参照：資生堂

資生堂ホームページのヘッダーは、赤い企業ロゴを中央に配置し、ロゴの下にメニュー、右端に検索用の虫眼鏡を配置した構成です。極力シンプルに、ブランドの清楚なイメージを前面に出したデザインといえます。

ファーストビューは、上段の企業ロゴと下段のメニュー欄の2段表示のヘッダー構成です。スクロールすると企業ロゴが左端に移動し、1段表示に切り替わる仕組みの固定ヘッダーになります。情報取得時には邪魔にならないよう、ヘッダーの面積を小さくする工夫が施されています。

2. 難しい印象を与えない工夫のあるデザイン

参照：一般社団法人近畿建設協会

一般社団法人近畿建設協会ホームページのヘッダーは、左端に企業ロゴが配置されています。トップページや事業内容・お知らせ・採用情報などの項目がテキストのみで並んでいます。

対照的に、右端の「お問い合わせ」のみアイコン化されており、固定ヘッダーによって常に問い合わせに誘導する導線が確保されていることが特徴です。

業種特有の専門的な内容も説明しなければならないホームページです。あえて情報量を減らして専門知識のないユーザーにもわかりやすいよう工夫されています。

3. ユーザー層にあわせたデザイン

参照：静岡銀行 新卒採用サイト

静岡銀行の新卒採用サイトのヘッダーは、企業ロゴの他に「WORK」「PERSON」などの英単語をテキストのみで表示しています。

右端にはLINEやInstagram・Twitterなどのアイコンが並び、採用のENTRYアイコンが最も大きく配置されていることが特徴です。学生にも馴染みやすく、ユーザー層をとらえたデザインといえます。

画像下部のメインコンテンツを見るときにはヘッダーが自動的に隠れ、上方にスクロールすると再度表示される仕組みです。

4. 縦書きのデザイン

参照：満つ美

満つ美のホームページは、ヘッダーのメニュー内容が縦書きになっていることが特徴です。縦書きにすることで和風な印象を強調でき、自社ブランドをより印象づけることが可能となります。

縦書きのヘッダーは面積が大きくなり、固定表示すると邪魔になることがデメリットです。満つ美の場合は下方へスクロールするとヘッダーのメニューが横書きになり、見やすさに配慮されたデザインです。

スマホサイトのホームページ作成で参考にしたいヘッダー事例

近年はスマホ向けのデザインを作成している企業が増えています。表示面積の少ないスマホデザインは、ハンバーガーマークを駆使することが大切です。

ヘッダーデザインの例として、以下のスマホサイトを紹介します。

ハンバーガーマークとは、メニューを表示する目的で用いられる、横棒が縦に 3本並んだ漢数字の「三」アイコンのことです。見た目がハンバーガーに似ていることから名付けられました。

1. 読みやすさとブランド雰囲気を実現したデザイン

参照：サーティーワンアイスクリーム

サーティーワンアイスクリームのヘッダーは、フレーバー・ニュース・商品紹介・31についてを表示している固定ヘッダーです。

シンプルでありながら、ブランドカラーやイラストアイコンが添えられていることが特徴で、ポップな雰囲気が伝わるデザインです。

2. 商品を目立たせるデザイン

参照：任天堂

任天堂のヘッダーは、上段に企業ロゴ・検索・ストア・ログインなどの一般的なメニューを表示しています。下段には、ゲームに関する各項目が掲載されており、イラストも添えられていてわかりやすいです。

一面がCIカラーの赤に統一されており、企業ロゴは白抜きでシンプルかつ非常に目立ちます。固定ヘッダーではなく、最後までスクロールすると同じ項目が最下部にまとめて表示される仕様です。

ヘッダーはあえて2色のみ使用し、最も大きく目に入る部分が現在主流となるメイン商品となるように工夫されています。

3. シンプルなデザイン

参照：森永製菓

森永製菓のヘッダーは、企業ロゴを左端に、右端に検索アイコンとハンバーガーマークが配置してあるだけのとてもシンプルなデザインです。

メニューのなかには商品情報やCMギャラリー・企業情報などがありますが、すべてトップ画像の下にも再配置されています。メニューをあえて隠すことで、企業ロゴとトップ画像に目がいくデザインとなっていることが特徴です。

4. ヒーローヘッダーのデザイン

参照：N.P.Foods

N.P.Foodsのホームページは、インパクトのある画像を全面的に使用したヒーローヘッダーを採用しています。質問アイコンのみを配置し、画像に目が行くデザインです。

ホームページにおけるヘッダーデザインの3つの注意点

ホームページにおける注意点をおさえて、ユーザー満足度の上がるサイトを作成しましょう。

ホームページの成功に欠かせない、ユーザーのコンバージョンにつながるデザインを構築するための注意点を紹介します。

1. デザインごとの役割を考える

ヘッダーのデザインを選定するには、各メニューにどの役割を持たせたいかを決めることが重要です。

コンバージョンにつながる「資料請求」や「購入画面」へのアイコンを強調して、ほかのアイコンはシンプルにするなど、役割に優先順位を付けてデザインしましょう。

2. ユーザーファーストのデザインとする

ヘッダー設計のポイントは、ユーザーが目的を果たせるようサポートすることと、企業側がユーザーを誘導したいページへ導くことです。ユーザーが興味を持ったらすぐ行動に移せるように、ユーザーファーストの設計にしましょう。

ユーザーファーストのヘッダーデザインは、迅速な情報取得とユーザーエクスペリエンス向上を実現します。

3. ユーザーが閲覧する端末を想定してデザインする 

現代はスマートフォンで検索するユーザーが非常に多いため、ヘッダーはPCとスマートフォンで別に考える必要があります。スマホやPCなどの端末ごとにデザインを設計するのか、レスポンシブデザインにするのかを検討しましょう。

まとめ

ホームページにおいて、ヘッダーはユーザーのコンバージョンを上げる重要な存在です。本記事では、ヘッダーデザインのコツや参考事例・作成時の注意点を紹介しました。

ユーザー満足度の高いサイトを作るには、制作会社選びも重要です。ホームページの作成やデザインでお困りの場合は「比較ビズ」に相談してみてはいかがでしょうか。

「比較ビズ」では、必要事項を入力する2分程度で、ホームページに詳しい専門家をスピーディーに探せます。どの専門家に相談すべきなのか迷うことがあれば、ぜひ利用してみてください。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。