サイトデザインは、何かが欠けていたり有りすぎるだけで、全体のバランスを崩してしまうもの。特にトップページやヘッダー周りはユーザーの目にも止まりやすいため、印象に関わる影響は大きいものです。
今回は、WordPressテーマなどサイトテンプレートを使って構築しているサイト向けに、ロゴとグローバルメニューなどを表示するエリア「ヘッダーバー」で、やってはいけないこととその改善案を紹介しています。
目次
ヘッダーバーとは？
ヘッダーバーとは、ページ最上部に表示されているバー（帯）を指します。メニューバー、ナビゲーションメニューと呼ばれることもあります。多くのホームページで設置されています。
ヘッダーバーはお家で言うところの「表札」のようなものです。表札がお家の顔であるように、ヘッダーバーはサイトの顔です。
本記事では、訪問者が安心して閲覧できるような、スッキリしてバランスのいい表札（ヘッダバー）となる対策を提案しています。
ヘッダーバーを美しくするチェック項目
ちょうどいいヘッダーバーを作るのは難しくありません。ロゴとメニューのバランスを少し調整するだけだからです。それではチェックするポイントをご紹介いたします。
1. ロゴのバランスが悪い
ロゴには、縦組み、横組みなど様々なタイプがあります。ロゴは、設置するスペースに対して適正なロゴタイプを選ぶ必要があります。
| 縦組み | 横組み |
 |
 |
例えば、次のようなヘッダーバーに設置するなら、横組みのロゴデザインが最適です。
- 悪い例
- 良い例
多くの企業では、複数のタイプでロゴを作成されているかと思います。適切なロゴタイプを設置するようにしましょう。
2. ロゴの背景が白くなってる
一般的にロゴ画像は透過PNGで作成します。透過PNGとは、背景が透明なPNG形式の画像ファイルです。透過PNGは簡単に作成できるので、「透過PNG 作り方」で検索してみてください。
ロゴ画像をJpegやGIFなどで作成すると、次のように背景が白くなってしまいます。
- 悪い例
- 良い例
上記のように余分な背景が表示されないように、ロゴ画像には必ずPNG形式のものを利用しましょう。ファイル形式（拡張子）ごとの特性は、下記記事で解説しています。
WEBで使う画像ファイルには、複数の種類があります。 同じ画像ファイルでも、複数のファイル形式があり、「.jpeg」などの拡張子と呼ばれる文字列で判別できるようになっています。 当記事では、そんな画像ファイルの拡張子について、種類別の違いや特性をご紹介いたします。 拡張子とは ...
3. ロゴでスペースが窮屈になっている
設置できるスペースに対して、ロゴが大きすぎて窮屈になっていることがあります。
上下に適度な余白（マージン）がないと、窮屈な印象を与えてしまうのです。
下記のように、ロゴが上下にカツカツになっているケースです。これもよく見受けられます。
- 悪い例
- 良い例
悪い例では、ロゴのサイズが大きすぎて縦幅が詰まっています。メニューの項目数によっては横幅も窮屈に見えてしまいますので、ロゴを縮小するか、作りなおして対応しましょう。
簡単なロゴなら無料でつくれるツールがたくさんあります。下記記事をぜひ参考にご覧ください。
この記事では、無料でロゴが作れる12個のジェネレーターツールをご紹介します。 今の時代、ロゴ作成は無料で簡単にできます。本格的なロゴはプロのデザイナーに依頼したほうがいいかもしれませんが、ビジネスやWebサイト立ち上げ初期の段階では、コストカットやスピードを優先して無料ツールで作成したロゴを使...
なお、ロゴ画像はRetinaディスプレイを想定した少し大きめのサイズでつくるのがおすすめです。MacやiPhoneでロゴ画像がぼやけないようにするためです。
さまざまなテクノロジーが発展する昨今、スマホやモバイル端末でも、とても美しい画質で画像や映像を見られるようになりました。しかし、iPhoneやMacなどで採用されているRetina（レティーナ）ディスプレイで画像がぼやけていたり、鮮明に表示されないことがあります。なぜ高画質な液晶で評判のRetina...
4. グローバルメニューの項目数が多すぎる
メニューの項目数が多すぎて、スペースからはみ出したりロゴと引っ付いていることがあります。
- 悪い例
- 良い例
上記のようにグローバルメニューの項目数が多すぎる場合は、メニューを階層化（サブメニューに格納）がおすすめです。
>>メニューの階層化を行う | WordPressのナビゲーションメニューの設定方法
情報量が多いウェブサイトでは「メガメニュー」がおすすめです。
メガメニューを実装したいと思ったことはありませんか？ メガメニューは、たくさんの情報量を格納できるだけでなく、デザイン的な見た目も良いです。TCDでも多くのテーマでメガメニューを採用しています。 ただ、テーマによってはメガメニューが採用されていなかったり、デザインが微妙だったりすることが...
5. メニューの文字数・種類が適正でない
メニューの文字をいろんな種類（欧文、漢字、カタカナなど）で書くと、違和感を覚える場合があります。理由は、フォントもデザインだからです。
- 悪い例
- 良い例
私たちは、英語と日本語を混ぜるのが日常的になっていて気づきにくいものですが、そこから生まれる違和感は、例えばアラビア語、英語、中国語を混ぜたメニューを想像してみるとわかりやすいのではないでしょうか。
良い例では、文字数や文字の種類をできるだけ違和感のないよう統一しています。
この時、言葉を言い換えたり、工夫するのもいいでしょう。例えば、悪い例の「お客様の導入事例について」というメニュー項目は、「導入事例」だけで伝わりますよね。不要なワードは省いてシンプルにするのはありです。
まとめ
本記事では、美しいヘッダーバーをつくるためのポイントを提案しています。いずれもよくやってしまいがちな失敗であると同時に、調整するのも簡単なものばかりを紹介しています。
TCDテーマは、サイズとマージンのバランスが緻密に計算された「サイトテンプレート」です。土台ができているため、上記対策を実行するだけで美しいデザインになるよう設計されています。「TCD MUSEUM」を見ていても、「あと少し」「もったいない」と思うサイトはあります。それゆえに、上記の対策を行い、素敵なサイト作りに役立ててほしいと思っています。
サイズやマージンのバランスが元々悪いテンプレートの場合、改善の効果を見るのは難しいが、デザイン性の高いテンプレートの場合、改善効果は大きい。
また、適正なロゴサイズやメニュー数はTCDのデモサイトをご覧いただくことで参考になる部分はありますので、ぜひチェックしてみてください。カッコいいサイトはTCDを使えば、簡単にできます。がんばってください。
>>Beyondのデモサイト
>>SOLARISのデモサイト
>>FAKEのデモサイト
第1回：トップページでやってはいけないこと
第2回：ヘッダーバーでやってはいけないこと（当記事）
第3回：フッターでやってはいけないこと
コメント