1時間で作るホームページ WEBデザインの素

読みやすく-配色-



うぅ〜、だめだ。アクセスも伸びないし誰も感想のメールも送ってくれない!?

お姉さん

こんにちわ。

初心者

あなたは近所のWEBデザイナーになりそこねたお姉さん!

そう面接でおっこちちゃって今は無職で・・・ブツブツブツ

初心者

あ・・・でも、お姉さんのデザイン素敵ですよね!ね!

お姉さん

それほどでもないけど。ところで、どんなページを作ったの?

初心者

こ、これです↓(機嫌なおった・・・)



目が痛い例
お姉さん

この世のものとは思えない配色ね・・・。配色の問題というより目が痛いし。ホームページっていうのは内容があっても読んでもらえないと意味がないの。だから内容が読みにくい配色はアウト。

だめですか。明るくていいと思ったんだけどな〜。もう少し色を薄くしたほうがいいんですか?

 

ありがちな例



壁紙の色がキツイ

お姉さん

そうね淡い色にしたほうがいいけど←みたいな配色のページも読みにくいから気をつけて。こっちは見た目が綺麗だけど、文字の色が淡すぎて目が疲れちゃう。 もう一つは壁紙の色がキツすぎて文字が読めないページ。これも見かけるけど、壁紙のせいで内容が読んでもらえないと悲しい。

なるほど読みにくいですね。じゃあ、背景を淡い色で、文字を濃い色にすればいいですか?


お姉さん

必ず淡い背景色を指定するってわけじゃないよ。気をつけるのは、文章が読みやすいかどうか。自信がない人は↓のサンプル色を使ってみて。これなら読みにくいってことはないから。それと目にやさしい壁紙も用意したから使ってみて。


サンプル

サンプル

サンプル

サンプル

サンプル

背景:#F7F3F7
文字:#333333
背景:#FFFFF0
文字:#D55500
背景:#EFFCFE
文字:#0066CC
背景:#F7EBEF
文字:##C40062
背景:#E3FEE2
文字:#336600

目に優しい壁紙


 

わかりました〜。でも僕にも出来るかな?・・・ちょっと自信ないです。

お姉さん

自分のページ配色を決める時は、ページ全体の文字色を黒(#000000)にしてから背景色を決めて、最後に文字の色を変えていくと簡単ね。

初心者

わかりました、がんばってみます。

お姉さん

色を変えるタグは↓ね。


文字の色

<body text="*">
※ページ全体の文字色指定
<font color="*"> 文章 </font>
※タグで囲んだ文章の色を変える。

背景の色

<body bgcolor="*">
※背景の色指定

背景の画像

<body background="*">
※背景画像の指定

カラーパレット



戻る

(C)2004 105 ALL RIGHT RESERVED.