⇒軽い
ページ全体を表示するまでの時間が長いとダメ。
画像の使いすぎが主な原因。音楽を流すのも×
どんな内容豊富なサイトでも、トップページの表示に何十秒もかかるようでは訪問者は何も見ず（見られずに）に「戻る」をクリックしてしまうことでしょう。
CATVなどの高速ネットが普及するにはまだ時間がかかるでしょうから、現時点では、33～56kのモデムの利用者の視点で作る必要があります。
それを考えると、ページサイズが50KB以下ならだいたい10秒程度で読み込みが完了しますね。
一度ブラウザーの一時ファイルを削除して、自分のサイトを（できればテレホタイムに）見ることをオススメします。
あなたのトップページには画像がいくつ使われていますか？できれば２～３個に抑えたいところです。
本当はトップのロゴだけでも十分だと私は思います。
特に、メニューに画像を使われていると、表示されるまでリンクの場所が分からなくて訪問者にとってかなり不快です。
一度限界まで画像を減らしてみるといいでしょう。とてもすっきりします。その後要所要所に付け加えていくのがいいと思います。
また、タイトルなどに使うGIF画像は減色することでサイズを減らすことが出来ます。
トップページのレイアウトは可能な限りコンパクトにしましょう。
必要なものは、サイトタイトル・メニュー・更新情報ぐらいのものです。
それらがスクロールなしで見られると非常に快適になります。
⇒ページの横幅
レイアウトの基礎を知らない初心者に多い。
『ページの横幅は600ピクセル以内で、
横スクロールバーが出ないで見られる』
これがレイアウトの基本です。縦スクロールバーも、ＴＯＰページでだけは出ないようにデザインしましょう。縦幅の基本は400ピクセルです。
『このＨＰは1024 x 768ピクセル以上で見てください』とか書いたり窓をリサイズなんてしちゃダメだぞ。
見る人の窓がどんな大きさでも見難くならないように
⇒ページの縦幅
縦幅って例えはオカシイかもしれない。
よーはスクロールバーを多用したり、
窓の大きさを広げないと見難いＨＰは勘弁してくれって事。
訪問者の窓の大きさは、人それぞれ違うモノ
上で説明したページの横幅と同じで縦の長さも考えてデザインしないと
とんでもなく操作性が悪く見難いＨＰになってしまう。
特にフレームを使ってるＨＰに多いので注意しよう
そこまで見る人の立場になってデザイン出来ないのならば…
しょーがないけど、『最大でとか、何ピクセル以上で見て下さい』
って感じにしておく事をオススメする（笑）
このサイトも『この大きさで見て欲しい』ってサイズはあるが
窓が小さくても大きくても、それほど気にならない様にデザインしてる
⇒センタリングに注意
よく何でもかんでもセンタリングしてしまっているページを見ますが、とってもかっこわるいですよ。
例えばこんな感じ
それもそのはず、私が作成に使っているのは、
なんと初心者用として名高い、あの「ホームページビルダー」（2001）です。
⇒全角スペースで空白をレイアウト
文章や画像を
■■■■■こんな風に中央に置いたり
■■■■■■■■■■■■■■右に揃えてみたり
これで位置を調整するのは絶対に厳禁!!!!
スタイルコンテナかスタイルシートで指定しよう。
テーブルを組んでレイアウトするのがポピュラー。
⇒リンク切れ
画像が表示されずに『×マーク』出てる…
これは論外。定期的にリンク切れはチェックしよう。
⇒文字と背景色
背景色や文字色を変える時には「見やすいかどうか」に気を配ろう。例えば↓のような組み合わせはまずいゾ。
◆淡い色調
- 文字と背景色を両方とも薄い色にすると、とんでもなく読みにくい。
背景色：#ffffff
文字色：#d0f0ff背景色：#ffffff
文字色：#b3ffff背景色：#ffffff
文字色：#80ffe0背景色：#ffffff
文字色：#ffe899背景色：#ffffff
文字色：#40ffa0背景色：#ffffff
文字色：#ffd0d8 ◆同系色
- 文字と背景色を同系色にするなら、トーンを離して見やすくね。↓じゃ見にくい。
背景色：#b3e8ff
文字色：#66d0ff背景色：#c6ffb3
文字色：#60ff33背景色：#c6b3ff
文字色：#b099ff背景色：#ffc8b3
文字色：#ff8767背景色：#ffb3b3
文字色：#ff7676背景色：#fff0b3
文字色：#ffd866 ◆補色
- 色相環が反対にある「補色」を文字色と背景色に組み合わせるのは目がイタイ。色相環については、[ここを参考に]ね。
背景色：#ff99b6
文字色：#66ff80背景色：#c6ffb3
文字色：#ff99d0背景色：#c6b3ff
文字色：#ffff99背景色：#ffc8b3
文字色：#60ffd8背景色：#3377ff
文字色：#ffe899背景色：#fff0b3
文字色：#6699ff ◆ダークカラー
- 文字色も背景色も暗い色ってのは見にくいよ。
背景色：#000000
文字色：#002270背景色：#000000
文字色：#333333背景色：#660018
文字色：#990000背景色：#203800
文字色：#006838背景色：#001136
文字色：#007050背景色：#660036
文字色：#a04877 ◆ダークカラー２
- かといって、文字色を明るくしすぎるとイタイんだ…
背景色：#000000
文字色：#cc0000背景色：#000000
文字色：#ffffff背景色：#660018
文字色：#ff0000背景色：#203800
文字色：#00ff80背景色：#001136
文字色：#33ffff背景色：#660036
文字色：#ff00c0
⇒文字と背景画像
このように背景が邪魔して 文字が読みにくい。 |
背景画像をいろいろ使ってみたいって思うのは人情だよね。でも、背景画像を使う時は文字と重ねてみて、文字がちゃんと見えるかどうかに注意しよう！特に、いろいろ華やかな絵の背景画像を使っている人はチュウイ。
↑みたいな背景だと、文字が背景にかき消されちゃってみえにくいゾ。こんなふうに、部分部分によって色がものすごく変わったり、明るさがかなり違ったりする画像を背景にすると、こういうことはよくあるからね。
| 暗い色の背景画像をつかったために、文字の色を明るくしたのはイイんだけど、背景画像が読み込んでない時はこんな風になっちゃうよ！ |
あと、背景画像を使うときには、それと似たような色を背景色に指定しておくのも忘れずに！
背景が読み込めない時とか、画像を読みこまないでページを見ている人とかが→みたいに文字を読めなくなっちゃうからね。
⇒画像は使う大きさに
画像を貼るときに <IMG> の WIDTH="横幅" HEIGHT="縦幅" は自由に変えられる。つまり、大きい画像を WIDTH と HEIGHT の数値を小さくする事で小さく見せる事も出来るんだ。
でも、ちょっと待って！ WIDTH と HEIGHT の数値を変えて小さく見せても、画像そのものは大きいままなんだゾ。これは、デジカメで取った写真やスキャナで取りこんだ絵なんかを載せようと思っている人がよくやるミスだから注意。
なんでこんなことをしちゃいけないかっていうと、画像そのものは大きいんだから、とうぜんサイズもでかくなって読みこみにすげー時間がかかるからさ。
もともと大きい画像をムリヤリ WIDTH と HEIGHT で小さくした上の画像は、ファイルサイズが 43kb もあるよね。それにたいして、使う大きさにちゃんと画像そのものを小さくした下の画像は 19kb。なんとファイルサイズが半分になってる。
それに、上の画像って、なんだか汚くなかった？ あれはむりやり小さく「見せた」ためなんだ。せっかくの画像もあれじゃ台無しだよね。お客も待つのにうんざりしたあげくあんな汚い画像じゃ怒って帰っちゃうぞ。
ってことで、画像はページで使う大きさにきっちり小さくして使う
画像ソフトで「サイズ変更」とかトリミングすればいいよ。使ってる画像ソフトのマニュアルをみて小さくする方法をチェック。
⇒画像は極力使うな
背景やリンクボタン。イラスト、写真…。
画像を多用してデザインしてるＨＰ多いよね？
確かに画像を使えば手軽に見た目を良く出来る。
だけど、それは初心者の逃げ道なんだ。
『センスの良い画像を使えばセンスの良いＨＰに見える』
それは当たり前。デザインとＷｅｂデザインはイコールじゃない
画像を使わずにどれだけカッコ良く見せる事が粋なんだよね
画像の使い方で初心者のＨＰだなってわかっちゃうから注意
⇒シンプルデザインの落とし穴
白や黒が背景色のシンプルなサイトって多いよね
でも実は白と黒（モノトーン色）は難しい色なんだよ
シンプルじゃなくて物足りないにならないようにね
これらをシッカリふまえたサイトにしないと…
初心者丸出しのＨＰになっちゃうから注意してね
自分のＨＰが心配ならココでチェック♪