名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

WEBデザインで活用できる配色テクニック 共通性の原理と明瞭性の原理編

2022
.06.29

WEBデザインで活用できる配色テクニック 共通性の原理と明瞭性の原理編

前回は、WEBデザインで活用できる配色のうち、アメリカの色彩学者であるディーン・ジャッドによる色彩調和の4原理の中から秩序の原理と親近性の原理についてご紹介しました。

前編:WEBデザインで活用できる配色テクニック 秩序の原理と親近性の原理編

今回は、色彩調和の4原理の中から共通性の原理と明瞭性の原理についてご紹介します。

【目次】
1. 共通性(類似性)の原理に適う配色
 a. ドミナントカラー配色
 b. ドミナントトーン配色
 c. トーンオントーン配色
 d. カマイユ配色
 e. フォカマイユ配色
 f. トーンイントーン配色
 g. トーナル配色
2. 明瞭性(明白性)の原理に適う配色
 a. ビコロール配色
 b. トーナル配色
3.今回のまとめ

共通性(類似性)の原理に適う配色

共通性(類似性)の原理は、共通の側面または特性を持っている色どうしは調和するという原理です。ここでは、ドミナントカラー配色やドミナントトーン配色、トーンオントーン配色など、7つの配色をご説明します。

ドミナントカラー配色


ドミナントカラー配色は、同一色相から類似色相で統一し、トーンで変化をつける配色です。3色以上の多色配色に統一感を持たせるために活用されています。

ドミナントトーン配色


ドミナントトーン配色は、同一トーンを基本とした類似トーン程度までの範囲で統一し、色相で変化をつける配色です。ドミナントカラー配色と同様に、3色以上の多色配色に統一感を持たせるために活用されています。

トーンオントーン配色


トーンオントーン配色は、同一色相もしくは類似色相で、明度差を比較的大きくとった同系色濃淡配色です。ドミナントカラー配色も同類の配色となります。

カマイユ配色


カマイユ配色は、単一色相で、明度と彩度の差も極めて小さい配色です。ソフトでエレガントな印象を表現することが可能です。

フォカマイユ配色


フォカマイユ配色は、近似色相で、明度と彩度の差が微小の配色です。カマイユ配色の少し色相がずれた配色でもあります。

トーンイントーン配色


トーンイントーン配色は、同一トーンで、色相で変化をつけた配色です。ドミナントトーン配色、トーナル配色、フォカマイユ配色も同類の配色となります。

トーナル配色


トーナル配色は、濁色による「灰み」を用いたドミナント配色です。ソフトトーン、ダルトーン、ライトグレイッシュトーン、グレイッシュトーンを用いた同一・類似トーンであり、ドミナントトーン配色とトーンイントーン配色が同類の配色となります。

明瞭性(明白性)の原理に適う配色

明瞭性(明白性)の原理は、色の選択に曖昧さがなく、明確である配色は調和するという原理です。ここでは、2色で構成されたビコロール配色と3色で構成されたトリコロール配色についてご説明します。

ビコロール配色


ビコロール配色は、高彩度色や白、黒などを用いた明快なコントラストの2色配色です。

トリコロール配色


トリコロール配色は、高彩度色や白、黒などを用いた明快なコントラストの3色配色です。

今回のまとめ

今回ご紹介した共通性の原理と明瞭性の原理は、配色を行う上で統一感を持たせるための配色方法がメインとなっています。これらの配色方法を頭に入れておくことにより、WEBデザインや企業の資料作り等を行う際に役立てることができ、統一感が感じられるホームページや資料を制作することが可能です。
配色を日頃から行なっているWEBデザイナーやインテリアコーディネーター等の方から、デザインや配色について勉強したことがない素人の方まで、今回ご紹介した配色方法をぜひ役立ててみてください。

AUTHOR

著者情報

執行役員 デザイナー

N.H.

大学を卒業後、新卒で株式会社オンカに入社し、WEBデザイナーとしてコーポレートサイトやポータルサイト、採用サイト、ECサイト、LPなど様々な種類かつ多種多様な業種のホームページ制作にオールマイティに対応。現在は、執行役員・デザイナーチームのマネージャーとしてWEBデザインのさらなる品質向上に尽力している。

  • カラーコーディネーター AD
  • フードコーディネーター 3級
  • WEBデザイナー検定エキスパート

PAGE TOP