【無料】Adobe Colorで配色デザインはバッチリ！便利な使い方

配色の悩みはAdobe Colorを使えば一発で解決！

配色デザインツールには何種類もありますが私が愛用しているのはAdobe Color。

無料ながらも超使いやすくAdobeccとの連携も便利なAdobe colorについて詳しく解説します。

Adobe ccを安く買う方法はこちら

最強の配色ツールAdobe Colorとは

Adobe ColorとはAdobe(アドビ)が提供している無料の配色デザインソフトの事です。

直感的な操作でバランスの良い配色デザインを作り上げることが可能。

作ったカラーパレットは簡単に色コードをコピーしたりPhotoshopやIllustratorなどに自動的に送れます。

Adobe Colorの特徴

シンプルながらも多機能なAdobe Colorの大きな特徴は下記の4点

基本的な機能は会員登録不要で利用可能です。

AdobeID（無料）があればすべての機能が利用可能になるので会員登録しておくとさらに便利になりますよ。

Adobe Colorはブラウザから利用可能

Adobe Colorはソフトのインストールが不要でブラウザで使えるので超お手軽。

パソコンでもタブレットでも好きな環境からアクセスして利用可能です。

Adobe Colorの使い方

Adobe Colorの使い方は超かんたん。

1. カラーハーモニールールを選択
2. カラーホイールを動かす
3. カラーコードをコピー

左にあるカラーハーモニーテーマにチェックを入れたら直感的にカラーホイールを動かすだけ。

下にカラーコードが表示されるのでそれをコピーすればOK

カラーパネルをクリックすればメインテーマに変更も可能。

メインカラーを基準に他の色が決められます。

探索機能なら自分で作成する必要なし

トップヘッダーにある『探索』をクリックしてみましょう。

膨大な量のカラーパレットが表示されます。

検索バーにカラーイメージを入れてもOKです。

右上にある『すべてのソース』というところを『カラーテーマ』にすればパレットのみが表示されて見やすくなりますよ。

トレンドカラー

いろいろなジャンルのトレンドを見ることも可能です。

探索の隣の『トレンド』タブでトレンドも見てみてください。

写真からテーマ抽出も可能

写真をドラッグアンドドロップするだけでカラーを自動抽出することができます。

イメージビジュアルなんかがある場合はこれを利用すると写真のイメージと合うバランスの良い配色になりますよ。

使用頻度の低い機能ですが写真のイメージ通りにデザインして欲しいという要望があるときは役立ちますので覚えておきましょう。

新機能 グラーデーション抽出

上記の写真抽出と同様に読み込んだ写真はグラデーション化することも可能です。

PhotoshopやIllustratorでグラーデーションとして利用してみるのもいいですね。

左上の『グラデーションの停止点』というバーを動かすことでより複雑なグラデーションになりますよ。

新機能 アクセシビリティツール

新しく追加されたアクセシビリティツールでは色覚異常に対応するため、見えなくなる可能性のある色を指摘してくれるツールです。

競合箇所がエラー表示されるのでカラーパレットの線がついた場所を動かしてあげればOK

マイテーマに保存しておこう

作成したカラーパレットは保存しておくと後からも利用できて便利です。

あとここで保存したカラーパレットはAdobe CCのソフトで開くことが可能になりますのでPhotoshopやIllustratorを利用している人は作成後に保存を忘れずに！

PhotoshopやIllustratorで保存したカラーパレットを開く方法は後述します。

カラーハーモニー

Adobe Colorでは下記の9つのテーマで色バランスを決めることができます。

これらカラーハーモニーについて解説します。

類似色配色

類似色とは色相環の中で下記の3つが近い色の事を指します。

• 近似色
• 明度
• 彩度

類似色を利用すると目立ちはしないものの非常に落ち着いた印象のデザインになりますよ。

モノクロマティック配色

モノクロマティックとは色相環から選択した色・近似色の明度と彩度の違いの色パターンの事。

類似色よりもコントラストがはっきりするためアイキャッチなどで使用しやすいカラーパレットができますよ。

トライアド配色

トライアドとは色を3色選択する方式でカラーホイールはトライアングルになります。

トライアドはバランスをとるのが少し難しい配色ですが印象に残りやすくデザイン性が高いです。

補色配色

補色とは色相環の正反対の色を組み合わせて作成する方式。

補色は色の鮮やかさが強調されるので色を強調したい場合に最も適したカラーバランスです。

分割補色配色

分割補色とは補色の左右の近似色を使用する方式。

この例ではメインの黄色の補色である青ではなく、隣接する水色と紫を利用しています。

補色はハッキリと色が強調されるのに対し、分割補色はコントラストを抑え強調しつつも落ち着いた印象を与えることが可能になります。

二重分割補色配色

二重分割補色とは上記の分割補色にメインカラーの近似色をわせた方式。

彩度を落とした二重分割補色は柔らかい印象になりやすいです。

正方形配色

正方形配色はテトラード配色やスクエア配色ともよばれ、文字通り四角形で色相環を指定する方式。

正方形で色を指定するということになるので2組の補色配色が生まれます。

カラフルな印象を与えるデザインに向いています。

コンパウンド配色

コンパウンド配色は二重分割補色とモノクロマティックが合わさったような感じの方式。

こちらは複数カラーを使いつつも落ち着いた色合いにしたい時に便利です。

シェード配色

シェード配色はメインカラーに黒を加えて配色する方式。

1色のみでデザインしたいときなどに役立ちます。

色の仕組みも理解しておくとGood!

マイカラーはAdobe ccと相性抜群

Adobe Colorで保存したカラーパレットはPhotoshopやIllustratorのCCライブラリに自動的に表示されます。

これがもうめちゃくちゃ便利。

文字やシェイプを選択してカラーパネルをクリックすれば色指定することが出来るので大幅な時短効果もあります。

IllustratorでAdobe Colorを使う方法

Illustratorで使用する場合はCCライブラリを表示させればOK

グループを作成してカラーパレットを整理することもできますよ。

PhotoshopでAdobe Colorを使う方法

表示方法はPhotoshopも同じ。

これでCCライブラリウィンドウに表示されるのでクリックするだけでカラーパレットとして利用できるようになりますよ。

マイカラーに保存したのが全部表示されるのは本当に最高。

AdobeCCを安く買うなら

やはりデザイン関係はAdobeCCが最強です。

これら全部が使い放題になるコンプリートプランがソフト2つ分以下の価格で買える裏技があります。

これから新たに購入する人は下記の方法を利用するとAdobeCCが安く買えますよ。

キャンペーンは終了する可能性がありますのでお早めに。

あわせて読みたい

【9/30まで格安】Adobe CCを安く購入する方法。アカデミック版で最安！知らなきゃ確実に損な裏技。Adobe CCを安く買う方法をご紹介。Creative Cloudが72,336円→39,980円+オンライン講座付きで入手できちゃいます！お得すぎ。