京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

2013/10/03　追記
この記事には特にHTMLのコードなどはありません。
サイドバーを設置するためのコードをお探しの方はこちらの記事のほうが参考になるかもしれません。
CSSとJavascriptによる擬似フレーム（左メニュー）

今日はグローバルメニュー（ナビゲーション）の配置について再考してみたという趣旨の記事です。


世間では上部にグローバルナビゲーションを配置するレイアウト（長いので以下、上部メニュー型と呼びます）が一般的です。

ある程度階層が深い中規模以上のサイトでは

・上部にグローバルメニュー
・左サイドにローカルメニュー

という配置は非常にわかりやすいですね。
また、多くのサイトで配置が統一されていることにも価値があり、ユーザが操作に迷うことも少なくなります。



そんな事情を踏まえた上でなお、Nextatのサイト（のPC向け表示）はサイドバーにグローバルメニューを配置するレイアウト（以下サイドメニュー型）を選びました。

上部メニュー型にユーザが慣れているという絶対的なアドバンテージを考慮しても、下記に挙げるサイドメニュー型のメリットが魅力的に思えたためです。

サイドにグローバルナビを配置するメリット

１．ワイドディスプレイの左右のスペースを有効利用

今現在、ノートPCのディスプレイの画素数（横）は1280pxをほとんどが超えており、デスクトップで利用するディスプレイに至っては1920pxも一般的になりました。
一方でWebサイトの横幅は960pxくらいが標準的です。デスクトップの全画面表示では左右のスペースが盛大に余ります。また、ノートPCではディスプレイの高さが足りず、ページの情報を一覧しにくいサイトが多い点も気になっていました。

上部メニュー型では、これ以上サイトの横幅を増やしても、文章1行1行が長くなり却ってユーザの視線移動の負担になってしまいます。


サイドにグローバルメニューを固定するレイアウトはこのジレンマを解消するのにもってこいです。

※ブラウザのウィンドウを二枚並べればいいじゃないとも思いますが。

２．グローバルメニューの作成が楽

グローバルメニューを制作する際、テキスト入りの画像を利用するケースは多いですね。上部にグローバルメニューを横並びで配置する場合は、画像の幅の調整が少々面倒です。1点項目が追加されるだけで、画像の横幅が変更になり、サイズを計算して作り直しになる事も有り得ます。

一方、サイドメニュー型ではグローバルメニューの項目を縦に並べておけば項目の追加や削除に余計な手間が要りません。

３．リキッドレイアウトが楽

横並びのグローバルメニューやヘッダを上部に維持したままリキッドレイアウトを実現しようとすると、CSSを正しく解釈しない古いブラウザとの戦いが始まることは想像に難くないでしょう。
さらにメニューに画像を利用する場合は、画像の縮小を考慮して作らなければなりません。

サイドメニュー型の場合は、これらの煩わしいグローバルメニューやロゴの配置に悩まされることなくウィンドウ幅の変更に対応できます。
最近流行りのレスポンシブWebデザインにおいても、タブレットとPCの領域をカバーできるはずです。




サイドメニュー型のレイアウトは階層がフラットな小規模サイトに向いています。
逆に、階層が深いサイトではローカルナビゲーションをどう配置するか熟考する必要があります。


デスクトップPC向けのWebサイトのレイアウトは、すっかりデファクトスタンダードが確立された感がありますが、まだまだ改善の余地はあると思います。


WebブラウザのCSS解釈の差異縮小とHTML5/CSS3の普及のおかげで、以前より制限は少なくなりました。


王道だけに縛られず、ローカルアプリケーションを始めとする他の優れたユーザーインタフェースを参考にすれば、より良いユーザー体験が提供できるのではないでしょうか。