デザインが苦手な人でもすぐにできる配色の基本と無料で使えるツール5選

デザインが苦手な人でもすぐにできる配色の基本と無料で使えるツール5選

パワーポイントやWebサイトの配色をどうすれば良いのか困っていませんか?

色彩理論や色彩学を本気で勉強していたりすれば問題はないと思いますが

パワーポイントで企画書を作る営業や企画の方、システムエンジニアやプログラマの方も配色に関しては苦手な方も多いのではないでしょうか?

配色の基本と困った時に役立つ、無料で使える便利なツールを紹介します

配色とは

この言葉をGoogleで検索すると「色のとりあわせ。また、配合した色あい」と出てきます

もう少し難しく説明すると、色の3属性といわれる 色相・明度・彩度 を組み合わせて科学的に効果がある組み合わせにすることです

つまり、配色は見た目が良い感じだからと感覚で適当に組み合わせてはいけないんです!

色による効果を意識して作る必要があります

身近な色の効果として重要なプレゼンの時は赤いネクタイ。謝罪する時は青いネクタイが良い

など聞いたことある方もいらっしゃると思います。

これは赤が情熱や積極性 青が信頼や鎮静の効果があるからという理由です

ECサイトの「購入する」ボタンにオレンジや赤が多いのも

「購買意欲を刺激する」という色による効果を狙っているからです

このように色には心理や行動に大きな影響を与える効果があるので配色は非常に重要です

 

デザインで押さえておくべき配色の基本

最低限の配色であればセンスは必要ありません

配色に困ったらとりあえず以下で構成しましょう

ベースカラー

資料やWebサイトで一番大きな面積となる基本の色で余白や背景などに用いることが多いです

メインカラー

資料やWebサイトを印象づける主役の色です

アクセントカラー

少ない使用量で資料やWebサイトを引き締め、目を引く色です

3色の配分率

色の決め方

最初に決めるのは主役の「メインカラー」です

決め方として簡単なのは、コーポレートカラーをメインカラーにする

ロゴで使われている色をメインカラーにする、色の持つ効果で決めるなどで良いかと思います

次に決めるのは「ベースカラー」です

背景などで使われるので「白・黒・灰色」などが多いですね

最後に決めるのは「アクセントカラー」です

強調したい部分に効果的な色を選びましょう

アクセントカラーは1色だけじゃなくても良いのですが色が増えれば増えるほど扱いが難しくなります

色を決めるのに便利なツール

色の決め方は文字にすると簡単なのですが

結局、どの色にすれば良いのか迷っちゃいますよね

そんな時に使えるツールをここからは紹介します

1. Web Color Data

Web Color DataはWebサイト内で使われている色を抽出してくれるので

コーポレートカラーでパワーポイントを作ったり

「ここのWebサイトとトンマナ同じで」と言われた時に使えますね

使い方は対象のURLを入力して「GET COLORS」をクリックするだけです

 

2. HUE/360

HUE/360の使い方は簡単です

1色選ぶだけで、それと組み合わせた時にバランスの良い色を抽出してくれるので

配色がおかしくなることもなくなります

直感的に使えますし、使い勝手はかなり高いツールです

 

3. Palleton.com (Color Scheme Designer)

こちらもHUE/360のように一色決めるだけでバランスの良い色を抽出してくれます

配色パターンも豊富に見ることができますし

色の組み合わせについても視覚的に画面上で簡単に確認することができるので便利です

 

4. COLOR SUPPLY

こちらもHUE/360やColor Scheme Designerと同じように使えますね

グラデーションとかも見れますし直感的に使えるので良いです

 

5. PALETTABLE

こちらは非常に面白いです

出てくる色に対して好き嫌いを選択するだけで配色をしてくれます

色にこだわりや指定がない…

でも なんか良い感じの配色をしたいから直感に頼るという時に良いのかな?

わたしがこれを使うことはほとんどありません!

最後に

配色って難しいですよね

わたしは色彩学を勉強する機会が、だいぶ前にあったのですが基本的なことしか覚えていません

ツールを活用して感覚的に作っていたパワーポイントの配色を変えれば

プレゼンやコンペの勝率も上がるかもしれませんね!

間違ってもデザインに時間がかかって中身のない資料にはならないようにお気をつけください…

 

ではまたー