配色ツール Adobe Color CC / Adobe kulerの使い方
2016.02.12
カテゴリ：クリエイティブ
タグ：
配色ツールのAdobe Color CC / 旧Adobe kulerの使い方をご紹介します。
Adobe Color CC / 旧Adobe kulerホームページ制作やチラシ、名刺等の印刷物制作時に必ずついてまわる配色パターンを作成するツールです。
もくじ
1.各部分の解説
カラーホイールです。色相、彩度等を調整して色を選びます。私は色の調整が煩雑になりがちな気がするのでカラーホイールはあまり使わないです。
スライドバーです。上から順にRGB(レッド・グリーン・ブルー)・明度となるので色が組みやすいです。色調整はカラーホイールではなくコチラをお勧めします。
左側の探索から、他のユーザーのカラーテーマが見れます。右側のカメラマークで写真・画像からカラー抽出をする事が出来ます。
カラールールを選ぶ事が出来ます。ベース（メインカラー）に対しての色選びのルールを決められます。ルールについては次の項目で解説してます。
2.カラールールについて
カラールールを知る事でより色選びがスムーズになります。Adobe Color CCを使う場合は出来るだけコレを意識した方が良いです。下記まとめです。
| モノクロマティック | 色のベースは単一で彩度と明度を変化させて色の変化をさせます。落ち着いた色で統一感を生む事が出来ます。 |
|---|---|
| トライアド | 色相環（虹色を円状に並べたもの）を正三角形で配置した物です。色の違いがはっきりと出るため強い印象を生む事が出来ます。 |
| 補色 | コンプリメンタリー、反対色ともいわれ、色相環の反対に位置するカラーで、看板制作や幟にロゴ等使うと目立ちます。 |
| コンパウンド | 間色で、ベースカラーと反対色（補色）をベースとしてその間の色を作ります。 |
| シェード | 濃淡で、明度調整をメインとします。ベースカラーに対して黒を混ぜたように明度の違う色を作ります。 |
| カスタム | 全ての色配置を自在に配置出来ます。 |
3.色の作り方の手順
①下の5つの正方形のどれかにカーソルを持っていくと三角のマークが出ますのでそれをクリックすると選んだ正方形がベースカラーとして選択されます。
②次にカラールールを決めます。今回はモノクロマティックにします。するとベースカラーを基調に他の4色も勝手に決まっています。これでだいたいの色は決まりました。
③再度、カラールールにカーソルを合わせカスタムをクリックします。
④カスタムにする事で各色のコントロールのリンクがはずれ、個別で扱えるようになります。後は明度等を調整して完了です。
4.画像を取り込んでカラーテーマを抽出
すごく便利な機能で風景やお気に入りのバッケージ等の画像からカラーを抽出してくれます。
①右上のカメラボタンをクリックします。
②フォルダが開くので画像を選ぶ。
③後はカラームードでモードを選んで好きなモノを選んで完了です。
5.おまけ 選んだ色をホームページサンプルに反映する事が出来る【WEB DESIGN COLOR TESTER】
ページ内の上部にマウスを持っていくとバーが出てきて選んだカラーを入れることでサイトの配色を試す事ができます。制作に入る前の色決めですごく役に立ちます。
