デザイン決めの時に注意したい8個のポイントとオススメの無料カラーツール19選

どのようなデザインにおいても、基本である配色は非常に重要な要素です。しかし、感覚的に思える作業なだけに苦手だと感じている方も多いのではないでしょうか。

多くの方がつまづく配色ですが、理論をもとにすればスムーズかつ的確に色を選定することができます。配色のポイントを知り、あとはツールを使うなどして選びましょう。

そこで今回は、デザインの配色で悩む方に向け、9個のポイントと、オススメのカラーツールをご紹介します。いつも配色が上手くできない、と感じている方の参考になれば幸いです。
　　

配色決めで注意したいポイント

1. 初めから色を選択しない

デザイン作業の初めからすぐに色を選んだり、使ったりしてみたくなりませんか。こうすると、つい色選びや色の調整に時間を費やしてしまい、ほかの作業になかなか進めなくなります。

そこで、まずはレイアウトから取りかかりましょう。どこにどんな要素が必要かをしっかり決め、そのあと色決めに取りかかることで、作業時間を節約することができます。
　　
色にはそれぞれ心理的効果があり、人々の心理・行動に大きな影響を与えています。
色の意味を無視すると意図していないイメージが伝わってしまうことになりますので、その色がどのような印象を与えるかを把握して選びましょう。

一例として、各色には以下のようなイメージがあります。

赤：情熱、興奮、活発
青：信頼、清潔、寂しさ
橙：にぎやか、家庭的、ビタミン
黄：明るい、楽しい、軽い
緑：おだやか、生命力、環境
紫：エキゾチック、神秘、下品
桃：アイドル、ヒロイン、可愛らしさ
白：純粋、刷新、平和
黒：クール、上質、重力

　　

2. 配色の比率を守る

http://www.m-hand.co.jp/design/4002/

配色を考える時には、役割別に3つの色を選択し、比率を守ることで美しい配色が作れます。
厳密に計算する必要はありませんが、ベースカラー：サブカラー：アクセントカラー＝70%：25%：5%が比率の目安です。
　　

3. カラーホイールを使って色合わせをする

http://iro-color.com/colorchart/color-wheel.html

数色を選ぶ際に上手く組み合わせができない、というときはカラーホイールを活用しましょう。
配色のルールに沿って組み合わせれば、上手く色を選ぶことができます。
一例として、配色のルールには以下のようなものがあります。

コンプリメンタリー配色
カラーホイールの反対側、補色を組み合わせた配色

スプリット・コンプリメンタリー配色
カラーホイール上のある色と、その補色の両隣の2色を用いる配色

トライアド配色
カラーホイールで等しい距離にある3つの色を組み合わせた配色

アナロガス配色
カラーホイールで隣同士の色を組み合わせた配色

　　

4. 真っ黒、グレーの使い方に注意する

様々なデザインにおいて用いられることが多い黒・グレーですが、使い方には注意したい部分もあります。

例えば、Webデザインで一見「真っ黒（#000000）」に見える色でも、カラーコードを見てみると「見た目が黒に見える色）」だったりします。これは、コントラストが高過ぎて見づらかったりチカチカして見える、インパクトがありすぎる、などの理由があるからです。

また、彩度がないと親しみにくい印象を与えてしまうこともあります。幅広いシーンで重宝する色なだけに、注意して使いたいところです。
　　

5. 自分のアイデアだけに頼らない

https://dribbble.com/

自分で考えるだけでは、どうしてもアイデアが浮かばないこともあります。そんな時は、Dribbble、Behanceといったコミュニティーサイトを見てみましょう。たくさんのデザイナーの洗練された作品から、良いインスピレーションが得られることがあります。
　　

6. 時には身の回りのものからインスピレーションを得る

デザインのインスピレーションは身近なものから得られることもあり、特に、森、川、海などの自然からは魅力的な配色アイデアが生まれることがあります。
　　

7. 色選びは感覚に頼りすぎない

http://hue360.herokuapp.com/

感覚だけで色を選んでしまうと、時間がかかったり、適切な色選びができないこともあります。色選びで行き詰まった時には、配色ツールを活用してみましょう。
　　

色選びで活用したい配色ツール

1. Adobe Color CC

https://color.adobe.com/ja/

Adobe Color CCは、Adobeが提供するツールです。補色、類似色などのカラールールは全部で7つ揃っており、ルールを決定するだけで、誰でも簡単に適切な色の組み合わせが作成できます。画像からもカラーパレットを作成できるのが便利です。
　　

2. ColorHexa

http://www.colorhexa.com/

配色を考える時に合わせて使いたいのがColorHexaです。
このツールは、検索窓にカラーコードを入れ検索すると、色に関しての情報を表示してくれます。
色をじっくり選びたい方は、ぜひ合わせて使ってみてはいかがでしょうか。
　　

3. Nippon Color

http://nipponcolors.com/

日本ならではの伝統色をデザインに使いたい時に役立つのが、Nippon Colorです。色を選択すると背景色が変化するため、実際に使った時のイメージが確認できます。
　　

4. Palettable

Palettableは、好き・嫌いを選択するだけで直感的に色の組み合わせが選べるツールです。とにかくシンプルな設計ですので、誰にでも使いこなしやすいのではないでしょうか。配色の知識が無い方、難しいツールが苦手という方にオススメします。
　　

5. Paletton

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

カラールールに沿った、適切な色の組み合わせを選ぶためのツールで、マウスでクリックするだけで自動的に色を選択してくれますのでお手軽です。カラーホイール側で選んだ色は右側のパレットに表示されるので、イメージを確認することが可能です。
　　

6. COLOURlovers

http://www.colourlovers.com/palettes/most-loved/all-time/grid

COLOURloversは、配色のインスピレーションを得たい時、参考になるサービスです。世界中のユーザーが作成した魅力的なカラーパレットを閲覧することができます。各配色には名前がついており、コメント、いいね数、閲覧数も表示してあります。
　　

7. 0 to 255

http://www.0to255.com/

0 to 255では、選択した色を基準にグラデーションを表示してくれます。グラデーションのコードはクリックするだけでコピーができ便利です。類似の色が必要という時に使ってみてはいかがでしょうか。
　　

8. Coolors

https://coolors.co/

スペースキーを押すたびに色が変化し、オシャレな配色を自動で作ってくれるツールです。気に入った色があれば固定したり、微妙に色を編集することもできます。合わせたイメージを見ながら配色を決めたい、という方にオススメです。
　　

9. 和の色 – 色の名前と色見本

http://irononamae.web.fc2.com/colorlist/wa.html

日本の伝統色を一覧で表示しているサービスです。和風のデザインを考える際に使えます。
　　

10. HUE/360

http://hue360.herokuapp.com/

HUE/360は、選択した色を基準にぴったりの配色が作れるツールです。絞り込まれた色の中から選んでいけば、配色の知識があまり無い方、配色のセンスに自信がない方でもあっという間にカラーパレットができ上がります。
　　

11. Coleure

https://www.coleure.com/

ブロック状に色が並んだUIがポップで素敵なツールです。色をミックスしたり、好きな色を追加したりと、楽しみながら色を選択することができます。また、色の上にテキストを乗せた場合の見た目が確認できるのが便利です。
　　

12. Bada55

http://bada55.io/

様々な色、名前を掲載しており、一覧表示で見ることができるサービスです。アイデアが浮かばない時、いつもと変わった色が使いたい、という時に参考にしてみるとインスピレーションが浮かんでくるのではないでしょうか。
　　

13. Hello Color

http://jxnblk.com/hello-color/?c=9d6734

Hello Colorは、クリックするだけで自動的に色の組み合わせを生成してくれる、お手軽な配色ツールです。画面全体でチェックできるので、色を実際に使用した時のイメージが掴みやすい印象があります。
　　

14. Colorion

http://www.colorion.co/

Colorionは、膨大な量の配色を集めたサービスです。お気に入りの色を選んで選択すればコピーできたり、ブックマークしておくこともできます。どうしても色のイメージが浮かばないという時に役立つのではないでしょうか。
　　

15. Hues

http://www.simeon.ws/hues/

3色の組み合わせを一覧表示しているユニークなサービスです。
配色の参考にしてみてはいかがでしょうか。
　　

16. ウェブ配色ツール

http://www.color-fortuna.com/color_scheme_genelator2/

1色を選択することで、その色を基準に自動で配色を作ってくれるツールで、実際に色を使った場合の完成イメージをリアルに確認できるのが特徴的です。
　　

17. materialpalette

https://www.materialpalette.com/

materialpaletteは、選んだ2色から自動的に相性のいいパターンを表示してくれるツールです。制作したカラーパレットは、CSS、SVG、PNGといった形式でダウンロードができます。
　　

18. 配色の見本帳

http://ironodata.info/

単に色の組み合わせを決めるだけではなく、色に関する情報が確認したいときにぴったりのツールです。好きな色を選択すると、色の詳細情報のほか、カラー分析、相性の良い色を知ることができます。
　　

19. uiGradients

https://uigradients.com/#Alihossein

uiGradientsは、様々なグラデーションを見ることができます。大半のツールでは一般的にカラーコードが確認できますが、こちらはカラーコードだけではなく、CSS情報も確認することが可能です。
　　

まとめ

いかがでしたでしょうか。配色が苦手なのに自分だけで考えようとすると、いくら時間をかけても決まらなかったり、でき上がりに納得いかないという結果になりかねません。

そこで、デザインのコツをおさえ、ツールを活用しましょう。まず何から始めるべきかわからない、合う色がわからない、という方でもデザインに合った色が選べます。

ツールに関しては、自動的に配色を決めてくれるもの、自分で色を調整しながら使えるもの……と様々なものがありますので、用途・好みに合わせて使ってみましょう。