crftロゴ

色に困ったらAdobeカラーで解決!

活用できます!
adobe color
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

色に困ったらAdobeカラーで解決!

Adobe Colorとは?

 Adobe Colorは色彩構築のための様々なツールがオールインワンになっているAdobeのウェブサービスでCCとシームレスに機能もする超絶便利なツールです。

 以前はIllustratorやPhotoshopの中にインテグレートされていて、Adobeテーマカラーとして専用ウィンドウパネルがありましたが、2021年に廃止されてしまいまし た。

Adobe Color Webアプリとして復活!

adobe color
adobe color

 Adobeアカウントがログアウト状態でもサイト自体は機能するので、Adobe Colorは基本的に誰でも使うことができるツールになっています。

 ただしもちろん編集内容を保存するには保存先になるAdobe Creative Cloudを利用するのでAdobeアカウントが必要になります。

Adobe Colorの細かな機能

 ページトップに作成探索トレンドライブラリ と大きく4つの機能に分かれています。

作成

作成では4つの機能が用意されています。

カラーホイール

 カラーホイールを使って、類似色、モノクロマティック、トライアド、補色、分割補色、二重分割補色、正方形、コンパウンド、シェード、カスタムとカラーコンビネーションを理論的に導き出すことが可能です。

 導き出されたカラーコンビネーションはカラーチップと#HEX、RGB、LAB、CMYK(理由はわかりませんが表示されたりされなかったり)でリアルタイムに画面の下部に表示されます。

テーマを抽出

テーマを抽出
テーマを抽出

 画像ファイルをアップロードして、その画像からテーマカラーを抽出します。

 抽出するポイントは自動で選択されますが、カラーピッカーをマウスで操作することで自分で再度調節することが可能です。

 2022年7月現在ではWebpやPSDは対応していないようです。JPG、PNGあたりなら問題なく利用できるようです。

 画像ファイルをアップロードして、その画像からグラデーションを抽出します。

 グラデーションのキーカラー(分岐点)はスライダーを使って最大15まで指定することが可能です。

アクセシビリティツール

アクセシビリティツール
アクセシビリティツール

 公共性の強いデザインをしているときには非常に心強いツールです。

 WCAG2.1 に対する達成度を確認することができます。

 WCAGは視聴覚に障害があるユーザーに対してのアクセシビリティのガイドラインでAdobe Colorでは2色間のコントラストによる文字の読みやすさなどが確認することができます。

探索

Adobe Color 探索 夏
Adobe Color 探索 夏

 キーワードから写真やカラーコンビネーションを探索することができます。

 上は”夏“というキーワードで検索した結果です。

トレンド

Adobe Color トレンド
Adobe Color トレンド

 BehanceやAdobe Stockの最新追加コンテンツをもとにカテゴリごとにトレンドとしてカラースキームをブラウズすることができます。

 カテゴリーはファッション、グラフィックデザイン、イラスト、UI/UX、建築、ゲームデザイン、自然、フード、旅行が用意されています。

Adobe Colorまとめ

 よくよく見ると盛りだくさんなAdobe Color、これ本当に使いでがあります。

 リモートが進んで外部からの刺激がすくなくなったクリエイターはどんどん活用すると良いと思いました。

 それと、色関連は専門用語が多いようです。

 筆者もWCAGってはじめて知りました。

 crftでは現代のデザイナー、クリエイターに必要なグラフィックデザイン用語辞典 も随時更新しています、活用してください。