色相だけを変えることで明るさや鮮やかさに統一感を与える配色です。一番イメージを変えやすい配色技法になります。
色相を動かす
まずは色相だけ動かしてみることにします。明度と彩度は変わりません。サブカラーはあくまでもベースカラーを支える色ですので、ベースカラーに似た色を選ぶことで、最初に選んだ一色を支えるような色を作ります。
すでに色彩について学んだことのある方は、色相だけを動かした時に明度や彩度も同時に変わっていることに気づくかもしれません。しかしHSBの色空間で色を変えるとそのような事は起きてしまうものとしてご了承下さい。どうしても気になる方はご自分の目で確認しながら色を決めるか、デジタル色彩マニュアル（日本色研事業編）のカラーチャートなどを確認するのもよいでしょう。
色相の角度は均等ではない
ここで注意することは隣り合う色同士でHの数値が均等ではないということです。左の表をご覧いただければわかると思いますが、11と12の幅が172-181と9しか幅がないのに対し、8と9の差は41もあったりします。困ったことにHSBの色相の角度は均等ではないのです。
例えばベースカラーのHSB[30:60:80]の色相に対して、HSB[50:60:80]のサブカラーを配色した場合とHSB[120:60:80]とHSB[140:60:80]の場合では見た目の印象が全く異なってしまいます。数値としてはHの差はどちらも20ですが、その色相次第で色の差が大きく出る場合とあまり変わらない場合があります。
一般的に色彩学でいうところの類似色相配色と呼ばれる場合は隣の色相もしくはもう一つ隣の色相との配色をさしますので、例えばベースカラーに赤を選んだ場合は赤紫もしくは橙といった前後の色相を選んで配色するとよいでしょう。対応表の数値の差を見ながら類似した色を見つけると良いでしょう。
サブカラーの方が目立つ場合
このまま隣の色相を選んでしまうと、場合によってはベースカラーよりもサブカラーの方が目立ってしまう場合があります。アクセントカラーは目立たせたりするために使う色なのでよいのですが、サブカラーの方が目立ってしまうと、一生懸命考えたベースカラーの理由付けが崩れてしまうことにもなりかねません。
この場合、サブカラーがベースカラーと同等に見えるか地味になるように色を変えてやると無難な配色になりやすいです。HSBをお使いの方は彩度を下げてやれば明度も上がりますので、サブカラーが相対的に地味になります。
« 隠す
今までに決めた3色がイメージと本当に合うかを考えて、微調整を行います。
作りたいイメージに色彩を調整する
ここまで様々なことを考えて、カラーコーディネートの基本とも言える3色を面積を考えながら決定しました。しかしそのイメージが自分が表現したかったイメージと一致するのかは別の問題です。
そこで色彩の調整が必要になってまいりますが、ここではベースカラー、サブカラー、アクセントカラーを同時に動かすことにします。これはトーンの考え方が基本になっています。調和するように色彩設計を行ってきたので、それをそのまま移動させるというわけです。
このような配色が出来上がったとして、もし自分が考えていたよりも軽い配色だなと感じるようなことがあれば、全体的に明度を下げてやることによって、重いイメージを出すようにします。
この時に注意することはあまり大きな変化をさせずに微調整を行うと言うことです。大きな変化が必要な場合はベースカラーを決定する段階ですでに問題がある場合が多いので、ベースカラーから見直すことにしましょう。
また彩度を動かすことで派手・地味感を変えることも出来ます。これも地味な場合は全体の彩度を動かしてあげましょう。
色相を変えたい場合
色相を変えたい場合も3色の色相を動かしますが、色相によっては色合いが大きく変わってしまうことがあります。均一の数値で動かすと著しく印象が変わる場合もありますので、対応表を見ながら慎重に色相を変えていきましょう。
数値が100以上になる場合
彩度や明度を上げようとした時に、これ以上上がらないという場合も出てくると思います。このような場合は上げられる部分だけ上げることで問題はありません。全体のイメージを考えながら、少しずつ動かしましょう。
« 隠す
色の三属性のうち2つを動かし、少し動きを付けた配色を考えます。
２つの属性は慎重に動かす
色の三属性のうち２つを同時に動かすとなると、一つずつ動かした場合に比べて動きのある配色が可能になります。
ここまでの配色は類似性の原理に基づいてるので、似た色での配色が前提になっておりますが、両方とも大きく動かしてしまうと似た色でなくなる可能性もありますので、動かす量を計算して色の決定を行います。
特に色相を大きく動かしてしまうと動きは出ますが、統一感に欠ける配色になりかねません。黄色がベースカラーであるならば、その両隣の色相である橙、黄緑くらいまでの範囲で移動を抑え、明度もしくは彩度を大きめに動かすようにしましょう。
色相と明度を変えたサブカラー
まずは統一感を出すことが肝要ですので、配色に自信がなければ色相は大きく動かさないようにします。統一感を出すためには同系色でまとめる配色の基本に忠実に。
色相と彩度を変えたサブカラー
また軽い、重いなどのイメージは明度に依存します。軽いイメージが必要な場合はサブカラーを高明度にし、重いイメージが必要な場合では低明度で統一し、色相と彩度でイメージを調整します。
明度と彩度を変えたサブカラー
この例ではあまり数値を変えておりませんが、色相による統一感は崩れにくいので、もっと大きく数値を動かしても大丈夫です。
« 隠す
色によって食欲を促したり抑えたりする効果があります。食品を扱うホームページに重要な考え方です。
食欲を促す色で販売促進
食欲と色彩に密接な関わりについて、東洋大学の野村順一先生が非常に興味深い研究をされております。
左の「スペクトル色における食欲訴求色」を示したグラフをご覧下さい。赤・橙・黄といった暖色系の色相が特に食欲を促す色となっていることがおわかりいただけるかと思います。
穏やかで暖かな雰囲気の飲食店・レストランのホームページではこのような色を使用すればよいでしょう。
近年、パッケージカラーの分野では商品棚で目立たせるために青色などを用いるパッケージを用いる場合もありますが、ホームページの場合は目立つかどうかは文字による広告戦術に依存する部分が多いので、特に奇をてらう必要もありません。
ただし生鮮食品などの鮮度が要求されるような商品やもともと涼しさや爽やかさを売りにする商品を販売する場合には、寒色系の色を使う方がよい場合があります。
店舗や商材の特性を検討して配色を決めればよいと思いますが、特に寒色系の色を選ぶ必要性がなければ、赤・橙・黄を候補に入れておくとよいでしょう。
« 隠す
三属性のうち色相を分析することで色彩心理の効果などを含めて分析します。
印象に残る色相を1サイト1色
通常ウェブサイトは1色だけで作られていることはあまりありませんが、ここでは調査を簡易化するために一番印象に残った色を1色だけ選んでデータを集めていくことにします。多色使いで印象に残る色がわからないという場合は、そのウェブサイトは無視していただいて結構です。
データ取りをしていくわけですが、三属性をそのまま分類しようとすると立体にプロットしていく必要がありますので、まずは色相だけを見ていくことにします。
カラーピッカーを使って色相を分類
ここではカラーピッカーなどのソフトを用いて、HSBのH（色相、色相角）もしくはWindowsの色合いの数値を用いていくことにします。厳密な区分ではありませんが、下記の表に対応させると傾向が見えてきます。プロットに便利なシートは下記よりダウンロードできますので、お使いいただければと思います。また厳密に数値を管理する性質のデータではありませんので、色を見ただけで分類できるという方はご自分の感覚で分類していただいて結構です。
無彩色（白・灰色・黒）は色相環の中に書くようにしましょう。ほぼ無彩色と思われる色（例えば少し青みがかったグレー）などは無彩色の中に含めた方がわかりやすくなります。
またデータを取っている途中で気づいたことがあれば、メモしておくようにしましょう。
色相調査用ワークシート（PDF形式：約100kB）
「基礎からわかるホームページ」の場合
プロットしたデータは左の画像のようになります。ウェブ製作会社のサイトは傾向として青、青紫及び無彩色に集中しており、その次はオレンジという順番になっております。
この表からはわかりませんが、青・青紫を使用しているのは会社が多く、無彩色は個人事業のデザイナーに多いという傾向も出ております。
黄緑・緑は他に使われているサイトがほとんどないので、残してもよいのですが、濃淡を使うと自然のナチュラルな印象が出て、ウェブの会社らしくなくなるので、除外しました。また黄色は非常に明るい色で、メインカラーとして使うと背景色に置く白とのコントラストが取りにくいため除外しております。
この時点で「ありきたりではない」という条件から、世の中のウェブ製作会社で多く使われているオレンジ、青、青紫が逆に使いにくい状況にあるということが伺えます。
現時点で残ったのは赤紫、赤、青緑の２色ということになります。
« 隠す
色相によって暖かいと感じたり、冷たいと感じたりすることがあります。
暖かさ、冷たさを感じさせる色相
私たちは色を見て暖かいとか冷たいと言ったような印象を受けることがあります。このような色を暖色系、寒色系と言った分け方をしております。
暖色とは赤、だいだい、黄などのように暖かそうな色を差し、寒色とは青緑、青、青紫などの冷たさを感じさせる色のことです。またどちらにも属さない黄緑、緑、紫、無彩色などを中性色と呼んでいます。
この印象は単に温度だけのことではなく、「優しそうで暖かみを感じる」や「理知的でクール」といったような人間的な暖かみを表すこともあります。
« 隠す
売上をアップを支援するための色とその効果について説明しております。
赤・橙・黄の心理的効果
調査したショップの半数以上がこれらの暖色系の色を用いて成功を収めているのはけして偶然ではありません。
赤には体温・血圧を上昇させ、積極的な行動を促すという効果があります。この赤の刺激が購買を促していると言えます。
橙は黄色と赤の効果を半分ずつ持つ色で、開放的で積極的な色です。また赤の効果を半分持つ暖かく橙や幸福を象徴する黄を用いることによって、「この商品を手に入れることによって幸せになれるかもしれない」という意識を植え付けることとなります。
またこれらの暖色系は食欲を促しやすい色ですので、食品分野には欠かすことの出来ない色相となります。
このようなことから、暖色系は商品を販売したり、積極的なサービスを展開する企業のホームページにおいて非常に多く用いられる色となっております。
青・青紫の心理的効果
逆に寒色系は落ち着いた印象や涼しげな印象を与えることが出来ます。生理的にも体温や血圧を下げる赤色と逆の効果を持っています。
これらの色が使われているショップは売れるお店の分析でも書いたように、直接的に水や宝石などをイメージしたもの以外には、PCや家電などの比較的高額な商品を扱うショップが多く見受けられます。
これらの機械類は雑貨や食品に比べて、商品単価が上がることから、楽しさや幸福感よりも故障しない安定性やショップそのものに対する信頼性が求められていると言えます。
それ以外の色相
黄緑・緑の自然を表す色や和風の紫などは商品の特性上、十分な根拠のある色ばかりです。これらの色を選ぶ際には、なぜ選んだのかをしっかりと定めておきましょう。
これらの色相は高明度・高彩度で用いると鮮やかすぎて自然界に存在しない不自然な色という印象を与えてしまいがちです。特に紫は好き嫌いがはっきりと分かれる色ですので、使い方に注意しましょう。
オンラインショップに限ったことではありませんが、このような色彩の心理的効果を用いる場合には、暖色系か寒色系かを先に決めてしまうのも一つの方法でしょう。
« 隠す
実際のオンラインショップの色彩のデータを分析しております。
楽天市場の売れているお店
ここでは売れているショップの色を分析いたします。楽天市場ではお客様からの店舗評価や売り上げなどから優良店に対し、ショップ・オブ・ザ・ウィーク、ショップ・オブ・ザ・マンスなどが発表されています。
この中から100のウェブサイトを無作為に抽出してその色について調べてみました。
データの取得
800×600のウインドウサイズで見た時に最も面積の大きいと思われる色を1つの店舗につき1色ピックアップしました。データをシンプルにするためにこのような条件付けを行っております。
- デザインの出来、不出来は問わない
- 季節限定のバナーなどのすぐに入れ替わる色は考慮しない
- ページのスクロールはさせない
このデータを便宜上、色相の対応表に従って分類したところこのようになりました。
| 色相 |
割合 |
| 赤 |
27% |
| 青紫 |
22% |
| 黄 |
16% |
| 橙 |
12% |
| 緑 |
9% |
| 青 |
6% |
| 紫 |
4% |
| 赤紫 |
3% |
| 黄緑 |
1% |
| 青緑 |
0% |
ここでいう青紫と青はまとめて青とご理解いただければよいと思います。また一口に黄色と言っても黄緑に近い物から橙に近い物まで色相には幅がありますので、その辺りをご了解の上、お読みいただければと思います。
最も目立つのは赤ですが、トータルで見ると赤・橙・黄の暖色系で55%になることが見て取れます。その次は寒色系の青紫・青が合計29%ですから、かなり差が見て取れます。
色相別の傾向
- 赤・赤紫
- ピンクもこの中に入ります。コスメ・ジュエリーから食品まで、特に商品ジャンルに拘りなく様々な業種が見受けられます。
- 橙・黄
- 赤よりも柔らかい配色の店舗が多いようです。こちらも商品ジャンルに偏りは見られませんが、食欲を促す色でもあるので、食品分野には欠かせない色となります。
- 黄緑・緑
- 自然食品・アウトドアなどが多いようです。
- 青緑
- 一つも見られませんでした。モニター上の青緑は人工的な感じを受ける場合が多いので、それが敬遠される理由の一つでしょう。
- 青・青紫
- ホビー・水・PCなどの機械類などが中心となります。
- 紫
- 和のお店が中心になります。
明度と彩度
寒色系ではでは中明度で彩度は中から高彩度と幅広く分布しておりますが、暖色系では原色に近い鮮やかな赤・橙も見受けられます。
また黄緑・緑・紫は自然・和風の商品を扱うショップが多いため、中明度で中低彩度の穏やかな色調が主に用いられております。
« 隠す
HSBの色相は見た目が偏っており、色彩調和論に基づいた配色を理論的に説明することが難しいカラーモデルでもあります。そのHSBの特徴を知ることで配色に活かします。
HSBの色相環
HSBは色相を角度で表しますので、色相環を作ることは非常に簡単です。20色の色相環なら18°ずつ色を変えて色相環を作っていくだけでよいのです。
しかし右の色相環をご覧いただければおわかりのように、HSBの色相には偏りが見られます。aとbはほぼ同じように見えるのに対して、cとdはかなり大きな差があるように感じられます。それぞれの色相環の色の差が均等でないと、配色について考えることが難しくなります。
HSBの色相環と均等な色相環
ここでは見た目の色の差が均等な色相環を用い、それに基づいて配色を考えていくことにします。これにより色彩調和論に基づいた配色が可能となります。PCCSやマンセルシステムのような知覚的に等間隔な色相環をご存じない方は、下記の表を用いて色相の差を考えていくことにしましょう。ただしモニターなどの閲覧環境やHSBの特性によって必ず正しい色が再現できているるわけでないことをご了承下さい。
色相とHSBの色相値の対応表
| |
HSB |
Windows |
| 赤 |
341-17 |
230-11 |
| 橙 |
18-37 |
12-25 |
| 黄 |
38-60 |
26-40 |
| 黄緑 |
61-113 |
41-76 |
| 緑 |
114-165 |
77-110 |
| 青緑 |
166-181 |
111-121 |
| 青 |
182-202 |
121-135 |
| 青紫 |
203-259 |
136-172 |
| 紫 |
260-310 |
173-208 |
| 赤紫 |
311-341 |
209-229 |
« 隠す
WindowsではOSのみでHSBカラーモデルを扱うことが出来ません。それを可能にするフリーソフトをご紹介いたします。
「FE – Color Palette」のご紹介
Windowsをお使いの方で、HSBを扱うことの出来るグラフィックソフトをお持ちでない方は、何らかのソフトを用意してHSBを扱える環境を整える必要があります。
他のソフトでも可能ですが、「FE – Color Palette」という非常に優秀なソフトがフリーソフトとして配布されておりますので、こちらを利用して配色を進めていくことをおすすめいたします。
Windowsの「色の編集」パネル
Windowsの「色の編集」パネルは色合い（色相:0-239）、鮮やかさ（彩度:0-240）、明るさ（明度:0-240）で色を決めることになります。こちらでも色の三属性による配色は可能ですが、HSBとWindowsの色の編集パネルでは明度と彩度の扱い方が違いますので、注意が必要です。
« 隠す
▲このページの先頭に戻る
