WEBサイトを開いた瞬間、ユーザーが最初に目にする部分、それが「ヘッダー（ファーストビュー）」です。
たった数秒で「このサイトを見続けるか、サイトを閉じるか」が決まると言っても過言ではないくらい、ヘッダーはWEBデザインにおいて“顔”のような存在です。
どんなに良いコンテンツを用意していても、最初の印象で信頼を得られなければ、ユーザーの心はつかめません。
そこで今回の記事では、思わず目を引くヘッダーを作るためのデザインポイントや、現役デザイナーも参考にしている優れたヘッダーデザインの実例をご紹介します。
「そもそもヘッダーって何を意識すればいいの？」「バナーとどう違うの？」「構成が難しくて…」という方も、きっと今日から自信を持って作れるようになります。
また、もしあなたが今、「もっとデザインの基礎からしっかり学びたい」「いずれはWEBデザインを副業や本業にしたい」と思っているなら、次にご紹介する無料セミナーをぜひチェックしてみてください。
▼副業でWEBデザイナーとして月20万円を目指す！
【 逆算式ロードマップセミナー】の詳細・お申し込みはこちらから
このセミナーでは、スキルを活かしながら副業を軌道に乗せるための具体的なステップを、実例を交えてお伝えしています。
ヘッダーひとつにしても、“意図を持って作れる”ようになると、デザインの世界が一気に広がります。この記事で、まずはその第一歩を掴んでいきましょう。
ヘッダーとは？
まず、そもそもヘッダーとは何かをご紹介していきます。
ヘッダーといっても、WEBサイトのヘッダーと、TwitterなどのSNSで使われるヘッダーは役割や作り方が大きく違います。
頭が混乱してしまわないように、それぞれの違いをしっかり把握しておきましょう。
WEBサイトのヘッダー
WEBサイトのヘッダーは、ページの上部にある、帯状の部分を指します（下記の図の赤色で囲まれた部分）
ホームページのヘッダーには、
- 企業のロゴ
- コンバージョンポイント
- メニュー（グローバルナビゲーション）
- ログインボタン
- 検索窓
といったものが置かれており、ユーザーがサイト内を動き回りやすくしています。
SNS（Twitter、YouTube）などのヘッダー
SNSのヘッダーは、アカウントの一番上にある画像です。（下記の画像の赤色で囲まれた部分）
ホームページのように、何か機能があるわけではなく、アカウントのイメージを伝えるだめだけに作ります。
作り方もホームページのヘッダーとは違い、どちらかというとバナー制作に似ています。
ヘッダーデザインの参考事例9選
ヘッダーデザインにはいくつも種類があります。
目的によって使うデザインが異なってくるため、どんなときにどんなデザインにするかをしっかり把握しておきましょう。
パソコン用のヘッダーデザイン
まずは、パソコン用のヘッダーデザインからご紹介していきます。
背景に色をつけたヘッダーデザイン
まず、ご紹介するのは、背景に色をつけたヘッダーデザインです。
背景に色をつけることによって、ヘッダーのメニューが見やすくなり、ユーザーがはやく目的のページに辿り着けます。
このデザインは「顧客」「従業員」「資本家」など、さまざまな目的を持った人が集まる、コーポレートサイトによく使われます。
サイバーエージェント
シンプルなヘッダーデザイン
使いやすさが重視されるコーポレートサイトと異なり、デザイン性が重視されるブランドサイトには、シンプルのヘッダーデザインがピッタリです。
よく使われるのは、「ハンバーガーメニュー」と呼ばれる3本線のボタン。
ハンバーガーメニューを押すと、初めて「会社概要」「サービス内容」などのメニューが出てきます。
ハンバーガーメニューを使えば、ファーストビュー（WEBサイトに入ったときに最初に見られるところ）のビジュアルを崩さずにヘッダーを作ることができます。
【公式】SENNオフィシャルサイト-Less is beauty
企業ロゴ・企業名を真ん中に置くヘッダーデザイン
自社のロゴをヘッダーの中央に置くWEBサイトも多くあります。
目的は、企業名や企業ロゴをユーザーに覚えてもらうこと。
一度、企業ロゴや企業名を認知してもらうと、日常的にそれらに注目してもらえるようになります。
人は見た回数の多いものに愛着を持つ特性があるので、自然と自社を好きになってもらえます。
MENYA BIBIRI
アイコンを使用したヘッダーデザイン
WEBサイトをポップに見せたい場合は、ヘッダーにアイコンを入れるのがおすすめです。
金融や法律などの、難しいジャンルを扱っているWEBサイトのヘッダーには、アイコンがよく使われています。
アイコンを使うことで、サイト全体が親しみやすいものになり、滞在率を伸ばすことができます。
conias
文字を縦に書くヘッダーデザイン
最近では、日本特有の文字を縦に書くヘッダーデザインもよく見られます。
文字を縦に書くと、和風のデザインを演出することでき、WEBサイト全体に品と渋さが生まれます。
宿や特産物をメインの商品にしているWEBサイトにピッタリのデザインです。
【公式】料理宿やまざき|越前海岸・古民家の宿
コンバージョンに特化したヘッダーデザイン
コンバージョン、つまり、商品・サービスの成約に特化したヘッダーデザインもあります。
コンバージョンに特化している場合、ヘッダーには資料請求や個別相談などのメニューを置きます。
ビジネス感が出るので、ブランディングサイトのような、オシャレなWEBサイトには向いていないですが、集客のためにWEBサイトを作っている場合であれば、とても効果的です。
カオナビ
スマートフォン用のヘッダーデザイン
続いてスマートフォン用のヘッダーデザインをご紹介していきます。
ロゴとハンバーガーメニューのみのヘッダーデザイン
スマートフォンのヘッダーデザインで、最もスタンダードなのがロゴとハンバーガーメニューのみのヘッダーデザインです。
スマートフォンはパソコンと比べると、ヘッダーが小さく、メニューをたくさん入れると、窮屈な印象を与えます。
そのため、ロゴとハンバーガーメニューだけを置いて、全体をスッキリさせるデザインがよく使われます。
合同会社 P.P.CORPORATION
メニューが全て見えるヘッダーデザイン
ヘッダーが狭くなってしまうリスクを承知のうえで、メニューをしっかり載せたヘッダーデザインもあります。
ヘッダーがぎゅうぎゅうになってしまうというデメリットはありますが、メニューが目につくため、ユーザーがサイト内を巡回しやすいという特徴があります。
WEBサイトの回遊率（1人のユーザーが何ページ見たかを表す数値）を上げたいときに、ピッタリのデザインです。
スターバックスコーヒー
コンバージョンを意識したヘッダーデザイン
パソコンと同じように、スマートフォンでもコンバージョンを意識したヘッダーデザインがあります。
ただ、「資料請求はこちら」などのコピーは長すぎて入らないため、「短い言葉」と「アイコン」でコンバージョンポイントを表す必要があります。
緑の森どうぶつ病院
WEBサイトにおけるヘッダーの役割
WEBサイトのヘッダーは、単にページの上部にある装飾的なパーツではなく、サイト全体の使いやすさや成果を左右する重要な役割を担っています。
ユーザーが最初に目にする場所だからこそ、第一印象を決めるだけでなく、サイト全体の方向性を示すコンパスのような存在でもあるのです。ここでは、ヘッダーが持つ代表的な3つの役割について、それぞれ詳しく見ていきましょう。
訪問者の興味を引く
ヘッダーが持つ最も大きな役割は、訪問者の興味を引きつけ、「このサイトをもっと見てみたい」と思わせることです。
ユーザーはWEBサイトに訪れてから、わずか数秒で「読み進めるか」「離脱するか」を判断すると言われています。つまり、ヘッダーで魅力を伝えられなければ、その先のコンテンツがどれだけ充実していても読まれることはありません。
特にファーストビュー（スクロールせずに表示される領域）に含まれるヘッダーは、サイトの世界観や提供価値を瞬時に伝える役割を担っています。キャッチコピーや写真、CTAボタンを効果的に配置することで、ユーザーの心をつかみ、コンバージョン(資料請求や購入などの成果)にもつながりやすくなるのです。
WEBサイトに統一感をもたらす
ヘッダーは、すべてのページに共通して表示される要素です。そのため、サイト全体に一貫性をもたらし、ブランドイメージを統一する役割も担っています。
例えば、ページを移動するたびにロゴの位置やメニューの並びが変わってしまうと、ユーザーは「同じサイト内にいるのか」と不安に感じてしまいます。常に同じデザインのヘッダーがあることで、ユーザーは安心して回遊でき、企業やブランドへの信頼感も高まっていきます。
また、ロゴやカラー、フォントを統一して繰り返し見せることは、ブランディングの観点でも非常に効果的です。ユーザーの記憶に残りやすくなり、認知度の向上や他社との差別化にもつながります。サイトに統一感を持たせる「軸」として、ヘッダーは欠かせない存在なのです。
他ページへの誘導をする
ヘッダーには、ユーザーを目的のページへスムーズに案内する「道しるべ」としての役割もあります。
多くのサイトでは、ヘッダー内にグローバルナビゲーション(メニュー)が設置されており、サービス紹介や会社情報、お問い合わせなど、主要なコンテンツへワンクリックでアクセスできるようになっています。これにより、ユーザーは欲しい情報まで最短ルートでたどり着けるため、ストレスなくサイトを利用できます。
もしヘッダーに適切な誘導がなければ、ユーザーは目的の情報を見つけられず、途中で離脱してしまうかもしれません。逆に、見せたいページや読んでほしいコンテンツへの導線をヘッダーに組み込むことで、回遊率を高め、サイト全体の成果アップにもつなげられます。
ヘッダー・フッター・メニューバーの違い
WEBサイトを構成する要素には、ヘッダーのほかにも「フッター」や「メニューバー」があります。それぞれ表示される場所も役割も異なるため、違いを理解した上で設計することが大切です。ここでは、フッターとメニューバーの役割について整理していきましょう。
フッターの役割
フッターとは、WEBサイトのページ最下部に表示されるエリアのことです。ヘッダーがサイトの「入り口」だとすれば、フッターはページを読み終えたユーザーが最後に目にする「出口」にあたります。
フッターには、会社情報や住所、電話番号、プライバシーポリシー、サイトマップ、SNSへのリンクなど、ユーザーが必要に応じて確認したい情報を配置するのが一般的です。
また、ページを最後まで読み進めたユーザーは、すでに興味関心が高まっている状態です。そのため、フッターにお問い合わせや資料請求のCTAボタンを設置しておくと、コンバージョンへつながりやすくなります。さらに、ヘッダーには収まりきらなかった補足情報やリンクをまとめておくことで、サイト全体の「導線の総仕上げ」としても機能します。
メニューバー（グローバルナビゲーション）の役割
メニューバーとは、サイト内の主要なページへのリンクをまとめたナビゲーション要素です。ヘッダー内に配置されることが多く、その場合は「グローバルナビゲーション」とも呼ばれます。
最大の役割は、ユーザーが目的の情報にすばやくたどり着けるようにすることです。サイト全体の目次のように機能し、どのページからでも他のコンテンツへ移動できるため、ユーザーが迷子になるのを防げます。
また、メニューバーはSEOにも効果があるとされています。Googleのクローラーがリンクをたどってページを把握するため、メニューが整理されていることでサイト構造が伝わりやすくなり、正しく評価されやすくなります。
ヘッダーに設置するべき構成要素
ここまで紹介してきたように、ヘッダーはユーザーの行動を大きく左右する重要なエリアです。では、実際にヘッダーへ何を載せればよいのでしょうか。ここでは、多くのWEBサイトで採用されている代表的な5つの構成要素について、それぞれの目的や設置するメリットを解説していきます。
企業ロゴ
ヘッダーに必ず設置したいのが、企業ロゴです。ロゴはWEBサイトだけでなく、名刺やパンフレットなどあらゆる場面で使われる「企業の顔」であり、ブランディングにおいて欠かせない要素です。
ヘッダーにロゴを置くことで、ユーザーは「どの企業のサイトを見ているのか」を瞬時に判断できます。配置場所としては、視線が最初に向かう左上に置くのがセオリーです。また、ロゴをクリックするとトップページに戻れる仕様にしておくと、ユーザーの利便性がさらに高まります。
グローバルナビゲーション(メニューバー)
グローバルナビゲーションは、サイトの主要ページへの入り口となるメニューです。ユーザーが探している情報へ最短でたどり着けるよう、ヘッダーに設置するのが一般的です。
項目は欲張らず、5〜9個程度に絞るのが理想とされています。多すぎるとユーザーが選びきれず、かえって離脱の原因になるためです。「会社情報」「サービス」「お問い合わせ」など、シンプルで分かりやすい文言にし、重要度の高いものから左に並べると、ユーザーが直感的に操作できる導線をつくれます。
サイト内検索
ページ数が多いサイトでは、ヘッダーにサイト内検索を設置すると非常に便利です。ユーザーがキーワードを入力するだけで、目的の情報が掲載されたページを一覧で表示できるため、メニューから探しにくい情報にもすばやくアクセスできます。
特にECサイトやオウンドメディアなど、コンテンツ量が多いサイトでは必須とも言える機能です。配置はヘッダー右側がセオリーで、スペースが限られる場合は虫メガネのアイコンのみを表示し、クリックで検索窓を展開する形式もよく使われています。
CTA(お問い合わせ・資料請求など)
CTAとは「Call To Action(行動喚起)」の略で、ユーザーに具体的なアクションを促すボタンを指します。お問い合わせや資料請求、無料体験への申し込みなどがその代表例です。
ヘッダーにCTAを設置することで、購入や問い合わせを検討しているユーザーをスムーズに次のステップへ誘導できます。配置は右上が定番で、背景色とコントラストの効いた目立つ色を使うのがポイントです。「30日間無料体験」など、ユーザーのメリットを添えると、さらにクリック率を高められます。
SNSリンク
近年では、ヘッダーにX(旧Twitter)やInstagram、YouTubeなどのSNSアイコンを設置するサイトも増えています。SNSと公式サイトを連携させることで、ユーザーとの接点を広げ、継続的なコミュニケーションが取りやすくなるためです。
特にブランドサイトや個人事業主のサイトでは、SNSがファンとの主要な接点になるケースも多く、ヘッダーに分かりやすく配置することでフォロワー獲得にもつながります。
魅力的なヘッダーを作るポイントとは？
ではどうやって、人を引きつける魅力的なヘッダーを制作するのでしょうか？ポイントは4つあります。それぞれ見ていきましょう。
ターゲットを決める
WEBサイトは、ホームページやSNSを検索したユーザーの興味を引き、申し込みや購買などの行動に移してもらうことを意識してデザインする必要があります。
例えば、化粧品のサイトを作るとしましょう。
商品にもよりますが、20代女性がターゲットであれば、フレッシュさや透明感、若々しさのあるサイトをよくイメージされると思います。
そうすると、白や青をメインにして、黄色のアクセントカラーを使ったり、明るいトーンで透明感を出したり……と方向性が決まってきますよね。
一方で、40代女性がターゲットであれば、どうでしょう？
この年代だと、アンチエイジングなどちょっと高級な化粧品をイメージしますよね。
そうなると、黒や紫、ゴールドなどを使った落ち着きとゴージャス感のあるデザインといったように、方向性が変わってきます。
このようにターゲットを決めることで、デザインの方向性が見えてくるのです。
WEBサイトとのバランスを意識する
WEBページ全体とヘッダーのテイストが合っているかどうかを意識しましょう。
例えば、弁護士事務所のサイトで赤やピンクを使ったインパクトのあるヘッダーが設置されていたらどうでしょう？ちょっと依頼しにくくなりますよね。
企業には、伝えたいイメージや決められたコーポ―レートカラーがあるので、そこから外れないようなテイストでヘッダーも制作する必要があります。
また、企業の採用サイトを見てみると、スタイリッシュな青を基調としたサイトや赤を基調とした力強いサイトが多く存在します。
青は誠実さ、赤は情熱が伝わるカラーです。
このように、「何を伝えたいか」でカラーやデザインのテイストが決まってきます。
どんな企業か？何を伝えたいか？を元に、サイト全体のイメージを考えてヘッダーをデザインしましょう。
色の効果について詳しく知りたい方はこちらの記事をご覧ください。
フォントを工夫して効果的に文字を入れる
ヘッダーは、ユーザーがサイトを訪れたときに最初に目にする場所です。
そして、3秒以内にこのサイトに留まるかどうかを判断するので、一目でユーザーに伝えたいことが伝わらなければなりません。
そのため、ヘッダーのフォントは非常に重要になってきます。
・フォントが与える印象を踏まえて、サイトの雰囲気とマッチしたものを選ぶ
・特に読ませたい言葉のジャンプ率を高くしたり、色を変えたりして目立たせる
・背景に埋もれないよう、ドロップシャドウや光彩、境界線をつける
このような工夫をして、瞬時にユーザーに情報を届けるようなデザインをしましょう。
また、ユーザーが読む順番を考慮して、文字を配置することも大切です。
最初に視線が向く場所に、メインコピーや会社のロゴ。ヘッダーを流し見した先に、お問い合わせボタンや申し込みボタンを配置する。
このようなことを意識するだけでも、ユーザーにとって見やすく、使いやすいヘッダーを作ることができます。
フォントについて詳しく知りたい方はこちらをご覧ください。
ユーザーの視線の動きを考える ※修正
ヘッダーを設計する際は、ユーザーの視線がどう動くかを意識することが非常に重要です。視線の流れに沿って要素を配置すれば、伝えたい情報や促したいアクションを自然に届けられます。ここでは、代表的な3つの視線誘導の法則をご紹介します。
グーテンベルグ・ダイアグラム
グーテンベルグ・ダイアグラムとは、情報が画面全体に均等に配置されているとき、人の視線が「左上から右下へ」斜めに流れていくという法則です。活版印刷の発明者ヨハネス・グーテンベルクの名前にちなんで名付けられました。
この法則では、画面を4つの領域に分け、左上を「最初に目が向く領域」、右下を「視線の終着点」、右上を「強い休閑領域」、左下を「弱い休閑領域」と位置づけています。
ヘッダーに応用する場合、左上に企業ロゴやキャッチコピーといった最も伝えたい情報を配置し、右下や右上に問い合わせボタンなど行動を促すCTAを置くと効果的です。情報量が多いヘッダーでも、視線の流れに沿って要素を配置することで、ユーザーに無理なく内容を伝えられます。
Zの法則
Zの法則とは、ユーザーの視線がアルファベットの「Z」を描くように動くパターンを指します。具体的には、左上から右上へ移動し、その後左下へ斜めに下り、最後に右下へと流れていく動きです。
この視線パターンは、画像が中心のヘッダーやテキスト量が少ないファーストビューでよく見られます。ユーザーが最初に注目するのは左上のため、企業ロゴやメインビジュアル、キャッチコピーをこの位置に配置するのが定番です。
そして、視線の最終地点である右下にはお問い合わせボタンや資料請求ボタンといったCTAを設置することで、ユーザーの行動につなげやすくなります。Zの流れを意識して要素を並べるだけで、見せたい情報をスムーズに届け、コンバージョンへ誘導しやすいヘッダーを作ることができます。
Fの法則
Fの法則とは、ユーザーの視線がアルファベットの「F」のように動くパターンです。左上から右へ視線が流れ、少し下に降りてから再び左から右へ進み、さらに下へ……という動きを繰り返していきます。
この視線パターンは、テキストが多いコンテンツやブログ記事、ニュースサイトなどで特に多く見られます。ユーザーは記事を読み進めるとき、すべての文字を丁寧に追うのではなく、左側を中心に流し読みしていく傾向があるからです。
ヘッダーに応用する場合、グローバルナビゲーションをヘッダーの下部に横並びで配置すると、Fの動きにマッチしやすくなります。ただし、Fの法則では右側や下に進むにつれて情報が読まれにくくなるという特徴があるため、重要なメニューや訴求したい項目はできるだけ左側に配置するのがポイントです。
他に魅力的な参考を探すなら
ヘッダーを制作するうえで、すぐれた事例から発想を得ることも大切です。実際のWEBサイトを眺めることで、自社サイトに活かせるアイデアが見えてきます。ここでは、日本国内で人気のあるギャラリーサイトを2つご紹介します。
I/O3000
国内外を問わず他のサイトでは見ることのできない、珍しいサイトも掲載されているギャラリーサイトです。
カテゴリ、タグ、色などからサイトを探すことができ、シャッフルボタンを押せば全サイトのなかからランダムでWEBページを表示できます。
高クオリティのサイトも多く、様々なインスピレーションで探すことができます。
SANKOU!
ビジュアルに優れた国内の高品質なWEBサイト、ECサイトなどのコンテンツが集まったギャラリーサイトです。
業種別・目的別など色々な角度から検索もでき、「シズル感」「素敵なバナー」といったデザイナー目線でのカテゴリもあるので、検索がしやすくなっています。
▼参考にするギャラリーサイトをより詳しく知りたい方はこちら
ヘッダーに関してよくある質問
最後にヘッダーに関してよくある質問と回答をお伝えします。
細かいことかもしれませんが、ヘッダーを作るうえで役立つ知識なので、ぜひ押さえてくださいね。
適切なヘッダーの高さは？
ヘッダーの高さはパソコンで70px〜140px、スマートフォンで50px〜70pxと、WEBサイトによってかなり差があります。
ヘッダーの高さには正解があるわけではなく、どんな印象を持たせたいかで大きく異なるようです。
例えば、Appleのようにシンプルさを大切にしている場合、ヘッダーの高さはとても低く、メニューも文字だけです。
Apple-公式サイト
逆に宿泊先をレンタルしているAirbnbはヘッダーに検索窓を設置しているため、比較的ヘッダーは高いです。
Airbnb
このように、高さはヘッダーに入れる要素で異なります。
そのため、ヘッダーの高さを決めるときは、ヘッダーのデザインを考慮して考えるようにしましょう。
おすすめのヘッダーテンプレートは？
ヘッダーのテンプレートを探している方はheaders.cssというサイトがおすすめです。
ダウンロードしたヘッダーテンプレートを編集するだけで、誰でも簡単に本格的なヘッダー作成が可能になります。
0から作る自身がない方は、ぜひ使ってみてください。
まとめ
今回は、WEBデザインにおけるヘッダーの役割と、ユーザーの心をつかむデザインのポイント、そして実際の参考例をご紹介しました。
ヘッダーは、WEBサイトの第一印象を決めるとても重要な場所です。「誰に」「何を」「どう伝えるか」を明確にし、構成や文字のバランス、余白の取り方を工夫するだけで、サイト全体のクオリティがぐっと上がります。
私もデザイナーになったばかりの頃、「ヘッダーを作るのって難しいな…」と思っていました。でも、基本の考え方を学び、構成の型を覚えていくうちに、自然と“伝わるデザイン”を作れるようになったんです。
デザインは“センス”よりも“積み重ね”。この記事で学んだポイントを少しずつ実践していけば、あなたの作品も確実にレベルアップしていきますよ。
もし今、「テンプレートや参考例を見て真似するだけでは物足りない」「自分で一からデザインを作れるようになりたい」と思っているなら、その気持ちは、デザイナーとしての成長のサインです。
そんなあなたにおすすめなのが、副業でWEBデザイナーとして月20万円を目指す【逆算式ロードマップセミナー】です。
【逆算式ロードマップセミナー】の詳細・お申し込みはこちらから
この無料セミナーでは、
- 未経験からWEBデザインを仕事にするための正しい学び方
- どのスキルをどの順番で習得すればいいか
- 実際に案件を獲得するためのリアルなプロセス
などを、4,000名以上の卒業生を育ててきた日本デザインスクールの実例を交えて解説しています。
ヘッダーづくりは、デザインの“入口”です。ここを理解すれば、バナーやサイト全体のデザインにも必ず活かせるようになります。
小さな一歩を積み重ねることで、あなたの“好き”が、仕事として形になる日がきっと来るはずです。
