引き出しを増やそう。初心者が配色のインスピレーションを得られるツール9つ

デザインを勉強中の人は、配色について、以下のような悩みをお持ちではないでしょうか。

  • 配色の原則を理解したい
  • 効率的に作業を進めたい
  • 発想の引き出しを増やしたい

以前にGoodpatch Blogでは、初心者の人にオススメしたい、デザインリソースの活用についてご紹介しました。

新人デザイナー必見!ときめきとひらめきの源、デザインリソースで作業を効率化しよう

今回は、数あるデザインリソースの中でも、「配色」にフォーカスしたツールについてご紹介します。

配色のバランス・原則が不安な人へ

1. Adobe Colors CC

Adobe Colors CC

全部で5色あるパレットから、類似色や補色、トライアドといったカラールールを選択でき、指定したベースカラーを元に、自動的にカラースキームを生成してくれます。

Adobe Colorsは、今回ご紹介するツールの中で最も「配色の基本を踏まえたツール」と言えます。デザインを学び始めたばかりの人が、色の基本的な知識を感覚的に身に付けたいときに役立つと思います。

2. Material Design Color Palette Generator

Material Design Color Palette Generator – Material Palette

こちらは色を直感的に選んでクリックするだけで選んだ2色を含めた配色を表示してくれるサイトです。

実際のアプリに似たレイアウトに配色を当てはめてくれるので、カラーパレットだけでは実際のバランスをイメージしづらいという初心者の人にオススメです。

色選びのスピードを上げたい人へ

3. colors

coolors

coolorsはスペースキーを押すだけで、カラースキームを自動で生成してくれるサイトです。

1色ごとに「明るさ」「カラーモデル」を調整したり、全部で5つあるパネルをそれぞれ「ドラッグ」して色の並びを変えることもできます。気に入った色があれば「ロック」して、他の色だけを変更することもできます。カラーコードも簡単にコピーできる、一見シンプルに見えて多機能なサイトです。

サインインすれば、作ったカラースキームを保存することもできます。なんとなくしか色が決まっていないときや、配色のストックを増やしたいときに使えるサイトです。

4. color hunt

colorhunt

ユーザーが気軽にカラーパレットを投稿できるのが、こちらのColorhuntです。

パレットは4色で、気に入ったものにはLikes(いいね)をつけてストックすることもできます。

毎日更新され、「Now」「Hot」「Popular」「Random」とカテゴリーも豊富なので、多くの人に響く配色のトレンドが見つかると思います。

5. nippon colors

nippon colors

nippon colorsは、優しい「和の色」を探すことができるサイトです。

サイト名のとおり、日本の伝統色が集められており、クリックすることで各色を選択できます。さらに、カラーコードをクリップボードにコピーすることもできます。

アニメーションも綺麗なので、色選びの参考としてだけではなく、1つの作品としても楽しめます!

引き出しを増やしたい人へ

6. BrandColors

BrandColors

現在、世の中にあるブランドカラーは、その色を見るだけでどのブランドか識別できるほど「人々の印象に残っているもの」が多いですよね。
このBrandColorsはそんな著名ブランドのカラーパレットを見ることができるサイトです。

約1400色、500以上のブランドカラーが集められており、色をクリックするとカラーコードをクリップボードにコピーすることができます。

配色を考えるとき、特定のブランドのイメージに近づけたいと思ったら、ぜひこのサイトで検索してみてください。

7. hailpixel

hailpixel

hailpixelは、直感的に色を選ぶことができるサイトです。

サイトに行くと、初めは上のような真っ黒な画面が現れ戸惑うかもしれませんが、画面上でマウスポインタを動かすとインタラクティブに色が変わっていきます。
直感的に良いと感じた色になったところでクリックすると、その色が固定されます。

配色に慣れていて、直感的に触ることができるシンプルなツールを求めている人におすすめです!

8. Designspiration

Designspiration

Designspirationは、これまでと異なる二つのアプローチから配色のヒントを得ることができるサイトです。

まずキーワードを入力するとそのテーマに応じた豊富なイメージを見ることができます。
それだけでなく、サイト上部の「ペンのアイコン」をクリックするとカラーパレットが現れ、好きな配色からイメージを検索することができます。

テーマから配色のヒントを得るもよし、使用したい色から得るもよし。
デザインの初心者、上級者どちらにとっても刺激を得ることができるサイトです。

9. Pinterst


Pinterest

最後にご紹介するのは、言わずと知れたデザインアイディアの宝庫、Pinterestです。

媒体にとらわれない様々なデザインを幅広くインプットすることができ、すでに利用されているデザイナーも多いでしょう。

Goodpatchのメンバーによると、「この配色良いな」と思ったイメージを1つのボードにピンしているとのことでした。
「Blue」「Red」など、メインカラーごとに分けたボードを作っているデザイナーもおり、様々な使い方ができるんだなと思いました。
ボードを活用することで、配色のインスピレーションを得るツールとして大いに役立つのではないでしょうか?公開されている他のユーザーのボードを覗きに行くことでも、新鮮な気づきがありそうです!


現在インターネット上には数多くのツールが溢れており、今回ご紹介したツールは一部にすぎません。

自分にとって使い勝手の良いツールを探し、日頃からこまめなインプットを意識することで、配色の引き出しが増えるのではないでしょうか。

また、多くのGoodpatchのメンバーは、インプットの量を増やすと同時に「実際に手を動かして試してみる」ことで、作業効率のアップ・スキルの向上に繋げているそうです。
これからデザインを勉強していく皆さんも、インプットとアウトプットを繰り返して、スキルアップを目指していきましょう。

ABOUTこの記事をかいた人

Aoi Sakaue

1997年生まれ。ライティングインターンとしてジョイン。大学1年からデザインとプログラミングを始め、現在は人に伝わるデザインを勉強中です。デザインへのきっかけになるような情報を発信していきます!

  • Goodpatch Blog