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

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

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

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

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

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

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

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

関連記事：

• 明度とは
• 彩度とは
• 色の三属性の２つを動かす
• 明度だけを変えてサブカラーを作る
• 彩度だけを変えてサブカラーを作る

印象に残る色相を1サイト1色

通常ウェブサイトは1色だけで作られていることはあまりありませんが、ここでは調査を簡易化するために一番印象に残った色を1色だけ選んでデータを集めていくことにします。多色使いで印象に残る色がわからないという場合は、そのウェブサイトは無視していただいて結構です。

データ取りをしていくわけですが、三属性をそのまま分類しようとすると立体にプロットしていく必要がありますので、まずは色相だけを見ていくことにします。

カラーピッカーを使って色相を分類

ここではカラーピッカーなどのソフトを用いて、HSBのH（色相、色相角）もしくはWindowsの色合いの数値を用いていくことにします。厳密な区分ではありませんが、下記の表に対応させると傾向が見えてきます。プロットに便利なシートは下記よりダウンロードできますので、お使いいただければと思います。また厳密に数値を管理する性質のデータではありませんので、色を見ただけで分類できるという方はご自分の感覚で分類していただいて結構です。

無彩色（白・灰色・黒）は色相環の中に書くようにしましょう。ほぼ無彩色と思われる色（例えば少し青みがかったグレー）などは無彩色の中に含めた方がわかりやすくなります。

またデータを取っている途中で気づいたことがあれば、メモしておくようにしましょう。

色相調査用ワークシート（PDF形式：約100kB）

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

プロットしたデータは左の画像のようになります。ウェブ製作会社のサイトは傾向として青、青紫及び無彩色に集中しており、その次はオレンジという順番になっております。

この表からはわかりませんが、青・青紫を使用しているのは会社が多く、無彩色は個人事業のデザイナーに多いという傾向も出ております。

黄緑・緑は他に使われているサイトがほとんどないので、残してもよいのですが、濃淡を使うと自然のナチュラルな印象が出て、ウェブの会社らしくなくなるので、除外しました。また黄色は非常に明るい色で、メインカラーとして使うと背景色に置く白とのコントラストが取りにくいため除外しております。

この時点で「ありきたりではない」という条件から、世の中のウェブ製作会社で多く使われているオレンジ、青、青紫が逆に使いにくい状況にあるということが伺えます。

現時点で残ったのは赤紫、赤、青緑の２色ということになります。

関連記事：

• 明度と彩度を分析する
• HSBの色相
• Webの配色に関する調査のご協力お願いします
• 色相とは
• 売れるお店の分析