ロゴ  Web技術実習
戻る〔20.色彩(三原色と三属性)〕 次へ〔22.バナー(バナー広告)とアニメーション〕 目次  

21. 色彩(色のイメージと配色) □□□□□□□□□□□□□□□□□□■□■□■

21-1 色のイメージ

 個人差はあるが、色彩によって暖かさや寒さを感じる。そのほか、重たさや軽さ、堅さや柔らかさなどを感じる。例えば、クーラーを紹介するWebページでは、そのクーラーを使うことによって涼しく感じてもらえるように寒色系の色彩でまとめる。逆に、暖房器具の場合は暖色系の色彩でまとめる。このように、Webページの内容によって色のイメージを選択する必要がある。

実習17 色のイメージのサンプルページを作成する。
 HPBは「Web」のサイトを開いておくこと。
 ファイル名は「iro3.htm」とする。ページのタイトルは「色のイメージのサンプル」とする。

(1) 暖色・寒色・中性色

暖色 赤色系統から黄色系統。明度と彩度が高い色系統。
寒色 青色系統。         明度と彩度が低い色系統。
中性色 緑色系統。紫色系統。
 中性色は、暖かさも寒さを感じない色である。

 操作1 次のようなサンプルページを作成する。
 表の各セルには背景色を設定する。


色のイメージのサンプル ←見出し(1)

暖色・寒色・中性色 ←見出し(2)

暖色 FF0000 FF6600 FF9900 FFCC00
寒色 0000FF 0066FF 0099FF 00CCFF
中性色 00FF00 66FF00 FF00FF 9900FF

(2) 重量感

軽い 明度が高い色系統(色が薄い)。
重い 明度が低い色系統(色が濃い)。

 操作2 続きに、次のようなサンプルを追加作成する。立体の図(ファイル名omosa)はペイント(200×100)で作成する。色は別のものでもよい。


重量感


  軽い       重い
(FF9999,FF6666) (990000,660000)


(3) 膨張色・収縮色

 膨張色は、大きく膨らんで見える色、収縮色は、小さく縮んで見える色のことである。

膨張色 暖色系。明度と彩度が高い色系統。
収縮色 寒色系。明度と彩度が低い色系統。

 操作3 続きに、次のようなサンプルを追加作成する。円の図(ファイル名bocho)はペイント(200×100)で作成する。色は別のものでもよい。


膨張色・収縮色


 膨張(FFCCCC)  収縮(000066)


(4) 柔らかい色・堅い色

柔らかい色 暖色系。明度が高く、彩度が低い色系統。
堅い色 寒色系。明度が低く、彩度が高い色系統。

 操作4 続きに、次のようなサンプルを追加作成する。立体の図(ファイル名katasa)はペイント(200×100)で作成する。色は別のものでもよい。


柔らかい色・堅い色


 柔らかい      堅い
(FF9999,FF6666)  (000099,000066)


(5) 進出色・後退色 (膨張色・収縮色と同じ)

進出色 暖色系。明度と彩度が高い色系統。
後退色 寒色系。明度と彩度が低い色系統。

 操作5 続きに、次のようなサンプルを追加作成する。円の図(ファイル名zengo)はペイント(200×100)で作成する。色は別のものでもよい。


進出・後退


(FFCCCC) (FF0000) (990000)
  前            後


(6) 色彩対比

 色と色が接する場合、互いの色が作用しあって単独で見たときと違って見える現象である。
 ここでは、補色対比と明度対比のサンプルを作成する。

 操作6 続きに、次のようなサンプルを追加作成する。表は3行×6列で作成する。表の属性として、表の幅(W)=200ピクセル、表の高さ(H)=100ピクセル、罫線の幅(C)=0、枠表示(D)=チェックなしに設定する。色は別のものでもよい。


色彩対比

補色対比 

(FF0000,00FFFF)  (FF0000,FF9900)

明度対比 

(999999,000000)  (999999,FFFFFF)


・補色対比 … 補色の関係にある色が接すると、互いの彩度を強める。
・明度対比 … まわりの色の明度差によって、実際の色より明るく(暗く)見える。
・色相対比 … まわりに違う色相を配置すると、まわりの色の補色に近づいて見える。
・彩度対比 … まわりの色の彩度差によって、実際の色より鮮やかに(鈍く)見える。
 ほかにも、「縁辺対比」、「面積対比」などがある。

(7) 視認性

 対象物の見やすさのことである。

 操作7 続きに、次のようなサンプルを追加作成する。表は3行×4列で作成する。色は別のものでもよい。


視認性

見やすい 見えにくい
文字 文字 文字 文字
明度差大 色相差大
明度差小
明度差小 彩度差大
明度差小
2つ目の「文字」 … 背景ff0000、前景00ffff
3つ目の「文字」 … 背景333333、前景000000
4つ目の「文字」 … 背景999999、前景00ffff

 操作8 ファイル名を入力して保存する。Webブラウザで、ファイルiro3.htmを閲覧して確認する。

 操作9 サイト「Web」のWebページとして、リンクを設定する

index.htm (トップページ)
@ 「色相・明度・彩度のサンプル」の次の行に「色のイメージのサンプル」と文字を入力する。
A 文字「色のイメージのサンプル」をドラッグして選択して「iro3.htm」にリンクを設定し、上書き保存する。
iro3.htm
@ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

 操作10 Webブラウザの更新ボタンをクリックしてリンクを確認する。

 

21-2 配色

 配色とは、2種以上の色を組み合わせることである。自分の好みで配色すればいいのであるが、不特定多数の人に美しく好まれる配色を作り出せるかがポイントである。配色するとき、色相環やトーン(色調のこと。彩度と明度を合わせた考え方である。)を利用する方法がある。

実習18 色相環を利用した配色のサンプルページを作成する。
 HPBは「Web」のサイトを開いておくこと。
 ファイル名は「iro4.htm」とする。ページのタイトルは「色相環を利用した配色のサンプル」とする。

(1) アイデンティティ(identity) … 同じ色相内で配色する。
  トーン・オン・トーン(tone on tone) … 同じ色相でトーンを変化させた配色である。
  ドミナントカラー(dominant color ) … 色相を統一した配色である。
  モノトーン(monotone) … 同じ色相内で配色する。

 操作1 次のようなサンプルページを作成する。表は2行×5列で作成する。表の属性として、表の幅(W)=400ピクセル、罫線の幅(C)=0、枠表示(D)=チェックなしに設定する。色は別のものでもよい。


色相環を利用した配色のサンプル ←見出し(1) ←ラベル名jp0

アイデンティティ アジェイセント アナロジー インターミディエート テトラード
オポーネント トライアド コンプリメンタリー

アイデンティティ(identity)        ←ラベル名jp1

#ff9999   #66ff66   #9999ff
#ff0000 #009900 #0000ff

右寄せ→      ページのトップへ


・ページ内のリンクの設定

 操作2 1行目の「色相環」をドラッグして、メニューバーから次のように選択する。

[挿入(I)] → [リンク(L)...]

 ダイアログの[ラベルを付ける]タブをクリックして、ラベル(L)の入力欄に「jp0」と入力する。[OK]ボタンをクリックする。

 操作3 同じように、表のすぐ上にある「アイデンティティ」をドラッグして、ラベル名「jp1」を付ける。

 操作4 最終行の「ページのトップへ」をドラッグして、メニューバーから次のように選択する。

[挿入(I)] → [リンク(L)...]

 ダイアログの[ラベルへ]タブをクリックする。ラベル(L)の入力欄右端の▼をクリックして、リストから「jp0」を選択する。[OK]ボタンをクリックする。

 操作5 同じように、2行目の「アイデンティティ」をドラッグして、ラベル名「jp1」へのリンクを設定する。

 ページ内のリンクは、ページが縦長になったときなどに利用する。
操作2,3は、ページ内の場所を指定するラベル名を付ける方法である。
  <A name="jp0">色相環</A>
操作4,5は、ページ内に設定したラベルへ移動するリンク設定の方法である。
  <A href="#jp0">ページのトップへ</A>

(2) アジェイセント(adjacent) … 色相環の隣り合った色同士で配色する。
  カマイユ配色(Camaieu) … ほぼ同一色相に近い、微妙な色相の差を用いた配色である。
  フォカマイユ配色(Faux-Camaieu) … カマイユ配色よりも、やや色相差がある配色である。

(3) アナロジー(analogy) … 類似した色相で配色する。色相環で30〜45度の角度差である。

(4) インターミディエート(intermediate) … 色相環で90度付近にある色同士で配色する。
  テトラード(tetrad) … 色相環で90度ごとの4色で配色する。

(5) オポーネント(opornent) … 色相環で120〜150度付近にある色同士で配色する。
  トライアド(triad) … 色相環で120度ごとの3色で配色する。

(6) コンプリメンタリー(complementary) … 色相環で165〜180度付近にある色同士で配色する。
                180度にある色を補色という。一般的に補色と配色する。
  スプリットコンプリメンタリー(split complementary) … 補色とその両隣の色を用いた配色である。
  ダイアード(dyads) … 補色との2色配色である。

 これらのほかに、次のような配色がある。
ペンタード(pentads) … 色相環で72度ごとの5色で配色する。
ヘクサード(hexads) … 色相環で60度ごとの6色で配色する。

 操作6 続きに、次のようなサンプルを追加作成する。それぞれの表の属性として、表の幅(W)=400ピクセル、罫線の幅(C)=0、枠表示(D)=チェックなしに設定する。色は別のものでもよい。
 ページ内のリンク設定についても同じように設定する。


アジェイセント(adjacent)          ←ラベル名jp2

#ff0000   #00ff00   #0000ff
#ff6600 #00ff99 #9900ff

ページのトップへ

アナロジー(analogy)             ←ラベル名jp3

#ff0000   #0ff00   #0000ff
#ffcc00 #0099ff #ff00ff

ページのトップへ

インターミディエート(intermediate)     ←ラベル名jp4

#ff0000   #00ff00   #0000ff
#ffff00 #ffcc00 #00ff99

ページのトップへ

テトラード(tetrad)               ←ラベル名jp5

#ff0000   #00ff00
#ffff00 #ffcc00
#00ff99 #ff0099
#0000ff #0099ff

ページのトップへ

オポーネント(opornent)           ←ラベル名jp6

#ff0000   #00ff00   #0000ff
#66ff00 #ff6600 #66ff00

ページのトップへ

トライアド(triad)                ←ラベル名jp7

#0099ff #0066ff #ffcc00
#ff0000   #00ff00   #0000ff
#66ff00 #ff6600 #66ff00

ページのトップへ

コンプリメンタリー(complementary)    ←ラベル名jp8

#ff0000   #00ff00   #0000ff
#00ff99 #ff0099 #ffff00

ページのトップへ


 操作7 ファイル名を入力して保存する。Webブラウザで、ファイルiro4.htmを閲覧して、ページ内のリンクなども確認する。

 操作8 サイト「Web」のWebページとして、リンクを設定する。

index.htm (トップページ)
@ 「色のイメージのサンプル」の次の行に「色相環を利用した配色のサンプル」と文字を入力する。
A 文字「色相環を利用した配色のサンプル」をドラッグして選択して「iro4.htm」にリンクを設定し、上書き保存する。
iro4.htm
@ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

 操作9 Webブラウザの更新ボタンをクリックしてリンクを確認する。

 

実習19 そのほかの配色のサンプルページを作成する。
 HPBは「Web」のサイトを開いておくこと。
 ファイル名は「iro5.htm」とする。ページのタイトルは「そのほかの配色のサンプル」とする。

(1) トーン・イン・トーン(Tone in Tone) … 同じトーン「色調」でまとめた配色である。

(2) トーナル配色(Tonal) … 中明度・中彩度の中間色系のくすんだ感じのトーンを用いた配色である。

(3) トリコロール配色(Tricolore) … 3色配色である。フランス国旗「赤、白、青」やドイツ国旗「黄、赤、黒」のように色相差の大きい配色である。

(4) ビコロール配色(Bicolore) … 2色配色である。英語ではバイカラー(Bicolor)という。「赤、白」のような、純色と無彩色を組み合わせた、トーン差の大きい配色である。

(5) ドミナントトーン配色(Dominant Tone) … トーンを統一した配色である。

(6) コントラスト配色(Contrast) … 色相、明度、彩度のいずれも反対色で配色する。

(7) セパレーション配色(Separation) … 類似した色同士や、反対色同士などの配色のときに、その色の間にどちらにも影響しない色を入れて、まとめる配色である。どちらにも影響しない色は、「セパレーションカラー」と呼ばれ、主に無彩色を用いる場合が多い。

(8) グラデーション配色(Gradation) … 段階的に変化させる配色である。色相グラデーション、明度グラデーション、彩度グラデーションなどがある。

 これらのほかに、次のような配色がある。

(9) ナチュラルハーモニー(natural harmony) … ある物体(自然界のもの)が太陽に照らされたとき、太陽のあたる部分は明るく、色相がやや黄みよりになる。日陰の部分は暗く、色相がやや青みがかって見える。このように自然界の中で見慣れている順列(ナチュラルシーケンス)に合わせて配色する。

(10) コンプレックスハーモニー(complex harmony) … ナチュラルハーモニーとは逆の配色である。青紫に近い色相を明るく、黄色に近い色相を暗くなるように配色する。

 操作1 次のような、(1)〜(8)の配色のサンプルページを作成する。それぞれの表の属性として、表の幅(W)=400ピクセル、罫線の幅(C)=0、枠表示(D)=チェックなしに設定する。色は別のものでもよい。
 ページ内のリンク設定についても同じように設定する。


そのほかの配色のサンプル  ←ラベル名jp0

トップページへ戻る

トーン・イン・トーン トーナル トリコロール ビコロール ドミナントトーン
コントラスト セパレーション グラデーション

トーン・イン・トーン(Tone in Tone)    ←ラベル名jp1

#ff6666 #ffff66 #66ff66 #ff9966 #6666ff
 
#cc6666 #6666cc #cc9966 #66cc66 #cccc66

ページのトップ

トーナル配色(Tonal)             ←ラベル名jp2

#993333   #339933   #333399
#993399 #339999 #999933

ページのトップ

トリコロール配色(Tricolore)        ←ラベル名jp3

#ff0000   #ffff00
#ffffff #ff0000
#0000ff #000000

ページのトップ

ビコロール配色(Bicolore)         ←ラベル名jp4

#ff0000   #ffff00
#cccccc #0000ff

ページのトップ

ドミナントトーン配色(Dominant Tone)  ←ラベル名jp5

#ff0000   #ff9999   #993333
#ffff00 #ffff99 #999933
#00ff00 #99ff99 #339933
#00ffff #99ffff #339999
#0000ff #9999ff #333399
#ff00ff #ff99ff #993399

ページのトップ

コントラスト配色(Contrast)        ←ラベル名jp6

色相 明度 彩度
#ff0000   #66ff66   #0000cc
#00ffff #009900 #333366

ページのトップ

セパレーション配色(Separation)     ←ラベル名jp7

#ff3333   #006600
#ff9933 #000066
↓↓↓ ↓↓↓
#ff3333
 
#006600
#666666 #cccccc
#ff9933
 
#000066

ページのトップ

グラデーション配色(Gradation)      ←ラベル名jp8

色相 明度 彩度
#ff0000   #cc00cc   #ffff00
#ff9900 #ff00ff #cccc00
#ffff00 #ff33ff #999900
#99ff00 #ff66ff #999933
#00ff99 #ff99ff #999966
#00ffff #ffccff #999999

ページのトップ


 操作2 ファイル名を入力して保存する。Webブラウザで、ファイルiro5.htmを閲覧して確認する。

 操作3 サイト「Web」のWebページとして、リンクを設定する

index.htm (トップページ)
@ 「色相環を利用した配色のサンプル」の次の行に「そのほかの配色のサンプル」と文字を入力する。
A 文字「そのほかの配色のサンプル」をドラッグして選択して「iro5.htm」にリンクを設定し、上書き保存する。
iro5.htm
@ 見出しの次に段落を挿入し、「トップページへ戻る」と文字を入力する。
A 文字「トップページへ戻る」をドラッグで範囲指定して「index.htm」にリンクを設定し、上書き保存する。

 操作4 Webブラウザの更新ボタンをクリックしてリンクを確認する。

  戻る〔20.色彩(三原色と三属性)〕 次へ〔22.バナー(バナー広告)とアニメーション〕 目次 ロゴ
 Web技術実習 Copyright © 2006,2007 Hiroshi Masuda  
inserted by FC2 system