■階層が深すぎると迷います

 目的のあるページに行くまでには、リンクを2クリックするまでで行けるようにしたいものです。ユーザが見たい情報があるとしてもどこにあるかわからなくなってしまいますし、ユーザがページを見た結果どこにいるのかわからなくなってしまうかもしれません。ウェブマスターも作成する上で階層が深すぎない方が管理しやすいと思います。私のページもリンクは、どこのコンテンツにも2クリックすれば全ていけるようになっています。

■文字コードは各ページ毎に必ず指定しましょう

 基本的に文字コードは「シフト JIS」を使用していると思いますが、「EUC」等様々な文字コードが存在しています。ブラウザ側でページを閲覧する際に自動的に文字コードを判定し正しい文字コードで見る事が出来ますが、稀に文字化けしてしまう可能性もあります。必ず文字コードを指定しましょう。普通のエディタソフトで作成していれば「シフト JIS」になると思います。<HEAD>と</HEAD>の間に以下の<META>タグを設定して下さい。


 シフトJIS
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

 EUC
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-jp">


■BGMを流すのはよく考えて

 自分の好きな曲や自作の曲を流すことはあなたの自由かもしれません。しかし、いきなりページを見たら、音楽が鳴ってしまったりしたらびっくりしませんか?それにその曲が嫌いな人もいるかもしれません。音楽サイトならばともかく、多くの人は情報を求めて来ているわけですから、安易に流すのは考えたほうが良いです。どうしてもBGMを流したい人は、最初は停止状態で聴きたい人だけに聴かせるか、BGMを流しても停止出来るようにしましょうね。

■Javaアプレットはトップページに入れるのは考えて

 Javaアプレットは起動に時間がかかる上に重いです。これをトップページに持ってくるのは止めましょう。公開するならトップページ以外にした方が良いと思います。経験上あの起動の遅さは少々きついです...Netscapeだとまた時間がかかることかかること...現在では使用しているサイトは減ってきていますよね。

■Flashについて

 近年、Flashを使用したサイトが急激に増えてきました。最近のブラウザであれば基本でFlashを見ることが出来るようになった事に加え、一般ユーザが手軽に扱えるようになった点でユーザに普及してきました。

 Flashは軽くサイトをアクティブにすることが可能になりますが、やはり少々時間がかかってしまいます。以下の事に注意しましょう。

  • 重いFlash
    あまり重いFlashを使用しないこと。軽いとはいえダウンロードには時間がかかります。

  • Now Loading
    「Now Loading」をつけることで読み込んでいることを認識させましょう。いつ始まるかわからないようなFlashは停止してしまう方や見ないで去ってしまう方もいます。

  • スキップ
    スキップ機能をつけましょう。長いFlashを見たくない人もいるでしょうし、一度訪れたユーザは何度も見ませんよね?

  • HTML or Flash選択
    HTML/Flashの選択機能をつけましょう。Flashが見ることが出来ないユーザも当然います。そうしたユーザにはページを見るなと言っているのと同じ事になってしまいますよね。


 これから主流になっていくのではないかと私はにらんでいます。実際にそこまで重さは感じないですし、あれだけのダイナミックなサイトを作れるというのは非常に有用であるといえます。個人的にはやってみたいのですけど、いかんせんソフトが高すぎます。手が出せません。(5万くらい...)

■Flashのインタフェースについて

 Flashはインタラクティブかつデザイン性の優れたインタフェース(画面)を作成することが出来ます。HTMLだけではとても表現できないようなこともFlashならば、簡単に実現することが出来るでしょう。

 よくFlashはトップページのメニュー等で使用されています。Flashのインタラクティブかつ優れたデザインを設計することが出来るためです。しかし、実際にFlashを各コンテンツに飛ぶために使用することは、ユーザビリティの観点から考えるとどうなのでしょうか?

 Flashによるインタフェースを作成する際に問題となるのは、どこを操作すればどう動作するのかが瞬時に判断しにくいと言うことです。これはFlashの自由性の高さが逆にユーザにとって迷わせる原因となっています。そしてユーザがFlashに慣れていないという問題点もあります。例えば、何かのアプリケーションソフトを使用する際には、複数のメニューの何を選んでどう動かすか迷った経験はありませんか?何をすればこのアプリケーションソフトが動くのか、どうすればこの設定を変更できるのか・・・。初めて画面を見た時にはどうしても何をしたら自分のやりたいことが出来るのかがわからずに少なからず経験があるでしょう。

 だからこそ、Flashでインタフェースを作成する際には良く考えて設計しましょう。設計をきちんとすればHTMLで作るリンクメニューよりもわかりやすいものを作成することが可能です。
  • ロールオーバー機能

  • 各必要なコンテンツにマウスが乗った時に、その部品部分の色を変更・部品を動かす等の視覚効果を与えるとユーザにとってすぐにリンクであるかどうかを判断することが容易となります。

  • 内容説明機能

  • コンテンツの内容を常時画面に載せていないのであれば、各リンクにマウスが乗った際に説明を表示するなどの機能を付けることでユーザにとってどのようなコンテンツであるかを容易に伝えることが可能となります。

 と上記のようにユーザに対してわかりやすいメニューを作成すると、慣れていないインタフェースであってもすぐに理解してもらうことが可能となります。デザイン面を考えているうちにユーザビリティがおそろかになるというのは良くある話です。デザインとユーザビリティの融合によりFlashはより使い勝手が良くなると思います。Webマスターの皆様は今一度考えてFlashを作成しましょう。

■解像度の指定をするのはあまり意味が無い

 「このサイトは解像度は1024×768でご覧下さい。」と書いてあるサイトがよくありますが、ユーザが解像度を変更することはまずありません。逆に自分自身でユーザを制限しているようなものです。指定してもマイナス面しかありませんので止めた方が良いでしょう。

 では、どのぐらいの解像度がユーザの環境で使用されているのでしょうか?当サイトにて、一ヶ月分アクセスログを取りました。その調査結果を以下に表にします。

解像度ログ一覧表
解像度アクセス数
320x320(1)
640x480(5)
640x400(1)
720x576(1)
800x600(798)
800x480(4)
800x574(3)
832x624(7)
960x720(5)
1024x819(2)
1024x600(2)
1024x768(10658)
1024x480(2)
1024x1280(2)
1152x864(461)
1152x870(81)
1152x768(21)
1204x752(1)
1280x998(3)
1280x720(9)
1280x1024(1743)
1280x600(3)
1280x854(5)
1280x800(1)
1280x960(120)
1280x768(379)
1344x840(2)
1400x1050(262)
1408x1056(3)
1440x900(7)
1600x1200(252)
1600x1024(17)
1680x1050(1)
1920x1440(3)
1920x1200(1)
2048x768(1)
2560x1024(1)


 全総アクセス数は、14868となっています。この中でユーザが使用している中で一番多い解像度は、1024x768となり、71.7%を占めています。その他に主に使われている解像度では、800x600/1280x1024等が挙げられます。このことからユーザの環境を考慮するならば800x600の解像度に合わせれば、大多数のユーザにとってストレスの無いサイトになると言えるでしょう。将来的にもユーザ環境の解像度が良くなることは有っても悪くなると言うことは無いでしょうから。

■スクロールバーについて

 よく縦スクロールするページはありますが、あまり横スクロールバーのあるページはありませんよね?横スクロールをしなければいけないページはユーザにとって、非常にストレスを感じます。ではなぜストレスを感じるのでしょう?それはマウスの作りのもあるかもしれません。今のマウスにはホイールがありますが、普通は上下の移動(縦スクロール)しか出来ませんよね?横スクロールをするには横スクロールバーをドラッグするか方向キーを使用して移動します。そのちょっとした行動をユーザは面倒に感じてしまうのです。縦・横スクロールしなければ見れないページはさらにストレス倍増です...

■トップページがCGIである必要性

 トップページにCGIのページってなんのために必要なんでしょう?確実にCookieを割り当てたい為ですか?アクセスログを取りたいからですか?その他にも様々な理由があるとは思いますが、サーバーサイドのスクリプトを一番アクセス数の多いトップページに置くことはサーバにとって迷惑な話ですし、ユーザにとってはHTMLファイルの何倍も表示に時間のかかるページを毎回見るのは正直にストレスが溜まります。余程高速なサーバで動作させるのならば、いいのですけどそうでないのならば双方にとっていいことがあんまりないので止めておきましょう。


 では、どんな時ならばいいんでしょうか?Cookieを使用してトップページカスタマイズ出来るようにするのならばいいかもしれませんね。

■index.htmlは、各ディレクトリに必ず置こう

 各ディレクトリにindex.htmlファイルを置かないと、指定されたディレクトリに入っている全てのファイルが丸見えになってしまいます。見せたくないファイルやパスワードファイルなんて入っていた場合には、目も当てられない結果が待っています。必ず各ディレクトリにindex.htmlファイルを入れましょう。index.htmlファイルの中身はディレクトリを覗かれないようにするために置くだけなので内容はどんなものでも構いません。


 例えば、私のトップページは「http://www5e.biglobe.ne.jp/~access_r/」となっています。サーバーにアクセスするとindex.html or index.htmを探しに行きます。どちらかがある場合は、index.html or index.htmファイル内容を返します。しかしない場合は、ディレクトリの内容を返してしまうということになってしまいます。私のトップページは「http://www5e.biglobe.ne.jp/~access_r/index.html」という方法でも見ることが出来るわけですが、サーバ側で自動的に探してくれるためにindex.htmlまで記述する必要なくアクセス出来るというわけです。

■サイト内のリンクは相対パス・絶対パスで書きましょう

 自分のサイトをリンクする際にURLで記載することも出来ますが、サーバーが変更になる時や自分でテストをする際に修正作業やテストが困難となります。ネットに繋いでいないとリンク確認も出来ないのでは問題ですし、サーバーが変更となった際にはリンク数・ページが多い程修正に時間が取られてしまいます。リンクは相対パス・絶対パスで記述しましょう。以下に記述方法に違いについて示します。

  • URLの記述
    http://www5e.biglobe.ne.jp/~access_r/hp/access/access_007.html

  • 相対パスの記述
    access/access_007.html

  • 絶対パスの記述
    /hp/access/access_007.html


■画像をOFFとするユーザに対して

 ブラウザの設定やブラウザの種類(テキストブラウザ)によっては、画像の表示をしない・画像表示機能が無いユーザがいます。ユーザが画像の表示をしないということは、画像を見る事が出来ません。この場合にはサイトに以下のような問題が発生します。

  1. 画像によりリンクを設定しているとリンクかどうかが判断つかない可能性がある。
    IMGタグにALT属性を指定することでリンクであることを明確にしましょう。ただし、ALT属性を指定しても「クライアントサイドクリッカブルマップ」(MAPタグにより画像の指定領域にリンクを設定すること)を使用すると個々のリンクが非常に分かりにくくなってしまう可能性がありますので使用をなるべく控えましょう。

  2. 画像を中心としたページを作成すると内容が全くわからなくなる。
    テキスト部分も画像としているとユーザに全く内容が伝わりません。単純にテキストと画像を両立するようにサイトを構築する方が良いでしょう。

  3. 背景画像が適用されず背景色が適用される。
    背景画像が適用されずに背景色が適用されます。背景色の指定を行わないとサイトイメージ・文字色とのコントラストが崩れる可能性があります。背景画像を使う際には必ず背景色を指定し、背景画像に近い色を指定することで出来るだけ崩れるのを抑えましょう。

 上記の事例2に関してはサイトによっては難しい所ですが、事例1・3はどのサイトでも取り入れることが出来ますので取り入れてみると良いでしょう。しかし実際に「ここまで考える必要があるのか?」という意見もあるかもしれません。現在のWEB上で画像OFF・画像未表示としているユーザは基本的に少ないと言えますが、このようなユーザがいることも考慮に入れることで、優しいサイトを目指しましょう。


インターネット上であなたのパソコン教室を開きませんか?
自宅でパソコン教室を簡単に開くことが出来ます。そして低リスクで効率よく稼げる仕事をさがしている。そんな方にはオススメです。
Click Here!Click Here!

Copyright © 2000-2003 ACCESS R All rights reserved. Presented by Ruby