トップページのメニューはわかりやすく！

　ホームページを作っていけば、必然的にコンテンツも増え、それに比例してメニューの数も増えていきます。そして遭遇するのがメニューで埋め尽くされたトップページ。メニューが多すぎると、訪問者にはどれが何だか今ひとつピンとこない。いくつかクリックしてみる物の、見たい情報にたどり着けず、もういいやとブラウザを閉じられてしまったり…。

　メニューが多くてごちゃごちゃしてる時は、思い切ってサブメニュー化してしまいましょう。似たようなジャンルごとに分類して、その大項目をメニューとしてトップページに提示する。分類に当てはまらない物は別の場所でリンクを用意すればすっきり。

　たとえばこのサイトだと、左側に分類したメニューを表示し、その分類に当てはまらなかった物は、ページの右上にリンクを用意しています。

　ところが、あまりにも分類しすぎると、今度は、そのサブメニューの内容が訪問者に伝わらなくなってくる。たとえば「このホームページについて」とか「ホームページ制作日記」といったサブメニューならわかりやすいですが「雑多」とか「日々つらつら」といった表記のサブメニューになってくると、新規の訪問者には内容がピンと来ないわけです。そういったことを避けるには、、それぞれのリンクの簡単な説明文をどこかで表示するようにしておくと良いでしょう。同様に、サブメニューではなく、通常のメニューでも、簡単な説明文が表示されるようにしておけば、わかりやすさがグンとアップします。

　 マウスをポイントすると説明書きを表示する

　画像のaltタグにそのリンクの説明を書く方法です。とってもお手軽。欠点は、画像ファイルにしか使えないこと。

<a href="***.htm"><img src="***.gif" alt="説明文" border=0">自己紹介</a>

　（黄色の三角にマウスをあててみてください。）

　 ステータスバーに説明書きを表示する

　あまりお薦めしませんが、ステータスバー（ブラウザウインドウの左下）に任意の文字を表示させる方法もあります。なぜ、薦めないのかと言えば、ステイタスバーにはリンク先のURLが表示されるのですが、これを使ってしまうとそのURLが表示されなくなるからです。

　また、欠点として、長い文章には不向きなのと、IE3、NC3以上であることです。

<a href="***.htm" onMouseOver="window.status='説明文';return true;"onMouseOut="window.status=''">自己紹介</a>

　（文字にマウスをあててブラウザの左下のステータスバーを見て下さい。）

　 タイトルタグを使う（IE4以上専用）

　ブラウザがIE4以上に限定されるのですが、画像のaltタグの拡張版で、任意のタグに使うことができるので応用がききます。Aタグ以外にもPタグ、FONTタグなど、いろいろなタグに指定できるのがポイントです。

<a href="***.htm" title="説明文">自己紹介</a>

　（文字にマウスをあててみて下さい。）

　 テキストボックスに表示させる

　テキストボックスに簡単な説明を表示させることが出来ます。テキストボックスさえ用意すればあらゆる説明文をそこに表示できるので、なかなかお薦めです。ただし、テキストボックスの横幅は、同じ数字を指定してもIEとNCではその幅に差があるので注意して下さい。

　また、IE4以上、NC4以上です。テキストボックス部分とリンク部分は離してかまいません。

* テキストボックス
<form name="comment">
<input type="text" name="view" size="40" value="説明表示">
</form>

* リンク部分
<a href="**.htm" onMouseOver="document.comment.view.value='説明文'">自己紹介</a>

自己紹介
車

　（それぞれの文字にマウスをあててみて下さい。）

[ 戻る ]