コンテンツメニューの表示
罫線を使おう
携帯サイトでコンテンツメニューを表示する時に役立つのが罫線文字です。
■コンテンツタイトル
├メニュー1
├メニュー2
└メニュー3
├メニュー1
├メニュー2
└メニュー3
このように罫線を使って階層表示にようにまとめると見やすくなります。
■コンテンツタイトル
┣メニュー1
┣メニュー2
┗メニュー3
┣メニュー1
┣メニュー2
┗メニュー3
罫線の太さは2種類あるのでサイトの雰囲気になどに合わせて使えばさらに効果的です。
※罫線文字は「けいせん」と入力し変換すれば表示されます。
コンテンツと説明文
コンテンツに対して簡単な説明文があると、次のクリックした時にどんなコンテンツがあるかが分かりやすくなります。結果、より使いやすいサイトを表現できることになります。
しかし、説明文も場合によってはうるさく見えてしまうこともあります。そんな時は、文字の大きさと色がポイント。
<font color="#CC0000">■コンテンツタイトル</font>
<font color="#999999">コンテンツ説明</font>
├<a href="#">メニュー1</a>
├<a href="#">メニュー2</a>
└<a href="#">メニュー3</a>
<font color="#999999">コンテンツ説明</font>
├<a href="#">メニュー1</a>
├<a href="#">メニュー2</a>
└<a href="#">メニュー3</a>
このような感じで、コンテンツタイトルの文字の色と、説明文の文字の色を工夫します。
このように説明文の色を通常の文字よりも薄くさせます。こうすると説明文がそれほど目立つものではなくなり、全体的にうるささも感じられなくなりますよね。
<font color="#CC0000">■コンテンツタイトル</font>
<font color="#999999" size="1">コンテンツ説明</font>
├<a href="#">メニュー1</a>
├<a href="#">メニュー2</a>
└<a href="#">メニュー3</a>
<font color="#999999" size="1">コンテンツ説明</font>
├<a href="#">メニュー1</a>
├<a href="#">メニュー2</a>
└<a href="#">メニュー3</a>
また、文字の大きさも新しめ機種しか対応していませんが利用する価値はあります。
これで、見易さもぐっと高くなりましたね。
