サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。

今回は、WordPressテーマなどサイトテンプレートを使って構築しているサイト向けに、ロゴとグローバルメニューなどを表示するエリア「ヘッダーバー」で、やってはいけないこととその改善案を紹介しています。

ヘッダーバーとは?

ヘッダーバーとは、ページ最上部に表示されているバー(帯)を指します。メニューバー、ナビゲーションメニューと呼ばれることもあります。多くのホームページで設置されています。

ヘッダーバー

ヘッダーバーはお家で言うところの「表札」のようなものです。表札がお家の顔であるように、ヘッダーバーはサイトの顔です。

本記事では、訪問者が安心して閲覧できるような、スッキリしてバランスのいい表札(ヘッダバー)となる対策を提案しています。

ヘッダーバーを美しくするチェック項目

ちょうどいいヘッダーバーを作るのは難しくありません。ロゴとメニューのバランスを少し調整するだけだからです。それではチェックするポイントをご紹介いたします。

1. ロゴのバランスが悪い

ロゴには、縦組み、横組みなど様々なタイプがあります。ロゴは、設置するスペースに対して適正なロゴタイプを選ぶ必要があります。

縦組み 横組み
縦組みのロゴ 横組みのロゴ

例えば、次のようなヘッダーバーに設置するなら、横組みのロゴデザインが最適です。

  • 悪い例
  • 良い例
縦組みのロゴデザインを使用した悪い例
横組みのロゴデザインを使用した良い例

多くの企業では、複数のタイプでロゴを作成されているかと思います。適切なロゴタイプを設置するようにしましょう。

2. ロゴの背景が白くなってる

一般的にロゴ画像は透過PNGで作成します。透過PNGとは、背景が透明なPNG形式の画像ファイルです。透過PNGは簡単に作成できるので、「透過PNG 作り方」で検索してみてください。

ロゴ画像をJpegやGIFなどで作成すると、次のように背景が白くなってしまいます。

  • 悪い例
  • 良い例
JPG形式で背景が表示されてしまっている例
PNG形式のロゴで背景が透過されている例

上記のように余分な背景が表示されないように、ロゴ画像には必ずPNG形式のものを利用しましょう。ファイル形式(拡張子)ごとの特性は、下記記事で解説しています。

3. ロゴでスペースが窮屈になっている

設置できるスペースに対して、ロゴが大きすぎて窮屈になっていることがあります。
上下に適度な余白(マージン)がないと、窮屈な印象を与えてしまうのです。

下記のように、ロゴが上下にカツカツになっているケースです。これもよく見受けられます。

  • 悪い例
  • 良い例
ロゴのサイズが大きすぎる例
ロゴのサイズがちょうどいい例

悪い例では、ロゴのサイズが大きすぎて縦幅が詰まっています。メニューの項目数によっては横幅も窮屈に見えてしまいますので、ロゴを縮小するか、作りなおして対応しましょう。

簡単なロゴなら無料でつくれるツールがたくさんあります。下記記事をぜひ参考にご覧ください。

なお、ロゴ画像はRetinaディスプレイを想定した少し大きめのサイズでつくるのがおすすめです。MacやiPhoneでロゴ画像がぼやけないようにするためです。

4. グローバルメニューの項目数が多すぎる

メニューの項目数が多すぎて、スペースからはみ出したりロゴと引っ付いていることがあります。

  • 悪い例
  • 良い例
メニュー項目が多すぎてダメな例
メニュー項目をサブメニューに格納した例

上記のようにグローバルメニューの項目数が多すぎる場合は、メニューを階層化(サブメニューに格納)がおすすめです。
>>メニューの階層化を行う | WordPressのナビゲーションメニューの設定方法

情報量が多いウェブサイトでは「メガメニュー」がおすすめです。

5. メニューの文字数・種類が適正でない

メニューの文字をいろんな種類(欧文、漢字、カタカナなど)で書くと、違和感を覚える場合があります。理由は、フォントもデザインだからです。

  • 悪い例
  • 良い例
文字数や文字の種類がバラバラな例
文字数や文字の種類を極力揃えた例

私たちは、英語と日本語を混ぜるのが日常的になっていて気づきにくいものですが、そこから生まれる違和感は、例えばアラビア語、英語、中国語を混ぜたメニューを想像してみるとわかりやすいのではないでしょうか。

良い例では、文字数や文字の種類をできるだけ違和感のないよう統一しています。

この時、言葉を言い換えたり、工夫するのもいいでしょう。例えば、悪い例の「お客様の導入事例について」というメニュー項目は、「導入事例」だけで伝わりますよね。不要なワードは省いてシンプルにするのはありです。

まとめ

本記事では、美しいヘッダーバーをつくるためのポイントを提案しています。いずれもよくやってしまいがちな失敗であると同時に、調整するのも簡単なものばかりを紹介しています。

TCDテーマは、サイズとマージンのバランスが緻密に計算された「サイトテンプレート」です。土台ができているため、上記対策を実行するだけで美しいデザインになるよう設計されています。「TCD MUSEUM」を見ていても、「あと少し」「もったいない」と思うサイトはあります。それゆえに、上記の対策を行い、素敵なサイト作りに役立ててほしいと思っています。

ポイント:
サイズやマージンのバランスが元々悪いテンプレートの場合、改善の効果を見るのは難しいが、デザイン性の高いテンプレートの場合、改善効果は大きい。

また、適正なロゴサイズやメニュー数はTCDのデモサイトをご覧いただくことで参考になる部分はありますので、ぜひチェックしてみてください。カッコいいサイトはTCDを使えば、簡単にできます。がんばってください。

>>Beyondのデモサイト
>>SOLARISのデモサイト
>>FAKEのデモサイト

TCDテーマでやってはいけないシリーズ

第1回:ヘッダーバーでやってはいけないこと(当記事)
第2回:トップページでやってはいけないこと