ヘッダーデザインの参考になるホームページ１２選【デザインのポイントも解説】

ホームページに欠かせないパーツの一つがヘッダーです。

ヘッダーはホームページに訪問したユーザーが最初に目にするコンテンツとなるため、訴求力のあるデザインを考える必要があります。

しかし、ヘッダーのデザインを考えるうえで、

『ヘッダーデザインが重要な理由がわからない』
『ヘッダーデザインの参考になるWebサイトを知りたい』

上記のような課題が生じるかと思います。

今回のコラム記事では、企業のホームページ担当者様へ向けて「ヘッダーのデザインが重要な理由」「デザインの参考になるホームページ１２選」「ヘッダー作成のポイント」を紹介しています。

※今回のコラム記事で掲載している情報は、記事公開時点（2022年6月19日）のものです

ヘッダーのデザインが重要な理由

ヘッダーのデザインが重要な理由を３つ紹介します。
ヘッダーを作成する前に下記内容を理解しておきましょう。

• 認知度アップにつながる
• ホームページ全体に統一感が生まれる
• コンバージョンにつながる

認知度アップにつながる

ヘッダーのデザインが重要な理由１つ目は、認知度アップにつながる点です。

ヘッダーは、ユーザーが最初に目にするコンテンツです。
「企業名」や「ロゴ」などの要素が含まれるヘッダーは、認知度アップにつなげられます。

また、ヘッダーは単純にユーザーが目にする回数が多いコンテンツです。
印象に残りやすいヘッダーを作成できれば、認知度アップの向上につながりやすいといえます。

ホームページ全体に統一感が生まれる

ヘッダーのデザインが重要な理由２つ目は、ホームページ全体に統一感が生まれる点です。

ホームページはWebページによって使用する素材が異なるため、統一感を出すのが難しい場合があります。

ヘッダーはどのWebページに対しても同じパーツが使われるので、ホームページ全体の統一感を出すのに欠かせない要素といえます。

コンバージョンにつながる

ヘッダーのデザインが重要な理由３つ目は、コンバージョンにつながる点です。

ヘッダー部分には、そのホームページの目的であるCTAボタンを設置するケースが多いです。

ユーザーの目に止まるヘッダーデザインが作成できれば「会員登録」「問い合わせ」などのコンバージョンにもつながりやすくなると覚えておきましょう。

ヘッダーに含まれている要素

続いて、ヘッダーに含まれている要素を紹介します。
下記要素を理解したうえで、ヘッダーを設計しましょう。

会社名または商品名

ヘッダーに含まれている要素が、会社名または商品名です。

ヘッダーに会社名や商品名が記載されていると、ユーザーは「今どんなホームページを見ているか」をすぐに理解することができます。

ホームページによりますが、会社名や商品名がホームボタンの役割をしているケースもあります。

ロゴ

ヘッダーには、ロゴも含まれます。

ロゴは、自社ブランディングに欠かせないものです。
ほとんどのホームページでは、ヘッダーにロゴが配置されています。

アメリカのコンサルティング会社であるNielsen Norman Groupが行った調査では、以下のデータがあります。
ロゴをホームページの右側に配置するより左側に設置したほうが、89%の確率でユーザーの印象に残りやすいという結果データです（※）。

ロゴの設置場所に関してのルールはありませんが、多くの企業はヘッダーの左側にロゴを設置しています。

※参照：Website Logo Placement for Maximum Brand Recall

グローバルナビゲーション

ヘッダーには、グローバルナビゲーションも含まれます。

グローバルナビゲーションとは、ホームページの案内リンクのことです。
ホームページ内で優先度の高いコンテンツのリンクが配置されます。

ホームページの多くはヘッダー内にグローバルナビゲーションを配置しますが、サイドバーにグローバルナビゲーションを配置するホームページもあります。

ショッピングカート

ECサイトでは、ヘッダーにショッピングカート（買い物かご）を含めるのが多いです。

ヘッダーにショッピングカートを配置すると、ユーザーはどの商品ページを閲覧していてもスムーズに商品購入ページに誘導できます。

CTA

ヘッダーには、CTAも含まれます。

CTAは「問い合わせ」「会員登録」など、ユーザーにアクションを促すためのボタンです。

CTAはコンバージョンに直結する重要な要素のため、ヘッダー内でも目立つデザインにするのがポイントです。

検索窓

出典：Amazon

ヘッダーには、検索窓（検索バー）が含まれる場合もあります。
たとえば、Amazonのホームページのヘッダーには、検索窓が配置されています。

検索窓をヘッダーに設置しておくと、ユーザーがすぐに必要な情報を見つけられるでしょう。

ECサイトや情報量が多いオウンドメディアなどでは、ヘッダーに検索窓を配置しているところが多いです。

ログイン

ヘッダーには、ログインページへのリンクが含まれる場合もあります。

会員制サイトの場合、ユーザーが訪問して最初に取るアクションがログインになるためです。

参考にしたい！ヘッダーデザイン【ジャンル別】

ヘッダーデザインをジャンル別に紹介していきます。
今回のジャンルは「シンプル」「おしゃれ」「かわいい」の3つです。

ホームページのヘッダーデザインで参考になさってください。

シンプルなヘッダーデザイン３選

シンプルなヘッダーデザインのホームページを３つ紹介します。

シンプルなヘッダーデザインを検討している方は、下記内容を参考にしてみましょう。

キリン

出典：キリン

キリンのホームページは、ロゴやグローバルナビゲーション、ログイン（マイページ）などを含んだシンプルなヘッダーデザインです。

「お酒」「ソフトドリンク」「健康食品」など、キリンでは扱う商品が多いので、検索窓を設置しているのもポイントといえます。

GATSBY

出典：GATSBY

GATSBYのホームページでも、ロゴやグローバルナビゲーション、検索窓などを含んだシンプルなヘッダーデザインです。

ほかのコンテンツと区切りをつけるために、ヘッダーの背景をオフホワイト系にしているのがポイントです。

また、GATSBYのホームページはヘッダーが固定されているので、スクロールしてもすぐに別のWebページに移動できます。

junhashimoto

出典：junhashimoto

junhashimotoのホームページも、ECサイトらしいシンプルなヘッダーデザインです。

junhashimotoが扱う商品はシンプルなデザインが多いため、ブランディングも兼ねて、ヘッダーデザインがシンプルになっています。

ECサイトには欠かせないログイン、ショッピングカートなどの要素を含んでいるのも特徴です。

おしゃれなヘッダーデザイン３選

次に、おしゃれなヘッダーデザインのホームページを３つ紹介します。

おしゃれなヘッダーデザインを検討している方は、下記内容を参考にしてみましょう。

株式会社サイバーエージェント

出典：株式会社サイバーエージェント

株式会社サイバーエージェントのホームページは、ヘッダーを囲うように背景を利用したおしゃれなデザインになっています。

ヘッダーを囲うだけでも、ホームページ全体に奥行きができます。
おしゃれなホームページを作成したい方は、株式会社サイバーエージェントのヘッダーを参考にしてみましょう。

野方電機工業株式会社

出典：野方電機工業株式会社

野方電機工業株式会社のホームページは、ヘッダーの一部を囲ったデザインになっています。

ヘッダーの設置箇所を中央ではなく、左側にずらすことで、ホームページ全体に動きが出ているのが特徴です。

また、固定されたヘッダーの背景色の不透明度を下げることで、コンテンツを閲覧しているときの邪魔にならないのもポイントです。

第一高周波工業株式会社

出典：第一高周波工業株式会社

第一高周波工業株式会社のホームページも、ヘッダーの一部を囲ったおしゃれなデザインになっています。

ヘッダーのグローバルナビゲーションだけでなく、画面右側にある「問い合わせ」と「スクロールダウン」につなげる独自性のあるデザインといえます。

かわいいヘッダーデザイン３選

かわいいヘッダーデザインのホームページを３つ紹介します。

かわいいヘッダーデザインを検討している方は、下記内容を参考にしてみましょう。

認定こども園 高木学園附属幼稚園

出典：認定こども園 高木学園附属幼稚園

神奈川県横浜市にある認定こども園 高木学園附属幼稚園のホームページは、かわいいイラストを採用したヘッダーデザインになっています。

グローバルナビゲーションのイラストにアニメーションを採用するなど、細かい点にもこだわっています。

また、ロゴをヘッダーの中心に設定することで、全体のコンテンツが中央にまとまって見えるのもポイントです。

みらいたうん

出典：みらいたうん

みらいたうんのホームページは、イラストを採用したかわいいヘッダーデザインになっています。

イラストだけでなく、丸みのあるフォントを採用することで、かわいらしさが演出されています。

かわいいヘッダーデザインを設計するときには、グローバルナビゲーションのイラストだけでなく、フォントにもこだわってみましょう。

ノーミーツ

出典：ノーミーツ

劇団であるノーミーツのホームページは、カラフルなアイコンを採用したヘッダーデザインになっています。

グローバルナビゲーションのアイコンにカーソルを合わせると、それぞれのアイコンが独自に動きをするのも特徴です。

また、カラフルな色違いのアイコンを使用することで、ホームページ全体がかわいくなっているのもポイントです。

ヘッダーデザインがまとめて見られる参考サイト３選

さまざまなヘッダーデザインを見られる参考サイトを３つ紹介します。

ヘッダーデザインをまとめて閲覧したい方は、下記の参考サイトを活用してみましょう。

Parts.

出典：Parts.

Parts.は、SaaSのサービスサイトやLPを中心としたデザインの参考サイトです。
「ヘッダー」「フッター」「CTA」など、パーツデザインがまとめて閲覧できます。

また「よくある質問」「会社概要」など、ホームページは欠かせないコンテンツのデザインも豊富に掲載されています。

Parts.は、これからホームページのデザインを設計する方におすすめの参考サイトです。

Header Love

出典：Header Love

Header Loveは、ヘッダーデザインに特化したギャラリーサイトです。
掲載は海外のホームページのみですが、300種類以上のヘッダーデザインが閲覧できます。

海外のおしゃれなヘッダーデザインをまとめて閲覧したい場合は、Header Loveを利用してみましょう。

ブブンデザインアーカイブ

出典：ブブンデザインアーカイブ

ブブンデザインアーカイブは「ヘッダー」「デザイン・装飾系」などがまとめて閲覧できるデザインの参考サイトです。

カテゴリのヘッダーには「タイトルロゴ」「プライマリナビゲーション」「グローバルナビゲーション」と分類されています。

ヘッダーデザインの作成で抑えておくべきポイント

最後に、ヘッダーのデザインに取りかかるうえで抑えておきたいポイントを紹介します。
下記ポイントを理解してから、ヘッダーのデザインに着手しましょう。

• ヘッダーの推奨サイズを理解する
• 利便性を重視したデザインにする
• ユーザー目線を意識する

ヘッダーの推奨サイズを理解する

ヘッダーデザインの作成で抑えておくべきポイント１つ目は、ヘッダーの推奨サイズを理解する点です。

ホームページの作成サービスによって、ヘッダーの推奨サイズは異なります。
利用者の多いホームページ作成サービスのWordPressでも、テーマによってヘッダーの推奨サイズが異なります。

基本的にヘッダーの推奨サイズは、利用しているサービスの公式ホームページに掲載されているはずです。

ヘッダーを作成するときは、各サービスで推奨されるヘッダーサイズを基準としてデザインを設定しましょう。

利便性を重視したデザインにする

ヘッダーデザインの作成で抑えておくべきポイント２つ目は、利便性を重視したデザインにする点です。

おしゃれなヘッダーはユーザーの注目を集めやすいですが、一番大事なのは利便性だと覚えておきましょう。

たとえば、画面をスクロールしてもグローバルナビゲーションなどが固定される「固定ヘッダー」を採用すれば、ユーザーがどのコンテンツを閲覧していても、スムーズに別のWebページに誘導できます。

ユーザー目線を意識する

ヘッダーデザインの作成で抑えておくべきポイント３つ目は、ユーザー目線を意識する点です。

人間には、ホームページや紙媒体などを見るとき、目線の動きに一定の法則があるといわれています。
この法則を意識することで、利便性の高いヘッダーを作成できます。

代表的な視線の動きの法則は2つです。

ヘッダーの内容によって最適な目線は異なるので、ユーザーがどんな順序でヘッダーを閲覧するか明確にしておきましょう。

まとめ

ヘッダーデザインについて紹介しました。

まとめますと、ヘッダーのデザインが重要な理由は下記３つです。

1. 認知度アップにつながる
2. ホームページ全体に統一感が生まれる
3. コンバージョンにつながる

ヘッダーに含まれている要素は下記のとおりです。

• 会社名または商品名
• ロゴ
• グローバルナビゲーション
• ショッピングカート
• CTA
• 検索窓
• ログイン

今回のコラム記事を参考にして、ヘッダーのデザインを作成してみましょう。

また、当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。

ビズサイでは、ホームページの用途に合わせて３種類のプランを用意しており、お申込みから公開まで最短５営業日でホームページ制作ができます。

ヘッダーのデザインでお悩みの方は、お気軽にご相談くださいませ（詳しいプラン内容はこちら）。