色探求人のホームページ：色カラー

押さえておきたい配色構成のテクニック

配色テクニック

色の配色の考え方や一定の評価が定まっている配色技法を紹介します。色の組み合わせの中からの目的に応じた配色は対象物の印象を増大させます。

二色以上の色を組み合わせることを配色といい、配色によりひとつの色では表現できなかった効果を作ることができます。その配色を実際に入れるものの形やサイズ、比率によってそのもののイメージができ上がります。

押さえておきたい三色の配色構成

ベースになる3つの色を作る

メインカラー・サブカラー・アクセントカラーと3つの色の構成を作ることによってキレイな配色が生まれます。

メインカラーは配色の構成の中で最も広い面積を占める色で、全体のイメージを表す色となります。サブカラーはメインカラーの次に面積を占める色でメインカラーを補い、与えるイメージの方向性を決める色です。画面内の多くを占拠するこの2色で大部分のイメージが決まります。

アクセントカラーはメインカラー・サブカラーの反対色や高彩度の色をワンポイント取り入れた色になります。小さい面積になりますが目立つ色です。アクセントカラーがあることによって構成要素を引き締めたり、注目を集める役割があります。

3つの色の構成比は、メインカラーを約70%、サブカラーを約25%、アクセントカラーを約5%程度にすると綺麗な配色が作られます。アクセントカラーは必ず必要というわけではありませんが、あった方がバランスを取りやすくなります。

メインカラーは記憶に残る色で、サブカラーはメインの色を助ける色、アクセントカラーはとにかく注目を集める色という感じで認識しておくといいと思います。

4つの配色の効果

色が美しく見えるのには仕組みがあります。4つの配色効果を取り入れてみましょう。

4つの配色の仕組み

１．同系色による配色
ルールを定めて規則的に選んだ色は美しくまとまります。
２．類似色による配色
色の中に、共通性・類似性がある配色は美しくまとまります。
３．対照色による配色
色同士が明解な関係である色は美しくまとまります。
４．認知による配色
よく見慣れた配色は記憶への働きかけにより、安定感が生まれます。見慣れた配色は美しく感じます。

配色技法

色の展開で悩んだときに配色の考え方が集約された配色技法は役立ちます。色を上手く構成できたときには、何かしらの配色技法が当てはまっている場合が多いです。

トーン・オン・トーン配色：同系の色相による濃淡で作る配色。色相の持つイメージが強調されます。

ドミナント・カラー配色：多色にまとまり感を持たせるために色を一定にした配色です。

トーン・イン・トーン配色：薄い色なら薄い色、濃い色なら濃い色と同系のトーンでまとめた配色です。

トーナルカラー配色：中間色による配色です。グレーみの落ち着いた色の組み合わせになります。

ドミナント・トーン配色：多色にまとまりを持たせた配色です。色相を暗めのトーンにあわせて一定にしたものです。

カマイユ配色：ほとんど同じ色で素材やテクスチャ処理の違いでつくる配色です。遠目には１色に見えるような繊細な配色になります。

フォ・カマイユ配色：ほぼ同色で微妙に色相とトーンがずらした配色です。

トリコロール配色：コントラストのはっきりした配色です。フランス国旗やイタリア国旗などの３色での組み合わせです。

ビコロール配色：コントラストのはっきりした２色での配色です。

マルチカラー配色：３色以上での多彩色配色です。

グラデーション配色：３色以上の色をトーンの階調の変化にあわせて並べた配色です。

レピテーション配色：３色以上の色を繰り返し使って全体のまとまりをつくるです。

ナチュラル・ハーモニー配色：自然な調和感をつくる配色。自然にある色を基調にした組み合わせです。

コンプレックス・ハーモニー配色：人工的な調和感をつくる配色です。グレーの入ったやや暗め・落ち着いた色を基調にした組み合わせです。

といった配色技法があります。

COLOR LECTURE

Webアンケート調査・ネットリサーチ

色のイメージ効果を知ろう。カラーボックスを選ぶとその色の全てが分かります。

配色の仕組みが分かる

▲ ページトップへ

押さえておきたい配色構成のテクニック

当ホームページの色の多くは印刷に使われるカラーモードの色をベースにしてなるべく目に優しい色を採用しています。Adobeのイラストレーターとフォトショップを利用し、Web用に変換してホームページ作成しています。口コミやSNS拡散歓迎です。

Copyright © 2009-2024 https://iro-color.com - 色の参考書籍 - Webツール - お問い合わせ・依頼