2008-03-19 Wed

よりよいWebデザインにするための配色のセオリー RSS あとで読む kwout this!

color

第一印象を決めてしまうほど、色はとても大切な役割を持っています。
Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。

配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。

そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。

では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。

色相差で配色

【イメージ効果】
暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な

 → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。

背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比

色相対比

明度差で配色

【イメージ効果】
軽い⇔重い 浅い⇔深い 弱い⇔強い 柔らかい⇔硬い あっさり⇔くどい

 → 明度が違う色同士を組み合わせると、明るい色はより明るく見え、暗い色はより暗く見えます。(明度対比

明度対比

彩度差で配色

【イメージ効果】
派手な⇔地味な 動的な⇔静的な

 → 彩度が違う色同士を組み合わせると、彩度の高い色はより鮮やかに、彩度の低い色はよりくすんで見えます。(彩度対比

彩度対比

トーンを基調にした配色

【イメージ効果】

  • ビビットトーン:鮮やか・賑やか・エネルギッシュ
  • ブライトトーン:明るい・陽気・華やか
  • ライトトーン:軽やか・楽しい・澄んだ・純粋・幼い・爽やか
  • ペールトーン:女性的・優しい・可愛い・繊細
  • ソフトトーン:柔らかい・穏やか
  • ライトグレイッシュトーン:渋い・上品・エレガント・フェミニン
  • ダルトーン:シック・ナチュラル・和風
  • グレイッシュトーン:クラッシック・地味
  • ディープトーン:濃い・深い・濃い・実り・和風・伝統的
  • ダークトーン:大人・丈夫・高級
  • ダークグレイッシュトーン:男性的・固い・陰気・重厚
  • ストロングトーン:力強い

 → トーンは色の調子を表す言葉で、明度と彩度を表した「色のものさし」のようなものです。

トーンに共通性があると統一感のある配色になりやすく、トーンを基調に配色すると簡単に印象やイメージをコントロールすることができます。

  • 同一トーン … 色相差0
  • 類似トーン … 色相差2〜3
  • 対照トーン … 色相差8〜10

pccs

pccs

トーン別のカラーチャートや伝統色など Web デザインに役立つサイト
色彩のスパイス 色彩のスパイス - 色彩の配色と色見本

PCCS(ヒュートーンシステム)配色

  • ドミナントトーン配色
  • 同じトーンで統一した配色(色相差0〜2)
    「同一色相」配色が基本となるが、類似色相配色までの範囲でまとめてもよい
    ドミナントトーンの例

  • ドミナントカラー配色
  • 同じ色相で統一した配色
    ドミナントカラーの例

  • トーンオントーン配色(色相差は自由)
  • 同じ色相でトーン(色調)を変化させた配色
    穏やかで落ち着いた配色ですが、平凡になりやすい
    トーンオントーンの例

  • トーンイントーン配色
  • 明度は同じで色相を変化させた配色
    「同一トーン」or「類似トーン」で明度差の小さい組み合わせ
    明暗が同じなので、違う色相を使っても違和感がない
    トーンイントーンの例

  • トーナル配色
  • トーナルとは「色調の」「色合いの」という意味
    中明度、中彩度の中間色調(d、sf)、濁色調(ltg、g)の配色トーナルの例

  • カマイユ配色
  • 色相 ・トーン共に近い色を組み合わせた配色
    単一画の絵画技法で、ほとんど一色に見えるほどの色の差が微妙な配色
    カマイユの例

  • フォカマイユ配色
  • カマイユ配色よりやや色相差がある配色
    フォカマイユの例

  • ピコロール配色
  • ピコロールとは、「2色」という意味
    コントラストの効いた明快な配色
    ピコロール

  • トリコロール配色
  • トリコロールとは「3色」という意味
    フランス国旗の「赤、白、青」ドイツ国旗の「黒、赤、黄」のような3色配色のこと
    トリコロール

無彩色を活用

【イメージ効果】明るい⇔暗い 軽い⇔重たい

無彩色(白・黒・グレー)はどんな色とも不調和を感じさせません。

対比の強い配色を和らげたり、曖昧な配色にメリハリをつけたい時に、無彩色や彩度の低い色を「セパレートカラー」に使うと効果的です。

セパレートカラー

色の面積効果

同じ色でも面積によって色の見え方は異なります。

明るい色は小さな面積より大きな面積の方がより明るく感じられ、暗い色はより暗く感じられます。

面積効果

色の誘目性

人の視線の流れは、左から右・上から下へと流れていきます。
誘目性の高い色は、上側や左側に配置すると、ページや文章にリズムをつけ自然に視線を誘導することができます。

無彩色よりも「有彩色」「彩度の高い色」「暖色」のほうが注目されやすくなります。

誘目性

多色使いのポイント

  • 低彩度の色は、色数を多くしてもOK.
  • 高彩度の色は、色数を少なく面積は小さく
  • 面積の広い部分は低彩度の色を使う

日頃から、雑誌やパッケージデザインなどを見て「なぜその商品に惹かれたのか」考えることも配色の勉強になりますね。

【こちらもオススメ】
坂本邦夫の「基礎からわかるホームページの配色」

【関連記事】

[無駄に長くなった]

Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)
Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)
  • 著者: 坂本 邦夫
  • 価格: ¥ 2,310

こちらもオススメします。

del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(13)  | TrackBack(6)  | 03 Color*.
Comments
さすが色彩のプロですね。
これは勉強になります!
junta at 2008-03-19 18:37
■juntaさん
あれ、放置プレイ中じゃなかったっけ?
こうして書いておかないと、自分でも忘れちゃうのでw
コメントありがとう。
らぶ at 2008-03-19 19:19
とてもとてもとても参考になります。
webデザインにおける【色使い】は自分の中で鬼門中の鬼門!
ここのサイトを参考にして自分の力にできればと思います。
yocchan20 at 2008-03-20 19:58
■yocchan20さん
はじめまして。
色彩検定の勉強で学んだことをWebデザインにも役立てたいと思い、
忘れないようにまとめておきました。

お役に立てれば幸いです。
コメントありがとう。
らぶ at 2008-03-20 21:50
はじめまして。
いま色彩検定の勉強中ですごく参考になりました。
hide at 2010-04-22 14:54
管理人様、掲示板のスペースをお借り致します。
皆さんの押入れに眠っている、ガン消し、キン消し、ビックリマン、カードダス等懐かしいグッズを
高値で買い取りさせて頂けませんでしょうか?
(昔のおもちゃなどなんでも買取致します!)
ショップではなく、完全に個人収集を目的としている為、
買い取り価格は普通のリサイクルショップの3倍程度です。
(もちろん査定は無料です!)
持っていてもしょうがない、でも捨てるのは勿体無いと思っている方、
詳しくはHPが御座いますので、是非お越しください。
誠実な対応を心がけておりますので、何卒宜しくお願い申し上げます。http://www7.tok2.com/home/kinkeshicorector/
kinkeshicorector at 2011-02-18 02:11
ムA� D萵粹�, テ褊褞琿�Z� �PAK リボン� �K瑙蕘 �� A四角数字4粹H �A�� 磊 鞴褞�, 琿� �K�瑙� - メHC� ヨ褊割マーク ユ瑩��A ォタ糘サ � E頽鞨��Z� 蒻�褞 Toyota � ユ瑩��AH @�瑰四角数字4. http://www.feeder.kharkov.ua/news/u_komandy_kharkova_po_fideru_teper_est_generalnyj_sponsor/2012-07-09-62|タ糘
gWCAywbFksCUkR at 2012-08-06 04:39
SHyOvwuMR at 2012-11-02 14:36
NDKsRJipDD at 2012-11-03 02:43
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのTrackBack URL


08.03.17 透過pngのトリック。
Excerpt: 湖面を反射させて芸術的な写真を作るPhotoShopチュートリアル (phpspot開発日誌) 簡単にできて、かなり見栄えが良いですね。メモメモ。 よ...
Weblog: 日々、ウェブデザインとネットニュースとゲームとか。
Tracked: 2008-03-19 21:28
よりよいWebデザインにするための配色のセオリー
Excerpt: 皆様、おはようございます!今日はせっかくの休みなのに一日雨みたいですね・・・残念...
Weblog: ソーシャルグラフのSBI Robo
Tracked: 2008-03-20 10:16
よりよいWebデザインにするための配色とは
Excerpt: 今日の大阪はお花見日和と言って良いほど快晴で仕事もぼちぼちですがはかどっています(笑)。Webデザインで“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめた記事を見つけたので気に..
Weblog: ただ今こうじ中 by アメブロ
Tracked: 2008-03-21 14:15
よりよいWebデザインにするための配色のセオリーという記事
Excerpt: Webデザイン関連の本でよく目にする配色の組み合わせ。勉強の他にセンスなどが伴うのでなかなか難しい配色技法ですが Love is Design というブログが、画像をふんだんに使って見やすく...
Weblog: ミblog : レビューや日常など
Tracked: 2008-03-22 00:55
白いから惹かれるんでしょうか
Excerpt: 引っ越し先にも、見事に花咲く桜の木がありました 桜の花のこの魅力、なんなんでしょうね? 単に「春が来た!」だけなら、他にも事象はいっぱいあるのに… 「白さ」ってことぐらいしか思い付かな..
Weblog: 課長ほど素敵なショーバイはない!?
Tracked: 2008-03-29 20:46
【日々】:還付金がはいったぞーーーーーー!!!!!
Excerpt: こりゃ今週は休ませたほうがよさそうだな・・・ 今日は保育園に送り出したがやっぱ...
Weblog: 白石運送
Tracked: 2010-04-22 23:53
人気エントリー Top 10
MoMAstore
×

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