はじめに
ホームページの上部にある共通エリアを、
ヘッダー（ヘッダー）
と呼びます。
ヘッダーには一般に、
- ロゴ
- サイト名
- ナビゲーション
- 問い合わせ
- 予約や相談へのボタン
などを置きます。
しかし、
置けるものを全部置く場所
ではありません。
ヘッダーの仕事は、
どのサイトかわかる
↓
主要な行き先がわかる
↓
重要な行動がわかる
ことです。
この章ではヘッダーという場所の役割を整理します。
メニュー項目の詳しい作り方は第21章で扱います。
ヘッダーは「最初の案内所」
利用者は、必ずトップページからサイトへ入るとは限りません。
Google検索から、
- サービスページ
- ブログ記事
- アクセスページ
へ直接入ることもあります。
そのときヘッダーがあると、
「どのサイトを見ているのか」
「他に何があるのか」
を理解しやすくなります。
ヘッダーは装飾ではなく、
サイト全体で共通する案内所
と考えます。
ヘッダーに入れる基本要素
ロゴ・サイト名を置く
ヘッダーにはロゴやサイト名を置くことが多いです。
目的は、
今どのサイトにいるのかを知らせること
です。
ロゴを大きく見せること自体が目的ではありません。
ナビゲーションやコンテンツを圧迫しない大きさにします。
ロゴからトップページへ戻れるようになっているThemeも多いため、実際にクリックして確認します。
ナビゲーションを置く
ヘッダーにはグローバルナビゲーションを置くことが多いです。
ただし、ここでは、
「メニューに何を入れるか」
までは深掘りしません。
たとえば、
初めての方へ
メニュー・料金
店舗紹介
アクセス
ブログ
お問い合わせのような主要な入口を見せます。
詳しいメニュー設計とWordPressでの設定方法は第21章で扱います。
CTAを置くか考える
CTAは、
次にしてほしい行動への入口
です。
店舗サイトなら、
- 相談する
- 問い合わせる
- 予約する
などが考えられます。
ヘッダーへCTAを置くと、どのページを見ていても行動へ進みやすくなります。
ただし、
電話
LINE
予約
問い合わせ
Instagram
YouTubeを全部同じ強さで並べると、何を選べばよいか分かりにくくなります。
ヘッダーでは、
最も重要な行動を優先する
と考えます。
ヘッダーを見やすく保つ
ヘッダーへ情報を詰め込みすぎない
ヘッダーへ、
- ロゴ
- 電話番号
- 営業時間
- 住所
- SNS
- メニュー
- キャンペーン
- CTA
- News
を全部入れると、メインコンテンツが始まる前に情報が渋滞します。
特にスマートフォンでは画面が小さいため影響が大きくなります。
ヘッダーは、
サイト全体で常に必要な情報だけ
を置く場所です。
詳しい店舗情報などはフッターや各固定ページへ分けられます。
スマートフォンではヘッダーの考え方が変わる
PCでは横にメニューを並べられても、スマートフォンでは同じ幅がありません。
そのため、
- ロゴ
- メニュー ボタン
- CTA
- 電話
- LINE
などをどう見せるか考えます。
Themeによってはハンバーガーメニューへナビゲーションを収納できます。
PC版をそのまま縮小するのではなく、
モバイルで本当に必要なものは何か
を考えます。
固定ヘッダーとは
スクロールしてもヘッダーが画面上部へ残るデザインを、
固定ヘッダーや固定ヘッダーと呼ぶことがあります。
重要なナビゲーションやCTAへすぐ戻れる利点があります。
一方で、ヘッダーが高すぎるとモバイル画面を大きく占有します。
採用する場合は、
- コンテンツを隠さない？
- 画面が狭くならない？
- メニューを開いたとき使いやすい？
を実機で確認します。
テーマによってヘッダーの編集場所が違う
SNSはヘッダーに全部置かなくてもよい
InstagramやYouTubeなどを運用していても、ヘッダーへすべてのIconを並べる必要はありません。
サイトの主要目的が、
「サービスを理解して問い合わせてもらうこと」
なら、SNSはフッターでもよい場合があります。
重要なのは、
一般的なサイトにあるから置く
のではなく、
そのサイトでの優先順位です。
Block ThemeではヘッダーをSite Editorで扱える
現在のWordPressでは、Block Themeを使っている場合、
外観
↓
エディターからSite Editorを利用できます。
Block Themeでは、ヘッダーやフッターなどの共通領域をTemplate Partとして管理できます。
ヘッダーの中へ、
- サイトロゴ
- サイトタイトル
- ナビゲーション
- ボタン
- Group
などのブロックを組み合わせられます。
ヘッダー Template Partを変更すると、それを利用する複数のテンプレートへ変更が反映されます。
Classic Themeでは操作場所が違う
Classic Themeでは、
- 外観 → カスタマイズ
- 外観 → メニュー
- Theme独自設定
- ウィジェット
などを使う場合があります。
どこでヘッダーを編集できるかはThemeによって異なります。
そのため、このGuideでは、
ヘッダーの考え方
と、
Theme固有の操作
を分けて考えます。
ヘッダーを変更したらサイト全体を見る
ヘッダーは共通部品です。
一か所変更すると、多くのページへ影響します。
変更後は、
- トップページ
- 固定ページ
- ブログ記事
- PC
- モバイル
- メニュー展開
- CTA
を確認します。
ヘッダー確認チェックリスト
□ ロゴ / サイト名でサイトを識別できる
□ ロゴが大きすぎない
□ 主要ナビゲーションが分かる
□ CTAが多すぎない
□ スマートフォンで使いやすい
□ 固定ヘッダーがコンテンツを邪魔しない
□ SNSを並べすぎていない
□ 他ページでも同じように表示される今回のポイント
- ヘッダーはサイト共通の上部エリア
- ヘッダーは「最初の案内所」と考える
- ロゴ・ナビゲーション・CTAにはそれぞれ役割がある
- 情報を詰め込みすぎない
- スマートフォンでは優先順位をさらに絞る
- 固定ヘッダーは便利だが画面占有率も確認する
- Block ThemeではヘッダーをTemplate Partとして管理できる
- Classic Themeでは編集場所がThemeによって異なる
- メニュー項目の詳しい設計は第21章で扱う
今回の視点
ヘッダーは、
「サイトの上にある部品」
ではありません。
利用者がどのページから入ってきても、
ここは何のサイトで、次にどこへ行けるのか
を伝える場所です。
情報量ではなく、案内の分かりやすさを優先します。
Part 3｜ホームページの見た目と構造を作る