あきばれホームページ作成
小さく始めて大きく育てるホームページ作成サービス

HPを使ったWEB集客が分かる!経営者向けのメールマガジン『経営塾』

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

関連情報:初心者でも簡単!【ホームページの作り方講座】

経営塾バックナンバー: 2016年5月24日配信

この記事を読むのにかかる時間:約 6 分

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

ナビゲーションとは

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

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

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

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

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

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

ナビゲーションには、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考になれば幸いです。

集客力のあるホームページデザイン

当社のホームページでは、集客力のあるホームページを作るために【ページ下部のデザイン】にもこだわったデザインを豊富にご用意しています。 プロが作成したデザインをテンプレート化し、ページ全体のデザインにこだわっておりますので、集客力のあるホームページデザインとなっております。

以下のページで、「集客力のあるホームページデザイン」を使って作成したホームページをいくつかご紹介しております。ぜひご確認ください。

集客力のあるホームページデザイン

10分で読める、身につく! ホームページ作成&活用術が、毎週届く!
8500社超の制作実績から生まれたノウハウが手に入るメールマガジンです。

ネット集客がみるみる分かる『経営塾』登録
無料

お客様を増やせる、低価格なホームページ作成サービスのサービス・料金

見込み客を育てて成約率アップ!(前編)見込み客を分類しよう

今回は、「見込み客を育てて成約率アップ!」の前編をお届けします。 インターネットで集…続きを読む

ページの一番上へ