カラーデザインの基本について

うまくカラーデザインをする方法

私は、カラーデザインを学ぶ前までは、自分が好きな色を使って、ホームページを作成していました。

(ちなみに、私は茶色が好きで多用してましたwww)

そんなことはさておき、

今回は、カラーデザインの基本を学んだので、みなさんに共有していきたいと思います。

結論から言いますと、カラーホイールの使い方を理解する!

これだけでホームページにどのような色を組み合わせるか迷わず、意識的に決めることが出来ます。

ということで、今回は、カラーホイールとは何か?と4つの相性の良い色の組み合わせ方をご紹介致します。

カラーホイールとは?

カラーホイールとは、原色(黄、赤、青)と2次色(3原色のうち2つの色を等量ずつ混ぜ合わせた3色)、3次色(カラーホイールでまだ空いている場所を埋めるため両側の色を等量混ぜ合わせた色)の基本的な色を円状にしたものです。

言葉ではわかりづらいと思うので、以下の図を参照ください。

このカラーホイールを使うことで、色の組み合わせを迷わず選択できるようになります。

4つの基本的な組み合わせ

補色

補色とは、カラーホイールで真向かいの位置にある色同士の関係のことです。

正反対の色のため、どちらか一方の色をメインとして使い、もう一方をアクセントとして使うことで効果を発揮します。

下の図の場合、黄と紫、緑と赤など、正反対に位置している組み合わせのことです。

画像に alt 属性が指定されていません。ファイル名: original_%E8%89%B2%E7%9B%B8%E7%92%B0.png

トライアド

トライアドとは、等しい距離にある3つの色の組み合わせのことです。

例えば、赤・黄・青は、子供向けの製品で多用されており、その組み合わせは、プライマリー・トライアドと呼ばれています。

このように、等しい距離にある3つの色の組み合わせは、相性が良くどんなトライアドでも、うまく調和をとることが出来ます。

下の図の場合、赤・黄・青、紫・緑・オレンジなど

画像に alt 属性が指定されていません。ファイル名: original_%E8%89%B2%E7%9B%B8%E7%92%B0.png

スプリット・コンプリメント・トライアド

こちらは、ホイール上の一色を選び、その真向かいにある補色の両隣の色を使います。

この組み合わせを使うことで、デザインに洗練された鋭さが生まれます。

下の図の場合、黄+紫の両隣の色、緑+赤の両隣の色

画像に alt 属性が指定されていません。ファイル名: original_%E8%89%B2%E7%9B%B8%E7%92%B0.png

類似色

類似色とは、ホイール上で隣り合う2色または3色の組み合わせのことです。

こちらは、説明不要ですよね!

まとめ

今回は、カラーデザインについて共有していきました。

上記で解説した4つの基本的な組み合わせ以外にも、

単色をチントとシェードを使ってデザインしたり、寒色と暖色、色のトーンなど、カラーデザインは奥が深いなと勉強をしていて感じました。

これから、自分自身もっとカラーデザインを勉強していきたいと思います。