「ヘッダーのデザインを魅力的にするにはどうしたら良いのか」と調べている方は、見た目やあしらい等デザインのアウトプットだけを参考にしていないでしょうか。

デザインはただ単純に綺麗なお手本をマネすればよいというわけではなく、それぞれのサイトの目的や情報をどのように整理すれば使いやすいか・伝わりやすいかを突き詰めて考える必要があります。情報整理の原理原則をおさえておくだけで、非デザイナーの方でも業務効率が改善されます。

普段みなさんがWebサイトを何気なく閲覧する中で好印象を持つWebサイトの多くは、ヘッダーのデザインが効果的に機能しています。一体その裏側でどんなことが考慮されていて、ヘッダーのデザインが具体的に決まっていくのかを本記事ではお伝えしていきます。

本記事では、そもそもヘッダーデザインがなぜ重要なのかからはじめて、デザインをする際のパターンやポイントなどを参考例を共有しながら解説していきます。

また、ヘッダーのデザインは作って終わりではなく継続的なメンテナンスが必要になってくるのですが、その際におすすめできる有用ツールなどもご紹介できればと思います。

ヘッダーデザインが重要な理由

一般的にヘッダーはWebサイト全体で共通化されているので、サイトのどのページでも表示され、ユーザーの目線を多く集めます。

サービスページなどの重要なページへの導線としての役割はもちろん、お問い合わせや資料請求などのコンバージョンに直接つながる要素（CTA）も含むため、どんな情報を置き、どうデザインするかが重要になってくるのです。

1-1.ヘッダーに配置すべき要素とは

ヘッダーには、下記のような項目が含まれます。

• ロゴ
• グローバルナビ（下層ページへの導線リンク）
• お問合せや資料請求
• 電話番号などの連絡先
• カートなどのボタン
• ログインボタン

このようにヘッダーには、どんなサイトなのか、どんなコンテンツがあるのかといったサイトの情報を分かりやすく整理したり、「購入」や「資料請求」といったサイトの目的に沿って、来訪者の使い勝手を上げる機能を配置するケースが一般的です。
それぞれの要素はよく見かける項目なので、特に追加の説明は必要ないかと思います。

ただし、「他社がこの項目をこの順番で置いているからウチもそうする」といった安易な考え方ではなく、それぞれの項目がなぜその場所に必要なのか改めて見直してみると、新たな発見につながることがあります。

適切に効果を発揮するヘッダーのデザインは本当によく考えて作られています。

1-2.ヘッダーはユーザーの注目を集めやすい

Webサイトへ訪れたユーザーにとってヘッダーは最初に目にする場所であり、必ず目にする場所でもあります。前述した通り、どのページに遷移してもヘッダーは必ず存在しています。

その上、ヘッダーを固定することで、ページをスクロールしても視界から消えずにずっと表示させることができます。

固定ヘッダーは一般的な技術なので、みなさんも何度も目にしたことがあるはずです。そのような特徴もあって、ヘッダーはユーザーの注目を集めやすい場所なのです。

また、ヘッダーを固定して下部にスクロールしても常に表示できるということは、ユーザーのページ遷移時の手間が減って回遊率が高くなったり、CTAが目に付きやすいのでCVRを改善できたりするというメリットもあります。

1-3.集めた注目を重要なページに誘導できる

ヘッダーはWebサイト内における導線の役割を担っています。サイトに流入してきたユーザーに対して、自社にとって重要なページの存在を効果的にお知らせできます。

例えばECサイトであれば、ユーザーに購入してほしい自社商品のカテゴリの案内、おすすめ品やSALEのページ、そういった自社にとっての重要なページを訪問ユーザーに見せていきます。

メディアサイトなどであれば、マネタイズをする上で重要な有料会員の案内など。あるいは、その手前の無料のNewsletter会員などをヘッダーに置くのも効果的です。

訪問ユーザーの視点で言えば特に深く考えずにヘッダー内の項目をクリックしていると思いますが、最もクリック数が多くなる場所の1つなので、上記のように集めた注目を自社にとって重要なページに転換していくという発想はとても大事です。

ヘッダーデザインのパターン

業態や業種によって、多種多様なパターンのヘッダーが存在していますが、ここでいくつか紹介してみたいと思います。

2-1.背景色を切り替える

https://www.jeep-japan.com/

コーポレートカラーのような、サイトのイメージにあった色をヘッダーの背景色に使うことで、明確にヘッダーとコンテンツを区切っています。導線としての十分な機能を保ちながら、サイト内のメインビジュアルや情報を邪魔することなく統一感のある形で配置できています。

最もよく使われるパターンの一つで、ユーザーにとっても見慣れたヘッダーであるため、特に訪問者の多いサイト・分かりやすさを重視したい場合にはおすすめのヘッダーデザインです。

2-2.アイコンを入れる

https://www.his-j.com/kanto.html

アイコンを追加することで、 遷移先がどんな内容のページなのかひと目で想起しやすく、何度も訪れるようなサイトであれば目印にもなります。

カラフルな色合いにするとポップさやおしゃれさが増し、グレーなど落ち着いた色で統一すればカジュアルになりすぎず、コーポレートサイトでも活用できるヘッダーデザインです。

2-3.罫線で分割する

https://www.city.shibuya.tokyo.jp/

文字情報が多いメニューや堅い内容のサイトでは、シンプルに罫線で区切ることで整然とした印象を与え、すっきりと情報を配置できます。

罫線で区切ったり、囲ったりするようなすっきりとシンプルなデザインは、BtoBのWebサイトにもおすすめです。

2-4.検索窓を設ける

https://www.myrepi.com/

ECサイトやレシピサイトなど、サイト内で探したいものがあることが想定される場合には、検索窓を他の項目よりも明確に際立たせて置いておくと親切です。

その他の事例で使われる検索窓のデザイン例としては、検索窓の下に
「エリンギ　トマト　豚キムチ　春菊　なす」
などの具体的な食材や料理名を表示させることで検索しやすいデザインにしているサイトもあります。

2-5.クリックやカーソルを乗せることで詳細メニューが出現する

https://www2.kobayashi.co.jp/

ページ数が多いサイトでは、大中小のカテゴリでメニューを分けると分かりやすくなります。

クリックした時やカーソルを乗せた場合にだけ出現するメニューにしておくと、情報を求めるユーザーのみに見せることができるので、全体の印象としてはすっきりさせることができます。

2-6.スマートフォンでのヘッダー

スマートフォンでのヘッダーデザインにおいては、ハンバーガーメニュー（三）が使われることが多いです。上記でご紹介した小林製薬様のサイトをスマートフォンで見ると、やはりハンバーガーメニューで作られています。
（画像左上の三の部分をクリックすると、右側の画像が展開されます）

ハンバーガーメニュー内ではグローバルナビの項目を単純に羅列するだけのデザインもあれば、上記サンプルのようにバナーなどを活用しながら強弱をつけてデザインするパターンもあります。

ヘッダーデザインに唯一の正解はなく、上記のパターンのどれかを使ったら良いという話ではありません。

自社サイトに訪問してくれるお客様にとって、どういう状態が理想のヘッダーなのかを考え続けることが大事です。その先に自社にとって最適なヘッダーデザインが見えてきます。最初は難しいですが、試行錯誤を重ねながらデザインを変えてみてください。

魅力的なヘッダーデザインを作るポイント

3-1.ユーザーにとっての使いやすさを意識する

見た目と使いやすさのバランスは重要です。例えば、おしゃれさを追求するあまり、遷移先が理解しづらいアイコンだけになっている。あるいは、英語表記のみになっていてなんのメニューなのかがよくわからないなど。あくまでも、ヘッダーはユーザーにとって使いやすく、情報や案内が整理されているデザインを意識してください。

3-2.ユーザーの視線を意識する

人間の視線の流れを意識してレイアウトすることで、自然と情報に触れさせることができます。横書きの文章においては、Z型やF型での視線運びを意識してみましょう。

• Z型
  横書きの文字や、商品の陳列棚においては、"左上から始まり→右へスライド→左下へ斜めに移動→右へスライド"と、Zを描くような視線運びをすることが多いです。
  Webページでもこのパターンはよく見られ、特に新規ユーザーが初訪問した際にはZ型で全体を把握しながら閲覧されることが多いため、意識して情報をデザインすると良いでしょう。

• F型
  Z型と似ていますが、左上の後、斜め下ではなく"一段下がって横へスライド"を繰り返し、より細かく順番に情報を見ていく視線の動きです。
  Webページに再訪問するユーザーの多くはこのパターンで、Fを描くように視線を運ぶので、この視線の動きを意識して情報をデザインしましょう。

3-3.見栄えを意識する

使いやすさを優先しつつも、見栄えが良い方が印象は良くなりますし、それが使いやすさに繋がります。

背景と同じような色でメニューを表記することや（黒背景にグレーの文字）、あまりにも文字を詰めすぎて余白がなさすぎるものなどは、視認性が悪くて離脱の原因になるので避けたいポイントです。

また、ヘッダーの幅が狭すぎたり、高すぎたりしてページ全体のバランスに違和感があると、言葉にならない気持ち悪さが残るので気をつけましょう。

ヘッダーデザインの作成や修正に必要なスキル

4-1.デザインの役割

先ほど（3-3.見栄えを意識する）の中でもお伝えした通り、綺麗な見栄えということ以外にも、情報が伝わりやすくてバランスの取れたサイズや余白であることが大事です。これらを全て含めて、ヘッダーをデザインしていく必要があります。

最近では、スマートフォン・PC・タブレットなど、あらゆるデバイスを意識して、より多くの人に違和感なく見てもらうためのデザインは必須です。ただし、その実装のためにはHTMLやCSSなどの知識や技術が必要になってきます。

4-2.HTMLの役割

HTML（HyperText Markup Language）は、Web上の文章を記述するためのマークアップ言語です。HTMLで適切な記述を行うことにより、テキストはもちろん、画像や音声、動画をWebページ上に表示させることができます。
例えばですが、

とタグ（＜h2＞や＜p＞など）で括っていくことで、＜h2＞は大見出し、＜h3＞は小見出し、＜p＞は段落といった意味づけを行うことができます。

ただし、この時点ではそれぞれの文章の意味づけを行うだけで、実際の見た目としてはすべて同じです。＜h2＞はフォントを大きくして、更に太字にするといったデザインを付けていくのが次でご紹介するCSSの役割です。

5-3.CSSの役割

HTMLで中身を記述したら、今度はCSSで見た目の装飾部分を記述していきます。色やサイズはもちろんのこと、余白の大きさやレイアウトなどデザインに関するものはすべてCSSで決めていきます。

このCSSとHTMLを組み合わせることでWebページが完成します（コーディング）。コーディングはヘッダーデザインを作るときもそうですが、修正するときにも必要な技術です。よって、それを扱える人間が社内にいないと、外注せざるをえなくなります。

参考

このような時に、コーディングの知識がなくても簡単にヘッダーの修正ができるツールが役立ちます。
KARTE Blocksを使えば、管理画面上で、ノーコードでテキスト内容を修正したり、サイズの変更をしたり、ロゴを差し替えたりなどもすぐにできます。直感的に使いやすいツールになっているので、ぜひチェックしてみてください。
詳細はこちら

まとめ

使い勝手の良いWebサイトの要とも言えるヘッダーなので、どういった項目を揃えて、それをどうデザインしていくかは非常に重要です。ユーザー視点で使いやすいものになっているかを確認しながらデザインを作り込んでいきましょう。

ヘッダーを見直し改善することで、効果的にサイト回遊を促したりコンバージョンにつなげたりすることができるので、定期的にメンテナンスや見直しを行いながら、より良いサイト作りにつなげていってください。