※2023/1/29時点で、『PALETTABLE』は正常動作しない不具合があります。ご注意くださいませ。
＼ こんなお悩みを解決 ／
- 配色センスが絶望的…。
- 何色にすればいいか分からない！
- 色をつけるといつもダサくなる！
- 初心者でもハイセンスな配色ができるようになりたい！
ミヤマ某企業の営業部ではたらくデザイナー、ミヤマです！
今回は誰でも簡単に一瞬でセンスの良い配色を選べる裏技を紹介します！
ちなみに、もちろん『無料』です。
ぱんださん嘘でしょー！
なんかアヤシイやり方じゃないの？
ミヤマあやしくないです！
仕事でもたまに使ってるよ！
タネを明かすと、今回ご紹介するのは海外の『AI自動配色サイト』を使う方法です。
いくつか試した結果、筆者のイチオシは『PALETTABLE』です！
【５分で分かる！】おしゃれな配色にする方法
【くわしく解説】おしゃれな配色にする方法
ミヤマ【結論】配色で困ったら、『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 』は、スマートフォンでも操作可能ですよ！
③原則、色は３色までにするのがベター
『 PALETTABLE 』 は最大５色まで色を選ぶことができます。
が、特に理由がないなら色は３色までにするのがおしゃれな配色のコツです！
ぱんださんえ、3色だけ？
背景の白は？
文字の黒は？
ミヤマ地色や文字色の白、黒、灰色などの無彩色は、色の影響が少ないので３色にプラスしてOKです。
具台的には、以下の３色で構成するのがおすすめです。
＼ 配色の基本 ／
- ベースカラー（下地の色・面積70％）１番面積が広い色
- メインカラー（主役の色・面積25％）１番目立つ色
- アクセントカラー（脇役の色・面積5％）変化・引き立ての色・なくても可
色を絞る理由は、色が多くなるほど知識や経験が必要で大変だからです。
プロのデザイナーは、色を無闇に増やしません。
ミヤマ色の影響を計算するのは大変。
プロは理由もなく色を増やしません！
ぱんださん例えるなら数学の公式的みたいな感じかな？
いきなり連立方程式じゃなくて、たし算からみたいな。
ちなみに下の画像も３色に分解が可能です。
色を３色に分けると、こんな感じになります。
＼ 上の画像の配色 ／
- ベースカラー（下地の色・面積70％）白
- メインカラー（主役の色・面積25％）あざやかなピンク色
- アクセントカラー（脇役の色・面積5％）薄い緑色
基本はメインのピンクと白黒だけです。
アクセントカラーはたった５％なので、なくてもデザインは成立します。
無理に選ぶ必要はありません！
④３色のわりふり方
『 PALETTABLE 』 で３色選んだら、以下のように色をわりふるのがおすすめです。
＼ オススメの配色 ／
- ベースカラー（下地の色・面積70％）薄い、目に優しい色
- メインカラー（主役の色・面積25％）濃く目立つ色（下地と別系統の色）
- アクセントカラー（脇役の色・面積5％）残った色
ぱんださん選んだ色はどうやってわりふったらいいの？
ミヤマよくわからない場合は、お好みで配色しちゃいましょう！
PALETTABLEが提案してくれた色なら、おかしくはならないはずよ。
詳しい色の選定方法まで知りたいと思ったら、やはり本を買うなどして勉強するのが一番です。
お急ぎの方は、下の『年齢と性別に基づく色の好みの変化』も良かったら参考にしてみてください。
おすすめの本
ミヤマもっと勉強したい方には、こちらの本がオススメ！
配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集
＼ 配色ならこれ ／
- 別の某デザイナーさんも推薦本！
- パラパラとめくって、直感でえらべる！
- 作例のデザインがクオリティ高くてお得！
- 企業デザインが多いため、クライアントの説得に最適！
まとめ
ミヤマ最後に記事のまとめです！
ミヤマもっと勉強したい方には、こちらの本がオススメ！
いかがだったでしょうか？
初心者で配色がよくわからない人、時間がなく急いでいる人に 『 PALETTABLE 』 は最適です。
ぜひ、お試しください！
