色の役割
WEBデザインにおける色の主な役割は、ブランドイメージの構築、視覚的誘導（UI/UX）、心理的効果による行動喚起（CVR向上）です。70:25:5の法則（ベース・メイン・アクセント）に基づき、3色程度に絞ることで、まとまりと可読性を保ちながら、ユーザーに安心感や意図した印象を瞬時に伝えます
全体の配色の割合
色を決める前に、どういった割合でサイト全体に色を使っていくのかを決めることが必要になります。
一般的には
ベースカラー：メインカラー：アクセントカラー ＝ 70：25：5
で配色すると綺麗にデザインすることができると言われています。
メインカラーの決め方
サイトのイメージとなる色なので一番重要な色となります。
一番初めにこのメインカラーを決めることで他の、「ベースカラー」「アクセントカラー」の色が決め安くなります。
一般的にはサイトを作成する企業のイメージカラーを採用したり、ロゴのカラーと同じ色を使ったりすることが多いです。
ベースカラーの決め方
ベースカラーとはサイトの約70%を占める色で、サイトの背景色に使う色です。
白やグレーなどサイトの内容に大きな影響を与えにくい色を使っているサイトが多いです。
ベースカラーを決める際は、明度の高い淡い色を使うといいです。
アクセントカラーの決め方
アクセントカラーは全体の印象を引き締めたり、変化をつけたりすることができて、サイト内で目立たせたい部分に使うことが多いです。
一般的にお問い合わせやリンクのデザインに使われています。
WEBデザインにおける配色の考え方
WEBデザインにおいて色選びは非常に重要な要素のひとつです。
色は視覚的な印象を大きく左右し、サイトを訪れたユーザーの第一印象を決める役割があります。
伝えたいメッセージやブランドのイメージを色によって補強することが大切です。
反対色や補色
配色の決め方として「反対色や補色を使う」「同じ色相で揃える」ことが一般的です。
反対色や補色を使うことで視認性が高まり、印象に残るメリハリのあるデザインになる一方、同じ色相で揃えると全体に統一感が生まれ、落ち着きや信頼感、洗練された印象を与えることができます。
また、人は明度が高い色を軽く感じ、明度の低い色を重く感じます。
同じ色相
グラデーション
他にも「グラデーション」を使うことで全体的なまとまりを出すこともできます。
色相の異なる色を使うと、配色にまとまりを出すのが難しくなることがありますが、グラデーションを取り入れることで、自然なつながりが生まれ、視覚的な違和感を軽減できます。色と色の間に段階的な変化を持たせることで、異なる色同士でもスムーズに調和させることができ、デザイン全体に統一感をもたらします。
複数の色を使う場合は、色々なサイトの配色を参考にしてみたりシュミレーターで色を作ってみることもお勧めします。
色の持つイメージ
色にはそれぞイメージがあります。サイトのデザインによってイメージにあった色を使うことで表現したい世界観により近づくと思います。
以下に色の持つ代表的なイメージを一覧にしましたので参考にしてみてください。
色には、人の感情や印象に影響を与える「カラーイメージ」があります。配色を決める際は、クリエイティブの目的や雰囲気に合った色を選ぶことが大切です。
たとえば、交通標識に赤色が使われるのは、「危険」「緊張」といった印象を与えるからです。このように、色から特定の意味やイメージを連想することを「色の象徴性」といいます。
「冬に赤と緑」の組み合わせを見ると、クリスマスを思い浮かべたり、
「トイレで青と赤」と聞けば、自然と「男性用・女性用」を思い浮かべるのも象徴性の一例です。これは単色だけでなく、三色旗のような複数色でも働きます。
また、色の連想は国や文化によっても異なります。日本では赤いフルーツ＝リンゴを思い浮かべる人が多いですが、国によっては青リンゴが一般的な場合もあります。
このように一般的な色の持つイメージからサイトをデザインするとより伝えたいイメージが伝わりやすくなります。
参考リンク
RGBとCMYK
RGBとCMYKは、色を表現するためのカラーモデルです。
これらは仕組みや用途が根本的に異なるため、デジタルで作ったデータを印刷する際には、RGBからCMYKへの変換が必要です。
ここからは、それぞれのカラーモデルの仕組みや特徴を解説し、印刷時に変換が必要な理由を詳しく紹介します。
RGBとは
RGBは、「光の三原色」である赤（Red）、緑（Green）、青（Blue）を組み合わせて色を作るカラーモデルです。
主にデジタル機器で使用され、PCやスマートフォンの画面、webサイト、動画など、モニターで表示される色はすべてRGBによって表現されています。
各色は「0〜255」の数値で強さを調整でき、数値が大きいほど色が明るくなります。すべてを最大値255にすると白、0にすると黒になるのが特徴です。
ちなみに、光を重ねるほど明るくなるこの仕組みを「加法混色」といいます。
印刷物で使われるCMYKとは仕組みが異なるため、RGBで表示された鮮やかな色を印刷時に正確に再現できず、くすんで見えたり沈んでしまったりすることがあります。
CMYKとは
CMYKは、「色の三原色」であるシアン（Cyan）、マゼンタ（Magenta）、イエロー（Yellow）に、黒（Key plate）のインクを加えて色を作るカラーモデルです。
ポスターやチラシといった紙媒体以外にも、パッケージやTシャツなど、印刷を前提とした幅広い製品の基本的な色表現方式として採用されています。
各インクは「0〜100％」の濃度で調整でき、数値を上げるほど色が濃く、重ねるほど暗くなります。
このインクの重ね合わせで色を作る方式を「減法混色」といい、理論上はシアン・マゼンタ・イエローをすべて100％にすると、黒になります。
しかし、実際の印刷では完全な黒にはならず、やや濁った色合いで出力されるため、鮮やかで深い黒を表現するには、黒インク（K）の追加が欠かせません。
このように、RGBとCMYKは色の表現方法や用途が異なるため、同じ画像でもディスプレイと印刷物では色味や鮮やかさが変わってしまいます。
そのため、印刷時に画面の色を忠実に再現するには、RGBからCMYKへの変換が必要です。
次の章では、変換が必要な理由をさらに詳しく解説します。
印刷時にRGBからCMYKへの変換が必要な理由
デジタルで制作した画像やデザインを印刷する場合、画面上の色と同じように仕上げるためには、RGBデータをCMYKデータに変換する作業が欠かせません。
ここでは、変換が必要な3つの理由を解説します。
1．RGBの鮮やかさを印刷では再現しにくいため
RGBは、光の三原色を使ってディスプレイ上で非常に鮮やかな色を表現できます。
一方でCMYKは、インクを混ぜて色を作る仕組みのため、表現できる色の範囲（色域）がRGBよりも狭く、特にビビッドな青や紫、蛍光グリーンなどは印刷でうまく再現できないことがあります。
そのため、RGBで作成した画像をCMYKに変換すると、色がくすんだり、暗く見えたりすることがあります。
これはRGBから変換する際に、CMYKで再現できる最も近い色に置き換えられるためです。
以下の花畑の写真を例に見てみましょう。
RGBデータでは鮮やかに見える青空や、紫や赤の花の色が、CMYKに変換すると落ち着いた印象に変わっているのがわかります。
左：RGB、
2．ディスプレイと紙で色の見え方が変わるため
画面は自ら光を発して色を表示するのに対し、印刷物は紙に乗ったインクが光を反射することで色が見えます。
例えば、スマートフォンやPCの画面は、ライトのように明るく発光するため、色がパッと目立ちます。
一方、印刷物は紙に当たった光が反射して目に届くため、画面よりも暗く感じられることがあります。
この違いも、画面上と印刷物で色の印象が変わる理由のひとつです。
3．印刷時の色のズレを防ぐため
RGBデータのまま入稿すると、多くの場合、印刷所側でCMYKへの変換が行われます。
その際、印刷所では一律の設定を使うことが多いため、細かな色の希望までは反映されにくく、画面で見た色よりも落ち着いた仕上がりになることがあります。
こうした色のズレを防ぐには、入稿前に自分でCMYKに変換し、色味を確認・調整しておくことが大切です。
自分で変換を行えば、仕上がりのイメージが明確になり、印刷所への要望もより正確に伝えられます。