ウェブサイトデザインの重要な機能である、ナビゲーション・システムの基本7パターンの機能、特徴をまとめ、あるべき方向性についての考察を行った。




  【1】基本的な上下左右のナビゲーション・バー 
    




■上部横並び型

  • オーソドックスで使いやすい。
  • 画面横幅ピクセル数に応じて文字数、項目数に限界がある。
  • 画面左右に他の要素がないため、コンテンツスペースを横いっぱいにダイナミックに活用できる。




■下部横並び型

  • 一般的なブラウザの操作ボタンから離れているため、上部配置に比べ操作性は落ちる。
  • ナビゲーション・バーが画面主要部から外れるため、そのデザインがコンテンツエリアに影響しにくい。




■左部縦並び型

  • オーソドックスで使いやすい。
  • 項目が多くなると下に延びるため、スクロールが必要。
  • 左側におよそ100ピクセル以上の横幅を占めるため、コンテンツスペースが狭くなる。
  • 常に画面上に表示されるため、イメージ上大きなウェイトを占める。





■右部縦並び型

  • 左部配置に比べ、小さい画面では画面からはみ出てしまう。
  • 画面主要部から外れるため、サブ的なナビゲーションエリアとしての活用も可能。


  【2】その他のナビゲーション機能 
    




■プルダウン型

  • 狭い表示エリアの中に多くのリンクを埋め込むことができる。
  • 一覧性に欠ける。
  • 初心者には操作しづらい。
  • JavaScriptやDHTMLなど、HTML以外の付加機能を使うため、表示が遅くなったり反応が悪かったりする。




■ポータル型

  • 多くのカテゴリやリンクを1ページに組み込む手法。
  • サイトマップ的機能もあり、一覧性に優れる。
  • たくさんの情報が詰まっているという印象と裏腹に、情報過多でうんざりした印象も受ける。




■グラフィカルレイアウト型

  • ユーザーに楽しい印象を与え、エンターテイメント機能に優れる。
 



  【3】ナビゲーション機能の方向性 
    



■ユーザーの視点で考える

ナビゲーションの機能はその名の通り、情報への道しるべとなるべき機能である。初めての人/パソコン初心者でも使いやすいか、 リピーターやパソコンを使いこなしている人でもストレス無く情報にたどり着けるか、ということを考える必要がある

ここで近年のGUIデザインの流れを考えてみると、情報を整理・グループ化するということと、不要な情報を割愛しシンプルにするという点にある。またソフトのインストールなど、どうしても複雑になってしまう情報のやりとりには、「ウィザード」という対話式のステップ・バイ・ステップで、説明行いながら目的を達成するという手法がある。

そこで基本的なポイントは、

  • 上記ナビゲーションパターンを適材適所に複合的に組み合わせて使用する。最近は上部横並び型(グローバルメニュー)と左部縦並び型(各コンテンツメニュー)を併用するパターンが多い。
  • たとえば初回利用者には一見でサイトの情報を掴めることがポイント。トップページは画像を有効活用する、人気ページへのショートカットを配置するなど、要点をスピーディに見て理解できるナビゲーションを行う。
  • リピーターやパソコンを使いこなしている人に対しては、目的の情報に素早くたどり着けるよう、プルダウンメニューを適用したり、アクセスログを分析し、プライオリティづけした画面構成を検討する。





Homeへ ページトップへ

サービスのご案内:
ホームページ制作・運営
ウェブ・データベース構築
(株)マジェスティック

  03enterprise Web Magazine
業務内容 ●ウェブサイト・デザイン●ウェブ・データベース構築■ウェブサイト運営●インターネット・イントラネットサーバー構築●CD-ROM制作●各種DTP(カタログ、パンフレット等)制作 ■会社案内 ■人材募集
Phone:03-5762-7156(ダイヤルイン)  ■お問い合わせページ E-Mail:info08(at)03enterprise.com

 

ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN,ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN,ホームページ制作,ホームページ製作,ホームページデザイン,ホームページ制作代行,ホームページ作成代行,制作会社,製作会社,ウェブサイト制作,ウェブサイトデザイン,ウェブサイト制作代行,ウェブサイト作成代行,ウェブサイト構築,インターネット,イントラネット,www,html,css,stylesheet,ホームページ,ウェブサイト,制作,製作,デザイン,システム,ショックウェーブ,フラッシュ,shockwave,flash,コンテンツ制作,webデザイン,ウェブ制作,WEB制作,ウェブ製作,web製作,ウェブ作成,WEB作成,インターネット・イントラネットサーバー構築,ファイルメーカーPro,CDML,MySQL,ウェブ・データベース構築,MySQL,PHP,MacOS,マックOS,MacOSX,MacOSX Server,Postfix,Qpopper,ネットワーク,LAN