この記事の内容
あやね
Webページのヘッダーは、サイト名や主要なメニューをまとめた案内役です。ユーザーが今いるサイトを確認し、目的の情報へ進めるように、限られたスペースで必要な選択肢を伝えます。
設計の順番は、利用者が行うことを決める、主要な移動先を絞る、広い画面と狭い画面に配置する、メニューを開いた状態まで確かめる、の4段階です。PixsoでWebサイトの画面を設計する際も、ロゴの大きさから決めるのではなく、検索や移動を含む一連の操作から考えると、必要な構成が見えてきます。
1. Webデザインのヘッダーとはどこの部分？
ヘッダーは一般にWebページの上部にあり、ロゴ、グローバルナビゲーション、検索、ログインなどを配置する領域です。サイトの識別とページ間の移動を支えます。ページ上部の大きな写真やキャッチコピーを載せるヒーロー領域とは、役割を分けて考えましょう。
ロゴや配色はサイト全体の印象にも関わります。先に作るか最後に作るかを固定するのではなく、情報構造が見えた段階で主要項目を決め、本文や各ページとの関係を確かめながら調整します。
2. ヘッダーの役割とは？
ヘッダーには、スクロールすると画面外へ移動するものと、画面上部に残る固定・追従型があります。常に表示する必要があるとは限りません。長いページで主要な操作を繰り返すのか、本文を広く見せたいのかによって選びます。
たとえば商品数の多いECサイトでは検索やカートへの入口、企業サイトではサービス案内や問い合わせへの入口が重要です。滞在時間を長くすること自体ではなく、訪問者が目的の情報や操作へ進めることを目標にします。
3. ヘッダーをデザインするときのポイント
ヘッダーを設計するときに確認したいのは、情報量、見た目と操作の関係、ページ内容との整合、チームでの意思決定という4つの点です。すべてのサイトに同じ項目を並べる必要はありません。
3.1 主要な移動先と補助的な操作を分ける
ヘッダーでは、限られたスペースに必要な情報を集約します。項目が多すぎると、目的のメニューを見分けにくくなります。装飾を減らすだけでなく、主要な移動先と補助的な操作を分けることが大切です。
主要なサービスや商品カテゴリを優先し、関連する項目をまとめます。狭い画面でメニュー内へ移す場合も、検索やカートなど重要な操作が見つからなくならないよう、表示する項目と収納する項目を決めましょう。運営会社や利用規約へのリンクは、読者の主な目的でなければフッターなどに配置できます。
3.2 見た目の簡潔さと操作の分かりやすさを両立する
ヘッダーの見た目は、その役割に合わせて決めます。ブランドを伝える部分と、ユーザーが押して操作する部分を区別できる構成にしましょう。
商品を探すことが中心のサイトでは、検索欄やカテゴリへの入口を目立たせる方法があります。一方、少数のサービスを紹介するサイトでは、ロゴと主要メニューを軸にした構成も考えられます。この2つだけに限定せず、必要な操作に合わせて組み合わせます。
文字の読みやすさ、操作領域、現在いるページの表示も確認します。アイコンだけでは意味が伝わりにくい場合は、ラベルを添えます。マウスを重ねたときだけ開くメニューは、タッチやキーボードでも開ける操作を併せて設計します。
3.3 メニュー名と移動先の内容をそろえる
ヘッダーのロゴやメニュー名は、どのサイトで何ができるのかを伝えます。ページ固有の詳しい説明やキャッチコピーは、必要に応じてヒーロー領域や本文に置き、ナビゲーションを長い宣伝文で埋めないようにします。
メニューの言葉と移動先の内容が一致しないと、ユーザーは目的の情報を探し直すことになります。「導入事例」を選んだのに料金説明だけが表示される、といった食い違いを避けましょう。同じ移動先を指すラベルは、ヘッダー、メニュー内、パンくずで統一します。
3.4 項目を使う場面で優先順位を決める
ヘッダーの主要項目は、デザイン担当だけでなく、コンテンツやサービスの担当者とも確認します。ただし、各部門の要望をすべて並べるのではなく、ユーザーが行う頻度や重要度を基準に優先順位を決めます。
共有したデザイン上で「このメニューから何を探すのか」を具体的に説明すると、好みだけの議論を避けられます。案ごとの違いと採用理由を、関連する画面の近くに残しておくと確認しやすくなります。
実例：オンライン書店のヘッダーを画面幅に合わせて設計する
書店のサイトで、「題名が分かっている本を探す人」と「ジャンルから次に読む本を探す人」の両方を案内するケースを考えます。購入途中の人はカートに戻る必要もあります。この3つを主要な操作とし、企業情報や採用情報はヘッダーの目立つ位置に並べません。
広い画面では検索とジャンルの入口を分ける
上段にロゴ、検索欄、アカウント、カートを置き、下段に「新刊」「文芸」「ビジネス」「児童書」を並べる案を作ります。検索欄の案内は「本のタイトル・著者名で検索」のように、入力できる内容が分かる言葉にします。「ビジネス」を選んだ後も検索欄とカートは同じ位置に残し、現在のカテゴリを見分けられるようにします。
2段にすると本文の表示領域は減ります。カテゴリ数が少ない場合は1段でも収まるか比較し、検索欄が極端に狭くなる案を避けます。形を先に固定せず、実際のラベルと操作に必要な幅から決めます。
狭い画面では重要な操作を残し、カテゴリをメニュー内へ移す
ロゴ、検索、カート、メニューボタンを残し、カテゴリは開閉式メニューへ移します。メニューボタンには「メニュー」というラベルを付けます。カートの件数は、桁数が増えても隣のボタンを押し出さない領域を確保します。
検索を開くと入力欄と閉じる操作が見え、キーボードが出ても入力内容を確認できる状態を用意します。検索結果へ移った後に戻る操作で入力が失われると探し直しになるため、検索語をどこに残すかも仕様として記録します。
閉じた状態だけでなく、開いた状態と戻り方を作る
試作するのは、広い画面、狭い画面、メニューを開いた画面、検索入力中の画面です。メニューの「児童書」からカテゴリページへ進む経路と、何も選ばず閉じる経路をつなぎます。別ページへ移動せず閉じた場合は、元のページとスクロール位置に戻れる設計にします。
メニューを閉じた後のキーボードフォーカスは、開くために使ったボタンへ戻すのが分かりやすい方法です。画面を覆うメニューか、本文を押し下げるメニューかによって必要な実装は変わるため、プロトタイプの見た目だけで操作仕様まで完成したと判断しないようにします。
中間の幅と読み込み直後を確かめる
広い・狭いの2枚だけでは、カテゴリが途中で折り返す幅を見落とします。「ビジネス・経済」のように長い名称へ変えたり、文字を拡大したりして、ロゴやカートと重なる箇所を探します。表示を切り替える幅は、機種名ではなく内容が収まるかどうかで調整します。
公開後の画面では、フォントや画像の読み込み前後でロゴやメニューの幅が急に変わらないかも確認します。設計データにはロゴの表示枠、ヘッダーの高さ、左右の余白、コンテンツ領域の最大幅を残し、読み込み後だけ別の整列ルールになる状態を避けます。
4. Pixsoでヘッダーを試作し、チームで確認する
4.1 フレームを並べて表示条件を比較する
Pixsoでは同じファイル内に複数のフレームを作り、異なる画面幅のヘッダーを比較できます。プリセットは出発点として使い、対象サイトの内容が収まる幅でも確認しましょう。
書店の例なら、広い画面と狭い画面に同じメニュー名を入れ、さらに中間幅のフレームを追加します。検索欄、カート、メニューボタンなど繰り返し使う要素をコンポーネントにすると、状態ごとの形やラベルのずれを比べやすくなります。
固定ヘッダーを採用する場合は、狭い画面で本文を覆わないか、リンク先の見出しやキーボードのフォーカス位置が隠れないかも確認します。W3Cのフォーカスを隠さないための解説（英語）では、フォーカスされた要素が作成者側のコンテンツによって完全に隠れないことを求めています。
4.2 画面を共有し、具体的な操作をレビューする
Pixsoでは、同じデザインファイルを共有して共同編集やコメントで意見を交換できます。ヘッダー案を共有するときは、検討したい画面幅と操作を伝え、どの案のどの部分への指摘なのかを明確にしましょう。
「スマートフォンで児童書を探し、カートに戻ってください」といった課題を用意し、どの入口を選んだかを観察します。迷った理由がラベルなのか、ボタンの位置なのかを分けると、修正する箇所を絞れます。
共有相手には役割に応じた閲覧・編集の権限を設定します。コンテンツ担当にはカテゴリ名、開発担当には固定表示や開閉条件を確認してもらい、採用する案と残った実装上の条件を同じ画面の近くに記録します。
4.3 日本語と多言語のラベルを実際に入れる
日本語のメニュー名では、漢字、ひらがな、英数字が混ざっても読みやすいフォントと余白を選びます。仮の短いラベルだけでなく、実際に使うカテゴリ名を入れて、折り返しや文字の欠けを確かめましょう。
多言語サイトでは翻訳後の文字数が変わります。日本語の「新刊」が収まるからといって、他言語の項目も同じ幅に収まるとは限りません。対象言語のラベルでフレームを複製し、文字を小さくして無理に合わせる前に、余白やメニューへの収納方法を見直します。
目的の情報へ進めるヘッダーを作る
ヘッダーは、サイトの識別と主要な移動を支える領域です。必要な項目を絞り、メニュー名と移動先をそろえ、狭い画面や固定表示でも操作を妨げないように設計しましょう。
最初に書店の検索とカテゴリ移動のような具体的な課題を決め、広い画面、狭い画面、開閉中の状態をPixsoで並べて確認します。見た目の統一だけでなく、探す、選ぶ、戻るという行動が途切れないヘッダーを目指してください。
