ヘッダーデザインの決め方｜ロゴ・ナビ・CTAの置き方と事例の見方

ヘッダーの事例はたくさん見たけれど、自分の案件ではどこに何を置けばいいか決められない…
参考サイトを真似したヘッダーを、クライアントにどう説明すればいいか分からない…

ヘッダーの制作事例を見ても、自分の案件になるとロゴやメニュー、ボタンの置き場所で手が止まりませんか？見た目を真似しただけだと、「なぜこの形なの？」と聞かれたときに答えられません。

ここで扱うのは、Webサイトの各ページの一番上に表示されるヘッダーです。SNSのヘッダー画像の話ではありません。

ヘッダーには、どのページでも読者を次の行動へ案内するための役割があります。この記事では、ヘッダーに入れる要素を決める順番と配置パターンの選び方、事例ギャラリーの見方をご紹介します。

デザインにおけるヘッダーとは？役割と入れる要素

ヘッダーは、Webサイトの全ページの一番上に共通で置く領域です。読者がどのページから入ってきても、最初に目に入る場所になります。

この3つを受け持つのが、ヘッダーの基本の3要素です。

1、ロゴ：どのサイトかを伝える顔。押すとトップページに戻れる
2、グロナビ（グローバルナビゲーション）：サイトの主なページへ移動するためのメニュー
3、CTA（＝行動を呼びかけるボタン）：問い合わせや申し込みなど、読者にしてほしい行動へのボタン

このほかに、ヘッダーに置かれることがある補助の要素は、次のとおりです。

• 電話番号・営業時間
• サイト内の検索窓
• SNSのアイコン
• 言語の切り替え

といった要素は、サイトの目的に必要なときだけ足します。電話で予約を受けるお店なら電話番号、ページ数の多いサイトなら検索窓のように、理由があるものだけを残します。

デジタル庁のデザインシステムによれば、ヘッダーはロゴ・メニュー・検索などの項目と、ハンバーガーメニューのボタンで組み立てると説明されています。ロゴはどの画面幅でも左、スマホのような狭い画面ではボタンが右端です。

ナビに入れる項目の選び方や並べる順番、見た目は、以下の記事で詳しく説明しています。

ヘッダーはどうやって作る？3要素を決める順番

ヘッダーは、サイトの目的から逆算して決めます。決める順番は、次の5つです。

1. サイトの目的を1つ決める
2. 目的に直結するCTAを1つ決める
3. ナビの項目を決める
4. ロゴの大きさを決める
5. ヘッダーの高さと、固定するかどうかを決める

中でも大事なのは、最初の2つです。サイトの目的には、例えば次のようなものがあります。

• 問い合わせを増やしたい
• お店の来店予約を増やしたい
• 資料請求をしてほしい
• 講座やサービスに申し込んでほしい

目的が決まったら、ヘッダーで一番目立たせるボタンを1つに絞ります。「お問い合わせ」と「資料請求」を同じ強さで並べると、読者はどちらを押せばいいか迷うからです。

ナビの項目は、目的に関係する主なページだけにします。入りきらないものは、フッター（ページの一番下の領域）へ回せば大丈夫です。

ロゴは「どのサイトか分かる」大きさがあれば十分で、ボタンより目立たせる必要はありません。高さと固定するかどうかは、この後の配置パターンと失敗例で判断の仕方を説明します。

【チェック方法】
いま作っているワイヤーフレームやデザインカンプがあれば、ヘッダーで一番目立っているものを確認してみてください。
それがサイトの目的につながるボタンなら、順番どおりに決められています。ロゴや飾りの画像だったら、手順2に戻って見直しましょう。

コーポレートサイト（会社の公式サイト）とLP（ランディングページ）だけで比較しても、ヘッダーの作り方は変わります。

ヘッダーの要素は、色や形を決める前のワイヤーフレームの段階で決めておきます。ワイヤーフレームの作り方は、以下の記事で詳しく説明しています。

ヘッダーのテンプレートはある？使うときの注意

WordPressのテーマには、最初からヘッダーの形が用意されているものがあります。デザインのテンプレートを土台にして作るのも問題ありません。

注意したいのは、入っている要素をそのまま全部使うことです。電話番号やSNSのアイコンの枠があっても、手順1と2で決めた目的とボタンに必要なければ外します。

CSSでヘッダーをデザインするには（コーディングの入口）

難しいコードが書ける必要はありません。コーディングの前に、デザインカンプで次の3つを指定しておくと、実装する人が迷わずに組めます。

1. ロゴ・ナビ・ボタンをどう横に並べるか
2. スクロールしたときに、ヘッダーを画面の上に固定するかどうか
3. どの画面幅で、ナビをハンバーガーメニューに切り替えるか

ヘッダーを固定するときは、CSSの position: fixed や position: sticky という指定を使います。fixed は画面に対して位置を決めるので、スクロールしても同じ場所に留まります。

sticky は、決めた位置までスクロールされたところで、その場所に留まる指定です。コードの細かい書き方は、コーディングの解説に任せて大丈夫です。デザイナーは、どう見せたいかを言葉と図で伝えられるようにしておきましょう。

ヘッダーの配置パターン4つ｜左ロゴ右ナビ・中央ロゴ・ハンバーガー・固定ヘッダー

ヘッダーの配置には、よく使われる型があります。どれを選ぶかは、サイトの目的とページの長さで決めます。

比べるポイント	左ロゴ・右ナビ	中央ロゴ	ハンバーガーメニュー	固定ヘッダー
見た目の特徴	ロゴを左端に置き、ナビとボタンを右側に横並びにする	ロゴを中央に置き、ナビを左右かロゴの下に分ける	メニューを三本線のボタンにしまい、押すと開く	スクロールしても、ヘッダーが画面の上に残る
向いているサイト	コーポレートサイト・サービスサイト全般	飲食店やアパレルなど、雰囲気を見せたいサイト	スマホ表示。パソコンでは項目がとても多いサイト	ページが長いサイトやLP。ボタンをいつも見せたいとき
CTAの置き方	右端に置く	ナビと分かれて弱くなりやすいので、色や形で目立たせる	メニューの中にしまわず、外に出しておく	固定するヘッダーの中に入れる
気をつけること	見慣れた型なので、ボタンの見せ方で差をつける	項目が左右に分かれ、どこを押せばいいか迷わせやすい	パソコンで全部しまうと、メニューに気づかれにくい	画面の一部を占め続けるので、高さを抑える

迷ったら、左ロゴ・右ナビから始めます。Z型の視線の流れでは、読者の目は左上から右上へ動きます。左上でどのサイトかを伝え、右上でボタンを見せる並びになるからです。

視線の流れの考え方は、以下の記事で詳しく説明しています。

スマホでは、メニューをしまっても、問い合わせのボタンは外に出しておきます。ボタンまでしまうと、問い合わせる手間が1回増えるからです。

固定ヘッダーにするかどうかは、ページの長さと、ボタンを押してほしい場面の多さで決めます。固定にするときは、次の2つを守ります。

1. 高さを、文字が読めてボタンが押せる分だけに抑える
2. 背景を透かさず、本文と見分けられるようにする

固定したヘッダーは、どのページでも画面の一部を占め続けます。短いページで、ボタンを押してもらう場面も少ないなら、固定しない判断もあります。

ヘッダーでよくある失敗3つ｜詰め込み・高すぎ・CTAが埋もれる

ヘッダーは、作る人が丁寧になるほど、要素が増えていきがちです。どれも本人は親切のつもりで足しているのに、読者を迷わせてしまう失敗です。

1、要素を詰め込みすぎる

例えば、小さな整体院のサイトで、ヘッダーに次の要素をすべて並べたとします。

• ロゴ
• 7項目のナビ
• 電話番号と営業時間
• SNSのアイコン3つ
• 「予約する」「お問い合わせ」のボタン2つ

要素が多いほど一つひとつが小さくなり、どれも目に入りにくくなります。

直し方は、目的に関係のないものをフッターへ移すことです。予約を増やしたいサイトなら「予約する」のボタンを残し、電話予約が多いお店なら電話番号も残します。

残した要素は、関係の近いものどうしを寄せて、端をそろえるのがコツ。寄せる・そろえるの考え方は、デザインの4原則とは？近接・整列・反復・対比をWebの例で解説でも取り上げています。

2、ヘッダーが高すぎる

ロゴを大きくしたり、ナビを2段に分けたりすると、ヘッダーの高さが増えます。その分、ファーストビュー（ページを開いて最初に見える範囲）のキャッチコピーやボタンが下へ押し下げられます。

判断の基準は、ファーストビューで一番見せたいものが画面の中に収まっているかどうかです。パソコンとスマホの両方の画面で開いて、キャッチコピーとボタンが見えているかを確かめます。

3、CTAのボタンが埋もれる

「お問い合わせ」がナビの項目と同じ文字の色・大きさで並んでいると、ボタンだと気づかれにくくなります。せっかく右端に置いても、読者の目に止まりません。

直し方は、ボタンだけ背景に色を付け、形もほかの項目と変えることです。ナビの文字とは違う色をボタンだけに使うと、ほかの項目に埋もれません。

ヘッダーを作り終えたら、スマホで開いて「最初に何を押せばいいか」がひと目で分かるかを確かめます。
分からなければ、3つの失敗のどれかに当てはまっていないか見直します。

ヘッダー事例の見方｜ギャラリーで見る3つのポイント

ヘッダーの事例は、Webサイトのデザインを集めて紹介しているギャラリーサイトでたくさん見られます。ただ、「きれいだな」と眺めるだけだと、自分の案件で使える判断は手元に残りませんよね。

事例は、次の3つのポイントで見ます。

1. 何のためのサイトか（目的）
2. CTAのボタンはどこにあり、どう目立たせているか
3. スマホで見たとき、何が残って何が隠れているか

1つめで目的を見るのは、自分の案件と目的が近い事例を選ぶためです。来店予約を増やしたいなら、雰囲気が似ているだけのサイトより、予約ボタンのある飲食店や美容室のサイトのほうが参考になります。

2つめでは、ボタンの位置と色に加えて、「無料で相談する」のようなボタンの言葉もメモします。言葉まで見ておくと、自分の案件でボタンの文言に迷ったときの手がかりにできるわけです。

3つめでスマホ表示を見るのは、パソコン版だけ真似すると形が崩れやすいからです。スマホ版の画像がなければ、実際にサイトをスマホで開いて確かめます。

見た事例には、なぜこう置いたのかを一言メモしておきます。「予約が目的だから、ボタンを右上に固定している」のように書けると、見た数がそのまま判断の言葉になります。クライアントに配置の理由を聞かれても、自分の言葉で説明できますよね。

まとめ

1、ヘッダーは、サイトの目的、CTA、ナビ、ロゴ、高さと固定の順で決める
2、配置パターンは目的とページの長さで選び、スマホでもCTAのボタンは外に出しておく
3、事例は目的・CTAの位置・スマホ表示の3点で見て、置いた理由をメモする

ヘッダーのような配置の判断を、手を動かしながら身につけたい方は、5日間チャレンジも活用してください。

参考にした情報源

• デジタル庁「デジタル庁デザインシステム ヘッダーコンテナ 使い方」https://design.digital.go.jp/dads/components/header-container/usage/（2026年11月4日確認）