坂本邦夫の「基礎からわかるホームページの配色」» 明度

配色の調整

坂本邦夫 — Wed, 27 Jan 2010 05:05:02 +0000

今までに決めた3色がイメージと本当に合うかを考えて、微調整を行います。

作りたいイメージに色彩を調整する

ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。

そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。

このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。

この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。

また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。

色相を変えたい場合

色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。

数値が100以上になる場合

彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。

関連記事：

色の三属性の２つを動かす

坂本邦夫 — Wed, 27 Jan 2010 04:40:52 +0000

色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。

２つの属性は慎重に動かす

色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。

ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。

特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。

色相と明度を変えたサブカラー

まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。

色相と彩度を変えたサブカラー

また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。

明度と彩度を変えたサブカラー

この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。

関連記事：

明度だけを変えてサブカラーを作る

坂本邦夫 — Wed, 27 Jan 2010 03:42:19 +0000

ベースカラーの明度だけを変えてサブカラーを作ります。視認性（見やすさ）・可読性（読みやすさ）は明度の差によって決まりますので、非常に重要な項目です。

メリハリのある配色に

印象を変えずにコントラストを付けたい時には明度を変えるのが一番簡単です。どうもぼんやりしていると感じる時は少し明度差を多めに付けるとメリハリのある配色になります。しかし色相と彩度は同じですので、統一感は損なわれません。

可読性は明度差によって決まる

明度に差を付けると言うことは可読性（読みやすさ）を考える上では非常に重要なことです。背景によっては会社やお店の名前やロゴが見えにくくなったりします。

2色間の境目がぼんやりして見える場合は、この2色を背景色と文字色にすると読みにくくなるいうことになります。

関連記事：

明度と彩度を分析する

坂本邦夫 — Tue, 26 Jan 2010 14:24:01 +0000

色相ごとに明度と彩度を比較して、用いられている色を客観的に分析します。

明度と彩度を分析から空いている色を探す

「色相を分析する」のページで、伝えたいイメージや競合サイトの色相を見ることによって、ある程度は使うべき色相が見えてきたことと思います。

他の競合サイトと違う色にしたいという場合は明度と彩度も調べて、次の表にプロットし、空いている位置を見つけるという方法もあります。

ただしこの方法で検討する場合は明度が下がりすぎると色相や彩度に関わらず、同じような暗い色に見えてしまいますし、彩度が高すぎると大きな面積で色を使った場合にはまぶしく見えてしまいます。

明度・彩度調査シート（PDF形式：約270kB）

「基礎からわかるホームページ」の場合

ありきたりでない色という条件から、青緑色の明度・彩度を比較検討しました。明度・彩度を下げると緑とあまり変わらないように見えてしまうので、他のサイトで使われてる青緑よりも明度、彩度ともかなり高い１色を選定しました。選んだ青緑（H:177
S:66 B:81）はそのまま使うとかなりまぶしい色ですので、小面積での使用が前提となります。（2010年1月現在リニューアル済み）

このサイトはイメージも大切ですが、文章をきちんと読んで理解していただき、実践してもらうことを目的としておりますので、小面積でも十分な効果が出て、目的を達成していると思います。

関連記事：

トーンとは

坂本邦夫 — Tue, 26 Jan 2010 04:19:12 +0000

トーンの概念を知れば配色が格段に行いやすくなります。

トーンとは明度と彩度の複合概念

※今までに色彩を学習したことのある方でPCCS（日本色研配色体系）やCCIC（商工会議所カラーコーディネーションチャート）のトーン表をお持ちの方は、このページに掲載しているトーン表は見ずに、そちらの方をご覧下さい。PCCSのトーン表の掲載は著作権の侵害となりますので、このウェブサイトでは独自でHSBを使ったトーン表を作成したことをご了承の上下さい。

トーンとは日本語で色調のことで、明度と彩度を複合した概念です。まずは下のトーン表をご覧下さい。同じトーン同士で配色をまとめると明度、彩度が近い色が集まるため、調和しやすくなります。

HSBを使い、SとBを変えずにHだけを動かせばトーンが出来ます。ここでは便宜上、彩度の段階を4つに分けておりますが、他の数値でも全く問題はありません。ご自分のイメージに近いトーンを作り出してから配色を考える方法もありますので、一度トーンの作成をお試し下さい。

明度、彩度が100のトーン

明度と彩度が共に100の場合は原色となります。派手なイメージが表現できますが、このまま使用して配色するとまぶしくて目が疲れる配色となる可能性がありますので、なるべく使わないようにすると、妙に華美でうさんくさい配色から一歩遠ざかることが出来ます。

関連記事：

明度とは

坂本邦夫 — Tue, 26 Jan 2010 03:07:17 +0000

色の明るさを表します。文字の読みやすさに直接関わる要素ですので、慎重に扱うことが必要です。

明度とは

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

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

明度と読みやすさ

明度は色相、彩度といった他の属性よりも文字の読みやすさに直接影響してきます。文字を読みやすくするためには明度の差を大きく取ることが基本となってきます。情報が読めないとホームページの価値は一気に下がってしまいますので、明度差の取り方には十分注意しながら配色を行うようにします。

関連記事：