※2023/1/29時点で、『PALETTABLE』は正常動作しない不具合があります。ご注意くださいませ。
\ こんなお悩みを解決 /
- 配色センスが絶望的…。
- 何色にすればいいか分からない!
- 色をつけるといつもダサくなる!
- 初心者でもハイセンスな配色ができるようになりたい!

某企業の営業部ではたらくデザイナー、ミヤマです!
今回は誰でも簡単に一瞬でセンスの良い配色を選べる裏技を紹介します!
ちなみに、もちろん『無料』です。



嘘でしょー!
なんかアヤシイやり方じゃないの?



あやしくないです!
仕事でもたまに使ってるよ!
タネを明かすと、今回ご紹介するのは海外の『AI自動配色サイト』を使う方法です。
いくつか試した結果、筆者のイチオシは『PALETTABLE』です!
【5分で分かる!】おしゃれな配色にする方法


【くわしく解説】おしゃれな配色にする方法



【結論】配色で困ったら、『PALETTABLE』でAIに色を選んでもらいましょう!



ぱれったぶるって、なに?



それをこれから説明します!
①配色を提案してくれる『PALETTABLE』って何?
『PALETTABLE』は、AI(人工知能)が自動で素敵な配色を提案してくれるサービスで、なんと無料で使用できます!
外国のサイトですが、今のところ変な広告なども貼られておらず、非常にシンプルで使いやすいです。
英語が苦手でも『Dislike(嫌い)』か『Like(好き)』のボタンを押しまくるだけなので、簡単!



でも、そのAIって大丈夫?
適当に色が出てくるだけなんじゃない?



ちゃんと根拠のあるAIの配色だよ!
なんとこの『 PALETTABLE 』、何百万人ものデザイナーの配色知識をインプットしたAIなのです!
そもそも気に入らなければ『Dislike(嫌い)』ボタンを押せばいいので、あれこれ悩むくらいならAIを使いましょう!
②『PALETTABLE』の詳しい使い方
『 PALETTABLE 』にアクセスすると、ランダムで色が表示されています。


このまま下のボタンを押し進めてOK。
すでに決まった色がある場合は、中央のカラーコードを書き換えて『Like(好き)』ボタンを押してください。



カラーコードなんてわからないよ~!



その時はグラデーションパレットから選べるから大丈夫!
カラーコードが分からない場合は、カラーコードの下の三本線をクリック。
すると、色のグラデーションが出てくるので好みの色をクリックすればOKです!



この三本線、Google Chromeだと選べないんだけど。



ウィンドウを小さくしたら選べるよ!
あとは『Dislike(嫌い)』か『Like(好き)』ボタンを押していきます。
真ん中にあるゴミ箱を押すと、選んだ色を消すことも可能です。
色が決まったら、右上の『Export』ボタンをクリックします。
配色パターンは『URLアドレス』か『画像(PNGファイル)』で保存できます。
お好みで選んでください。
なお、『 PALETTABLE 』は、スマートフォンでも操作可能ですよ!
③原則、色は3色までにするのがベター
『 PALETTABLE 』 は最大5色まで色を選ぶことができます。
が、特に理由がないなら色は3色までにするのがおしゃれな配色のコツです!



え、3色だけ?
背景の白は?
文字の黒は?



地色や文字色の白、黒、灰色などの無彩色は、色の影響が少ないので3色にプラスしてOKです。
具台的には、以下の3色で構成するのがおすすめです。
\ 配色の基本 /
- ベースカラー(下地の色・面積70%)1番面積が広い色
- メインカラー(主役の色・面積25%)1番目立つ色
- アクセントカラー(脇役の色・面積5%)変化・引き立ての色・なくても可
色を絞る理由は、色が多くなるほど知識や経験が必要で大変だからです。
プロのデザイナーは、色を無闇に増やしません。



色の影響を計算するのは大変。
プロは理由もなく色を増やしません!



例えるなら数学の公式的みたいな感じかな?
いきなり連立方程式じゃなくて、たし算からみたいな。
ちなみに下の画像も3色に分解が可能です。
色を3色に分けると、こんな感じになります。
\ 上の画像の配色 /
- ベースカラー(下地の色・面積70%)白
- メインカラー(主役の色・面積25%)あざやかなピンク色
- アクセントカラー(脇役の色・面積5%)薄い緑色
基本はメインのピンクと白黒だけです。
アクセントカラーはたった5%なので、なくてもデザインは成立します。
無理に選ぶ必要はありません!
④3色のわりふり方
『 PALETTABLE 』 で3色選んだら、以下のように色をわりふるのがおすすめです。
\ オススメの配色 /
- ベースカラー(下地の色・面積70%)薄い、目に優しい色
- メインカラー(主役の色・面積25%)濃く目立つ色(下地と別系統の色)
- アクセントカラー(脇役の色・面積5%)残った色



選んだ色はどうやってわりふったらいいの?



よくわからない場合は、お好みで配色しちゃいましょう!
PALETTABLEが提案してくれた色なら、おかしくはならないはずよ。
詳しい色の選定方法まで知りたいと思ったら、やはり本を買うなどして勉強するのが一番です。
お急ぎの方は、下の『年齢と性別に基づく色の好みの変化』も良かったら参考にしてみてください。








おすすめの本



もっと勉強したい方には、こちらの本がオススメ!
配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集
\ 配色ならこれ /
- 別の某デザイナーさんも推薦本!
- パラパラとめくって、直感でえらべる!
- 作例のデザインがクオリティ高くてお得!
- 企業デザインが多いため、クライアントの説得に最適!
まとめ



最後に記事のまとめです!





もっと勉強したい方には、こちらの本がオススメ!
いかがだったでしょうか?
初心者で配色がよくわからない人、時間がなく急いでいる人に 『 PALETTABLE 』 は最適です。
ぜひ、お試しください!