動的なメニューはユーザーが使いづらい

JavaScripotなどで動的なメニューを作ることができます。

mouseoverしたところだけにサブメニューを表示して目的のページにアクセスできるため多くのページが複雑な階層になっているホームページには便利な機能です。

ユーザーはマウスをちょっと動かすとせっかく表示したメニューが消えてしまったり、目的の隣のメニューがいきなり出てきてしまったりして疲れていて指がプルプルしているとき(笑)などはいつまでたっても目的のページにたどり着けません。

すべてのユーザーがパソコンの正面にすわり、元気な状態で利用しているとは限らないので面度王に感じるかもしれませんが、1つづつメニューをたどるように作ったほうが万人にやさしいゴー無ページとなると思います。

ページ内の読み込むファイルの数を減らそう

ページ内で読み込むファイル数が多いと、ページの読み完了に時間がかかったり、ページが表示エラーになったり、部分的に欠落したり、あるいはレイアウトが崩れたりします。

特にアクセスの多い時間帯に起こりがちですが、インターネットやサーバーの不具合などの原因不明で片付けられることも多いかもしれません。

しかしこれは多くの場合、ページを作ったデザイナーの人災です。

webブラウザーがサーバーに複数のファイルの要求を出す場合に1ファイル毎に以下の処理を行います。

  1. DNSサーバーにドメインのるサーバーのipアドレスを問い合わせる
  2. DNSサーバーからipアドレスを受け取る
  3. 指定されたipアドレスに対してファイル提供要求を出す
  4. 指定されたipアドレスからファイルを読み取る
各サーバーにはサーバーの保護のために以下のような制限がかかっています。
「同時アクセス数の上限値」
webブラウザーからのファイル提供要求があまりにも多い場合サーバーは提供要求を無視しますので、cssファイルが無いとレイアウトが崩れます、画像ファイルがないと画像を中途半端に表示したり表示しなかったりします。
この現象は動的なので原因不明でそのままになったりしやすいのですが明らかに人災です。
また、1つのステップで最低でも128バイトのデーターのやり取りがあります。尤も実際には500bytes程度やり取りがあると思います。
読み込むファイルの内容が例え以下の1行だけだとしても


line-height:12pt;


やり取りされるデーターは18bytesではなく、18bytes+3000bytes*5=1518bytesとなります。
小さなファイルが多くあるとやり取りされる全体のデータ量は「2桁」多くなるケースも考えられます。
以上から、
ページ内で読み込むファイルの数は最低限にしましょう。
  1. cssファイルやjavascriptのファイルはできるだけ1つにまとめる
  2. 画像ファイルを必要以上に多くしない、1つ尾ファイルにできるのであればまとめる
などの方策が必要になります

Webデザインで大切なこと

デザインとはただ単に絵を描くことではありません。
全体の構成を考え、効果を効果的に達成するためのスキームを考え。
ここのページの設計を行うことが大切です。
そのために必要なこと、テクニックを紹介したいと思います。