初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  第22号  第23号  第24号  目次

プレーンテキスト版バックナンバー

今週＜第25号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2002/11/1
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題 ■ 色の組み合わせ --- 基礎と応用
　　　　　　 ■ FTP --- ファイルのアップロード

■Webで使う色の基礎知識と応用

Webページを見た瞬間に飛び込んでくるのは、「色」です。多彩な色で飾るページには、それなりの印象があります。見る側へのアピールにもなります。今回は、ページ上での配色をテーマに、色の組み合わせについて解説します。

色には次の3つの属性があります。

1. 色相
2. 明度
3. 彩度

■ 色相

色には、黒や灰色、白などの色のない無彩色と、それ以外の色のある有彩色とに分かれており、有彩色には「色合い」と呼ばれる「色相」を持っています。

例えば、赤の隣りに橙色（オレンジ）というように、近似色を隣り合わせにしていくと、色の輪ができます。これを「色相環」と呼び、色相環上の相対する位置にある色を「補色」といいます。

赤 #ff0000 と青 #0000ff は「補色」の関係にあります。補色関係にある近辺の色を「準補色」と呼び、赤に対して、緑系の色は準補色になります。

（色相環の図は正確ではありません。あくまでイメージとして表現しています。）

■ 明度

色には明るさの度合いがあり、それを「明度」と呼びます。基本的には白から黒までのグレースケールを基準として考えられ、白に近づくほど明度は高く、逆に黒に近づくほど明度が低くなります。 RGBのそれぞれに色を混ぜることにより明度が変わってきます。

■ 彩度

彩度とは色の鮮やかさ（色の強さ）の度合いをあらわし、無彩色では彩度がありません。純色の赤、青、緑に白や黒などの無彩色を少しずつ加えていくと色の鮮やかさが薄れていき、彩度は低くなっていきます。純色に近いほど彩度が高いということになります。

これら色の３属性をまとめて、ある色相に関する部分を取り出して、明度、彩度に応じて分類すると、１つの色調（トーン）が浮かび上がってきます。

ビビッド 派手 ブライト 明るい ライト 質素、地味 ダーク 暗い

色の３つの属性とそこから形成される色調を考えながら、実際の配色を考えましょう。

■実践的な配色

色の３つの属性を踏まえて、実際にページに色をレンダリングします。サンプルページを用意しましたので、合わせて参考にしてください。

■ モノトーン

黒、灰色、白をモチーフにしたモノトーンのページは、高級感、大人、モダンな雰囲気を演出します。上手に利用できれば格調の高い雰囲気が出せます。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	黒（#000000）　濃い灰色（#666666）
タイトルの文字やイラスト	灰色（#999999、#666666）
ワンポイントの背景色	黒（#000000）　灰色（#cccccc）
モノトーンのサンプルページ

■ 暖色系の配色

赤やオレンジ、茶系などの暖色系の色を使った配色など、同一系色で統一すると、派手な中にも落ち着きが見られ、彩度を落とすことで女性的で暖かな雰囲気が出ます。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	赤茶（#cc0033）　茶系色（#990000）
タイトルの文字やイラスト	赤（#ff0000）　赤茶（#cc0033、#cc3366）
ワンポイントの背景色	肌色（#ff9999）
暖色系のサンプルページ

■ エスニックを演出する配色

赤と緑をなどのビビッドな色を配することで、エスニックな雰囲気が出せます。補色の関係を利用した配色がポイントです。ですが、色弱障害者に対する配慮も忘れてはいけません。この点が難しいところでしょう。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	白（#ffffff）　茶系色（#cc3366）　赤（#ff0000）
タイトルの文字やイラスト	赤（#ff0000）　黄（#ffff00）
ワンポイントの背景色	朱（#ff6633）　黒（#000000）　緑（#009900）
エスニックカラーのサンプルページ

■ 寒色系の配色

青系統を中心とした配色は、一見寒々しい雰囲気になりますが、明度や彩度を変えることにより落ち着いた爽やかなイメージに仕上げられます。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	白（#ffffff）　濃い青（#000099）　黒（#000000）
タイトルの文字やイラスト	濃い青（#003399）　白（#ffffff）
ワンポイントの背景色	薄い青（#0066cc）　薄めの青（#99ccff、#6699ff）
寒色系のサンプルページ

■ 淡明色の配色

いわゆるライト系の色で全体の配色を設定します。パステルカラーの雰囲気を持った淡い色は、彩度と明度の高い若々しい印象を与えます。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	濃い緑（#006600）　濃い青（#000099）
タイトルの文字やイラスト	濃い緑（#006600）　薄い桃（#ffcccc）
ワンポイントの背景色	濃い緑（#99ffcc、#ccff99、#66cc66）
淡明色のサンプルページ

■ 明度を下げた中間色の配色

ライト系の色の明度を下げると印象が一変します。落ち着いた雰囲気とシック　な大人のイメージになります。ただし赤系の色の取り扱いには注意が必要です。赤系の色を取り混ぜると、変に下品になる可能性があります。

ベースとなる背景色	淡い紫（#ccccff）
ベースとなる文字色	濃い青（#006600）　濃い青緑（#000099）　白（#000099）
タイトルの文字やイラスト	濃い青紫（#6666cc）　濃い青緑（#006666）
ワンポイントの背景色	濃い青（#6699cc）　濃い青緑（#006666）
低明度中間色のサンプルページ

■ 濃暗色系の配色

濃い茶やマルーン系の色は全体的な明度が下がり、暗いイメージになってしまいます。彩度の高い明るい色を織り交ぜることにより、芯の強い主張が表現でき、気品のある引き締まった雰囲気が演出できます。

ベースとなる背景色	白（#ffffff）
ベースとなる文字色	マルーン系（#660000、#660033）　黒（#000000）
タイトルの文字やイラスト	薄い桃（#ffcccc）　薄い朱（#ff6666、#ff6633）
ワンポイントの背景色	マルーン系（#660000、#660033）
濃暗色系のサンプルページ

色の設定にはユーザ環境を考慮して、できるだけ Web セーフカラー を使うように心がけましょう。古いパソコンでは、256色しかサポートされていないものが多く、フルカラーは表示できません。どのような環境でも安全に表示できるよう、設計段階で考えておくことをお奨めします。