2007-05-17 Thu

覚えておきたい配色のワザと便利なツール RSS あとで読む kwout this!

color

前回「無彩色の便利な使い方」を紹介しました。続いて「有彩色」の配色の手法と便利なツールをご紹介したいと思います。

色の3つの要素

 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。

色相(しきそう:Hue)
色相とは、赤・橙・黄・緑・青・紫などの色みのこと。
(色相はつながりあって色相環という輪になります。)
彩度(さいど:Saturation:Chroma)
色の鮮やかさ、強弱の度合いのこと。
彩度が高い(鮮やか)⇔彩度が低い(鈍い)
明度(めいど:Value:Brightness)
色の明るさの度合いのこと。
明るい(白)⇔暗い(黒)

配色の手法

配色の手法には、法則のようなものがあります。

  • 色相を手がかりにした配色
  • 明度を手がかりにした配色
  • 彩度を手がかりにした配色
  • トーンを手がかりにした配色
ドミナントカラー配色
同じ色相で統一させた配色
ドミナントトーン配色
同じトーンで統一させた配色
トーンオントーン配色
同じ色相でトーン(色調)を変化させた配色
穏やかで落ち着いた配色ですが、平凡になりやすい
トーンイントーン配色
明度は同じで色相を変化させた配色
明暗が同じなので、違う色相を使っても違和感がない
カマイユ配色
色相 ・トーン共に近い色を組み合わせた配色
フォカマイユ配色
カマイユ配色よりやや色相差がある配色
コントラスト配色
色相・明度・彩度いずれも反対色で配色
グラデーション配色
色相 ・明度 ・彩度を段階ごとに変化させる
ワンポイント配色
アクセントカラー(補色)を使うことで全体を引き締める役目をする

好みやセンスだけに頼らない配色

Mac のカラーパネル

 色相、彩度、明度の3つの要素を数値で表したカラーモデルのことを「HSV」と呼びます。(またはHSB)参考:HSV色空間 - Wikipedia

 グラフィックデザインなどでよく用いられており、直感的にわかりやすい表現方法だと言われています。photoshop や Mac にはあらかじめ HSV の設定ができるカラーパネルがあります。

HSV による配色

色を HSV の数値で表すと次のようになります。

色相(H)のグラデーション
色相のグラデーション

彩度(S)のグラデーション
彩度のグラデーション

明度(V)のグラデーション
明度のグラデーション

 配色とは2色以上の色の組み合わせのことです。色にも相性があって、人間関係と同じように似たもの同士(共通性)または正反対(対比)の色を選ぶとうまくいきます。

 上のグラデーションの図のように「色相・明度・彩度」のいずれかが同じグループ、または色相環で正反対に位置する補色(反対色)を組み合わせると調和のとれた配色になります。

 コントラストをつけたい場合は、色相や明度を60度、90度、120度・・・と差を大きくします。色相の差が180度なら補色(反対色)で、一番コントラストが強くなります。隣同士の色なら色相を15〜30度、彩度を落とす(低くする)と落ち着いたトーンになります。

参考:数で合理的にデザインする - カラー編 | d-spica

 ソフトがないひとも Mac じゃない人でも、Web 上で HSV で簡単に調和のとれた配色ができるツールがあるので、実際に作ってみましょう。

 ベースの色が決まったら、H・S・Vのいずれかの数値を変えてみてください。サンプルは、わたしの好きなピンクを選んで、明度と彩度はそのままで色相(H)を120度ずつ変化させてみました。

ColorJack

▼サンプル(クリックで拡大します)
colorjack

ColorJack: Sphere (Color Theory Visualizer)
こちらも簡単に調和のとれた配色を作ってくれます。

 もうひとつご紹介するのは、色見本と配色ツールを同時に提供しているサイトです。色は使う面積によっても大きく印象が変わります。こちらの 配色サンプル画面 で背景とサブカラーを入れ替えるとイメージを比較しやすいと思います。

色サンプル(色見本と配色)

▼サンプル(クリックで拡大します)
明度

 一番のポイントは無駄に「色数を増やさない」ことだと思います。 日本には古くから、「捨色」(すていろ)という概念があります。ある色を際立たせるために引き立て役になる色のことです。引き算の美学 でも述べたように、思い切って色を捨てることも大切ですね。

 また、Web での配色は「機能性」を忘れてはなりません。じゃあどうすればいいのか? その話は、無駄に長くなるから、坂本邦夫の「基礎からわかるホームページの配色」 - 自分で効果的な配色を行うための情報 を見てくれ! (無駄に外山風) 。

↓こちらの本もわかりやすい一冊です。

ちゃんと知りたい配色の手法 (MdN DESIGN BASICS)
石田 恭嗣



関連商品
やさしいデザイン―誰でもかんたん、レイアウト・配色・文字組
知っておきたいレイアウトデザインの基本 (MdN DESIGN BASICS)
グラフィック素材集 ユーロカルチャー&アンティーク
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン
カラー・ルールズ 色とデザインについて知っておきたいこと
by G-Tools

【関連エントリー】

del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(8)  | TrackBack(2)  | 03 Color*.
Comments
s/HSBによる配色/HSVによる配色/
ジャポ at 2007-05-17 20:46
■ジャポさん
ご指摘感謝します。
訂正、追記しますた。
らぶ at 2007-05-17 21:29
なんだかとっても恥ずかしいことにw
勉強になります。
ジャポ at 2007-05-18 04:01
Excellent♪
junta at 2007-05-18 23:03
らぶさんこんにちは!
色彩検定受けられるとのことで、激しく応援しています!

検定そのものは、経験上、準拠テキストをキチっと理解して覚えていればカンペキです。

というより、このエントリ書けるくらいなら、間違いなく合格しますっ!!
purprin at 2007-06-12 23:42
■purprinさん
応援ありがとうございます!
試験まであと10日と迫ってきたので必死で復習しています。
今回は2級にチャレンジなんですが、現場のWebデザインに生かせるようしっかり勉強したいと思います。
コメントありがとう。
らぶ at 2007-06-13 19:23
すみません、馬鹿な質問なのですが
いままで、彩度ってあざやかさ、明度って明るい暗いだと思っていたのですが、上のピンクの見本を見ていると、彩度って、白を混ぜるってことですか?明度って、黒を混ぜるってことですか?
明度が白黒両方担っていると思っていたので、で、あざやかってどういうことってちょっと考えてしまいました。
試験が終わるの待っていました。らぶさんの説明はわかりやすいので、もし、よければ教えてください。
扇子 at 2007-06-30 20:55
■扇子さん
彩度はあざやかさ(色みの強さ)、明度は明るさ(暗さ)という覚え方でいいと思います。
おっしゃるとおり、色に白を加えると明度は上がり(高明度)、黒を加えると暗く(低明度)なりますね。
彩度は低くなればなるほど「無彩色」(白、灰色、黒)に近づいていきます。
ちなみに「オストワルト表色系」では、純色に白を加えると明清色(ティント) 、黒を加えると暗清色(シェード)と呼ばれます。
上のピンクの見本より、こちらのサイトの説明のほうがわかりやすいかと。
http://www.color-club.com/special/school/060915.html

>試験が終わるの待っていました。
お気遣いありがとうございます。試験はバッチリでしたよ。
今度は11月に1級にチャレンジしようと思っていますが、彩度差は見分けがむずかしいです。
コメントありがとう。
らぶ at 2007-07-01 03:30
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのトラックバック

[web][DTP]数値で行うデザイン
Excerpt: 覚えておきたい配色のワザと便利なツール | *LOVE IS DESIGN* *LOVE IS DESIGN* こんなエントリーを読むと、いい加減、自分のカンでデザインするのは止めないとと思う。 デ..
Weblog: info from 1432
Tracked: 2007-09-18 12:01
覚えておきたい配色のワザと便利なツール :: Love & Design ::
Excerpt: 覚えておきたい配色のワザと便利なツール :: Love & Design ::
Weblog:
Tracked: 2012-01-20 16:20
人気エントリー Top 10
MoMAstore
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。