デザイン

デザイン

PR

UXデザイナーは必見!最適な色を選ぶためのカラーツール集

3,995 views

読了時間 : 約1分54秒

色はデザイナーの使うツールの中でも非常に強力ですが、その分マスターするのは大変です。色の組み合わせはほぼ無限にあり、使う色を決めるのに苦労している方も多いでしょう。そんな色を簡単に使いこなすため、今回は最適な色を選ぶためのツールをまとめました。きっと色選びが楽しくなりますよ。

 

  1. 1.インスピレーション探しのツール

・自然

実はあなたの周囲に、すでに素晴らしいツールがあります。周りを見渡すだけで色のインスピレーションを得ることができます。印刷物、インテリア、ファッションなど、全てのものに色があるはずです。しかし色の組み合わせを極めたいなら、自然の色を見るのが一番です。写真を撮り、そこからカラースキームを作ってみましょう。

color①

 

Behance

Behanceではプロが手がけた最新の作品を見ることができ、インスピレーションを得ることができます。色によって作品を絞り込むことも可能です。

color②

 

Dribbble Colors

UIのインスピレーションを求めているならDribbbleに行きましょう。色でフィルターすることで、その色が実際にどんな風に使われているのかを簡単に検索できます。

color③

 

Designspiration

カラーパレットのアイデアを試したい時にはここがオススメです。5つまで色を選び、その色が含まれている画像を検索できます。

color④

color⑤

 

 

  1. 2.カラースキーム作りのツール

Material Design Color Tool

UI用カラーパレットの作成と共有ができ、アクセシビリティの検証まで行うことができるツールです。

color⑥

 

Coolors.co

複数の色からなるカラースキームを簡単に作れます。使いたい色をロックした後はスペースキーを押すだけで新しいパレットが作成されます。

color⑦

 

また画像をアップロードしてそこからカラースキームを作ることもできますよ。

color⑧

 

Paletton

Adobe Color CCに似たツールですが、こちらはトーン数の上限がなく、思う存分アイデアを試すことができます。

color8-5

 

 

  1. 3.アクセシビリティ検証のツール

Coolors

先ほど紹介したCoolorsでアクセシビリティの検証も行えます。まずはUIの色を選びましょう。

color⑨

 

モードをNormalから検証したいものに切り替えてください。

color⑩

 

これで選んだ色がどう見えているのかがすぐに分かります。

color⑪

 

NoCoffee Vision Simulator for Chrome

Chromeで色の見え方が検証できるツールです。たとえば設定を”deuteranopia”(第二色覚異常)に変更すれば、今見ているページがグレースケールに変換されます。

color⑫

 

 

 

こうしたツールを使えば、色の決定がより簡単になるでしょう。様々な色パターンを試して、最適なものを見つけてください。

 

 

 

※本記事は、Essential Color Tools for UX Designersを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ