WEBサイトのヘッダーの役割とデザインについて

2020年10月29日

おはようございます、はんざきです。

今回はタイトルの通りWEBサイトのヘッダーについて、まとめていこうと思います

WEB制作の学習をはじめた、初心者の方々のお役に立てれば幸いです

ヘッダーの役割とは

まず、ヘッダーとはWEBサイトの上部に表示されている部分になります。サイト名やナビゲーションが良く配置されている場所ですね。

ヘッダーはヘッド(頭)になるので、ユーザーが一番最初に目につく部分でもあり、ここはどういうWEBサイトなのかを、タイトルであったり、キャッチフレーズなどで伝える情報提供の場所でもあります

ヘッダー内の基本要素

じゃあ、ヘッダー内にはどのような要素を入れれば良いのか?

これはWEBページのコンセプトやテーマなど、様々な理由で変わってくるのですが、主に以下の要素は多くヘッダー内に配置されることが多いです

  • タイトル又はロゴイメージ
  • キャッチフレーズ
  • ナビゲーション

他には、検索エリアやソーシャルボタンを設置することもあります

ヘッダーデザイン、サンプル

基本的なヘッダーデザイン

ロゴ × ナビゲーションのパターンです

ブログやコーポレートサイトなどは、こういう形が多く採用されています。この形の他にも

ロゴ × ナビゲーション × SNSボタンのパターンもあります

ECサイトのヘッダー

ECサイトなどの通信販売を行っているサイトなどは、ヘッダーに検索エリアを設けることにより、利便性を高めています。ナビゲーション部分にはショッピングカートや、購入履歴などが設置されます

まとめ

今回は基本的なヘッダーのレイアウトを解説しました。

一般的なコーポレートサイトのヘッダーレイアウトなため、汎用性があり色々応用ができますよ