UXデザイナーのための15の配色ツール

色は、デザイナーが使う手段の中で、もっとも強力なツールの１つです。同時に、色という概念は習得するのが難しく、また、色の組み合わせは無限にあるため、サイトやアプリに使用する色を決めるのは難しいものです。そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。

この記事では、以下のような便利なツールを紹介します。

• インスピレーションを受ける
• 自分だけのカラースキームを生み出す
• 判断できるカラースキームを作る

１. インスピレーションを受ける

自然

あなたの周りには、たくさんのひらめきの種があります。インスピレーションを受けるには、周りを見回すだけでいいのです。印刷されたデザイン、インテリアデザイン、ファッションなど、魅力的なものがたくさんあります。その中でも、最高の色の組み合わせは自然にあります。美しい瞬間を写真に撮り、その写真からカラースキームを作成してみてください。

最高の色の組み合わせは自然にあります。写真からカラースキームを作成することができます。

Behance

Behanceでは、さまざまな業界で活躍するプロのクリエイターが作ったオンラインポートフォリオから最新の作品を閲覧、検索できます。これらは素晴らしいインスピレーションの源です。色の条件を指定して、興味深いく創造的な新しい作品を見つけましょう。

Dribbble Colors

Dribbbleもまた、UIのインスピレーションを受けるのに最適なツールの１つです。Dribbbleには色で検索するツールがあります。ほかのデザイナーが特定の色をどのように使用したかを視覚的に調べたいときには、dribbble.com/colorsで希望の色を選択しましょう。

また、画像に用いられている色の最小の割合を指定することもできます。たとえば以下の画像では、青が30％以上の画像を検索しています。

写真内で、ある色の最小の割合を指定します

Designspiration

Designspirationは、色のパレットのアイデアは持っていて、その組み合わせの例を見てみたいときに最適なツールです。５種類までの色を選択し、検索条件に一致する画像を見つけることができます。

Designspirationは関連する例を提供してくれます

Tineye Multicolr

Tineyeは、写真の配色を調べるのに役立ちます。また、それぞれの色の比率を指定することもできます。このWebサイトは、Flickr内の2000万ものCreative Commonsのデータ​​ベースを使用しています。これはおそらく、優れた配色のフリー画像を取得する最速の方法でしょう。

ColorZilla

ColorZillaは、Google ChromeやMozilla Firefoxで使用できる拡張機能で、カラーピッカー、アイドロッパー、CSSグラデーションジェネレーター、パレットブラウザーなど、色に関するツールがあります。

ColorZillaはChromeとFirefoxで利用可能です

Canva

Canvaにある、デザインにおける色の百科事典から、色について知っておくべきことのすべてがわかります。ここでわかる意味や色の組み合わせを見れば、きっと次のデザインのインスピレーションを得ることができるでしょう。

Shutterstock Spectrum

カラースキームが適切か判断する最善の方法のひとつは、ストックされたイメージから選ぶことかもしれません。主なストック画像サービスはこの種のツールを提供していますが、なかでもShutterstock Spectrumは大きなプレビュー画像など、素晴らしいインターフェイスを備えています。パレットを生成するにはプレビュー画像を透かすだけで十分なので、お金を払う必要もありません。

２. カラースキームを作成する

Material Design Color Tool

Material Design Color Toolでは、カラーパレットを作成、共有、UIに適用したり、指定した色の組み合わせのアクセシビリティを確認することができます。

Coolors.co

Coolorsは、複数の色でカラースキームを作成する強力なツールです。選択した色をロックしてスペースキーを押すだけで、新しいパレットを生成することができます。このツールの優れたところは、１つの結果だけに限定されず、基準点を変更するだけで、いくつかの色の配色パターンを受け取ることができるところです。

このツールを使用すると、画像をアップロードしてその画像からカラーパレットを作成することもできます。

Coolorsを使用すると、画像をアップロードしてその画像からカラーパレットを作成することができます。

Adobe Color CC

以前Kulerとして知られていたこのツールは、長い間使用されてきました。Web版とデスクトップ版として提供されています。Web版では、カラーホイールでカラースキームを作ることができます。

Colour CCでは、さまざまなカラースキームを作成して保存できます。カラースキームはそれぞれ５色で構成されています。

また、既存の画像からカラースキームを作成することもできます。

既存の画像からカラースキームを作成します。

「探索」セクションから、Kulerコミュニティの何千もの色の組み合わせを検索することもできます。

デスクトップ版を使用している場合は、配色をPhotoshopやIllustrator、InDesignに直接書き出すことができます。

Paletton

PalettonはAdobe Color CCに似ています。この２つの違いは、５つの色だけに制限されておらず、さらに色を増やせることです。

３. 色の判断しやすさ

視覚に関する問題は、私たちの想像以上にポピュラーです。世界中で2億8500万人以上が視覚障がいを持っています。軽度または中程度の視覚障がいの人は、さらに多く存在します。視覚障がいのあるユーザーが、選択したカラースキームを理解できるか確認することは不可欠です。

WebAIM Color Contrast Checker

色には相性がいい色と悪い色があります。にもかかわらず、AAテストに合格しないサイトやアプリが多数あることには驚かされます。そのようなサイトの仲間にならないようにしましょう。テキストに色を付ける場合は、色のコントラストが判断できるか、UIの色をチェックすることが不可欠です。 WebAIM Color Contrast Checkerを使用して色の組み合わせをテストしましょう。

WebAIM Color Contrast Checkerは、16進数で指定されたカラーコードをテストするブラウザベースのツールです。

Coolors

Coolorsを使用すると、色覚障害者に見えるカラースキームをテストすることができます。テストで必要なのは、インターフェイスで色を選択するだけです。

あなたの配色を反映する色のセットを選択します

モードを「標準」からテストしたいモードに変更します。

色覚障害のタイプを選択します

そして、色覚障害がある人にあなたのカラースキームがどのように見えるかを確認しましょう。

第一色弱の人の配色の見え方

NoCoffee Vision Simulator for Chrome

NoCoffee Vision Simulatorを使用すると、Chromeで表示できるすべてのページで色覚障害や低視力状態の見え方をシミュレーションできます。たとえば、「色彩不足」に設定して「色彩異常」にすると、Webページをグレースケールで表示できます。

第二色覚異常の人にCNNのWebサイトがどのように見えるか

・・・

上記のツールは、適切な色の組み合わせを見つける作業をしやすくします。ただ、素敵なカラースキームを作成するための最善の方法は、何度も実践することだということ忘れないでください。