経営者向けのメルマガ『経営塾』

成果につながるHPデザイン
ナビゲーションのデザイン

今回も引き続き、成果につながるデザインについて考えます。テーマは「ナビゲーション(誘導)のデザイン」です。

ナビゲーションとは

ナビゲーションは、ホームページの中の「道案内」です。

ホームページに訪れた人が、探している情報にたどり着けるよう設置された「メニュー」や「バナー」「リンク」などを総合して「ナビゲーション」と呼んでいます。

  • 探している情報がどこにあるか
  • 今現在、どのページにいるか
  • そのページ以外にどのような内容のページがあるか

などの情報を、訪問者にわかりやすく示す役割を果たしています。

いくら有益なコンテンツを提供していても、適切に訪問者を誘導できなければ、成果につなげることはできません。

ナビゲーションはホームページの成果を左右する、とても重要な要素なのです。

ナビゲーションには、

  • メニュー
  • バナー
  • コンテンツ内のテキストリンク
  • パンくず

など、いろいろな種類があります。

ひとつひとつが重要ではあるのですが、特に重要な役割を持つのが、「メニュー」です。

メニューデザインのポイント

メニューは、ホームページの「目次」のようなものです。ページのタイトルがずらっと並んでいて、クリックするとそのページが開きます。

グローバルメニューやナビゲーションメニューとも呼ばれています。

みなさんがホームページを見るときには、メニューを利用して、いろいろなページを見ているのではないでしょうか。

あまり意識しなくても適切なページにたどりつくためのメニューにするには、いくつかのポイントがあります。

(1)すべてのページで、同じ位置に設置する

ページによってメニューの位置が違うと、訪問者は混乱してしまいますので、原則としてすべてのページで同じ位置に設置します。

メニューは、ページ上部のヘッダーや、左または右のサイドエリア(サイドバー)の上部に設置することがほとんどです。

これは、訪問者がページを見たときに、すぐメニューの位置を把握できるようにするためです。スクロールしなくても見える範囲にメニューを置くのがポイントです。

(2)すべてのページで、同じデザインにする

配色やアイコンなどの素材も、全ページで共通のものを使用します。

ホームページ全体のイメージに合わせつつ、他のパーツと同化しすぎないよう、メニューだと直感的に理解できる色やアイコンを配置します。

(3)階層構造がわかるデザインにする

ページ数が多いホームページでは、内容によってページをカテゴリわけして階層構造にすると、目的のページが探しやすくなります。

このとき、階層の高い「親メニュー」、それに属す「子メニュー」であることが、訪問者に伝わるようにデザインします。階層構造が分かりやすいデザインにすることが重要です。

例えば、弊社のホームページのサイドメニューも3階層にわかれています。ご覧になってみてください。

http://www.akibare-hp.jp/form/design/

(4)現在地がわかるデザインにする

現在開いているページは、背景色や文字色を変えるなど、現在地がわかりやすいデザインにすることも大事です。

それにより、訪問者はサイト内での位置関係を把握しやすくなります。

(5)PCサイトとスマホサイトのメニューを使い分ける

PCサイトとスマホサイトでは、使いやすいメニューのデザインやレイアウトが異なります。

PCとスマホでは、画面の大きさや操作方法が異なるからです。それぞれのサイトに適したメニューを設置しましょう。

訪問者の目線でチェックしてみよう

「うちのサイトのナビゲーションデザインはどうなんだろう?」と思われた方は、ぜひ一度、訪問者の視点でチェックをしてみてください。

訪問者が苦労することなく、

  • 探している情報がどこにあるか
  • 今現在、どのページにいるか
  • そのページ以外にどのような内容のページがあるか

を理解できるナビゲーションになっているか、チェックしてみましょう。

あまりホームページを見ていない社員やご友人に確かめてもらうのもよいかもしれません。

ナビゲーションを改善するだけで、ホームページの反応が大きく変わった例がたくさんありますので、ぜひ取り組んでみてくださいね。

ホームページ制作の際、実際にデザインを作るのはデザイナーさんです。

デザインを依頼する側としては、どのような観点でデザインの良し悪しを見分ければいいのかを知っておけば、「なんとなくかっこいいけれど、成果がでない」ホームページになってしまうのを防げます。

参考になれば幸いです。

ページの一番上へ

初めてのホームページ作成

初めての方へ

初めてのホームページを作成する際に失敗しない勘所をご紹介。自作であれ、制作会社に依頼する場合であれ、ここだけは押さえて欲しいポイントをまとめました。

費用を抑えたホームページ制作

低コストでHP作成をしたい

ホームページを作成予定の方に、低料金でホームページを作る方法をご説明します。なるべく低料金でホームページ作成をしたい方は、ぜひご覧ください。

キャンペーンバナー

ホームページでお客さんを増やせる!
初心者むけガイドブック無料プレゼント

無料PDF

HP初心者むけ
集客できる
ホームページの作り方

本ガイドブックでは、初心者の方を対象に以下の3つをお話ししています。

  • どうすれば苦手な営業をせずに済むのか
  • どんなホームページを作れば、お客さんを増やすことができるのか
  • 低価格でホームページを作るにはどうすればよいか

集客でお悩みの方、ホームページ活用でお困りの方は、ぜひご一読ください。