ホーム » カテゴリー：色彩設計の準備
カテゴリー：色彩設計の準備の記事
ソフトを使って適当に色を決めるだけではカラーコーディネートとは言えません。配色を行う前にイメージを固めることや競合サイトの調査など様々なアプローチで本当に必要な色の絞り込みを行います。
色によって食欲を促したり抑えたりする効果があります。食品を扱うホームページに重要な考え方です。
食欲を促す色で販売促進
食欲と色彩に密接な関わりについて、東洋大学の野村順一先生が非常に興味深い研究をされております。
左の「スペクトル色における食欲訴求色」を示したグラフをご覧下さい。赤・橙・黄といった暖色系の色相が特に食欲を促す色となっていることがおわかりいただけるかと思います。
穏やかで暖かな雰囲気の飲食店・レストランのホームページではこのような色を使用すればよいでしょう。
近年、パッケージカラーの分野では商品棚で目立たせるために青色などを用いるパッケージを用いる場合もありますが、ホームページの場合は目立つかどうかは文字による広告戦術に依存する部分が多いので、特に奇をてらう必要もありません。
ただし生鮮食品などの鮮度が要求されるような商品やもともと涼しさや爽やかさを売りにする商品を販売する場合には、寒色系の色を使う方がよい場合があります。
店舗や商材の特性を検討して配色を決めればよいと思いますが、特に寒色系の色を選ぶ必要性がなければ、赤・橙・黄を候補に入れておくとよいでしょう。
« 隠す
色相ごとに明度と彩度を比較して、用いられている色を客観的に分析します。
明度と彩度を分析から空いている色を探す
「色相を分析する」のページで、伝えたいイメージや競合サイトの色相を見ることによって、ある程度は使うべき色相が見えてきたことと思います。
他の競合サイトと違う色にしたいという場合は明度と彩度も調べて、次の表にプロットし、空いている位置を見つけるという方法もあります。
ただしこの方法で検討する場合は明度が下がりすぎると色相や彩度に関わらず、同じような暗い色に見えてしまいますし、彩度が高すぎると大きな面積で色を使った場合にはまぶしく見えてしまいます。
明度・彩度調査シート（PDF形式：約270kB）
「基礎からわかるホームページ」の場合
ありきたりでない色という条件から、青緑色の明度・彩度を比較検討しました。明度・彩度を下げると緑とあまり変わらないように見えてしまうので、他のサイトで使われてる青緑よりも明度、彩度ともかなり高い１色を選定しました。選んだ青緑（H:177
S:66 B:81）はそのまま使うとかなりまぶしい色ですので、小面積での使用が前提となります。（2010年1月現在リニューアル済み）
このサイトはイメージも大切ですが、文章をきちんと読んで理解していただき、実践してもらうことを目的としておりますので、小面積でも十分な効果が出て、目的を達成していると思います。
« 隠す
三属性のうち色相を分析することで色彩心理の効果などを含めて分析します。
印象に残る色相を1サイト1色
通常ウェブサイトは1色だけで作られていることはあまりありませんが、ここでは調査を簡易化するために一番印象に残った色を1色だけ選んでデータを集めていくことにします。多色使いで印象に残る色がわからないという場合は、そのウェブサイトは無視していただいて結構です。
データ取りをしていくわけですが、三属性をそのまま分類しようとすると立体にプロットしていく必要がありますので、まずは色相だけを見ていくことにします。
カラーピッカーを使って色相を分類
ここではカラーピッカーなどのソフトを用いて、HSBのH（色相、色相角）もしくはWindowsの色合いの数値を用いていくことにします。厳密な区分ではありませんが、下記の表に対応させると傾向が見えてきます。プロットに便利なシートは下記よりダウンロードできますので、お使いいただければと思います。また厳密に数値を管理する性質のデータではありませんので、色を見ただけで分類できるという方はご自分の感覚で分類していただいて結構です。
無彩色（白・灰色・黒）は色相環の中に書くようにしましょう。ほぼ無彩色と思われる色（例えば少し青みがかったグレー）などは無彩色の中に含めた方がわかりやすくなります。
またデータを取っている途中で気づいたことがあれば、メモしておくようにしましょう。
色相調査用ワークシート（PDF形式：約100kB）
「基礎からわかるホームページ」の場合
プロットしたデータは左の画像のようになります。ウェブ製作会社のサイトは傾向として青、青紫及び無彩色に集中しており、その次はオレンジという順番になっております。
この表からはわかりませんが、青・青紫を使用しているのは会社が多く、無彩色は個人事業のデザイナーに多いという傾向も出ております。
黄緑・緑は他に使われているサイトがほとんどないので、残してもよいのですが、濃淡を使うと自然のナチュラルな印象が出て、ウェブの会社らしくなくなるので、除外しました。また黄色は非常に明るい色で、メインカラーとして使うと背景色に置く白とのコントラストが取りにくいため除外しております。
この時点で「ありきたりではない」という条件から、世の中のウェブ製作会社で多く使われているオレンジ、青、青紫が逆に使いにくい状況にあるということが伺えます。
現時点で残ったのは赤紫、赤、青緑の２色ということになります。
« 隠す
競合サイトを検索エンジンなどから探し出し、比較することで業界で多く使われている色相やイメージなどを把握します。
競合サイトの探し方
競合サイトについては皆様がよくおわかりかと思いますので、競合しえるところを出来るだけたくさんピックアップしてみましょう。多ければ多いほどデータとして扱いやすくなります。
確実な方法はYahoo!などのディレクトリ型検索エンジンで同業者をピックアップする方法です。ただしサイト数があまりに少ないと信頼性に欠けますので、その場合はGoogleなどのロボット型検索エンジンを使って補完しましょう。50サイトも調べればある程度の傾向が見えてくると思いますが、出来れば100サイト以上のデータがあるとよいでしょう。
「基礎からわかるホームページ」の場合
「ホームページの目的と色彩」でも述べたように、このウェブサイトには「ありきたりでない」という要素が含まれていたので調査いたしました。
今回比較対象になったのは、Web製作会社のサイトで100サイトを検証することにいたしました。
« 隠す
今まで考えてきた1色とCIカラーが一致するかどうかを考えながら、その取り扱いについて考えていきます。
CIカラーの扱い
「言葉からの色彩イメージ」と「色相を分析する」のページによって、使うべき色相については見えてきたのではないでしょうか？ もしここまででまったく見えてきていないとすれば、もう一度元に戻っていただいても構いませんが、その前にここでCIカラーについて考えてみることにします。
すでにCIカラーをお持ちの企業の方は、現在のCIカラーが伝える色彩のイメージと今から配色するウェブサイトの目的が一致するのかどうかを確認してみましょう。
今からCIカラーを決めるという方、もしくはCIカラーと関係なく独自の配色でやっていくという方は、これまでの課程で候補として上げた色相をそのまま維持してください。
今までの行程とCIカラー
この段階でCIカラーが打ち出すイメージとウェブサイトの目的が一致するかどうかの判断が出来るようになっているはずです。CIカラーの扱いに関しては次のようなものが考えられます。
- CIカラーとホームページの目的が一致する
- CIカラーとホームページの目的が一致しない
- CIカラーとホームページの目的が一致しないが、どうしても使いたい
CIカラーとホームページの目的が一致し、なおかつ競合サイトとの関係もクリアな場合は、メインの色をここで決めていただいて結構です。
CIカラーがイメージと違う場合
CIカラーと候補に挙がった色がまったく違うが、そのまま使いたい場合は問題ありませんので、そのまま使うことにしましょう。これは配色のテクニックでCIカラーを組み込んでいくことにし、実際に伝えたいイメージの色相を中心にしていくとよいでしょう。
「基礎からわかるホームページ」の場合
このホームページは新規立ち上げで、今回決定するメインカラーをCIカラーと同じような扱いにすることになっておりましたので、特にCIカラーについては考慮しておりません。
« 隠す
そもそもCIカラーとは何か、またどのような役割を持つのかについて説明しております。
CIカラーの意味
CIとはコーポレートアイデンティティのことで広辞苑によれば「会社の個性・目標の明確化と統一をはかり、社内外にこれを印象づけるための組織的活動」と定義されています。企業サイトの配色でない場合は「会社」というのを「今から配色しようとするホームページ」と置き換えて読んでください。
この定義からCIの一部であるCIカラーはただ色を付けるだけではなく、内外にアピールできる色であることが重要となってきます。例えば三井住友銀行は明るい黄緑と暗い緑の２色をCIカラーに用いております。黄緑色は若々しさ、知性、やさしさを表しておりフレッシュグリーンと名付けられています。暗い緑は重厚なイメージがしますが、伝統、信頼、安定感を表すトラッドグリーンです。このイメージから三井住友銀行の目指す方向性という物が内外に伝わるようになっております。
もしCIカラーが存在しない場合や現状のものを変更可能であるという場合には、きっちりと決めてしまわれることをおすすめしますし、すでに存在する場合にはそれを上手く活かすように検討します。またイメージにそぐわないような場合にはCIカラーそのものを変更するような場合も出てくるでしょう。
CIカラーを決める
CIカラーの決定に際しては慎重に行わなければなりません。ウェブサイト上だけではなく、名刺や汎用的に使用することを考えるのであれば、カラーコーディネーターに依頼するのもよいでしょう。
決めるにあたっては色々と考えなければならないことが多いのですが、まずはここまで候補に残った色相の中から選んでください。
最低限白の上に置いた時に見えやすい色を使うようにしましょう。右の画像のような色をそのまま使うと見えにくく、名刺や封筒にロゴマークを入れることも難しくなりますし、訴求力にも欠けることとなります。
このような色をどうしても使いたい場合には暗めの色で縁取りをすることにしましょう。
« 隠す
彩度の高低によって色は派手に見えたり地味に見えたりします。
派手・地味感は彩度で
色が派手であるか地味であるかを決めるのは一般的には彩度の役割です。彩度が高ければ派手な感じになり、低ければ地味になります。
ただしHSBで表現する場合には、Sを低くするだけでも地味になりますが、SとBの両方を低くすれば、より地味に見えることを覚えておけばよいでしょう。
« 隠す
色相によって暖かいと感じたり、冷たいと感じたりすることがあります。
暖かさ、冷たさを感じさせる色相
私たちは色を見て暖かいとか冷たいと言ったような印象を受けることがあります。このような色を暖色系、寒色系と言った分け方をしております。
暖色とは赤、だいだい、黄などのように暖かそうな色を差し、寒色とは青緑、青、青紫などの冷たさを感じさせる色のことです。またどちらにも属さない黄緑、緑、紫、無彩色などを中性色と呼んでいます。
この印象は単に温度だけのことではなく、「優しそうで暖かみを感じる」や「理知的でクール」といったような人間的な暖かみを表すこともあります。
« 隠す
売上をアップを支援するための色とその効果について説明しております。
赤・橙・黄の心理的効果
調査したショップの半数以上がこれらの暖色系の色を用いて成功を収めているのはけして偶然ではありません。
赤には体温・血圧を上昇させ、積極的な行動を促すという効果があります。この赤の刺激が購買を促していると言えます。
橙は黄色と赤の効果を半分ずつ持つ色で、開放的で積極的な色です。また赤の効果を半分持つ暖かく橙や幸福を象徴する黄を用いることによって、「この商品を手に入れることによって幸せになれるかもしれない」という意識を植え付けることとなります。
またこれらの暖色系は食欲を促しやすい色ですので、食品分野には欠かすことの出来ない色相となります。
このようなことから、暖色系は商品を販売したり、積極的なサービスを展開する企業のホームページにおいて非常に多く用いられる色となっております。
青・青紫の心理的効果
逆に寒色系は落ち着いた印象や涼しげな印象を与えることが出来ます。生理的にも体温や血圧を下げる赤色と逆の効果を持っています。
これらの色が使われているショップは売れるお店の分析でも書いたように、直接的に水や宝石などをイメージしたもの以外には、PCや家電などの比較的高額な商品を扱うショップが多く見受けられます。
これらの機械類は雑貨や食品に比べて、商品単価が上がることから、楽しさや幸福感よりも故障しない安定性やショップそのものに対する信頼性が求められていると言えます。
それ以外の色相
黄緑・緑の自然を表す色や和風の紫などは商品の特性上、十分な根拠のある色ばかりです。これらの色を選ぶ際には、なぜ選んだのかをしっかりと定めておきましょう。
これらの色相は高明度・高彩度で用いると鮮やかすぎて自然界に存在しない不自然な色という印象を与えてしまいがちです。特に紫は好き嫌いがはっきりと分かれる色ですので、使い方に注意しましょう。
オンラインショップに限ったことではありませんが、このような色彩の心理的効果を用いる場合には、暖色系か寒色系かを先に決めてしまうのも一つの方法でしょう。
« 隠す
実際のオンラインショップの色彩のデータを分析しております。
楽天市場の売れているお店
ここでは売れているショップの色を分析いたします。楽天市場ではお客様からの店舗評価や売り上げなどから優良店に対し、ショップ・オブ・ザ・ウィーク、ショップ・オブ・ザ・マンスなどが発表されています。
この中から100のウェブサイトを無作為に抽出してその色について調べてみました。
データの取得
800×600のウインドウサイズで見た時に最も面積の大きいと思われる色を1つの店舗につき1色ピックアップしました。データをシンプルにするためにこのような条件付けを行っております。
- デザインの出来、不出来は問わない
- 季節限定のバナーなどのすぐに入れ替わる色は考慮しない
- ページのスクロールはさせない
このデータを便宜上、色相の対応表に従って分類したところこのようになりました。
| 色相 |
割合 |
| 赤 |
27% |
| 青紫 |
22% |
| 黄 |
16% |
| 橙 |
12% |
| 緑 |
9% |
| 青 |
6% |
| 紫 |
4% |
| 赤紫 |
3% |
| 黄緑 |
1% |
| 青緑 |
0% |
ここでいう青紫と青はまとめて青とご理解いただければよいと思います。また一口に黄色と言っても黄緑に近い物から橙に近い物まで色相には幅がありますので、その辺りをご了解の上、お読みいただければと思います。
最も目立つのは赤ですが、トータルで見ると赤・橙・黄の暖色系で55%になることが見て取れます。その次は寒色系の青紫・青が合計29%ですから、かなり差が見て取れます。
色相別の傾向
- 赤・赤紫
- ピンクもこの中に入ります。コスメ・ジュエリーから食品まで、特に商品ジャンルに拘りなく様々な業種が見受けられます。
- 橙・黄
- 赤よりも柔らかい配色の店舗が多いようです。こちらも商品ジャンルに偏りは見られませんが、食欲を促す色でもあるので、食品分野には欠かせない色となります。
- 黄緑・緑
- 自然食品・アウトドアなどが多いようです。
- 青緑
- 一つも見られませんでした。モニター上の青緑は人工的な感じを受ける場合が多いので、それが敬遠される理由の一つでしょう。
- 青・青紫
- ホビー・水・PCなどの機械類などが中心となります。
- 紫
- 和のお店が中心になります。
明度と彩度
寒色系ではでは中明度で彩度は中から高彩度と幅広く分布しておりますが、暖色系では原色に近い鮮やかな赤・橙も見受けられます。
また黄緑・緑・紫は自然・和風の商品を扱うショップが多いため、中明度で中低彩度の穏やかな色調が主に用いられております。
« 隠す
▲このページの先頭に戻る
