皆さんこんにちは、カラーオンです。

今回はホームページのヘッダーナビゲーション（以下、ヘッダー）についてご紹介します。

コーポレートサイトでもブログでも、必ずヘッダーが用意されています。最近ではトップページにはヘッダーを設けず、トップページ全体でヘッダーのように機能させているサイトも増えてきました。

一般的にショッピングサイトやポータルサイトなど情報量が多いサイトはヘッダーを設けています。

• ヘッダーはトップページとその他のページで異なるように作成することをお勧めします。トップページのヘッダーはそのサイトで紹介されている情報の紹介とアクセスリンクを兼ねています。その他ページでは、そのページで紹介されている情報を詳しくご覧いただくためにヘッダーをスモール表示します。
• その他のページでヘッダーをトップページように大きく表示することもありますが、コンテンツを読んでいただくためにはヘッダーを小さくする方が良いでしょう。
• ヘッダーを設けていないトップページはページ自体をブロックに分けて、各カテゴリーにはどのような情報が掲載されているのかを表示します。スマホサイトでは多くの場合、この手法が採用されています。
• Bootstrap（過去の記事参照）などでレスポンシブデザインを採用している場合は、トップページの構成に気を付けなければなりません。
• ヘッダーは特にサイトのスタイルを決定します。ヘッダーの色彩イメージがサイトの目的のイメージに一致しています。例えばクラシックな情報を掲載しているサイトにポップなイメージの配色をヘッダーに使用しません。
• アクセントでポップなイメージを挿入する場合は、ヘッダーより下の部分（サイドバーなど）か、ヘッダー内でもクリックして表示されるポップアップウィンドウで使用します。
• ヘッダーにはブランドロゴを表示させます。
• コンテンツカテゴリーのリンクをメイン情報として、サイトの利用規約（免責事項）・サイトマップなどを補助情報として掲載します。
• ヘッダーは閲覧者が必ず目にする場所の為、他のどのコンテンツよりも細部にまでこだわります。シンプルスタイルのヘッダーでも動きを感じさせるコピー・色彩が必要です。
• 閲覧者はヘッダーをスルーして、その下のコンテンツを”意識的に”閲覧します。しかしながら、ヘッダーは必ず視界に入るため、無意識にも働きかけます。コンテンツの作成に労力を取られると、ヘッダー作成が簡素化される場合があります。閲覧者の思考・行動が促進される効果のない、情報掲載だけのヘッダーになっていないか確認が必要です。

是非、効果的なヘッダーを作り出してください。