もう色に悩まない! 配色ツール Adobe Color CC で簡単色彩設計

アイキャッチ Adobe CC

こんな方におすすめの記事

  • デザインの配色に迷う
  • 手軽に色彩設計を行いたい
  • 色彩設計にかける時間を短縮したい

本記事の動作環境

  • Google Chrome 68.0.3440.106
  • Adobe Photoshop CC 19.1.6
  • Adobe Illustrator CC 22.1
  • Adobe Dreamweaver CC 18.2.10165

Adobe Color CCとは

Adobe Color CC はAdobe社が提供する無料の色彩/配色テーマ作成Webサービスです.
ベースカラーを選択すると,配色アルゴリズムに基づきその色を含む5色のカラーセットを自動で作成してくれます.
またカスタムカラーセットを作成してテーマとして保存/公開することも可能です.
本サービスを使用して作成したカラーテーマをAdobe IDに登録することで,Adobe CC製品内のパネルから,作成したカラーテーマを呼び出すことができます.

Adobe Color CC を利用する理由

  • 専門的な知識がなくても綺麗な色彩設計を簡単に行える
  • デザインにおける色彩設計にかける時間を短縮できる
  • デザインごとの配色をまとめて管理できる
  • Adobe IDを利用することでAdobe CC製品とシームレスにカラーセットを同期/利用できる

使用方法

以下はAdobe Color CCを使ったカラーセット(テーマ)の作成方法と,主なAdobe CC製品でのカラーセットの利用方法の解説です.

Adobe Color CCでテーマを作成する

サイトへアクセス,Adobe IDでログイン

次のリンクからAdobe Color CCにアクセスし,Adobe ID(無料で作成可能)でログインする.

Adobe Color CC | Adobe

Adobe Color CC

ベースカラー,配色アルゴリズムを決めて,テーマとして保存する

  1. ベースカラーを指定する. カラーホイールから選択,もしくはカラーコードを入力する.
  2. 「Colorハーモニーを変更」から配色アルゴリズムを選択する.
  3. 配色アルゴリズムをカスタムに変更し,カラーセットを調整する.(任意)
  4. Colorテーマを保存
  5. 保存したテーマは「マイテーマ」で確認,編集,ダウンロード可能.

ベースカラー,配色アルゴリズムを決め,テーマとして保存

Adobe CC製品で作成したテーマを利用する

各製品のメニューバーの「ウィンドウ」から「CCライブラリ」もしくは「ライブラリ」パネルを表示して利用する. パネルはドックへドッキング可能.
画像はPhotoshopで利用する例.

CCライブラリパネルの開き方(Photoshopの場合)

Photoshop CCの場合

  1. パネル内に表示されたテーマの中から目的の色をクリックすると,カラーが設定され使用できる.
  2. 現在選択中のカラーはツールパネルもしくはオプションバーで確認可能.

Photoshopでの利用

Illustrator CCの場合

  1. テーマカラーを反映させたいオブジェクトを選択する.
  2. パネル内に表示されたテーマの中から目的の色をクリックすると,オブジェクトにカラーが反映される.
  3. 現在選択中のカラーはツールパネルもしくはオプションバーで確認可能.

Illustratorでの利用

Dreamweaver CCの場合

  1. 表示されたテーマの中から目的の色をクリックすると,カラーコードがコピーされる.

Dreamweaverでの利用

利用方法は以上です.
本サービスを利用すると,色彩設計にかかる時間を大幅に減らせるのでぜひ利用してみてください!

参考サイト

Adobe Color CC | Adobe
Adobe Color CC の使用方法 | Adobe Help Center

コメント