はじめに

こんにちは、WebService事業本部のウエモトです。仕事は主にデザインを担当しています。
初のブログ投稿ですが、今回はデザインワークを進める上で重要なカラーの決める際に便利なツールの話をしようと思います。

色の決め方といってもやはりデザインする上ではセオリーがあって、セオリーから大きく外れないように配色を考えないとうまくいきません。
そのため使用するカラーのスキーム（計画）をどうするかでデザイナーはそれなりに頭を使うわけです。とはいっても仕事としてデザインを進める場合はやはりスケジュールがありますので、スキームを作成していくそのこと自体もやはり効率よく進めていきたいですよね。

オンラインツールとしての配色の見本帳

効率的に配色を決めるには、「この場合にはこの色のセット」のような見本帳があると重宝します。あるんです、そういう見本帳。紙媒体の見本だけではなく、webではwebならではの見本を提供するオンラインのツールが存在します。
以下、独断と偏見で便利だなと思うツールをピックアップしてみました。

Paletton - The Color Scheme Designer

http://paletton.com/

Palettonは任意のカラーを選択すると「Monochromatic（単色）」「Adjacent（同系色）」「Triad（3色相による配色）」「Tetrad（4色相による配色）」の4パターンで自動で配色提案してくれるスグレモノのツールで、選択カラーのHex値なども提示されるので便利です。

Adobe Color CC（Adobe Kuler）

https://color.adobe.com/

Webデザイナー向けのソフトウェアで圧倒的なシェアを持つAdobe社が無償で提供しているオンラインツールです。先に紹介したPalettonのように自動配色機能があり、配色パターンは「類似色」「モノクロマティック」「トライアド」「補色」「コンパウンド」「シェード」となっています。
さらにこのツールのページが表示されている状態でブラウザに画像をドラッグ＆ドロップするか、画面右上に表示されているカメラアイコンをクリックして画像を選択するとその画像で使われているカラーからバランスよくセットを生成してくれます。
メニューの「探索」からは他のユーザが公開前提で作成したパレットがずらっと表示されます。Adobe IDを持っている場合は「マイテーマ」で自分が作成したカラーテーマを保存することもできます。

Coolors.co - The super fast color schemes generator

https://coolors.co/

Coolorsはカラースキームを自動で選択してくれるツールです。ジェネレーターのページにアクセスするとランダムでスキームが提示されます。スペースキーを押すと別のセットが表示され、任意のカラーをクリックすると同系色を選択できる機能などがあるので、気に入るスキームが表示されるまで何度でも気軽に操作することができます。
また、Adobe Color CCのように、すでにオンラインユーザが作成したカラースキームが数多く登録されており、時間があまりない時はそこから選択してアレンジするのもいいかもしれません。
※iOS向けアプリとAdobe系ソフト用のアドオンも提供されていますが、有償です。

COLOURlovers: Color Trends + Palettes

http://www.colourlovers.com/

COLOURloversは先に紹介した3つのツールとは違い、すでに登録されている数多くのカラーパレットをカテゴリごとにまとめたポータルサイトのような構成となっています。もちろん他ツール同様に自分でパレットを作成・登録することもできます。
また登録会員どうしがコミュニケーションできる掲示板が設置されている点がユニークです。

NIPPON COLORS - 日本の伝統色

http://nipponcolors.com/

このツールはちょっと変わり種で、名称の通り日本の伝統色をテーマにした見本帳です。パレットというよりそのまま見本がずらっと並んでいて、各カラーのCMYKとRGBの近似値を把握することができます。
和テイスト以外のデザインでも参考になる色合いが示されているので、取り入れてみるのも面白いと思います。

終わりに

いかがでしたでしょうか。
上記したツールはすべてフリーで使えるオンラインサービスとなっています。こうした便利なサービスはデザインを進めるのに強力なサポートとなるはずです。
同様のオンラインサービスは他にもたくさんあるので、実際に試して自分に合ったものを探してみるのもいいのではないでしょうか。

それではまた！