【2023年1月27日更新】読みやすくなるよう、文章を調整しました。
こんにちは、編集長のカワウソです！
「自社のホームページに合うヘッダーデザインが分からない……」とお悩みではありませんか？
そこで今回は、ヘッダーの基礎知識はもちろん、参考にしたい企業ホームぺージを紹介します。
カワウソ
この記事は次のような人におすすめ！
- はじめてホームページを作る人
- ヘッダーデザインの種類を知りたい人
- 自社に合うヘッダーデザインを探している人
ヘッダーデザインと一口に言っても、種類は多種多様です。
この記事では、ヘッダーデザインを種類ごとに紹介しているので、参考にしやすいですよ。
「すぐに参考になるヘッダーデザインを閲覧したい」という方は以下をクリックしてください。
パソコンサイトのヘッダーデザイン例 ／ スマホサイトのヘッダーデザイン例
それではどうぞ！
目次
ヘッダーとは
ヘッダーとは、ホームぺージの頭（上）の部分を指します。
ヘッダーには、次のような要素を設置するのが一般的です。
- 企業ロゴ
- 検索窓
- ログイン（マイページ）
- 電話番号やお問い合わせフォームのボタン
- ナビゲーション（メニュー）
※ナビゲーション（メニュー）については、以下の記事で解説しています。
グローバルナビゲーションとは？作り方のポイントやデザイン例を解説
ヘッダーが重要視される3つの理由
多くの企業ホームぺージには、ヘッダーが実装されています。
ヘッダーが重要視される理由は、以下の3つです。
ユーザーはファーストビューで情報の有無を判断する
多くのユーザーは、アクセスしたホームぺージに目的の情報があるか、「ファーストビュー」で判断します。
ユーザーがホームぺージにアクセスしたときに、最初に表示される領域。「ヘッダー」「メインビジュアル（大きなイメージ画像）」などが、ファーストビューに表示されることが多いです。
ユーザーが情報の有無を判断する時間は、わずか3秒といわれています。
「目的の情報がない」とユーザーに判断されたら、ホームぺージから離脱されてしまうかもしれません。
ヘッダーを含むファーストビューでは、ユーザーが求める情報を掲載しましょう。
さまざまなページに共通して表示される
一般的に、ヘッダーはさまざまなページに共通して表示されるものです。
共通のヘッダーには、ホームページ全体に統一感を出したり、運営者を提示したりする役割があります。
比較や検討を行うユーザーによっては、今自分が「どのホームページを閲覧しているのか」分からなくなってしまうことも。
そうなると、自社が候補から落とされてしまうかもしれません。
しかしヘッダーがあれば、ユーザーがどのページを読んでいたとしても、閲覧しているホームページが分からなくなることはないでしょう。
誘導したいページをアピールできる
多くのユーザーは、目的の情報をヘッダーから探します。
ヘッダーを見れば、おおよそどんなページがあるのか判断できるためです。
「自社の強み」など、誘導したいページがある場合は、ヘッダーに設置しましょう。
ヘッダーに誘導したいページを設置すれば、ユーザーの目に触れる機会が増えます。
パソコンサイトのヘッダーデザイン例
ここでは、パソコンサイトのヘッダーデザイン例を紹介します。
企業ホームぺージのヘッダーデザインを確認したところ、おおよそ以下のグループに分けることができました。
それぞれ解説します。
ミニマムなヘッダーデザイン
要素がミニマム（最小限）なヘッダーデザインは、「ブランドサイト」におすすめです。
ブランドサイトの目的は、「ブランドのことを知ってもらう」や「ブランドの価値や信頼性を伝える」こと。
ファーストビューで「いかにユーザーにインパクトを与えられるか」が重要です。
インパクトのあるホームページは、ユーザーの記憶に残りやすく、ブランドの認知度向上に貢献します。
ヘッダーデザインがミニマムであれば、メインビジュアルやコンテンツの邪魔になりません。
以下、参考サイトです。
▲出典：hydro tank
『hydro tank（ハイドロタンク）』のヘッダーでは、「ハンバーガーメニュー」のみ表示されています。
ナビゲーション（メニュー）の表示形式の一つ。 横線3本のアイコンデザイン「≡」がハンバーガーに似ていることから名付けられました。近年は横線2本のメニューもあります。
シンプルながらハンバーガーメニューが固定表示されているため、いつでも他のページにアクセス可能です。
ミニマムなヘッダーデザインでありながら、最低限のユーザビリティ（操作性）が担保されています。
『UNITE DIVISION OF ME』のヘッダーには、いくつかのメニューが設置されているものの、背景色が透明であるため、ページをスクロールしても邪魔になりません。
また、ページをスクロールすると、「Collection」「About」「Explore」が「Menu」に集約されるのもポイント。
メニューの表示領域が狭くなるため、コンテンツがより見やすくなります。
背景色があるヘッダーデザイン
背景色があるヘッダーデザインは、「コーポレートサイト」におすすめです。
コーポレートサイトの目的は、「会社のことを知ってもらう」こと。ステークホルダーと呼ばれる、自社と関係のあるさまざまな人が閲覧します。
たとえば以下のようなユーザーです。
- 顧客
- 従業員
- 取引先
- 投資家など
そのため、どのユーザーが訪問しても、目的のページをすぐ探せるようにしましょう。
背景色があると、ヘッダーの存在を明確に提示できます。初訪問するユーザーも多い、コーポレートサイトにぴったりです。
それでは、参考サイトを紹介します。
▲出典：株式会社舞台ファーム
『株式会社舞台ファーム』のヘッダーには、スタンダードな白背景が採用されています。
背景の緑色とのコントラストで、ヘッダーの存在が分かりやすいです。
▲出典：株式会社SmartHR
『株式会社SmartHR』のヘッダーは、コーポレートカラーである青色が背景色になっています。
コーポレートカラーを使えば、ユーザーに自社の印象を植え付けられますよ。
ロゴが中央にあるヘッダーデザイン
ユーザーに「社名」や「ブランド名」を覚えてもらいたい場合は、ロゴが中央にあるヘッダーデザインがおすすめです。
ロゴをアピールできれば、ユーザーに大きなインパクトを与えられます。
以下、参考サイトです。
▲出典：TOSACO
『TOSACO』は、『合同会社高知カンパーニュブルワリー』が手掛ける高知ビールのブランドです。
ヘッダーの中央部にロゴが配置されており、ユーザーの目に入りやすいデザインになっています。
▲出典：土肥農園
『土肥農園』は、ロゴがヘッダーの上部中央に配置されています。
キャッチフレーズも記載されており、「農園名」とともに「コンセプト」も分かりやすいデザインです。
コンバージョンを意識したヘッダーデザイン
「サービスサイト」や「リクルートサイト（採用サイト）」などは、コンバージョンを意識したヘッダーデザインがおすすめです。
コンバージョンとは、ホームぺージの目標としている「特定のアクションをユーザーが起こしてくれた状態」を指します。以下参考にしてください。
| ホームぺージの種類 | 目的 | コンバージョン例 |
| サービスサイト | ・サービスのことを知ってもらう ・サービスを申し込んでもらう |
・問い合わせ ・資料請求 ・申し込み |
| リクルートサイト | ・人材を獲得する | ・応募 |
コンバージョン（CV）とは？意味・種類・選び方など解説
CTA（行動喚起）のボタンがヘッダーにあれば、ユーザーは「問い合わせ」「資料請求」「応募」などのアクションを起こしやすくなります。
以下、参考サイトです。
▲出典：ジンジャー
『ジンジャー』のヘッダーは、「資料請求」や「無料トライアル」のボタンに色が付いており、ユーザーの注目を集めるような作りになっていますよ。
ヘッダーが固定表示されていることにより、ホームぺージを回遊しているユーザーは、いつでも「資料請求」や「無料トライアル」を申し込めます。
『株式会社サーキュレーション』のリクルートサイトのヘッダーには、「新卒採用」「中途採用」「エンジニア採用」の3つの応募ボタンが設置されていますね。
ターゲットを細かく分類できる場合は、それぞれのCTAを用意すると、各ユーザーがアクションしやすくなるため、コンバージョンを獲得しやすくなります。
メガメニューを搭載したヘッダーデザイン
メガメニューとはナビゲーションの一種で、広い画面領域を持つドロップダウンメニュー（マウスを載せたり、クリックしたりすると、下に落としたように出てくる）のこと。
別名、「メガドロップダウン」「メガナビゲーションメニュー」とも呼ばれます。
メガメニューを搭載したヘッダーデザインは、下層ページが多いホームページにおすすめです。
ユーザーは、目的のページにいち早くたどり着きたいと考えています。
目的のページがすぐに見つからないヘッダーは、ユーザーを離脱させてしまうでしょう。
メガメニューなら、下層ページにもダイレクトにアクセスできます。
階層構造が複雑なホームページでも、ユーザーの離脱率を抑えられますよ。
以下、参考サイトです。
『株式会社マーケットエンタープライズ』のヘッダーでは、事業内容や会社概要などがメガメニューで表示されます。
メニューと関連性の高い写真も掲載されており、一目でカテゴリが分かるデザインです。
▲出典：株式会社ホットリンク
『株式会社ホットリンク』のヘッダーには、「ロゴ」と「テキスト」を併用したメガメニューが搭載されています。
視認性が高く、ユーザーが見たいページにスムーズに誘導できますよ。
なお、メガメニューの事例については、以下の記事でも紹介しているので、併せてチェックしてみてください。
メガメニュー搭載の企業ホームページ事例12選！メリットやコツも解説
アイコンを用いたヘッダーデザイン
アイコンを用いたヘッダーデザインは、専門性が高いジャンルのホームページにおすすめです。
ヘッダーにアイコンがあれば、ユーザーに柔らかい印象を与えられます。
難しい専門用語が並ぶホームぺージでも、ユーザーに親近感を持ってもらえるでしょう。
また、アイコンはテキストよりも目に入りやすいため、メニューの存在や位置が明確になります。
以下、参考サイトです。
▲出典：司法書士 青木事務所
『司法書士 青木事務所』のヘッダーには、シンプルなアイコンが設置されています。
一般的に法律と聞くと、難しそうなイメージを抱きがちなものの、アイコンのおかげで柔らかい雰囲気を感じますよね。
また「ラインアート（線画）」のアイコンが用いられており、ホームページ全体でトンマナが整っています。
トンマナとはトーン（tone）＆マナー（manner）の略称。 広告やWeb制作のデザインにおいてコンセプトや雰囲気に一貫性をもたせること。
▲出典：ネブライザーねっと
ネブライザー（喘息用吸入器）を扱う『ネブライザーねっと』は、白や青を基調としたさわやかな印象のヘッダーデザインが特徴的。
アイコンが効果的に活用されており、ユーザーがイメージしやすいようなデザインになっています。
イラストを用いたヘッダーデザイン
イラストを用いたヘッダーデザインは、子供関連のホームぺージにおすすめです。
キッズスクール、プレイランド、イベントなどは、ホームぺージを見た親子に「楽しそう」「行ってみたい」と感じさせることが重要。
かわいいイラストは見た目から楽しさを感じやすく、子供関連のホームページでとくに効果を発揮します。
以下、参考サイトです。
▲出典：小浜こども園
『小浜こども園』のヘッダーは、柔らかい色を使ったイラストが印象的。
ヘッダーはもちろん、ホームぺージ全体から楽しそうな雰囲気が伝わってきます。
▲出典：ジュニアエリート
『ジュニアエリート』のヘッダーは、オレンジやグリーンなど、はっきりとした色合いを基調としていますね。
ホームぺージ全体でトンマナが整っています。
縦書きのヘッダーデザイン
「横書き」だけでなく、「縦書き」のヘッダーデザインもあります。
縦書きのヘッダーデザインは和風のホームページにおすすめ。
日本料理、着物、旅館などのホームぺージによく合います。
一般的にホームページには、横書きのヘッダーが多いです。
そのため、あえて縦書きのヘッダーを採用すれば、より強いインパクトをユーザーに与えられるでしょう。
以下、参考サイトです。
▲出典：鈴乃屋
七五三などの晴れ着を扱う『鈴乃屋』は、上部にカラフルな線を付けた縦書きのヘッダーが印象的。
色が付いていることにより、見やすくなるだけでなく、明るい雰囲気になっています。
▲出典：尚玄山荘
『尚玄山荘』のホームページでは、旅館の外観や料理などの写真を背景に、白文字のシンプルな縦書きヘッダーが設置されています。
固定表示されたヘッダーは、ページをスクロールすると横書きのデザインに変化。
▲出典：尚玄山荘
縦書きのデザインは縦幅が広いため、ヘッダーを固定してしまうと、コンテンツの邪魔になってしまいますよね。
しかし、これなら邪魔になりません。
また、「English」をクリックすれば英語表記に変更できるため、外国人観光客も利用しやすいでしょう。
英語表記にすると、ヘッダーが横書きになるのも秀逸なポイントです。
スマホサイトのヘッダーデザイン例
スマホユーザーをメインターゲットに設定する場合は、スマホサイトのヘッダーデザインから考えるとよいでしょう。
スマホサイトのヘッダーデザインでよく使われるのは、以下の3つです。
スタンダードなヘッダーデザイン
「どんなヘッダーにしよう……」と悩んでいる方には、「ロゴ」と「メニュー」を設置した、スタンダードなデザインがおすすめです。
多くのホームページが、「ロゴ」と「メニュー」を設置したヘッダーデザインを採用しています。
スタンダードなヘッダーデザインとはいえ、「ユーザーが目的のページにたどり着く」という最低限の役割を果たせますよ。
ハンバーガーメニューの「線の本数」や「MENUの併記」など、いくつかのパターンを比較、検討したうえでデザインを決定しましょう。
以下、参考サイトです。
▲出典：中央特機株式会社
『中央特機株式会社』のヘッダーには、スタンダードなハンバーガーメニューが設置されています。
▲出典：アポクリート株式会社
『アポクリート株式会社』のヘッダーでは、ハンバーガーメニューの下に「MENU」が併記されています。
『アポクリート株式会社』は、健康食品の販売や介護サービスなど、シニア世代と関わる事業も展開。
スマートフォンに慣れていない世代のユーザーも訪れることを考えると、「MENU」と併記しているほうが分かりやすくて安心です。
ヘッダーのデザインは、ターゲットユーザーを意識して作るようにしましょう。
なお、ハンバーガーメニューについては、以下の記事でも詳しく解説しています。
ハンバーガーメニューの事例8選！最適化するコツも解説
回遊性アップを意識したヘッダーデザイン
ユーザーの回遊性を向上したい場合は、特定の要素をハンバーガーメニューから出すのも一つの方法です。
ハンバーガーメニューはタップしないと、なかのメニューが確認できません。
ユーザーに見てほしい要素があれば、ハンバーガーメニューから出しましょう。そうすると、ユーザーが見つけやすくなります。
重要度の高い要素が分からないという方は、まずは「スタンダードなヘッダーデザイン」を採用してください。ホームぺージ運用後に「アクセス解析」を用いれば、特定できます。
以下、参考サイトです。
▲出典：ユニクロ
『ユニクロ』のヘッダーには、ハンバーガーメニューとともに、さまざまな要素が表示されています。
たとえば、アイテムカテゴリは「WOMEN」「KIDS」など、ターゲットユーザーごとに設置されていますよね。
また、虫眼鏡アイコンやカートアイコンなど、あると便利な機能が設置されているのもポイントです。
▲出典：幕張ベイパーク耳鼻咽喉科
『幕張ベイパーク耳鼻咽喉科』のヘッダーでは、ハンバーガーメニューに加え、「診療時間」と「アクセス」が設置されています。
それぞれクリックすると、メガメニューが展開される仕組みです。
診療時間やアクセスは、医療機関にかかるとき、多くの方が一番初めに知りたいと思う情報ですよね。
ユーザーファーストのヘッダーデザインと言えるでしょう。
コンバージョンを意識したヘッダーデザイン
サービスサイトやリクルートサイト（採用サイト）は、パソコンと同様に「コンバージョンを意識したヘッダーデザイン」がおすすめ。
CTA（行動喚起）ボタンがメニューとは別に設置されていれば、「問い合わせ」「資料請求」「応募」などのアクションをユーザーが起こしやすくなります。
以下、参考サイトです。
▲出典：静岡歯科
『静岡歯科』のヘッダーは、シンプルなデザインながらも、「予約」というアクションをユーザーが起こしやすい作りになっています。
▲出典：ライソン株式会社
『ライソン株式会社』のリクルートサイトのヘッダーは、スタイリッシュなデザイン。
ヘッダーに「ENTRY（応募）」ボタンが設置されているため、求職者はスムーズに応募へと進められるでしょう。
ヘッダーデザインを作るときのポイント2つ
ヘッダーデザインは、事前の設計が重要です。
ユーザーが使いやすいヘッダーデザインにするためにも、作るときに次の2点に注意しましょう。
ユーザーの視線を意識する
人間が文章を読むときの視線の動きには、3つのパターンがあります。
視線に合わせたレイアウトにすれば、ユーザーがホームぺージの内容を把握しやすくなるため、離脱率が減少することでしょう。
視線の動きのパターンと特徴は、次のとおりです。
Z型
視線が左上から右下へ移動するのがZ型。
パソコンサイトはもちろん、スマホサイトにも当てはまるため、基本的にはZ型を意識するのがおすすめです。
N型
視線が右上から左下へ移動するのがN型。
縦書きヘッダーでは、N型を意識しましょう。
F型
視線が「左から右への動き」と、「上から下への動き」を順に繰り返すのがF型。
E型ではなくF型である理由は、コンテンツの右下（後方部分）は読まれない傾向にあるためです。
F型はブログなど、情報量が多いホームぺージにおすすめです。
重要なコンテンツはなるべく上に設置し、結論ファーストを心がけましょう。
詳しくは、以下の記事で解説しています。
見やすいホームページは何が違うのか!?押さえるポイントを紹介
ユーザーにとって分かりやすいデザインにする
ブランドサイトであれば、ミニマムなヘッダーデザインが候補に入ります。
しかし、基本的にはユーザーにとって分かりやすいデザインが理想。
ヘッダーの存在をユーザーに分かりやすく提示するには、「固定ヘッダー」がおすすめです。
ただ、固定ヘッダーにはメリットはもちろん、デメリットもあるため、事前に確認しておきましょう。
固定ヘッダーのメリットとデメリット
固定ヘッダーのメリットとデメリットは次のとおりです。
- ヘッダーの存在を示しやすい
- ユーザーのホームぺージ回遊率アップが期待できる
固定ヘッダーにすると、ページをスクロールしても常に表示されるため、存在を示しやすいです。
ユーザーがヘッダーを認識すれば、仮にホームぺージ閲覧中に迷ったとしても、すぐにトップぺージに戻ったり、他のページにアクセスしたりできます。
ホームぺージの離脱率を下げたり、回遊率を上げたりするのに貢献してくれるでしょう。
- ノートパソコンなど、表示領域が狭いデバイスだと邪魔になる
ノートパソコンなど、縦幅が小さいデバイスだと、固定ヘッダーがかえって邪魔になることもあります。
コンテンツの可視領域が少なくなると、ページが見づらくなるため、ストレスを抱えたユーザーは、ホームぺージから離脱してしまうおそれも。
たとえば、営業職の方はノートパソコンを利用するケースが多いです。
そのため、自社の商材が企業の営業職をターゲットとする場合は注意しましょう。
固定ヘッダーのデメリットを緩和する方法3つ
「表示領域が狭いデバイスでは邪魔になる」という固定ヘッダーのデメリットは、以下3つの方法で緩和できます。
下スクロールで非表示、上スクロールで表示する
一つめは、下スクロールで非表示、上スクロールで表示するように設定することです。
一般的にユーザーは、上から下にスクロールしながらページを読み、内容を理解していきます。
一方、下から上にスクロールするときは、ページを読み終えたか、他のページを探しているケースが考えられるでしょう。
ユーザーの閲覧意図を予測し、必要なときだけヘッダーを表示させれば、コンテンツの邪魔になりません。
ページスクロール時にデザインを変える
ユーザーがページをスクロールしたとき、ヘッダーのデザイン自体が変わる仕様を採用するのも一つの手です。
デザインが変わっても、ヘッダーの存在自体に気付いてもらえれば、ユーザーを誘導する役割を果たせます。
固定ヘッダーの背景色を透過する
最後は、固定ヘッダーの背景色を透過することです。
ヘッダーが表示され続けることに変わりはないものの、透過すれば視覚への圧迫感が減ります。
ヘッダーデザインをもっと探したい方へ
ここまで紹介したように、ヘッダーデザインには多くの種類があります。
自社に合うヘッダーデザインを徹底的に探したいという方は、ギャラリーサイトがおすすめ。
ギャラリーサイトなら、他社のホームぺージを一覧で閲覧できるため、参考になるヘッダーデザインを探しやすいです。
おすすめのギャラリーサイトは、以下の記事で紹介しています。
【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選
まとめ
この記事では、ヘッダーの基礎知識や参考にしたい企業ホームぺージを紹介しました。
- ヘッダーが重要視されるのには3つの理由がある
- 他社のヘッダーデザインを参考に、自社のホームぺージに合うものを選ぶ
- ヘッダーデザインを作るとき、ユーザーの視線誘導を意識する
- 固定ヘッダーを導入する前にメリットとデメリットを理解する
- 自社に合うヘッダーデザインを追求する場合は、ギャラリーサイトがおすすめ
自社に合うヘッダーデザインを選べば、ホームぺージの目的が達成しやすくなりますよ。
それでは素敵なホームぺージの完成を祈っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1※のレンタルサーバーであり、18万社の導入実績があります。
12月19日12時まで、サーバー利用料金が最大30%オフとなる『冬のトク割キャンペーン』を開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2023年10月時点、W3Techs調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
