Webデザインに必要なカラー（色）の基礎知識をシンプルに解説します
Webサイトのデザインを行う上では「色の選定」も重要な要素です。色はユーザーに視覚的に情報を伝えたり、イメージを持たせたりする役割もあります。色を構成する属性や色の種類、一般的に持たれている各色のイメージを見ていきましょう。
吉田先生
色は瞬時にユーザーに意味を伝えられるという特徴を持っています。
WEBデザインの基本カラー
前半のレッスン【デザインの４原則】反復でもご紹介したように、WEBサイトの配色を決める際には３つの基本カラーを定める方法がよく利用されています。
ベースカラー、メインカラー、アクセントカラーには以下のような役割があります。
| ベースカラー(70%) |
背景色などに使用。
ベースカラーは背景色などに使用する色で、一般的には薄めの色が使われます。また、無彩色(白や黒)もよく使われています。メインカラーやアクセントカラーが、目立たなくなる色は選ばないようにしましょう。 |
| メインカラー(25%) |
印象を決定する色となる。
メインカラーはサイトの印象を決定する色となります。ロゴやヘッダーなどに使われることも多いので、色の持つ印象とサイトの内容などを考慮し決定していきましょう。また、想定されるユーザーの性別や年齢も含めて考えるとより良いですね。 |
| アクセントカラー(5%) |
目立たせたい部分に使用。
アクセントカラーは、サイト内で重要な部分を目立たせるために使用される色です。たとえば「予約」や「購入」という部分などに使用し、ユーザーの目を引き付けるという使い方が出来ます。上記バランスを保ち、アクセントカラーを使いすぎないよう気を付けましょう。重要なコンテンツが埋もれてしまいます。 |
このようなバランスで配色を行う事で、統一感を出すことが出来ます。
また、色によって情報を伝えることもできます。
下のサイトは「西松屋公式オンラインストア」の商品ページの一部です。
https://wowma.jp/user/32700044
「かごに入れる」や「お気に入り」「シェア」というボタンが並んでいます。
しかし、背景食費オレンジが使われているのは「かごに入れる」ボタンのみですね。メリハリがついていて目立っていますし、何度も目にすることでユーザーはオレンジ＝購入ボタンと認識してくれます。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
Webデザインに必要な色の基本を覚えよう
Webサイトに統一感をもたせ、ユーザーの使いやすさにも影響するカラーリング。
まず、３つの基本カラー（+α）の色を使ってWEBサイトのデザインを行っていくために必要な色の知識を学びましょう。
発色方法について
加法混色(RGB)
黒を下地とし、色（光）を重ねるごとに白に近づきながら色を作り出していく発色方法です。R（赤）、G（緑）、B（青）３色の配分を変えていくことで、様々な種類の色を生み出します。
WEBサイトで使用する色は、加法混色によって表現されています。
cssもrgba()という色の設定方法を使用しましたね。
加法混色では光を出力する装置によって、色の見え方が変わります。
家電ショップのTVコーナーを連想してください。同じ番組でもディスプレイによって色の見え方が違いますよね。このように同じRGBの比率で設定された色でも、装置の性能やメー力一によって見え方が変わります。個々のディスプレイ設定の影響であったり、環境光の影響も受けますね。
つまり加法混色は、環境（使用している機器など）によって見え方が変わりやすい混色方法であるとも言えます。加法混色によってデザインされるものは、環境による色の差異はある程度許容する必要があります。
減法混色(CYMK)
白を下地に色を混ぜて黒に近づきながら色を作り出す発色方法です。
印刷物のようなインクを使った発色は減法混色にあたります。
通常の印刷機の場合、C（シアン）、M（マゼンダ）、Y（イエロ一）、K（ブラック）のインクを混ぜ合わせて様々な色を表現しています。理論上はCMYだけですペての色が表現できるとされていますが、三色から黒を作るのは困難。このため黒専用のインク(K)は別途用意されていることが多いです。
減法混色は下地の色や材質、インクの色で発色が決まります。
加法混色と同じくインク・素材・印刷機器によって色の見えには違いが生じますが、加法混色に比べると著しい見え方の違いは起こりにくい混色方法と言われています。
まとめ
Webデザイン・制作では一般的に加法混色（RGB）カラーを基本としています。デザインツールで作成する際はCYMKカラーを選択してしまわないように注意しましょう。
Webデザインの基礎「色を作る３属性」
私たちが普段目にしている色は「３つの属性」により成り立っています。
- 色相
- 彩度
- 明度
の３つです。では、それぞれ見ていきましょう。
色相
色相とは、色味の種類を表します。赤、青、黄色などですね。
この色相を丸型に並べたものを「色相環」といいます。
この色相環の中で、反対にある色を「補色」といいます。反対色という事ですね。
「補色」を使うとお互いの色を強調する事が出来ます。
以下は「TUTAYA Tポイント」のロゴです。補色が使われていますね。
彩度
彩度は、色の鮮やかさを表します。
彩度のないものは「無彩色」と呼びます。
黒や白、そのグラデーション上に位置する灰色は無彩色です。
無彩色以外の彩度を持つすべての色は「有彩色」と呼びます。
彩度の高い色は、鮮やかで明るいイメージです。
反対に、彩度の低い色は落ち着いた印象を与えます。
有彩色は豊かな表現が可能になる一方、組み合わせによって色の効果を打ち消すこともあります。無彩色は無機質な印象ももありますが、色味がないため、どんな有彩色と組み合わせても馴染む特性があります。
明度
明度は、明るさを表します。
この明度を上げると白に近づき、下げると黒に近づいていきます。
明度の高い色は、明るく優しい印象を与えます。
反対に低い色は、落ち着いた印象やシャープな印象です。
Webデザインに必要な与える「色のイメージ」を知る
明度や彩度だけではなく、色（色相）も見る人に様々な印象を与えます。
寒色・暖色・中間色
赤や黄など、暖かみを感じさせる有彩色を暖色
青や紫など、冷たさを感じさせる有彩色を寒色
と呼びます。
暖色と寒色の中間に位置する緑や赤紫は中性色と呼ばれることもあります。
文字通り暖色は温かみを与える色味で、活発さなどのイメージにも繋がることから飲食店のロゴなどにもよく使われています。一方、落ち着きや知的さの表現には寒色が使われやすく、金融機関や公共機関、IT関連では青を CI（コーポレート・アイデンティティ）に採用している企業が多いです。
代表的な色のイメージ
次は、代表的な色（純色）のイメージを見てきましょう。
| 色 | 色名 | イメージ |
|---|---|---|
| 赤（red） | 活動的・注意・欲求 | |
| 青（Blue） | 冷静・知性・クール | |
| 緑（Green） | 自然・公正・穏やか | |
| 黄色（Yellow） | 好奇心・危険 | |
| 橙（Orange） | 暖かみ・食欲 | |
| 紫（Purple） | エレガント・スピリチュアル | |
| 黒（Black） | 重厚・高級 | |
| 灰（Gray） | モダン、知的 | |
| 白（White） | 清潔・純粋 |
「楽天市場」や「amazon」等のショッピングサイトを例に見てみましょう。
両サイトで「カートに入れる」ボタンには赤や黄という欲求や好奇心を表す色が使われています。
（左）https://www.rakuten.co.jp/ / （右）https://www.amazon.co.jp/
このように、サイトの内容などに合わせて選んでいきましょう。
まとめ
色は瞬時にユーザーに意味を伝える役割がある反面、使いすぎるとユーザーが混乱する原因にもなります。しっかりと意味を考えて選ぶようにします。
次回はこうした色をどのように使っていくか、配色について紹介します。
ワイヤーフレームに色が画像を入れて、デザイン図へと変更していきましょう。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで