ナビゲーションの配置から視たレイアウトの考え方

thinking

漠然とWebサイトのレイアウトを考えていると、果てしなくその可能性は広がってしまいます。一言にレイアウトと言っても、それがレイアウト手法なのか、レイアウトの構造なのかによっても意味は異なります。これは、レイアウトについて考えを纏めようとした時の私の素朴な疑問です。色々な軸が同時にごちゃ混ぜになってしまう感覚がありました。

レイアウトを考える事は、Webサイトの目的を考える事なのかもしれません。
そこで今回は、ナビゲーションの配置から視たレイアウトのWebサイトに与える影響について考えてみたいと思います。

Webページの構成要素

まず、レイアウトを考える上で重要なのがWebページの構成要素です。Webページを大まかに考えると、ヘッダー領域、フッター領域、ナビゲーション領域、コンテンツ領域に分けられます。ヘッダー領域もフッター領域も位置は決められているので、考えるのはナビゲーション領域とコンテンツ領域となります。つまり、ナビゲーション領域に注目する事で、大まかなレイアウトの特徴を考える事はできるのです。ナビゲーションを見て、レイアウトを考えて、サイトタイプに結び付けようという事です。

調べる内容は至ってシンプルに、上下左右４パターンのナビゲーションの配置によるレイアウトです。まず、レイアウトの根本的な特徴を知りたかったという事が主な理由となります。ネットや書籍で調べて解かった事は次の通りです。
大まかに言えば、訪問ユーザーの視線の流れとその誘導、画面の効果的な使い方、ナビゲーションの操作性や拡張性に何かポイントがありそうです。
それでは、４つのパターンについて、これら３つのポイントを軸に特徴を見ていきます。

４つのレイアウトパターンの特徴

  • navigation_top
  • navigation_bottom
  • navigation_left
  • navigation_right

メリット

  • 目立つ位置にナビゲーションが配置されている為、訪問ユーザーは迷う事無くWebサイトを閲覧できる
  • 両サイドにナビゲーションが無い為、画面いっぱいにコンテンツ領域を展開する事ができる
  • グローバルナビゲーションだけでWebサイト全体を閲覧できる場合、非常に収まりの良いデザインとなる

デメリット

  • コンテンツを大きく使える反面、掲載する情報量が少ないと余白が目立ちスカスカなイメージを与えてしまう
  • メインビジュアルとして利用する場合、イメージのクオリティが低いと荒さが目立ってしまう
  • ナビゲーション領域が画面幅に制約されてしまうので、表示できるメニュー項目数に限りがある

メリット

  • ナビゲーション領域を下部に纏める事ができるので、画面上部に広がりのある空間を表現する事ができる
  • 画面上部からコンテンツ領域が表示される為、他のレイアウトパターンでは実現しにくい表現を比較的容易に実現する事ができる
  • ダイナミックに変化する情報掲載を利用すれば、斬新なナビゲーションスタイルと相乗効果で強いインパクトを与える事ができる

デメリット

  • コンテンツの高さがディスプレイの解像度より大きい場合、メニューが隠れてしまう
  • 見慣れない構成の為、幅広いユーザーに閲覧して欲しい場合は工夫が必要となる
  • ナビゲーション領域が画面幅に制約されてしまうので、表示できるメニュー項目数に限りがある

メリット

  • ナビゲーション領域に視線の誘導を促す事で、高い操作性が実現できる
  • ナビゲーション領域が縦に伸びる為、多くの項目を第一階層に表示したい場合に便利で、縦割りレイアウトを得意とする
  • 左袖を下に伸ばす事で容易に項目を増やす事ができる為、メニュー項目数の増減に柔軟に対応する事ができる

デメリット

  • 階層構造を表現する為にはインデントを施すなど、訪問ユーザーが理解する為の工夫が必要となる
  • ナビゲーション領域がファーストビューからはみ出てしまうと、メニュー項目の存在に気が付かない場合がある
  • 見えない線を意識したナビゲーション幅の調整が必要となる

メリット

  • まずコンテンツ領域が目に入るので、コンテンツに着目して欲しい場合に効果的なレイアウト
  • コンテンツの内容次第で、他のコンテンツへと展開していく可能性が考えられる
  • 右袖を下に伸ばす事で容易に項目を増やす事ができる為、メニュー項目数の増減に柔軟に対応する事ができる

デメリット

  • Webサイトのページ数や階層が増えてくると迷いやすくなる
  • 固定幅の場合、コンテンツの幅がディスプレイの解像度より大きいとメニューが隠れてしまう
  • 興味が沸かなければ、ナビゲーションの内容が読まれる事は少ない

まずはシンプルに…

各々のレイアウトの特徴を見てみると常に一長一短が在り、そのWebサイトの目的に応じて意味が異なってくる事が解かります。特にこのレイアウトだからこうだと決められている訳ではなく、そのWebサイトの目的に応じてレイアウトの特徴自体も変化してくるという事です。こう考えれば、冒頭のモヤモヤの意味が見えてくるのではないかと思います。
今回はシンプルに４つのレイアウトパターンから特徴を見ましたが、実際にはこうした要素を組み合わせてWebサイトの目的を表現していく事になります。サイトタイプやナビゲーションの種類、コンテンツの段組み、メインビジュアルの配置等…考え出したらキリがありません。

まずは、単純にナビゲーションの配置から視たレイアウトの特徴を考えてみる。
そのレイアウトが何を意味するのかを知る事によって、色々な表現方法に結び付いてくるのではないかと考えております。

参考文献

  • デザインラボ編集部. Webデザインの基本ルール. ソフトバンククリエイティブ, 2009, p. 5-37.

comment