”Setロゴマーク”
2021年5月11日  |  Design

Webページの柱!ヘッダーデザイン大辞典

こんにちは!Setのデザイナー櫻田です。

みなさんはWebデザインどこから着手しますか?わたしは(ワイヤーをひいたあと)ついつい上から考えてしまいます。そんなときに立ちはだかるのが、ヘッダーのデザイン。ヘッダーは訪れた最初の画面にも、他のページに遷移したときも、ある時はスクロールしたときも表示されるため、とても目に入る存在です。しかも、ひとくちにヘッダーと言っても、そのデザインはサイトのジャンルやコンテンツ数に応じて多種多様で、表現の幅が非常に広く、迷ってしまいます。

そこで今回はヘッダーのデザインをパターン別にまとめてみます!

そもそも、ヘッダーの存在意義とは?

本題に入る前に、ヘッダーにはどんな意味があるのか、改めて考えてみます。

01|下層ページ・コンテンツへの誘導 = “ナビゲーション”

トップページから下層ページまで共通されることの多いヘッダーは、サイト内にどんなコンテンツがあるかを示す重要なパーツです。

多くの場合、サイト内の別ページへのリンクを備えた「ナビゲーション」や「メニューボタン」が表示され、その役割を担っています。

02|サイトの所属を表す= ”サイン”

ヘッダーは多くの場合、サイト名や社名、サービス名やそのロゴが置かれています。

これにより、ユーザは自分がいまどこのサイトを見ているかを視覚的に判断することができます。お店における看板のような役割です。

また、ヘッダーに置かれたロゴは慣習的にトップページのリンクとなっていることが多く、これもナビゲーションの役割を担っているといえます。

03|サイトデザインの統一感を出す = “

先述のとおり、ヘッダーはトップページから下層ページまで共通であることが多いです。そのため、ヘッダーはサイト全体のデザインの統一感を出すためにとても重要です。

 

ヘッダー大辞典

さてここからが本題です。今回は、ヘッダーのデザインを大まかに6つに分類してみました。パターン違いのデザインや、実際のWebサイトも記載しているので、ぜひヘッダーを考える時の参考にしてみてください。

01|スタンダードなヘッダー

ロゴとナビゲーションが水平に配置された、背景のあるヘッダー

左側にロゴ、右側に(あるいはロゴに続くように)ナビゲーションが入っているタイプのヘッダーです。

最もスタンダードでユーザを迷わせにくく、また、コンテンツの量を調整しやすいという利点があります。

一方で、ページ上部にたくさんの情報があるため、ごちゃついた印象になったり、ヘッダーでコンテンツが隠れてしまうといった欠点もあります。

株式会社ベネッセホールディングスのホームページのスクリーンショット

株式会社ベネッセホールディングス
https://www.benesse-hd.co.jp/ja/

 

最近では、このタイプのヘッダーに角丸をつけて余白をつけて、「抜け感」を表現するヘッダーもあるようです。個人的にかわいい上に分かりやすくて好きなヘッダーです。

スタンダードなヘッダーのアレンジ例

上から、通常のヘッダー、両サイドに角丸とマージンをつけた例、片方だけに角丸とマージンをつけた例

 

02|透明ヘッダー

ロゴとナビゲーションが水平に配置された、背景のないヘッダー

01のスタンダードヘッダーのコンテンツはそのままに、ヘッダーの背景色を透明にしたのがこのタイプのヘッダーです。

透明にすることでコンテンツを全画面で表示することができ、従来のヘッダーの難点だった窮屈感をへらすことができます。

 

一方で、背景色が無いためヘッダーロゴや文字が下の コンテンツと被った時に見づらいという難点もあります。

 

Goodpatch グッドパッチ|デザインの力を証明する
https://goodpatch.com/

03|透明ヘッダー+メニューボタン

透明ヘッダーからさらにヘッダーの情報量を減らしたのがこちらのパターンです。

ヘッダーのナビゲーションをハンバーガーメニューに格納することで、スッキリとした印象になります。また、ヘッダーに選択肢が無いことでトップページをよく見てもらえるという効果もあるかもしれません。

逆に言えば、メニューを押すというひと手間が増えることで別ページへの遷移は促しづらくなると言えます。

 

株式会社メルカリ
https://about.mercari.com/

04|ホバリングヘッダー

名前はわたしが勝手にそう呼んでるだけです!

最近あちこちで見かけるようになった割と新しいタイプのヘッダーです。通常はページの1番上にピッタリとくっついているヘッダーに少し余白をとって、大きなボタンのようなデザインになっています。

これも透明ヘッダーと同じように従来に近い形式のまま抜け感を表現することができます。

一方で余白を取っている分画面におけるヘッダーの占める割合が高くなってしまうという欠点もあるため、スクロールでヘッダーをしまうなどの工夫が必要かもしれません。(そのままでもかわいいのでいい気もしますが…!)

 

株式会社サイバーエージェント
https://www.cyberagent.co.jp/

 

また、このホバリングヘッダーは角丸との相性がとてもいいです。形を変えるだけでだいぶ印象が変わってくるので、サイトデザインにあわせて工夫してみると楽しいかもしれません。

05|サイドヘッダー

これをヘッダーど呼ぶのかは議論があるかもしれません笑 あとこれもわたしが勝手に呼んでるだけです。

個人的には、サイドバーなどはヘッダーと別にある印象なので、ヘッダーの情報が横に配置されてるタイプはヘッダーと呼んでいい気がします。

 

サイドヘッダーの多くは、ヘッダーが固定された状態でコンテンツだけがスクロールされる仕様になっています。他のサイトと違う印象を与えられるだけでなく、ナビゲーションが目に入りやすいためページの回遊を促す効果もあると思われます。

 

スタイリッシュな印象を受けるサイドヘッダーですが、レスポンシブデザインの統一性が取りづらいため、主にPCでアクセスされることの多いサイトの方が有用かも知れません。

ソフトバンクグループ株式会社
https://group.softbank/

 

ちなみに、弊社のコーポレートサイトもこのサイドヘッダー形式です。

Set | Creative Production
http://setinc.jp

 

06|縦書きヘッダー

初めてこのタイプを見たとき、「あ、ヘッダーのナビゲーションって縦書きでもいいんだ……」と衝撃を受けました。

横書きが基本のWebサイトでは基本あまり見かけませんが、縦書きが文化として残っている日本語ならではの表現だと思います。

使いどころはだいぶ限られている気もしますが、ハマるととてもかっこいいデザインです。

実相山 正覚寺 公式サイト
https://nakameguro-shogakuji.or.jp/

 

 

さいごに

こうやってまとめてみると、ひとくちにヘッダーと言っても本当にさまざまな表現があるなと思います。ヘッダーのデザインを変えるって少し勇気がいりますが、いくつか挑戦してみたいです!

 

好きなヘッダーデザイン等あれば教えてください〜!!