メニューとメインスペースの区切り方は、実際の使用感に大きく影響を与えます 「左右型」は画面を左右に区切ってメニューを縦に並べたもので、 Webサイトの基本的な区切りのひとつです。
左右型の種類
「左右型」には、左のみの「左部メニュー型などがあります。メニューを複数列区切ることも可能ですが、メインの本文ス ペースが狭くならない範聞で設計します。
左右型のメリット
左右型は視線が自然と下へ落ちる方向にメニュー項目が並んでいるので見やすく、「多くの項 目数を掲載できる というメリッ トもあります。
特に左部メニュー型は、いちばん優位な位置である左上からメニュ ーへと 自然に目に入るので目立ち ます。右部メニュー型は全体数は少ないですが、カ ーソルが画面を横切らないという利点があり、実際には使いやすい型です。左右メニュー型では、左部・右部両方の機能を利用できます。
左部メニュー型
メニュー構成をシンプルにしたことで、個々の文字や画像に自然と関心が向きます。
下の階層に左部メニュー型
トップは上下で区切り、 2階層目から左部のメニューを使って文章などのコンテンツがメインスペースに配置されるようにします。
部分的な右部のメニュー型
上部の写真スペースと高さを合わせた右のメニュー群がきっちりとした印象。上部にメニューを乗せないことで、左上のロゴとメインの時計の写真が引き立って見えています。
メニュー項目を上や下に配置して区切り、中央にメインスぺースを確保したのが 「上下型」です。左右型と並んでポピュラーな画面分割方法です。
上下型の種類
「上下型には、上のみの「上部メニュー型」下のみの「下部メュー型」、上と下の「上下メニュー型」などがあり、上下に複数行に区切ったタイプもあります。
上下型のメリッ卜
上下型は、メニュー項目のテキストが比較的短かめで項目数が少ない場合に、「省スペースで納められる」メリ ットがあります。
特に上部メニュー型で、あれば、優位な位置にメニューが来るので目立ち度も 高くなります。
多くの項目数があると収まり切らなくて数行に分かれる場合 もありますが、行数が増えると見づらくなるので、メインスペースを碓保しながらよく検討します。この場合は、項目を整理して数を減らし、プルダウンメニューを併用するのも手です。
2行の上部メニュー
2行に分かれたカラフルな上部メニユー。2段目はリンクバナーですが、 形が揃えられているので違和感があ りません。１段目にあるメ ニュー内容 はメインスペース内に表示され、 2段目のバナーの内容は新しいウインド ウに表示されます。
アイコン的な上部メニュー
白地にリズミカルに配置された上部メニュー。オレンジの線のシンプルさを生かしてベタ面をあまり使わない構成がさわやかな印象。
フキダシ状のサブメニュー
上部に並んだメインメ ニューにオンマウスすると、フキダシ状のサブメニューが現れます。
複合型
左右型と上下型を組み合わせたスタイルが複合型ですふたつのスタイルのメリットを取り入れられるため、情報量の多いサイトで使うと便利です。
複合型の種類
左右と上下のどちらかを親フレームにし、中に子フレームを入れ子に した形が 「複合型」です。 左右、上下のうち、左上 (または右上)の コーナースペ ースを占めた方を「親(上の階層)」として使う!のが一般的です。階層を縦横でどう区分けするかは、メニュー項目の量と配置のバランスを考えながら決定します。
複合型のメリッ卜
Web サイトの規模が大きく、カテゴリーが複雑なときに多く用いられるのが複合型です。ユーザーは、 大きな区分けと下の階層の個々のコンテンツの区分けを分離できるので、操作性も向上します。上部をメインメニュー、左部をサブメニューとする構造は機能性が高いため、多くの サイ トで見られます。
上部と左部を一体に
上部と友部のメニューはつながったデザインで一体感を出しています。トップページにはさらに本文エリアにアイコンボタンを設け、よりアクセスしやすくしています 。
上部と左部をはっきり分ける
上部と左部のメニューのデザインを変えてメリハリをつ けています。はっきりとしたデザインの差が、サイトの使いやすさにつながっています。
さまざまな検索メニュー
「チーズショ ーケース」の各チーズのページでは、 上部メニューにチーズをアルフ ァベット名や原産国別で検索できるボタンが、左部メニューにチーズ名が表示さ れます。国旗をモチーフにするなど簡潔な分類で見やすくまとめられています。