はじめに
本書の目的
この資料はホームページの「ヘッダー」を初心者にも分かりやすく解説することを目的としています。ヘッダーの位置、役割、含まれる要素、デザインや配置のポイント、HTML/CSSでの作り方、最新トレンド、フッターとの違いまで順を追って説明します。
対象読者
ウェブ制作を始めたばかりの方、個人や小規模事業のサイト運営者、デザインの基本を学びたい方を想定しています。専門用語はできるだけ避け、具体例で補足します。
ヘッダーとは
ヘッダーはホームページの最上部にある領域で、ロゴやナビゲーション、連絡先、検索窓、行動を促すボタン（CTA）などを含みます。訪問者に最初に見られる重要な部分で、ブランドの印象やサイト内の移動を助けます。スマートフォン表示も意識して設計することが大切です。
本書の読み方
各章で要点を絞って説明します。まず位置と役割から始め、最後に実装や参考デザインまで扱います。実例を交えながら順番に読んでいくと理解しやすいです。
ヘッダーはホームページのどこにある？
ヘッダーの基本位置
ヘッダーはホームページの最上部にある帯状のエリアです。ページを開いたときに最初に目に入る部分で、画面の上端に配置されます。ロゴやメニュー、検索ボックスなどが横並びで置かれることが多いです。
パソコンとスマートフォンでの見え方
パソコンでは横長の帯として上に広がり、ナビゲーションが横並びになることが一般的です。スマートフォンでは画面幅が狭いため、ハンバーガーメニューや縦に並ぶ要素に変わります。どちらでも「上にある」ことに変わりはありません。
ページ共通のエリア
ヘッダーはほぼ全ページで共通表示される「共通エリア」です。サイトの顔として、訪問者がどのページにいても同じ位置・同じ項目で操作できるようにします。例えば、トップページ・サービス紹介・お問い合わせのどのページでも同じヘッダーが表示されます。
スクロール時の挙動
ヘッダーは固定（スクロールしても上に残る）や通常（スクロールで消える）に設定できます。固定にするとナビゲーションが常に手元にあるため使いやすく、通常は第一印象として十分な見せ方になります。
覚えておきたいポイント
・ページを開いた瞬間に表示されること
・全ページで共通化されること
・デバイスによって表示方法が変わること
これらを押さえてデザインを始めると、分かりやすいヘッダーが作れます。
ヘッダーの主な役割
ブランド認知（ロゴ・サイト名）
ヘッダーは最初に目に入る場所です。ロゴやサイト名を目立たせることで、訪問者がどのサイトにいるか瞬時に理解できます。ロゴをクリックでトップページへ戻るようにするのが一般的です。
ナビゲーション（メニュー・リンク）
主要なページへのリンクやメニューバーを配置します。利用頻度の高い項目を優先して並べると、ユーザーが迷わず目的のページにたどり着けます。ドロップダウンで関連項目を整理する例も分かりやすいです。
主要メッセージ・キャッチコピー
サービスの強みや今伝えたい情報を短く示します。簡潔な一文で価値を伝えると、訪問者の関心を引きやすくなります。
コンタクト情報・行動喚起（CTA）
電話番号や問い合わせボタン、会員ログイン、購入ボタンなどを置くと、行動につなげやすくなります。重要なボタンは色や位置で目立たせます。
サイト内検索
コンテンツが多いサイトでは検索窓を用意すると利便性が向上します。検索アイコンだけでも見つけやすく配置してください。
信頼性と利便性の向上
言語切替やカートアイコン、アクセシビリティのリンクなどを配置すると、幅広いユーザーに配慮できます。ヘッダーは見た目の印象を決めると同時に、操作の出発点になります。
ヘッダーに含まれる主な要素
概要
ヘッダーは訪問者が最初に目にする領域です。ここに置く要素はブランド認知や行動誘導に直接影響します。以下に代表的な要素と具体的な役割を説明します。
ロゴ・サイト名
企業やサービスの顔です。通常は左上に配置し、クリックでトップページに戻れるようにします。画像を使う場合は代替テキスト（例：「株式会社〇〇 ロゴ」）を設定します。
ナビゲーションメニュー
「ホーム」「サービス」「会社概要」「お問い合わせ」などの主要リンクを並べます。訪問者が目的のページに迷わず移動できるよう、階層は浅く、項目名は短く具体的にします（例：「料金プラン」ではなく「料金」）。
キャッチコピー・メッセージ
短い一文で提供価値を伝えます。ロゴの近くやナビの上に置くと分かりやすくなります（例：「最短7日で導入可能」）。
問い合わせ・連絡先情報
電話番号やお問い合わせボタン、チャットアイコンを目立たせます。行動を促す文言（例：「無料相談はこちら」）を付けると効果的です。
検索窓
コンテンツ量が多いサイトでは必須です。プレースホルダに例（例：「サイト内を検索」）を入れると使いやすくなります。
ユーティリティ要素
ログイン、会員登録、言語切替、SNSアイコンなどを右上にまとめます。重要度に応じて目立たせるか控えめに置くか決めます。
アクセシビリティの配慮
キーボード操作や画面読み上げに配慮し、リンクは分かりやすいラベル、色だけに頼らない表現を心がけます。
ヘッダーのデザイン・配置のポイント
視認性と利便性を最優先に
ヘッダーは訪問者が最初に触れる部分です。見やすさを最優先にし、ロゴや主要な操作（メニュー、検索、問い合わせ）をすぐに見つけられる配置にします。色とコントラストをはっきりさせ、文字は読みやすいサイズにします。
配置パターンと具体例
- 左寄せ：ロゴを左、メニューを右に配置。企業サイトやサービスでよく使われ、ナビゲーションが自然に目に入ります。例：会社ページ。
- 中央寄せ：ロゴを中央に置き、左右にメニューを分ける。ブランドを強調したいサイト向きです。例：ブログやブランドサイト。
- 右寄せ：メニューを右、ロゴを左に置く変化形。CTA（問い合わせや会員登録）を右側に置くと目立ちます。
固定（sticky）ヘッダーの使いどころ
スクロールしても画面上部に固定する固定ヘッダーは、常にナビゲーションを使いやすくします。ただし高さが大きいと閲覧領域を圧迫するため、コンパクトにするかスクロールで縮む設計が望ましいです。
モバイル対応（ハンバーガーメニュー等）
スマホでは画面幅が限られるため、ハンバーガーメニューやアイコンで整理します。アイコンは直感的なものを使い、タップ領域を広め（目安として44px程度）に取ると操作しやすくなります。
色・コントラスト・アクセシビリティ
背景と文字のコントラストを確保し、色だけで情報を伝えないようにします。重要な項目は色やボタンで目立たせますが、過度な装飾は避けます。
実践のヒント
- 主要な導線（検索、CTA、ログイン）は優先的に配置します。
- ヘッダー高さはデスクトップで60〜80px程度を目安に。モバイルはもっとコンパクトにします。
- 実機で必ず確認し、タップ操作や視認性をチェックします。
- アニメーションは控えめにし、読み込み速度に影響させないようにします。
ホームページ構造の中でのヘッダーの位置づけ
ヘッダーはページの最上部に位置します
ヘッダーはサイトを開いたときに最初に目に入る部分です。ロゴやメインナビ、連絡先などを置き、サイトの顔として機能します。ヒーローセクションや本文コンテンツはその下に続きます。
ページ全体との関係
一般に上から順に、ヘッダー → ヒーロー（主見出し）→ コンテンツ → サイドバー → フッター、の流れになります。ヘッダーは導入役で、訪問者を次のセクションへ誘導します。
全ページ共通の役割
ヘッダーはサイト全体で共通表示されることが多いです。これによりページ移動時もナビゲーションやブランドが変わらず使えます。ユーザーは位置を覚えやすく、操作が楽になります。
ユーザー視点での重要性
訪問者はまずヘッダーで目的の情報があるか判断します。分かりやすいメニュー構成や目立つロゴ、検索機能があると迷わず行動できます。
実務での注意点
スクロール時にヘッダーを固定すると導線が保たれますが、高さが大きいと表示領域を圧迫します。モバイルでは簡潔にしてタップしやすくする配慮が必要です。
ヘッダーの作り方（HTML/CSSの基礎）
基本のHTML構造
ヘッダーは
