::Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。Thu覚えておきたい配色のワザと便利なツール前回「無彩色の便利な使い方」を紹介しました。続いて「有彩色」の配色の手法と便利なツールをご紹介したいと思います。配色を行う前に、色に関する基礎知識をおさらい。3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。(色相はつながりあって色相環という輪になります。)彩度(さいど:Saturation:Chroma)色の鮮やかさ、強弱の度合いのこと。彩度が高い(鮮やか)⇔彩度が低い(鈍い)明度(めいど:Value:Brightness)色の明るさの度合いのこと。配色の手法には、法則のようなものがあります。3つの要素を数値で表したカラーモデルのことを「HSV」と呼びます。Wikipediaグラフィックデザインなどでよく用いられており、直感的にわかりやすい表現方法だと言われています。設定ができるカラーパネルがあります。数値で表すと次のようになります。色相(H)のグラデーション彩度(S)のグラデーション明度(V)のグラデーション配色とは2色以上の色の組み合わせのことです。色にも相性があって、人間関係と同じように似たもの同士(共通性)または正反対(対比)の色を選ぶとうまくいきます。いずれかが同じグループ、または色相環で正反対に位置する補色(反対色)を組み合わせると調和のとれた配色になります。コントラストをつけたい場合は、色相や明度を60度、90度、120度・・・と差を大きくします。色相の差が180度なら補色(反対色)で、一番コントラストが強くなります。隣同士の色なら色相を15〜30度、彩度を落とす(低くする)と落ち着いたトーンになります。簡単に調和のとれた配色ができるツールがあるので、実際に作ってみましょう。ベースの色が決まったら、H・S・Vのいずれかの数値を変えてみてください。サンプルは、わたしの好きなピンクを選んで、明度と彩度はそのままで色相(H)を120度ずつ変化させてみました。Visualizer)こちらも簡単に調和のとれた配色を作ってくれます。ひとつご紹介するのは、色見本と配色ツールを同時に提供しているサイトです。色は使う面積によっても大きく印象が変わります。背景とサブカラーを入れ替えるとイメージを比較しやすいと思います。色サンプル(色見本と配色)▼サンプル(クリックで拡大します)一番のポイントは無駄に「色数を増やさない」ことだと思います。日本には古くから、「捨色」(すていろ)という概念があります。ある色を際立たせるために引き立て役になる色のことです。述べたように、思い切って色を捨てることも大切ですね。配色は「機能性」を忘れてはなりません。↓こちらの本もわかりやすい一冊です。20:46■ジャポさんご指摘感謝します。21:29なんだかとっても恥ずかしいことにw勉強になります。23:03らぶさんこんにちは!色彩検定受けられるとのことで、激しく応援しています!検定そのものは、経験上、準拠テキストをキチっと理解して覚えていればカンペキです。23:42■purprinさん応援ありがとうございます!試験まであと10日と迫ってきたので必死で復習しています。今回は2級にチャレンジなんですが、現場のWebデザインに生かせるようしっかり勉強したいと思います。19:23すみません、馬鹿な質問なのですがいままで、彩度ってあざやかさ、明度って明るい暗いだと思っていたのですが、上のピンクの見本を見ていると、彩度って、白を混ぜるってことですか?明度って、黒を混ぜるってことですか?明度が白黒両方担っていると思っていたので、で、あざやかってどういうことってちょっと考えてしまいました。試験が終わるの待っていました。らぶさんの説明はわかりやすいので、もし、よければ教えてください。20:55■扇子さん彩度はあざやかさ(色みの強さ)、明度は明るさ(暗さ)という覚え方でいいと思います。おっしゃるとおり、色に白を加えると明度は上がり(高明度)、黒を加えると暗く(低明度)なりますね。彩度は低くなればなるほど「無彩色」(白、灰色、黒)に近づいていきます。黒を加えると暗清色(シェード)と呼ばれます。上のピンクの見本より、こちらのサイトの説明のほうがわかりやすいかと。http://www.color-club.com/special/school/060915.html>試験が終わるの待っていました。お気遣いありがとうございます。試験はバッチリでしたよ。今度は11月に1級にチャレンジしようと思っていますが、彩度差は見分けがむずかしいです。こんなエントリーを読むと、いい加減、自分のカンでデザインするのは止めないとと思う。?Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。無駄にエロい人オンナ心は複雑ですが、シンプルでわかりやすいデザインを目指しています。::×この広告は180日以上新しい記事の投稿がないブログに表示されております。