メニューの配置(メニューの位置やレイアウト)

ホームページを閲覧していると、メニューの位置が様々でページの左、上、右、下にあったり全くないものもあります。また、メニューをフレームにしたものや、表組みレイアウトのものや、PHPやSSIで外部ファイルを取り込んだものがあったりします。メニューの配置による得失(有利、不利)を考えてみました

メニューの位置によるページの使い勝手

ホームページはメニュー( ナビゲーション楽天 )の位置によってページの使い勝手が違ってきます。トップページと普通のコンテンツのページでは、メニューの最適位置は違ってきます。

ホームページのトップページやサブページのトップページの場合

一般的にはホームページのトップページを開いたら、まずこのサイトはどのようなページなのか、どんなページがあるのか気になるものです。そこでトップページを開いたままで見える位置にメニューがあるのは、使い勝手が良いと言えます。毎回スクロールしないとメニューが見えないのは不親切と言えます。

ページ数が100以上に増えてくると、1つのメニューでは全てのページをカバーできないので、サブのフォルダを作ってサブページ用のサブメニューを作る必要があります。この場合も前記と同様にサブページのトップのページでは最初に見える範囲にメニューを作るのが良いでしょう。

サブメニューを作成するのは、ページのリンク数を100未満にする事がGoogleで推奨されていることも関係していますが、リンク数が多過ぎてはごちゃごちゃして使いにくいことも関係していると思います。最近のブログでは1ページにあるリンク数が何百にもなるページは珍しくなくなりました。できればリンク数を100未満にしたいものです。

普通のページの場合(各コンテンツのあるページの場合)

普通のページ、つまり、各コンテンツのあるページの場合は、ページを開いた時、メニューがすぐ見える位置にある必要はありません。

つまり、コンテンツを見る為にそのページを開いたわけですので、まずコンテンツが先に表示される方が合理的です。だからページの上部にはニューは必要ありません。左右や下にメニューを持ってくるのが良いと思います。特に、モバイル(携帯電話)でアクセスした場合は、このメニューは邪魔なだけです。

しかし、ページの最下部にメニュー(ナビゲーション)がある場合は、メニューへのリンクを上部につけてあげるのも親切というものです。

SEOから見たメニューの位置

SEO(Search Engine Optimizationサーチエンジン最適化)の観点でメニューの位置を考えると、目で見た位置ではなく、そのページのソースでの順番が重要になります。つまり、SEOではそのページで重要な事項を先に書いた方が良いからです。

メニューを先に書くよりも、コンテンツを先に持って来るべきです。フロート(foat)を使って段組をした場合は、メニューを後に書いて、それを右または左に寄せて表示させるのが良いと思います。

段組のやり方で、 position:absolute を使ってメニュー位置の絶対指定をする場合も、同様にメニューを後から書きます。この場合はメニュー位置は上、左右、下のどこでも選べます。

あまり表組レイアウトはお勧めはできませんが、表を使ったレイアウトでは、左にメニューを作るとコンテンツより先にメニューが来るので良くありません。右のメニューならコンテンツの後ろにメニューが来ることになりこちらの方がどちらかと言うとお勧めです。

フレームを使ったメニューの良い点、悪い点

メニューにフレームを使うと、メニューが別ファイルになるのでメニューの管理が楽になります。PHPやSSIが使えなくてもメニューを外部ファイルにできるので、よく使われています。

しかし、フレームはSEOの観点からはあまり良いとは言えません。それはサーチエンジンではフレームページ(2ページ以上のページ)が検索で登録されるのではなく、各ページが検索ページとして登録されるからです。検索ではフレームメニューの無いページにユーザーが訪れることになります。

そうすると、ユーザーは別のページを見たくてもメニューが無いので簡単には他のページを見ることはできません。そうならないように、各ページの下部にはメニューかナビゲーションのリンクを表示して、関連ページに飛んだりトップに戻ることができるようにするべきです。

SEOの観点から言うと、このように各ページにメニューやリンクを付けることで内部リンクが増えます。ページ数が増えてくるとSEOでは内部リンクだけでもとても有利になります。

フレームで上部にメニューを表示させているページが時々ありますが、これはやめて頂きたいものです。どうしてかと言うと、ページをスクロールさせても、上部のフレームページは表示されたままなので、コンテンツが表示される範囲が狭くなり、使い勝手が良いとは言えません。最近のブラウザは各機能が上部に広く表示されるものが多くなっていて、そうでなくても狭い表示部が更に狭くなります。

PHPを使用し外部ファイルを取り込んでメニューを作成する方法

PHPやSSIを使うとメニューだけを外部ファイルにすることができて、ファイルの管理がとても楽になります。

PHPとはHTML文書中に記述されたスクリプトをサーバーのPHPが実行しその結果を HTMLデーターとしてWebブラウザに渡すものです。

PHPファイル(拡張子は普通php)の中でメニューを呼び出すには次のようにします。

<?php include('http://domain/***/inc/menu.inc'); ?>

この方法だとドメインを変更したりしてドメインが違っていると使えないので、汎用で使えるようにするには次のようにします。

<?php include($_SERVER['DOCUMENT_ROOT'].'/***/inc/menu.inc'); ?>

ここで、「/***/inc/menu.inc」は「http://domain/***/inc/menu.inc」から「http://domain」を取り除いたもので　/　から始まります

この方法はどのディレクトリからでも同じ方法で外部ファイルを呼び出せ、ドメインが違っていても何も変更することなく使えます。またメニューファイルの拡張子はincでなくてhtmでもhtmlでもphpでも何でもかまいません。

SSIを使用し外部ファイルを取り込んでメニューを作成する方法

SSIとはServer Side Includeの略です。つまりサーバー側でインクルードするので、サーバーに負担が掛かります。その為、SSIの使用を許可していないサーバーも多いようです。

SSIファイル(拡張子は普通shtmまたはshtml)の中でメニューを呼び出すには次のようにします。

例としてドメインのルートからメニューまでのパスは　/***/inc/menu.inc　とします。

<!--#include virtual='/***/inc/menu.inc' -->

ここで、「/***/inc/menu.inc」は「http://domain/***/inc/menu.inc」から「http://domain」を取り除いたもので　/　から始まります)

この方法はどのディレクトリからでも同じ方法で外部ファイルを呼び出せ、ドメインが違っていても何も変更することなく使えます。またメニューファイルの拡張子はincでなくてhtmでもshtmでもshtmlでも何でもかまいません。

テキストブラウザ等でも確認しましょう

メニューの使い勝手はIEやFirefoxやChromeで確認するだけでなく、テキストブラウザ(Lynx)などでも確認しましょう。また、スタイルシートを適用しない設定にしたり、Javascriptを無効にしてもなんとかページが見られるか確認しましょう。インターネットユーザーは様々な方法でページを見に来ます。