「CSSデザインのための色の基礎知識」の編集履歴（バックアップ）一覧はこちら
「CSSデザインのための色の基礎知識」(2015/08/07 (金) 14:44:33) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
*目次
#contents
今回はWebページをデザインしていくにあたって「どの色と色を組み合わせたら見栄えがよくなるのか？」といったことについて記述していきます。~
みなさんは色の配色について考えるとき何を意識していますか？~
例えば、Webページを作成する時に同ジャンルの他のWebページを参考にしたりして「どの情報をどこに配置するべきか？」といった事を参考にするように色も様々なページを参考にするといいかも知れませんね。~
「色相」と「トーン」を考えると、何かイメージカラーがある状態で配色を考えたりしやすくなりますよね。~
色相という言葉が出てきましたが、色には「相性がいい色」「相性が悪い色」「二つの色を仲介する色」などがあります。~
配色に迷ったときはその事を考えながら進めると進めやすくなります。
*色相環
下の図の事を色相環と言います。
#image(width=500,色相環.png)
頂点(赤)から時計回りに、
#image(width=500,色相環表.png)
のようになっています。~
0と255とその中間である127という数字が使われていますね。~
ここでは大雑把な分類をしましたが当然これらの中間色が存在しますし、更にここに色の明るさ、という要因も加わって様々な豊かな色の表現がなされます。~
色の明るさについて、明色(白を混ぜてできる明度の高い色)と暗色(黒を混ぜてできる明度の低い色)があるのですが、一般的な配色では明色や暗色を気にする必要はないみたいですね。~
色彩の理論では、&color(red){向かい合う二色、等隔三角形を形成する三色、長方形を形成する四色}を使えば、相性の&color(red){良い色合になる}みたいです。~
他にもシンプルな定義がいくつか存在します。~
以下のページを参考にさせていただき、とても詳しいページとなっています。
http://www.lifehacker.jp/2014/08/140817color.html
例えば、~
&color(red){補色色相配色}
色相環で向かい合う2色の事であり、はっきりとしたコントラストを生み出します。
色の明暗を考えながら、一方を背景、一方をアクセントとして使うといいですね。
&color(red){分裂補色配色}
一つの色とその反対色の両隣の色が使われた配色です。この配色は失敗しにくいといわれています。
&color(red){類似色相配色}
隣合う三色を使用した配色です。あまりいろいろな色を多用しすぎるとしつこくなってしまいますし、
色が近い分だけ明度によって差をつけたほうが豊かな表現となります。
&color(red){三色配色}
等間隔にある三色を使う配色。一つの色をメインとして使用して残りの二色をアクセントとして使います。
&color(red){四色配色}
とても配色が難しい配色となっています。暗めの色の組み合わせがよいみたいですね。
*それぞれの色の持つイメージ
単色でもそれぞれの色は様々なイメージを持ちます。
#image(width=400,色のイメージ.png)
目次
#contents
今回はWebページをデザインしていくにあたって「どの色と色を組み合わせたら見栄えがよくなるのか？」といったことについて記述していきます。~
みなさんは色の配色について考えるとき何を意識していますか？~
例えば、Webページを作成する時に同ジャンルの他のWebページを参考にしたりして「どの情報をどこに配置するべきか？」といった事を参考にするように色も様々なページを参考にするといいかも知れませんね。~
「色相」と「トーン」を考えると、何かイメージカラーがある状態で配色を考えたりしやすくなりますよね。~
色相という言葉が出てきましたが、色には「相性がいい色」「相性が悪い色」「二つの色を仲介する色」などがあります。~
配色に迷ったときはその事を考えながら進めると進めやすくなります。
*色相環
下の図の事を色相環と言います。
#image(width=500,色相環.png)
頂点(赤)から時計回りに、
#image(width=500,色相環表.png)
のようになっています。~
0と255とその中間である127という数字が使われていますね。~
ここでは大雑把な分類をしましたが当然これらの中間色が存在しますし、更にここに色の明るさ、という要因も加わって様々な豊かな色の表現がなされます。~
色の明るさについて、明色(白を混ぜてできる明度の高い色)と暗色(黒を混ぜてできる明度の低い色)があるのですが、一般的な配色では明色や暗色を気にする必要はないみたいですね。~
色彩の理論では、&color(red){向かい合う二色、等隔三角形を形成する三色、長方形を形成する四色}を使えば、相性の&color(red){良い色合になる}みたいです。~
他にもシンプルな定義がいくつか存在します。~
以下のページを参考にさせていただき、とても詳しいページとなっています。
http://www.lifehacker.jp/2014/08/140817color.html
例えば、~
&color(red){補色色相配色}
色相環で向かい合う2色の事であり、はっきりとしたコントラストを生み出します。
色の明暗を考えながら、一方を背景、一方をアクセントとして使うといいですね。
&color(red){分裂補色配色}
一つの色とその反対色の両隣の色が使われた配色です。この配色は失敗しにくいといわれています。
&color(red){類似色相配色}
隣合う三色を使用した配色です。あまりいろいろな色を多用しすぎるとしつこくなってしまいますし、
色が近い分だけ明度によって差をつけたほうが豊かな表現となります。
&color(red){三色配色}
等間隔にある三色を使う配色。一つの色をメインとして使用して残りの二色をアクセントとして使います。
&color(red){四色配色}
とても配色が難しい配色となっています。暗めの色の組み合わせがよいみたいですね。
*それぞれの色の持つイメージ
単色でもそれぞれの色は様々なイメージを持ちます。
#image(width=400,色のイメージ.png)
