adobe colorとは
adobeの配色ツール
Adobe Colorは、Adobeが提供している配色作成＆抽出ツールです。
5色のオリジナルカラーテーマの作成、探索、共有、作成データのadobeクラウド同期ができます。
【Adobe Colorにできること】
- バランスの良いカラーテーマの作成。
- 他のクリエイターたちのカラーテーマの参照＆共有。
- マイライブラリへ登録することで、Photoshop、Illustrator、InDesignなどのadobeアプリとシームレスに連携する。
自分でオリジナルテーマを作る場合もシステムフォローが働くので、失敗しないカラーテーマを作れるのが魅力です。
無料？
adobe colorの利用は無料です。
ダウンロードしたカラーも、そのまま配布するのでなければ商用利用も可能です。
特にadobe IDを持ってる人は、いつでもどこでもライブラリに保存しておけるので、とっても使い勝手が良いです。
adobe colorで色を組み合わせる-作成方法
デザインで迷いがちな配色問題も、システマチックに解決できるのがadobe colorの魅力です。
adobe colorなら、いろんなアプローチでカラーテーマを無料＆いくらでも作れるので、ぜひ気軽に試してみてください。
カラーホイール
直感的にオリジナルのカラーテーマを作りたいときは、「カラーホイール」を使うのがおすすめです。
カラーホイールは、ハーモニールールに従って5色を自動配色してくれるツールです。
ホール内の丸をドラッグするだけで簡単にカラーパターンを作れます。
◎カラーホイールの使い方
使い方は簡単で、カラーホイール内にある5つの丸の一つをドラッグで動かすだけです。
その他4色はルールに応じて自動調整してくれます。
◎カラーを初期化したいとき
初期化したいときは、ブラウザを再読み込みすると良いです。
◎カラーハーモニールールの変更
カラーハーモニールールの変更は、ルール一覧のチェックボックスをクリックすると切り替わります。
＼一覧の位置は画面左側／
なお、配色のやり方はどのハーモニールールでも同じで、5つの丸をドラッグしながら好みの配色を見つけていきます。
【カラーハーモニールールの種類】
- 類似色：色相環上で隣の位置にある色味で構成される配色。
- モノクロマティック：ベースになる単色の彩度と輝度の差で表現する配色。
- トライアド：色相環を3分割した位置にある色相同士の配色。
- 補色：色相環で正反対に位置する関係の色を組合せた配色。
- 二重分割補色：補色そのものではなく、補色に隣接する色を補色の代わりに使う配色。
- 正方形：色相環を正方形に4等分した位置にある4色を組み合わせる配色。
- コンパウンド：補色同士で色域的に使い色を混ぜ合わせる配色。
- シェード：シェードカラーで構成された配色。
- カスタム：ルール適用なし。全て任意で配色する。
テーマを抽出
気に入ったクリエイティブの配色要素を抽出したいときに便利なのが、「テーマを抽出」機能です。
やり方は簡単で、抽出にかかる時間も一瞬です。
【やり方】
- 「テーマを抽出」タブをクリック。
- 抽出したい画像を、画面へドロップ。
ドロップと同時に一瞬で抽出してくれる。
グラデーションを抽出
画像全体のカラーから、グラデーション要素を抽出したいときに便利なのが、「グラデーションを抽出」機能です。
やり方は簡単で、抽出にかかる時間も一瞬です。
【やり方】
- 「グラデ―ションを抽出」タブをクリック。
- 抽出したい画像を、画面へドロップ。
ドロップと同時に、一瞬でグラデーションを作成してくれる。
デフォルトは3点によるグラデーション抽出ですが、最大で15ポイントに細分化して複雑なグラデーションパターンを作ることもできます。
配分の調整もドラッグで簡単にできます。
アクセシビリティツール
アクセシビリティ（Accessibility）を直訳すると、「近づきやすさ」、「利用のしやすさ」、「便利であること」となります。
広義においては「利用者が機器・サービスを円滑に利用できる」ことを指すワードですが、adobe colorでは、テキスト色と背景色の組み合わせによって生じる視認性をチェックするツールとして活用されています。
「クリエイティブの文字が見にくいかも‥‥？」と思った時は、このツールを使うと解決の助けになります。
【やり方】
- 「アスセシビリティツール」タブをクリック。
- テキストと背景のカラーを指定する。
※色はカラー番号を直接入力するか、カラーホイールで選択する。
- コントラスト比横に表示されるアイコンで組み合わせをチェックする。
※「青丸+チェック」が入れば合格。「赤丸+斜線」があるときは不合格。
※色味を変えたくない場合は、トーン調整だけで合格できる場合もある。
- adobe colorの「おすすめ」適用でカラー変更することも可能。
- 合格したカラーナンバーを参考に、クリエイティブのカラーを調整する。
折角作ったクリエイティブも、色の組み合わせでテキストの視認性が阻害されてしまっては効果半減です。
入稿前にアクセシビリティツールでチェックするだけでも、訴求力がワンランク上がるかも！？‥‥しれませんよ。
adobe colorの使い方
配色を探す
カラーパターンは、先輩クリエイターが作った成功例を参考にするのもおすすめです。
上部メニューから「探索」or「トレンド」を開くと、参考にしたいカラーパターンが共有されているので、気に入ったものはどんどん利用しましょう。
◎探索：クリエイターが制作したカラーサンプル
◎トレンド：画像ストックサイトのクリエイティブのカラーサンプル
どちらも画像にカーソルを合わせると「ダウンロード」or「ライブラリに保存」ボタンが表示されます。
気に入ったものは遠慮なくストックしていってください。
ライブラリに登録
自分が作成したオリジナルカラーは、一旦クラウドのライブラリに保存しましょう。
ライブラリに保存したカラーサンプルはJPGでダウンロードできるので、adobe以外のアプリで使うときにも役立ちます。
【ライブラリ登録～ダウンロードのやり方】
- 保存したいカラーテーマを開いた（作成した）状態で右側の保存メニューから、「保存先」を指定して「保存」ボタンをクリック。
- 「ライブラリ」を開く。
- ダウンロードしたいテーマにカーソルを当て、ダウンロードアイコンが表示されたらアイコンをクリック。
- ダウンロード完了したファイルを開くとカラーとカラーナンバーが表示される。
ダウンロードファイルにはカラーナンバーも併記されているので、adobe以外のツールを使ってる場合でも再現が簡単です。
adobeアプリで使う
adobeアプリを使ってる場合、保存したカラーの呼び出しはクリエイティブクラウドで同期させるのが最も簡単です。
【adobeアプリで同期する方法-photoshopの例】
- ツールバー>表示>CCライブラリをクリック。
- CCライブラリから保存したフォルダを開く。
adobeアプリならクラウド同期も一瞬。
スウォッチを使う感覚で色変更できるので、とても使い勝手が良いです。
配色で悩んだ時にはぜひ使ってみてください。
