Advertisement

essential-color-tool-for-ux-designer-featured-image

 

配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。

 

可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。

 

デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。

 

この記事は、2016年8月22日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計66個の配色ツールサ

 

コンテンツ目次

 

01. インスピレーションの見つけ方

 

自然から

デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど魅力的なアイデアばかりです。美しい風景の写真を撮影し、そこから配色を作成することで、自然をモチーフに最高の色の組み合わせを実現しましょう。

 

color-tool-for-ux-designer-1

 

わたしたちの生活のなかで、もっとも美しいものは何でしょう。私にとってそれは自然で、海や川、山、森、草原、花や動物たちです。地球上には素晴らしい風景画たくさんあり、そ

 

Behance

さまざまな業界から集められた、クリエイティブでプロフェッショナルな作品をまとめ、最先端のオンラインポートフォリオから最新の作品を発見できます。デザインのインスピレーションが欲しいときにも役立つサイト。より興味のある作品を見つけたいときは、「色」でフィルタリングしましょう。

 

color-tool-for-ux-designer-2

 

 

Dribbble Colors

ユーザーインターフェース向けインスピレーションを探すときに便利なサイトのひとつ。特定の色を他のデザイナーがどのように使用したのか、視覚的に調べたいときに使えるフィルタリング機能も実装されています。

 

color-tool-for-ux-designer-3

 

同時に、一枚の画像に特定の色が使用されている割合も調整することができます。(以下でスクリーンショットでは、青色30%。)

 

color-tool-for-ux-designer-4

 

 

Designspiration

利用したいカラーパレットが決まっていて、色の組み合わせ参考例を確認したいときに最適なツール。最高で5色まで選択でき、マッチする画像が表示されます。

 

color-tool-for-ux-designer-5

color-tool-for-ux-designer-6

 

 

Tineye Multicolor

写真で使われている色の組み合わせを調べたり、各色の比率を指定できたりするお役立ちツール。Flickerの2000万枚を超えるデータベースを使用しているので、お好みの配色の組み合わせを使った画像を素早く取得できます。

 

color-tool-for-ux-designer-7

 

 

Colorzilla

Google Chrome と Mozilla Firefox 用拡張機能プラグインで、カラーピッカー、アイドロップ、CSSグラデーション作成ツール、パレットブラウザなど色に関するツールが豊富に揃います。

 

color-tool-for-ux-designer-8

 

 

Shutterstock Spectrum

場合によって、配色がうまく機能するか確認するには、ストックイメージ写真からも検索、選択できます。大きなプレビュー画像と使いやすいインターフェースを備えているのもポイント。ウォーターマーク付のプレビュー画像は、カラーパレットを作成するのに十分で、定期サブスクリプションの必要はありません。

 

color-tool-for-ux-designer-9

 

 

 

02. 色彩配色の決め方

Material Design Color Tool

Google のマテリアルデザインの配色を使い、UIデザインにあったカラーパレットを作成、共有でき、あらゆる色の組み合わせを表現が可能。

 

color-tool-for-ux-designer-10

 

マテリアル・デザイン(英: Material Design)は、Googleの開発したデザインシステムで、配色やアイコン、書体、デザインパターンやアニメーションなど

 

Coolors.co

マルチカラーの配色を作成するのに便利なツール。好みの色が見つかったらクリックでロックし、スペースバーを押すたびに新しい色が生成されます。このツールの優れている点は、一つの検索結果だけに限定されず、基準点を変更するだけで、複数の配色カラーパレットを見つけることができる点です。

 

color-tool-for-ux-designer-11

 

また用意しておいた画像や写真をアップロードするとカラーパレットを作成できる機能も。

 

color-tool-for-ux-designer-12

 

 

Adobe Color CC

以前は Kuler として知られていた老舗ツールのひとつで、オンラインとデスクトップバージョンが用意されています。ウェブ版ではカラーホイールから直接カラーパレットを作成できます。

 

color-tool-for-ux-designer-13

 

または、お好みの画像から配色カラーパレットを作成することも可能。

 

color-tool-for-ux-designer-14

 

または、「Explore」セクションより世界中から集められた配色を検索することもできます。デスクトップバージョンを利用している場合、選択したカラーパレットをPhotoshopやIllustrator、InDesignに直接エクスポートできます。

 

color-tool-for-ux-designer-15

 

 

Paletton

デザインの目的に合った配色を行うための設計を手助けするカラースキームを、悩まずにマウス操作のみで決めることができます。

 

color-tool-for-ux-designer-16

 

海外デザインブログ Smashing Magazine で公開された「The Simple Web Developer's Guide to Color」では、1つ

 

 

03. カラー・アクセシビリティ

視覚に関する問題は、わたしたちが考えているよりも広く浸透しており、世界中で2億8500万人以上が視覚障害を負っていると言われています。選択したカラーパレットの配色が、視覚に障害を持ったひとにもきちんと見えるのか確認しておくことは不可欠。

 

WebAIM Color Contrast Checker

文字テキストに使用する配色は、アクセシビリティのために色のコントラストをきちんと確認する必要があります。こちらのツールを利用すれば、手軽に色の組み合わせをテストできます。

 

color-tool-for-ux-designer-17

 

 

Coolors

先ほども紹介したツールですが、こちらでも色盲のユーザーにも優しい配色を決めることができます。まずはインターフェースよりお好みの配色を選択しましょう。

 

color-tool-for-ux-designer-18

 

モードを「Normal」を切り替えることで、色盲や色弱など細かく分類して調べることも可能。

 

color-tool-for-ux-designer-19

 

こうすることで、実際にどのように配色が見えるのか表示してくれます。

 

color-tool-for-ux-designer-20

 

 

NoCoffee Vision Simulator for Chrome

Chrome 拡張機能のひとつで、ブラウザで表示できるすべてのページで色覚障害や低視力状態などをシミュレートできます。たとえば設定「色彩異常(英: Achromatopsia)」で「色彩不足(英: Color Deficiency)」を選択すれば、ウェブページをグレースケール表示することができます。

 

color-tool-for-ux-designer-21

 

 

 

さいごに。

上記で紹介したツールは、適切な色の組み合わせを見つける作業を簡単にしてくれるでしょう。完璧な配色カラーパレットを作成する近道は、多くのことを実践するということを覚えておきましょう。では、デザインを楽しんで!

 

デザイン制作でもっとも頭を悩ます作業のひとつ、「配色カラー決め」で覚えておきたい色の基本原則10個をまとめたインフォグラフィックス、「The 10 Commandm
海外デザインブログCanva Design School Blogで公開された「10 Color Inspiration Secrets Only Designer
海外デザインブログCanva Design School Blogで公開された「Color Theory Tips and Inspiration」より許可をもらい

 

海外サイト Babich Biz で公開された Essential Color Tools for UX Designers より許可をもらい、翻訳転載しています。

 

参照元リンク : Essential Color Tools for UX Designers – Babich Biz