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