こんにちは！デザイン担当の望月です。

デザインをするにあたって必要不可欠な要素「配色」！
今回は、配色、キーカラー、などを決める際に役立ちそうな、
社内で話題にあがった便利ツールをいくつかご紹介します。

『coolors』

https://coolors.co/app

こちらは、キーカラーが決まっているときに活躍しそうな配色ジェネレーターです。

アクセスすると最初にチュートリアルがありますが、
ものすごーく簡単に訳すと

・「スペース」を押すと画面上の配色パターンが変わるよ！
・鍵アイコンを押すと、その色だけロックできるよ！
・カラーコード入力や、自分で調節することでも色を設定できるよ！
・画像から色を自動でピックアップすることもできるよ！
・配色の保存やユーザー登録もできるよ！（しなくても使えます）

……みたいなことだと思います。

まずはスペースを押しまくって色の移り変わりを楽しんでみましょう。
これだけでかなり楽しい！
カラーコードをただランダム表示するのではなく
綺麗な配色になるように調整されている気がします。

キーカラーを設定してロックしたら、
あとはエンターを押すだけで綺麗な配色を提案してくれるので、
とても便利です。

『Color of Book』

http://colorchart.jp/

書籍の表紙から色を抽出してくれるユニークツール！

本のタイトルを自分で検索することもできますし、
ファッション雑誌やスポーツ誌のカテゴリーから検索することもできます。
これって、自分が制作するページのターゲットユーザーに近しいカテゴリーから探せば、
その層に好まれる配色を研究できちゃいますよね。
なかなか奥が深いです。

抽出した配色はphotoshopのカラーパレット用データでダウンロードできるようです。

結構昔にリリースされたサイトのようですが、
AmazonやWikipediaから検索しているので最新の結果が表示されますよ。

書籍の発行時期でも絞り込みができるようになったら
季節のカラー的なものも研究できてさらに最高！など、夢を見てしまいました。

『NIPPON COLORS』

http://nipponcolors.com/

社内のデザイナーKさんが教えてくれた、
日本の伝統色を紹介してくれるオシャレなサイトです。

Firefoxではうまく表示されなかったので、
推奨されているSafariかChromeでの閲覧をオススメします！

違う色を選択したときの色の移り変わりや表現が美しくて、
間をデザインするのはさすが「和」だなー、なんて思いました。

和系のサイトや年賀状のデザインにうってつけのサイトだと思います。
デザイナーってプレゼン力いりますよね。
どういった意図でこの色を選んだのか、など伝統色の名前も交えて
説明できたらなんとなくカッコイイ！と、邪な思いが……。

ちなみに、右にある　MUNSELL「ON OFF」　とあるボタンをクリックすると……？
これまたカッコイイ！です。

『Adobe Kuler』

https://color.adobe.com/ja/create/color-wheel/

最後は社内のデザイナー田中さんが教えてくれた、
色相環上で複数の色をピックアップし、配色を作成できるAdobeが公開しているツールです。

カラールールのカテゴリでポインタの動き方をある程度絞り込むことができ、
例えば「補色」を選択するとポインタの位置が対角線上に固定されて
彩度や明度のみが調節できるようになります。

かなり直感的な操作で
なんとなく淡めな配色、や
補色を使ってぱっきりした配色、
などのぼんやりした頭の中のイメージを形にしてくれますね。

なんのイメージも沸いていないときは「探索」で他のユーザーが作成した
パレットを見ることもできます。

また、CCアカウントでログインすると、
「保存」をぽちぽちっとクリックするだけで
photoshopCCにインポートすることができます！

まとめ

時間がないと、自分の頭の中の配色ストックを使いまわしてしまいがちです。

いつもと同じ、にならないようにこういった便利なサイトを使って
スピーディーにいいものを作っていければなと思います！