【HTML】右側や左側に縦配置のサイドメニューを置くということ

ホームページを作る際に昔は左や右に縦に伸びたメニューをつけるのが定番であった．
レスポンシブ対応が進むにつれ，そのようなページが少なくなり，上のドロップダウン系のメニューで済ませるページが多くなっている．

しかし，新規にサイトを作る際に検討課題にあがるのがこの右側や左側に出てくるサイドメニューをどうするかということについてである．

一旦，ここでじっくりこのサイドメニューに関して考えてみたい．

サイドメニューのメリット

今までのサイトがなぜ，そのような縦型のメニューが存在していたかというと，たくさんのメニューを見ることが出来たからだ．
そもそも，ドロップダウンメニューなどというメニューも最初はなかったので，多数のページを一覧にして，簡単に見せるとなると左か右に置くしかなかったからである．

有名な阿部寛さんのホームページのように frame と frameset で分けておけば，左側のメニューと右側のコンテンツが分かりやすく表示される．
左側のメニューを触れば，右側のコンテンツが変わる．右側をスクロールしても左側に影響が及ぶことがない．

これは見え方としてはシンプルで分かりやすい．

また以前は検索エンジンのページ収集ロボットが javascript で作ったリンクを辿れないという問題があったので，サイドメニューなどを使ってリンクを表示する必要があったこともあったが，現在は javascript で作ったリンクも辿れるし，また，javascript を使わなくても多階層のドロップダウンメニューを作成することも可能なので，そういう意味でのサイドメニューの存在意義もなくなっている．

サイドメニューのデメリット

では，サイドメニューを作ることによるデメリットについて考察してみたい．
ちなみに昔は frame を使ってページを作ると右側とか左側とかだけが検索サイトの検索結果に現れて，他のページに移れない状態というのがあったが現在は検索エンジンの方が進化しているようで，そのような検索結果にはなっていないようだ．
ということで，今では frame を使うことによる最大のデメリットはスマホで見た際にそのまま小さくなるという点だろう．

frame を使わずにサイドメニューを作ることはもちろん可能だ．
その場合のデメリットを考えると以下のようになる．

• スクロールすると見えなくなる．
• サイドメニューを置くとその分だけコンテンツを表示できる面積が減ってしまう．

スクロールすると見えなくなるというのは position: fixed などを使って，固定するという手がある．
しかし，そうしたとしてもメニューの面積分はコンテンツを表示する面積は減ってしまう．

コンテンツをどう見やすく配置するか

結局，メニューは主コンテンツを読んでいる際はただ邪魔なので極力面積はとらない方が良い．

そこで，メニューは縦に細く配置するよりは，表示面積の効率のよさと読みやすさの観点から上に横に薄く表示したほうが良いことが分かる．

また，スマホの閲覧が増えたことにより，細長い画面で表示できる必要があり，その場合はそもそもサイドメニューは成立しないので，ハンバーガーメニューが考案されたのだろう．(誰が最初に考案したのかは知らないがうまいこと考えたメニューだと感心する．)

結論として，サイドメニューは不要

ということで１ページ内のコンテンツがそんなに多くない場合を除けば，コンテンツの表示面積を大きくとるという目的のためにメニューはサイドにおかないことを勧める．