Webデザインにおける配色の基本を学ぼう！【図解たっぷり】

配色とは「色の組み合わせ」を指します。配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響するものです。

• 配色とは
• ３属性
• 色のイメージ
• トーン(色調)
• 基本カラー
• まとめ

配色とは

配色とは「色の組み合わせ」を指します。配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響するものです。

たとえば「閉じる」という意味のボタンの色が、サイト内でころころ変わっては分かりづらいですよね。また「テキストリンク」は、多くのサイトで青が使われています。

色は瞬時にユーザーに意味を伝えられるという特徴を持っています。このレッスンでは「配色」について詳しく学んでいきましょう。

３属性

私たちが普段目にしている色は「３つの属性」により成り立っています。

• 色相
• 彩度
• 明度

の３つです。では、それぞれ見ていきましょう。

色相

色相とは、色味の種類を表します。赤、青、黄色などですね。この色相を丸型に並べたものを「色相環」といいます。

この色相環の中で、反対にある色を「補色」といいます。反対色という事ですね。この「補色」を使うとお互いの色を強調する事が出来ます。以下は「TUTAYA Tポイント」のロゴです。補色が使われていますね。

http://tsite.jp/index.pl

彩度

彩度は、色の鮮やかさを表します。彩度のないものは「無彩色」と呼びます。例えば、黒や白ですね。

彩度の高い色は、鮮やかで明るいイメージです。反対に、彩度の低い色は落ち着いた印象を与えます。

明度

明度は、明るさを表します。この明度を上げると白に近づき、下げると黒に近づいていきます。明度の高い色は、優しい印象を与えます。反対に低い色は、シャープな印象です。

色のイメージ

色はユーザーに様々な印象を与えます。では、それぞれの色が一般的にどのようなイメージを持たれるか、いくつか見ていきましょう。

赤	活動的・注意・欲求
オレンジ	暖かみ・食欲
黄	好奇心・危険
緑	自然・公正・穏やか
青	冷静・知性・クール
紫	エレガント・スピリチュアル
黒	重厚・高級
白	清潔・純粋

たとえば、「楽天市場」や「amazon」等のショッピングサイトを例に見てみましょう。両サイトで「カートに入れる」ボタンが、赤や黄という欲求や好奇心を表す色が使われています。

https://www.rakuten.co.jp/

https://www.amazon.co.jp/

このように、サイトの内容などに合わせて選んでいきましょう。

トーン(色調)

トーンとは「彩度＋明度」の事です。「PCCS（Practical Color Co-ordinate System：日本色研配色体系）」がトーンの近さごとに、色相をグループ分けしています。以下イメージをみてみましょう。

http://www.dic-color.com/knowledge/pccs.html

１２グループに分けられています。また、トーンの持つイメージも書かれています。このトーンを元に配色を決めていくと、サイト全体で統一感を出すことが出来ます。

同じトーンから選ぶ

トーンが同一の色相で配色を行う方法です。以下はペールトーンである色で揃えた例です。

柔らかく優しいイメージのサイトになりそうですね。では、色相はそのままでトーンを変えるとどうなるでしょうか。

上記は「グレイッシュ」というトーンです。ペールトーンに比べ大人っぽく落ち着いた印象です。色相が同じでもトーンによって大きく印象が変わります。しかし、トーンが同じ中から色を選ぶと、カラフルでも統一感がありますね。

異なるトーンから選ぶ

今度は先ほどの反対で、異なるトーンから選んでみましょう。以下は、色相は同一でトーンの異なる色の組み合わせ例です。

上記４色は、全て同じ色相です。トーンで差をつけています。この方法だと、色の持つイメージを強く与えることが出来るでしょう。

基本カラー

デザインの原理・原則を知ろう！という章でも取り上げましたが、配色を決める際には３つの基本カラーを定めると良いでしょう。

上記例のように、ベースカラー・メインカラー・アクセントカラーという３つに分類します。それぞれには以下のような役割があります。

ベースカラー(70%)	背景色などに使用。 一般的には薄めの色が使われる。
メインカラー(25%)	印象を決定する色となる。 ロゴやヘッダーなど。
アクセントカラー(5%)	目立たせたい部分に使用。 リンクなど。

このようなバランスで配色を行う事で、統一感を出すことが出来ます。また、色によって情報を伝えることもできます。たとえば、アクセントカラーをリンクの部分で使用していれば、ユーザーはそのアクセントカラーはリンクであると一目で認識するよう慣れていくでしょう。

ベースカラー

ベースカラーは背景色などに使用する色です。一般的には薄めの色が使われます。また、無彩色(白や黒)もよく使われています。メインカラーやアクセントカラーが、目立たなくなる色は選ばないようにしましょう。ベースカラーの決定には、先ほど学んだ「トーン」の考え方も役立ちます。

メインカラー

メインカラーはサイトの印象を決定する色となります。色の持つ印象とサイトの内容などを考慮し決定していきましょう。また、想定されるユーザーの性別や年齢も含めて考えるとより良いですね。

アクセントカラー

アクセントカラーは、サイト内で重要な部分を目立たせるために使用される色です。たとえば「予約」や「購入」という部分などに使用し、ユーザーの目を引き付けるという使い方が出来ます。上記バランスを保ち、アクセントカラーを使いすぎないよう気を付けましょう。重要なコンテンツが埋もれてしまいます。

https://wowma.jp/user/32700044

上記は「西松屋公式オンラインストア」の商品ページの一部です。「かごに入れる」や「お気に入り」「シェア」というボタンが並んでいます。しかし、オレンジが使われているのは「かごに入れる」ボタンのみですね。メリハリがついていて、とても目立っています。

まとめ

配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響します。色は瞬時にユーザーに意味を伝えられるためしっかりと意味を考えて選ぶようにしましょう。