気になる人
- メインカラーや配色理論も決まったけど、効率よく色を選定したい
- 配色の基本は抑えているけど、実際にこの色でいいのか不安
と、思っている方に私、モーリーも実際に使っている配色ツールをご紹介します！
こんにちは、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。
配色ツールを利用することで、配色の基本や配色理論に沿った色を効率よく選定することができます。
実際、僕もバナー作成やWEB/アプリUIデザインを作成する時に頻繁に利用しているので、必ず役立つものだと思います！
目次
WEB/アプリUIデザインにも使える配色ツール５選
配色ツールは世の中にたくさんあります。
また紹介しているサイトも多くありますが、今回は、私が実際に利用している配色ツールに限定して、
- 何を使っているのか
- 何が優れているのか
- どう使うのか
に焦点を絞ってご紹介します！
[ HUE / 360 ] The Color Scheme Application
![[ HUE / 360 ] The Color Scheme Application](https://forest-blogs.com/wp-content/uploads/2020/08/色相環-1024x572.png)
![[ HUE / 360 ] The Color Scheme Application](https://i0.wp.com/forest-blogs.com/wp-content/uploads/2020/08/色相環.png?resize=880%2C492&ssl=1)
色相環で、色相・明度・彩度を変更しながら色の組み合わせを確認できる配色ツールです。
配色理論や配色の基本の記事で解説していた配色方法の理解を深める上でも、この色相環のツールがとても役立ちます。
画面左下に以下のメニューがあります。
- Color Space：オススメはRGBに変更
- Hue Step：色相環の色相（色合い）の数の変更
- Chroma Step：列方向に彩度の数を変更
- M&S Judge：色相環上から選択した色と調和する色だけが表示されるようになります。
Hue StepとChroma Stepを変更した色相環の例になります。
色相環上から任意の色を選択することで、選択した色と調和する色だけが表示されるようになります。
また、色相環の色合いの明度も、Brightnessを選択することで変更することができます。
原色大辞典
ブラウザで名前が定義されている色の名前とカラーコードを一目で確認することができる配色ツールです。
任意の色を選んで詳細に入ると、以下の項目を確認できる。
- 同じ色相で明度を１０ずつ刻んで０までの１１段階を確認できる
- 同じ色相で彩度を１０ずつ刻んで０までの１１段階を確認できる
- 同じトーン(明度と彩度が同じ)ので色相が違うものを確認できる
- 補色を確認できる
- 類似色を確認できる
- CMYKを確認できる
- 配色パターンを押下することで、トライアド、テトラードなどの配色も確認できる
配色方法の詳しい用語についてはこちらの記事で解説しているので参考にしてください。
【配色の決め方①】配色理論と配色の種類を徹底解説！
【配色の決め方②】配色の基本！意味・印象と実例紹介
Coolors.co
Coolorsは、複数の色でカラースキームを作成することできる配色ツールです。
スペースキーを押すだけで、新しいパレットを生成することができます。
デフォルトでは５色ですが任意の色にhoverすることで表示される「＋」を押下することで色を増やすことができます。
また、画面上部（header）のカメラマークを押下することで、画像をアップロードでき、その画像からカラーパレットを作成することもできます。
Canva
Canvaは、配色の際に多岐に渡って活躍できる配色ツールになっています。
Canvaは以下の目的で利用しています。
- 画像から自動でカラーパレット作成
- 様々な配色パターンを一覧で確認
- 色の意味を確認（メインカラーなどの選択に役立ちます）
- １色指定して、配色方法を選択すると自動で配色を作成
- 該当する配色方法のクリエイティブ確認
画像をアップロードすることで、自動で画像に利用されているカラーをピックアップします。
様々な配色パターンを一覧で確認できます。
色の意味を確認できます。
私の記事で主要な色は日本語でまとめてあるのでよろしければこちらも参考にしてみてください。
【色の意味解説！】デザインにおける色の意味と心理効果を解説！
１色指定して、配色方法を選択すると自動で配色を作成できます。
uiGradients
uiGradientsではグラデーションのパターンを複数確認することができます。
様々なグラデーションの例を確認できるためグラデーション配色の時にとても役立ちます。
またCSSで実装の際にコードも確認できるため時短にも役立ちます。
まとめ
いかがだったでしょうか？
本記事では以下の配色ツールの概要と利用方法について紹介させていただきました。
配色の知識をつけて、クリエイティブ作成の時にぜひ使ってみてください。
配色ツールだけでなく配色の知識や実例について知りたい方は、下記の書籍がオススメです。
２冊紹介していますが、どちらか１冊あれば十分だと思います。
合わせて読みたい
【色の意味解説！】デザインにおける色の意味と心理効果を解説！
【配色の決め方①】配色理論と配色の種類を徹底解説！
【デザイン初学者必見】デザイン配色の決め方とコツ【バナー作成に役立つ】
