ヘッダー

Web ページの最上部に配置される全ページ共通のエリアです。ロゴ・サイト名・グローバルナビゲーション（主要メニュー）・検索窓・お問い合わせボタンなどを配置する、ユーザーが「必ず最初に目にする」サイトの顔です。HTML 上では <header> 要素で囲うのが標準ルールです。

現場での設計原則：引き算の美学と「CTA」の強調

ヘッダーは、サイトの第一印象と主要動線を集約する重要要素です。基本となる考え方は「極限まで絞り込んだ要素で構成すること」。あれもこれも置きたい誘惑に駆られますが、ユーザーが「すぐに使う動線」と「ブランド表現」だけに絞るのが原則です。

特に重要なのが「お問い合わせ」や「資料請求」といった CTA（Call To Action＝行動喚起）ボタンです。これらは他のメニューと同化しないよう、パッと見てわかるアクセントカラー(ブランドカラー)（目立つ色）を配置するのが、成果（コンバージョン）を上げるための鉄則です。

実務でのポイントと UI のトレードオフ

実務では、画面設計（ワイヤーフレーム(WF / ワイヤーフレーム)）の段階で一番最初に決める領域です。全ページ共通で表示されるため、1 箇所の改修がサイト全体に波及する（良くも悪くも影響が大きい）点を意識してください。

スクロール追従（Sticky）の判断：画面を下にスクロールしてもヘッダーを上部に固定するかどうかは、「長文記事でもすぐに別ページへ移動できる（回遊性向上）」というメリットと、「画面の表示領域が狭くなる」というデメリット（画面占有）のトレードオフになります。
スマホ（モバイル）での最適化：スマホは画面が狭いため、ヘッダーの高さを極力抑える設計が必須です。あふれたメニューは、三本線アイコンの「ハンバーガーメニュー」の中に格納するのが現在の標準 UI です。

現場でよくある「痛い失敗」と社内調整のコツ

担当者が最も陥りやすい罠が、社内政治によって各部署から「うちの部署のリンクも一番上に置いてよ！」と要望が殺到し、要素が積み上がりすぎてナビゲーションが完全に破綻すること（ユーザーが迷子になること）です。

これを防ぐには、設計に入る前にプロジェクトの責任者と「ヘッダーには本当に重要な〇個しか載せない」という上位レベルでの合意を固めておくことが防波堤になります。他部署からの追加要望には「最下部のフッターリンク（フッターナビ(フッターナビゲーション)）にまとめましょう」「スマホのハンバーガーメニューの中なら入れられます」と代替案を出して交渉するのが、優秀な Web 担当者の見せ所です。

言葉をよく利用する人

Web 担当者(発注側)
デザイナー
コーダー / フロントエンドエンジニア
ディレクター

会話上での使用例

ヘッダーに並べるリンク数を、プロデューサーとWeb担当者で調整する場面

プロデューサー
各部署の要望をまとめたら、ヘッダーに八つリンクを並べたくなったんだけど。
Web担当者
ヘッダーのリンクは五つ以内が現実的です。それ以上並ぶと一つひとつが見分けづらくなって、かえって使われなくなります。何を載せて何を載せないか、優先順位を握り直しましょう。
プロデューサー
たしかに多すぎても迷うね、絞り込もう。

ヘッダーのスクロール追従を、デザイナーとWeb担当者で検討する場面

デザイナー
ヘッダーをスクロールしても追従するようにしたいんですが、どう思いますか。
Web担当者
ヘッダーを追従させると回遊性は上がるので良いと思います。ただモバイルだと常に画面の上を占有して窮屈になるので、高さはできるだけ抑える設計でお願いできますか。
デザイナー
了解です、モバイルは薄めのデザインで詰めてみます。