ヘッダー
Web ページの最上部に配置される共通エリア。ロゴ・サイト名・グローバルナビゲーション・検索窓・お問い合わせボタンなどを置く、ユーザーが必ず最初に目にする場所。HTML 上では <header> 要素で囲うのが標準。
Web 担当者にとっては、サイトの第一印象・ブランド表現・主要動線(ナビゲーション)を集約する重要要素。トップページだけでなく全ページ共通で表示されるため、1 箇所の改修が全ページに波及する。Lesson 4-2 のワイヤーフレーム検討で最初に決める領域。
本書のスタンスは「ヘッダーは『絞り込んだ要素』で構成」。あれもこれも置きたい誘惑が強いが、ユーザーが「すぐに使う動線」と「ブランド表現」だけに絞るのが原則。スクロール追従(sticky)にするかどうかも、ユーザーの利用シーン(長文記事中の回遊性向上 vs 画面占有の犠牲)で判断する。
担当者が陥りやすいのは、社内事情で「あの部署のリンクも入れて」と要素が積み上がり、ナビが破綻すること。「ヘッダーに載せない判断」を経営層レベルで合意してから設計に入る。
言葉をよく利用する人
- Web 担当者(発注側)
- デザイナー
- コーダー / フロントエンドエンジニア
- ディレクター
会話上での使用例
ヘッダーリニューアル方針会議
-
プロデューサー
ヘッダーに 8 つのリンクを並べたい
-
Web 担当者
ヘッダー は 5 リンク以内が現実的。それ以上は判別性が落ちます。優先順位を握り直しましょう
sticky ヘッダー導入の議論
-
デザイナー
ヘッダーをスクロール追従に
-
Web 担当者
ヘッダー sticky 化は回遊性向上に効きますが、モバイルだと画面が狭くなります。高さを小さく抑える設計で