色彩はWebデザインにとって非常に重要なものである一方で、無限の選択肢があり、扱いきれない・扱いきれているか不安な方々もいるのではないでしょうか。
ここでは、色彩の基本的な専門用語の解説から、実践で使える色彩心理、カラーブレンドする際に使える便利ツールまで解説し、皆さんが色彩を正しく使えるようにサポートします。
下記トピックに従って色彩について解説していきます。
色彩にこだわる理由はただ一つ「見る者の感情に強く作用するから」です。
今や、デザイナーに限らずビジネスマン全般で色への理解は重要視されています。ネクタイの色、スーツ、提案資料の色使いなど、様々なお客様とのタッチポイント一つひとつで色彩にこだわることが、お客様の動向ひいては売り上げを左右するからです。
色彩を使いこなすことで、より効果的なサイト（クリエイティブ）を生み出せるようになりましょう
理論に入る前に、次の色にまつわる用語について解説します。
原色は、他のすべての色調の基礎となる色です。人間は、マゼンタ、シアン、イエローの3色を基本色として知覚しています。私たちが目にする他のすべての色は、この3色をさまざまな量、明るさ、色合い、濃淡で組み合わせたものです（下記参照）。
従来は、赤、青、黄の3色が原色とされていましたが、研究の結果、マゼンタ、シアン、イエローの3色の方が、私たちの色彩感覚をよりよく表現していることが明らかになりました。
Web上では、RGB（赤・緑・青）とHEX値を使って色を表現しています。
RGBカラーシステムでは、すべての色は3つの異なる値の組み合わせとして定義されています。
HEXカラーシステムでは、各値を16進数に変換して表現します。
2文字ごとに色の値を表すので、Facebookブルーの場合、赤は3b、緑は59、9bは青となります。
また、色には「暖かさ」があり、暖色系と寒色系に分類されます。
暖色系は、赤や黄色が多く含まれます。暖色系は、デザインに温もりや情熱を感じさせることができます。また、国際的なストップサインを連想させるような、非常に強いメッセージ性を与えることもあります。エラーメッセージに赤がよく使われるのは、そのためです。
寒色系は青色を多く含み、寒冷地、氷、冬、水、夜、死、悲しみを連想させます。孤独、冷たさ、恐怖といった意味合いも含まれます。また、寒色系は攻撃的でなく、落ち着きのある色です。青い空や、ビーチの透き通った青い海を思い浮かべるような色彩も存在します。
画像の温度を上げることは、オレンジ色の割合を上げることを意味します。これは、太陽がオレンジ色に輝くと暖かさをもつ風景に見えるのと同じです。逆に、温度を下げると、曇った日のように寒々しくなり、魅力が半減します。
色に白を加えると色合いが、黒を加えるとシェードができます。色合いとシェードは、ベースとなる色に白と黒をさまざまなレベルで加えることで、モノクロームの配色を作ることができます。
例えば、下の画像のように#8dbdd8（薄い青）をベースカラーとする場合、2つのティント（明るい青）と2つのシェード（暗い青）を選ぶことで、モノクロームの配色を作ることができます。
彩度とは、色の濃さを表すものです。彩度を上げると色が濃くなり、彩度を下げると色あせて明るく見えます。「水色」「濃い緑」というのは、彩度の変化を表現しているのです。
色相とは、ある色が赤、橙、黄、緑、青、藍、紫（虹の色）とどの程度似ているか、あるいは異なっているかを定義するものです。つまり、ある色を「緑がかった青」と表現する場合、2つの色相で定義していることになります。
明度（value）はトーン（tone）とも呼ばれ、純白と比較したときの色の明るさを定義します。
基本的なカラーホイールには、配色を作成するために使用される12色の標準色が含まれています。各項目は、異なる彩度、色相、色合い、シェード、および隣接する色の混合で実現できる色の類似色を表します。黄色とオレンジの間にある色は、同じ量の色相（黄色とオレンジ）を混ぜたものです。
赤、黄、青が原色です。バイオレット、オレンジ、グリーンは2次色です。それ以外は3次色と呼ばれ、1次色と2次色が混ざった色になります。
デザインはカラーホイールを使って配色を決めるのですが、その配色は4種類あります。
デザイナーは、カラーホイールの中から複数のカラーファミリーを組み合わせて配色を行います。これは通常、次のパターンのいずれかに合わせて行うのが良いとされています。
1. モノクローム
モノクロームの配色は、1つのベースカラーのさまざまな色合い、濃淡、彩度から構成されています。非常にまとまりのある配色ですが、単調になる危険性があります。
2. 補色
補色は、カラーホイールの反対側にある2つの色に基づく配色です。2つの色相が大きく異なるため、非常にインパクトがあり、目立ちます。
cf：CTAには、補色を選びましょう。下記の例では、背景色に青を使っているため、CTAのボタンには黄色に近いオレンジを使用しています。
3. アナログ
カラーホイール上で隣り合う3色を組み合わせた配色です。色調の類似性から、単色配色のような単調さはなく、非常にまとまりのある統一感のある配色にすることができます。
4. 三原色
カラーホイールに正三角形（3辺の長さが同じ三角形）を描き、その頂点にある3色を選ぶと、トライアド配色になります。これにより、多様でありながらバランスの取れた配色となります。
すべての色には、固有の色調と意味があります。色を慎重に選ぶことで、サイト全体のメッセージを強化することができます。
※色の意味は、文化や地域によって大きく異なることがあります。以下の説明は、あくまでも一説であり大まかな説明になります。
赤は火や太陽を連想させるため、燃え上がるような感情とエネルギッシュな印象を持つ色です。とにかく目を引く色で、その目立ち具合は良い意味でも悪い意味でも使われます（「止まれ」の標識がいい例ですね）。
配色としては、
「赤×モノクロカラーだとスタイリッシュな印象」に
「赤×カーキやネイビーだと赤が一層引き立つ印象」に
「赤×ピンク・ブルーだと少々可愛いめな印象」に
なります。
オレンジは赤の強い刺激と黄色の明るさが合わさった色で、陽気でフレンドリーな暖かみを感じる色です。安心や安全を想起せる色でもあり、家族向けのクリエイティブに良く使われます。ビタミンカラーとも言われる楽しく・健康的な色になっています。
配色としては、
「オレンジ×ブラウンやネイビーなどの落ち着いた色だと明るいけど大人っぽい印象」に
「オレンジ×カーキや緑は自然味を感じさせる印象」に
「オレンジをモノクロームで薄い色と配色すると女性っぽい印象」に
なります。
黄色は希望や好奇心など、明るく・ワクワク感のある、活動的な色です。光に近い色であることから明るい印象を持つ色でもありますが、一方で警戒色としても使われています。人によっては刺激が強すぎると感じることもあるので、使い方には注意が必要です。
配色としては、
「黄色×黒だと警戒心を掻き立てる刺激的な印象」に
「黄色×白や水色、薄いグレーだとより一層明るい印象や爽やかな印象」に
「黄色×彩度を落とした緑や赤オレンジだとちょっとレトロな雰囲気」に
なります。
青は清潔感、誠実さ、冷静さを持つ色です。寒色と言われることから冷たさを感じさせる色でもありますが、一方で時間の経過が遅くなる性質も有り、リゾート地（青い海、青い空など）の印象から落ち着きを持った色でもあります。憂鬱や悲しみといったネガティブな印象も持っているので、使い方には注意が必要です。
配色としては、
「青色に濃い色を組み合わせることで男性的でクールなイメージ」に
「薄い青色×黄緑色や薄いグレーなどを合わせることで爽やかな清涼感のある印象」に
なります。
緑は癒し、リラックス、調和をイメージさせる色です。自然の色でもある緑は生命力からくる力強さも示す色でもあります。調和をイメージさせることから、人とのつながりやそこからさらに、安心・安全を想起させる色でもあります。
配色としては、
「緑色×薄い緑や薄い茶色だとフレッシュさや自然の爽やかさを感じる印象」に
「緑色×エンジや黒だと緑の力強さを際立たせる重厚な印象」に
「緑色×黄色や青のビビッドカラーだとスポーティーな印象」に
なります。
茶色は、自然体を表す色で、落ち着きや堅実さ素朴さを持つ色です。生活する中で当たり前のように目にする色であり、バリエーションも様々で、古来より様々な色を組み合せて使われてきました。堅実で正直なイメージを持つ一方で、頑固さや重さ、地味さを持つ色でもあります。汚い印象を与えてしまうこともあるので、要注意です。
配色としては、
「茶色×青や水色だと冷涼感や清潔感のある印象」に
「茶色×くすんだ黄色や青、緑だと高級感のあるクラシックな印象」に
「うすい茶色×薄い黄緑、ピンク、黄色だと優しい雰囲気のナチュラルな印象」に
なります。
紫は、芸術性、高貴さ、神秘的な印象を持つ色です。青と同様落ち着きのある色ですが、より神秘的でスピリチュアルでセンスを感じさせる色でもあります。赤と青とが混ざった色なので、全体的にバランスが良く、赤で強すぎる時、青で落ち着きすぎる時、ピンクで甘すぎる時などに紫を使うとうまくおさまってくれることがあります。
配色としては、
「紫色に色味の違う紫やネイビー、ピンクでエレガントさや神秘性を感じさせる印象」に
「紫色×黒、金、赤だと落ち着きのある安心感のある印象」に
「薄い紫色×薄いオレンジや黄色、緑だと安らぎや和みを与える印象」に
なります。
白は、光からくる清潔感、明るさ、純真さだけでなく、完璧のイメージも持つ色です。どんな色とも合わせやすい色なので、多くのサイトで目にします。しかし、真っ白が必ずしも良い色とは限りません。明るすぎることもあるため、オフホワイトなど状況に応じて少し色を付けてみるのもおすすめです。
配色としては、
「白色にビビッドカラーを組み合わせることで、バランスよく明るく楽しい印象」に
「白色×黄色、赤、黒だと対比効果が強まりかなり目立つ印象」に
「白色×青系統の色だと、クールで清潔感のある印象や、やや内省的な印象」に
なります。
黒は、強さ、高級感、悪、死、未知を意味します。黒は白と異なり染まりにくい色であり、何と組み合わせてもその存在感を示します。一方で、闇といったイメージから、明るい色と組み合わせると、組み合わせた明るい色を一層際立たせることもできます。
配色としては、
「黒色に赤やオレンジ、グレーを組み合わせると元気で活気のある印象」に
「黒色に茶色やネイビーを組み合わせると重厚感のある印象」に
「黒色に水色やグレーを組み合わせるとスタイリッシュでクールな印象」に
なります。
色彩設計の複雑さと柔軟性から、色彩設計するための支援ツールを求める声も多くあると思います。
その中でもおすすめのカラーツールを種類別に7つご紹介します。
パレットジェネレーターは、各色を手動で選択するか、1色または2色をベースに色を自動生成してくれます。
COLOURCODEは、モノクロや補色などのスキームタイプのプリセットモードを備えており、スキームを.scss、.less、画像、またはパーマリンクとしてエクスポートすることが可能です。また、画面上でマウスを動かすと色合いが更新されるので、楽しい発見ができるツールでもあります。
Adobe Color CC、旧「Kuler」もスキームタイプのプリセットを備えていますが、COLOURCODEにはない素晴らしい機能が2つ追加されています。まず、Colorにはソーシャルレイヤーが組み込まれており、他の人のパレットを探索することができます。2つ目は、画像から直接配色を抽出する機能で、これはかなり重宝する機能になっています。
色の組み合わせの参考が必要な場合はぜひこちらをご利用ください。
以下のサイトでは、画像やデザインを使って、さまざまな色の組み合わせがどのように機能するかを説明しています。
COLOURLoversは、色、パレット、パターン、色に関する記事などを共有する色彩マニアのコミュニティを主催しています。
Design Seedsでは、静物や自然の写真をカラーパレットとともに紹介し、デザインのインスピレーションを与えています。また、色で検索することもできますので、パレットを完成させるのに役立ちます。
他のデザイナーからインスピレーションを得たい時はこちらを。
Awwwards - ウェブ上の優れたデザインの例を共有してくれています。
Dribbble と Behance - タイポグラフィー、イラスト、プロダクトデザイン、建築、Webデザインなど、様々なデザインのポートフォリオサイトです。
色の知識を活かして、デザインに様々な刺激や意図を組み込んでみてください。
色彩は、見た人に特定の雰囲気や感情を与える強力なツールであり、ブランドの認知度を高めるためにも利用できます。コカ・コーラの看板は、その象徴的な文字だけでなく、色だけで見分けがつくでしょう。
スターバックスのようなフランチャイズでは、各店舗ごとの色の違いにおいて許容範囲が極めて低く設定されているほど、色は重要です。各フランチャイズ点は、承認された色のリストの中から選択しなければいけないのです。開店前には本社の担当者が来て、壁に塗られた色が許容範囲内に収まっているかどうかを確認します。
色を正しく使うことで、サイトがより自然でまとまったものになります。基本を押さえた上で、さらに様々な色彩を探っていってください。そして何よりも、正しい色の使い方をした美しい事例を見て、実践して、実践して、実践してみてください。
いかがでしょうか。
当社では、Webデザイナーの方が意のままにサイト構築できる、次世代型ノーコードツール「Webflow」の無料説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営