使いやすさの基本は軽く、シンプルなことです。ホームページをつくり始めの頃は、「画像をたくさん使って装飾したい」とか「JavaScriptで格好いい演出をしたい」とかいろいろ考えがちです。でも、ほとんどの訪問者は落ち着いた、動きのないページを好みます。
まずは、軽くシンプルなページにするためのポイントを押さえていきましょう。
HTMLファイルもCSSファイルもただのテキストファイルです。これに余分なものを加えなければ、軽く、シンプルなページが勝手に出来上がります。
ですから、ページをデザインするときは余計なことをしてページを重くしないように気をつければいいんです。
巨大な画像を貼らない、これは基本ですね。読み込むのに時間がかかってイライラするだけです。
サイズの小さな画像でも、たくさん使えば結局合計サイズが増えて重たいページになります。それよりも、できるだけCSSにデザインを任せたほうが、軽いページに仕上がります。
JavaScriptを使ってステータスバーに文字を流したり、文字をスクロールさせたりする方法を、「小技集」と称して教えているところがあります。でも、こういうテクニックはページを使いにくくするだけです。
ステータスバーに「ようこそ」と文字が流れると、何か便利になるでしょうか？これは逆に、「うっとうしい」「眼が疲れる」と思われるだけです。
FLASHやアニメーションGIFも同様です。とにかく動くものは排除してください。
もうひとつ、レイアウトを固定しないようにするのも大切なことです。
フォントサイズを次のようにpx(ピクセル)で指定してしまうと、ブラウザの設定で文字サイズを「大」や「小」にしても、サイズが変わらなくなってしまいます。
body { font-size: 10px; }次のように%で指定してください。これならブラウザで設定した文字サイズに連動してくれます。(emでもよいのですが、一部のブラウザにバグがあるので%で指定したほうがよいでしょう。)
body { font-size: 100%; }ボックスの横幅をwidth属性で固定してしまうと、ブラウザの幅を縮めたときに水平スクロールバーが現れます。これが出ると、1行読むたびにスクロールバーを左右に動かすはめになります。
次のように%で指定すればブラウザの幅を縮めるとボックスの幅も縮まるので、水平スクロールバーが出なくなります。
div { width: 80%; }レイアウトの都合上横幅を固定するときでも、せめて800×600のウィンドウで水平スクロールバーが出ないようにしたいところです。
フレームは使わないほうがいい、と断言します。なぜかと言うと、
など、使う側にとってデメリットが非常に多いからです。
<a href="page.html" target="_blank">と書かれたリンクは、クリックしたときに新しいウィンドウが開きます。でも、これは避けたほうがいいです。理由は、新しいウィンドウを勝手に開かせない方法がないからです。
普通にリンクをしておけば、閲覧者が新しいウィンドウで開くか同じウィンドウで開くかを選ぶことができます。
IEなどはリンクをブラウザのアドレスバーにドラッグすることで、target="_blank"が指定されたリンクでも同じウィンドウで開くことができます。しかし、このテクニックを知っている人はあまりいませんし、やるにしても面倒な操作であることは間違いないでしょう。