「色彩の話」の編集履歴（バックアップ）一覧はこちら

「色彩の話」(2008/04/04 (金) 16:18:36) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

ゲーム作りに微妙に役立つ色彩の話を。
色彩の基礎と、ゲーム作りに役立ちそうな応用を同時進行で。
マイペースで更新していきます。
※これを読めば色彩がわかる！という記事ではありません。ご了承をお願いします。

#contents
&br()

*色彩の基礎の基礎
**色の三属性
色を言葉や数値で表すための基準として、色の三属性が定義されています。
以下の三属性を用いて、ほとんど全ての色を表現することができます。
（金・ルビーなどの光沢・透明感をもつ色を除く）
:色相|青・赤・黄といった色味を表す
:明度|色の明るさを表す
:彩度|色の鮮やかさを表す

***色相
色相環
#ref(http://www.webcolordesign.com/image/colorwheel.gif)


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


青、赤、緑、黄などの色味のことを、色相と呼びます。
色相どうしの関係は環状になっていて（色相環）、
近接する色ほど色相が近く、
輪の反対の色が最も色相の離れた色（補色）となります。

***明度
#ref(http://www.webcolordesign.com/image/brightness.gif)

明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。

通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします。


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。

***彩度
#ref(http://www.webcolordesign.com/image/saturation.gif)

彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。
彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。

彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。

***トーン（重要！）
#ref(http://www.webcolordesign.com/image/tone.gif)

※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


トーンとは、明度と彩度の組み合わせです。上の図にあるように、１５のブロックに分かれています。
配色においては、明度と彩度を単独で考えることは少なく、トーンで考えることが多いです。

ちなみに、同じトーン・隣接したトーンのみを用いて配色を行なうと、
ダサくないゲーム画面が簡単に作れます。

また、各々のトーンはそれぞれ違ったイメージをもっています(隣り合うトーンはイメージも似ている)。
ゲームのイメージにあったトーンを中心にして配色すると、いい感じになると思います。
|トーン番号|トーン名称|イメージワード|
|1|ビビット|あざやかな、派手な|
|2|ブライト|明るい、陽気な|
|3|ストロング|強い、情熱的な|
|4|ディープ|深い、伝統的な|
|5|ライト|楽しい、軽い、さわやかな|
|6|ソフト|柔らかい、穏やかな|
|7|ダル|鈍い、くすんだ|
|8|ダーク|暗い、大人っぽい|
|9|ペール|柔らかい、やさしい|
|10|ライトグレイッシュ|落ち着いた、おとなしい|
|11|グレイッシュ|地味な、にごった|
|12|ダークグレイッシュ|重い、固い|
|13|ホワイト|清潔な、冷たい|
|14|グレイ|寂しい、しゃれた|
|15|ブラック|高級な、フォーマルな|

※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


*色彩の基礎
**色の寒暖
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E5%AF%92%E6%9A%96.jpg)
黄や赤系の色は暖かい印象。
緑や紫系の色はどちらでもない感じ。
青系の色は寒い印象。
**色の遠近感
明るい色、暖かい色は近くに見え、
暗い色、寒い色は遠くに見える。
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E9%81%A0%E8%BF%91%E6%84%9F.jpg)
左右の図を見比べてみると、
左の図の方が微妙に長く見えるはず。
**色の重さ
明るい色は、軽い。
暗い色は、重い。
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%BD%E9%87%8D1all.JPG)
軽い色が土台だと、動きがあって軽やか。
&br()&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%BD%E9%87%8D2all.JPG)
重い色が土台だと、安定感があってどっしり。
**色の硬さ
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%9F%E3%82%89%E3%81%8B%E3%81%84.jpg)
明るい色は、軟らかい。
&br()&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E7%A1%AC%E3%81%84.jpg)
暗い色は、硬い。
&br()
ただし硬軟感は、後述の素材感に特に左右されます。
*応用編
**浮いた色をなじませる
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B_.jpg)
青や緑の色の中で、赤だけが浮いてしまっている。
こういうときは、浮いてしまった色の同系色をごく狭い面積に置いてみると、
色がなじんで落ち着きます。
&br()
&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B2__.jpg)
枠を赤色にしたり。
&br()
&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B3_.jpg)
端の方にオレンジを置いてみたり。
*注意すること
**ディスプレイの設定
ディスプレイの設定は個人個人で違うため、
製作者が意図したとおりの色をプレイヤーが見てくれるとは限りません。
特に、標準よりも暗めの設定にする場合が多いため、
暗めの配色の場合製作者の予想以上に見づらく、あるいは目立たなくなる可能性があります。
**素材感
視覚に大きな心理的効果をもたらすものとして、色彩の他に素材感があり、
場合によっては色彩よりも強く働きます。
例えば、ウールのセーターは、色に関わらず暖かい印象になりますし、
ダイアモンドはとても明るいけど非常に硬く見えます。
*参考になる本
-[[7日間でマスターする配色基礎講座>http://www.amazon.co.jp/7%E6%97%A5%E9%96%93%E3%81%A7%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E3%81%99%E3%82%8B%E9%85%8D%E8%89%B2%E5%9F%BA%E7%A4%8E%E8%AC%9B%E5%BA%A7-Design-beginner-%E8%A6%96%E8%A6%9A%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6%E6%89%80/dp/4881081535]]
　色彩のことを全く知らなくても理解できる、優れた入門書です。一読を薦めます。
&br()&br()
つっこみ・感想などあればどうぞ
#comment

ゲーム作りに微妙に役立つ色彩の話を。
色彩の基礎と、ゲーム作りに役立ちそうな応用を同時進行で。
マイペースで更新していきます。
※これを読めば色彩がわかる！という記事ではありません。ご了承をお願いします。

#contents
&br()

*色彩の基礎の基礎
**色の三属性
色を言葉や数値で表すための基準として、色の三属性が定義されています。
以下の三属性を用いて、ほとんど全ての色を表現することができます。
（金・ルビーなどの光沢・透明感をもつ色を除く）
:色相|青・赤・黄といった色味を表す
:明度|色の明るさを表す
:彩度|色の鮮やかさを表す

***色相
色相環
#ref(http://www.webcolordesign.com/image/colorwheel.gif)


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


青、赤、緑、黄などの色味のことを、色相と呼びます。
色相どうしの関係は環状になっていて（色相環）、
近接する色ほど色相が近く、
輪の反対の色が最も色相の離れた色（補色）となります。

***明度
#ref(http://www.webcolordesign.com/image/brightness.gif)

明度とは明るさの違いのことで、最も明るい色は白、最も暗い色は黒となっております。

通常明度を表す場合は明るい色のことを「明るい」「明度が高い」というような表現をします。


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。

***彩度
#ref(http://www.webcolordesign.com/image/saturation.gif)

彩度とは色の鮮やかさを表す属性です。彩度も明度と同じように「高い」「低い」でその度合いを表します。
彩度が最も高い色は鮮やかな原色となり、彩度が低くなるにつれてくすんだ色みを感じない色に変化し、最後には無彩色になります。

彩度が高い色は派手な印象を受け、彩度の低い色は地味に感じます。


※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。

***トーン（重要！）
#ref(http://www.webcolordesign.com/image/tone.gif)

※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


トーンとは、明度と彩度の組み合わせです。上の図にあるように、１５のブロックに分かれています。
配色においては、明度と彩度を単独で考えることは少なく、トーンで考えることが多いです。

ちなみに、同じトーン・隣接したトーンのみを用いて配色を行なうと、
ちょっと洒落たゲーム画面が簡単に作れます。

また、各々のトーンはそれぞれ違ったイメージをもっています(隣り合うトーンはイメージも似ている)。
ゲームのイメージにあったトーンを中心にして配色すると、いい感じになると思います。
|トーン番号|トーン名称|イメージワード|
|1|ビビット|あざやかな、派手な|
|2|ブライト|明るい、陽気な|
|3|ストロング|強い、情熱的な|
|4|ディープ|深い、伝統的な|
|5|ライト|楽しい、軽い、さわやかな|
|6|ソフト|柔らかい、穏やかな|
|7|ダル|鈍い、くすんだ|
|8|ダーク|暗い、大人っぽい|
|9|ペール|柔らかい、やさしい|
|10|ライトグレイッシュ|落ち着いた、おとなしい|
|11|グレイッシュ|地味な、にごった|
|12|ダークグレイッシュ|重い、固い|
|13|ホワイト|清潔な、冷たい|
|14|グレイ|寂しい、しゃれた|
|15|ブラック|高級な、フォーマルな|

※[[坂本邦夫の「基礎からわかるホームページの配色」>http://www.webcolordesign.com/]]さまより転載させて頂きました。


*色彩の基礎
**色の寒暖
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E5%AF%92%E6%9A%96.jpg)
黄や赤系の色は暖かい印象。
緑や紫系の色はどちらでもない感じ。
青系の色は寒い印象。
**色の遠近感
明るい色、暖かい色は近くに見え、
暗い色、寒い色は遠くに見える。
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E9%81%A0%E8%BF%91%E6%84%9F.jpg)
左右の図を見比べてみると、
左の図の方が微妙に長く見えるはず。
**色の重さ
明るい色は、軽い。
暗い色は、重い。
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%BD%E9%87%8D1all.JPG)
軽い色が土台だと、動きがあって軽やか。
&br()&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%BD%E9%87%8D2all.JPG)
重い色が土台だと、安定感があってどっしり。
**色の硬さ
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E8%BB%9F%E3%82%89%E3%81%8B%E3%81%84.jpg)
明るい色は、軟らかい。
&br()&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E7%A1%AC%E3%81%84.jpg)
暗い色は、硬い。
&br()
ただし硬軟感は、後述の素材感に特に左右されます。
*応用編
**浮いた色をなじませる
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B_.jpg)
青や緑の色の中で、赤だけが浮いてしまっている。
こういうときは、浮いてしまった色の同系色をごく狭い面積に置いてみると、
色がなじんで落ち着きます。
&br()
&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B2__.jpg)
枠を赤色にしたり。
&br()
&br()
#ref(http://www5.atwiki.jp/yaruhara/?cmd=upload&act=open&page=%E8%89%B2%E5%BD%A9%E3%81%AE%E8%A9%B1&file=%E6%B5%AE%E3%81%84%E3%81%A6%E3%82%8B3_.jpg)
端の方にオレンジを置いてみたり。
*注意すること
**ディスプレイの設定
ディスプレイの設定は個人個人で違うため、
製作者が意図したとおりの色をプレイヤーが見てくれるとは限りません。
特に、標準よりも暗めの設定にする場合が多いため、
暗めの配色の場合製作者の予想以上に見づらく、あるいは目立たなくなる可能性があります。
**素材感
視覚に大きな心理的効果をもたらすものとして、色彩の他に素材感があり、
場合によっては色彩よりも強く働きます。
例えば、ウールのセーターは、色に関わらず暖かい印象になりますし、
ダイアモンドはとても明るいけど非常に硬く見えます。
*参考になる本
-[[7日間でマスターする配色基礎講座>http://www.amazon.co.jp/7%E6%97%A5%E9%96%93%E3%81%A7%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E3%81%99%E3%82%8B%E9%85%8D%E8%89%B2%E5%9F%BA%E7%A4%8E%E8%AC%9B%E5%BA%A7-Design-beginner-%E8%A6%96%E8%A6%9A%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E7%A0%94%E7%A9%B6%E6%89%80/dp/4881081535]]
　色彩のことを全く知らなくても理解できる、優れた入門書です。一読を薦めます。
&br()&br()
つっこみ・感想などあればどうぞ
#comment