カラーパレットジェネレーター「Adobe Color」で配色を楽しもう

こんにちは、ハヤマです。
今回は、カラーパレットジェネレーター「Adobe Color」について書いていきたいと思います。

「Adobe Color」とは

Adobeが提供しているカラーパレットジェネレーターです。
2色以上でデザインを行う際に配色を検討しますが、そんな時に便利です。

こちらのツールですが、なんと無料。
Webからアクセスするだけで利用できます。

https://color.adobe.com/ja/

できること

Adobe Colorでできることは、以下の通り。

① カラーテーマを作成

カラーパレットジェネレーターを使用し、色彩理論に基づいてカラーテーマを作成できます。

メニュー「作成」をクリックすると、カスタムでカラーテーマが選ばれた状態でページが表示されます。 画面中央にあるカラーホイールの中に含まれる小さなサークルが現在選ばれている配色で、これは画面下に表示されているカラーパレットの情報と呼応しています。

テーマを生成する際、「カラーハーモニー」モードを活用することができます。デフォルトは「カスタム」です。
画面左上にあるプルダウンメニューから「類似色」「補色」「トライアド」などといった8種のモードの中から選択することで、ベースカラーを基準に、選んだ色彩理論に基づいたルールに則った配色を生成してくれます。

生成されたカラーは、カラーパレットから色合いの変更や、カラーコードをコピーすることができます。

また、カラーテーマは画像ファイルの色合いから抽出することもできます。
ページのタブを「テーマの抽出」に切り替えてアップロード画面を表示し、用意した画像をアップロードします。

するとこんな感じで、写真からカラーをピックアップしてくれます。

写真のおかげもありますが、結構いい感じ。
画面左側にある「カラームード」を変更すると、スポイトするカラーのポイントが変わります。

同じく、写真からグラデーションを生成することもできます。

そのまま使用することは難しいと思いますが、例えば季節を意識したデザインの場合など、アイデアのヒントになるかもしれません。

カラーテーマには、20色まで追加が可能(2024年10月現在)。
ただし最良の結果を得るには、主に使用するカラーを2~5色に絞るのが良いとのことです。

Adobe IDをお持ちの場合は、生成したカラーテーマをCCライブラリに保存したり、ネットワーク上に公開することもできます。

② コミュニティで提供されているテーマを探す

Adobe ColorコミュニティやAdobe Stock画像、Behance(世界中のクリエイターが、自身の作品を公開しているSNS)プロジェクトからテーマを探せます。

ソースを細かく指定することも可能。

選んだカラーテーマはライブラリに保存したり、JPG画像としてダウンロードすることができます。

③ SVGファイルまたはベクターを再配色

こちらは、比較的新しく搭載された「LAB」という機能です。
SVGファイルをアップロードすると、選んだカラーテーマに合わせてSVGが再配色されます。

再配色後のSVGはダウンロードすることができます。

④ コントラストチェッカー

「WCAG(Web Content Accessibility Guidelines)」と呼ばれる、インターネットにおけるアクセシビリティ対応のコンテンツのための国際標準規格のレベルと比較して、選択した配色のコントラスト比が視覚的に認識しやすいものになっているかを確認することができます。

WCAGのレベルは実装難易度の低い順から「A」「AA」「AAA」の3段階で定められており、チェッカーでは「AA」か「AAA」のどちらかを選べます。

試しに「AA」を選択してチェックしてみました。 上記画像の配色では、17pt以下のフォントサイズの場合に「不合格」となりました。
「AA」では、4.5以上のコントラスト比を満たす必要があるため調整をします。

背景色の明度を下げたところ、コントラスト比も基準値を満たし「合格」となりました。
これならデザインで配色を行った後のチェックも手軽にできますね。

さいごに

配色ジェネレーターは今や様々なものがありますが、Adobe Colorは自分自身ほぼ活用したことがなかったこともあり、Adobeユーザーとしても一度触れてみよう!と思って取り上げてみました。
最近拝見したウェビナーの中でも、カラーアクセシビリティの検証ツールのおすすめとして挙げられていたこともきっかけです。
配色は、グラフィックやUIの構成要素として重要な役割を持っているので、色選びはとても大切。活用できるツールは取り入れて、デザインワークに役立てていきましょう。

[告知]「もくもく会」開催のお知らせ

ITに関連する作業や学習を集中して進めたい方のための「もくもく会」を開催します。
プログラミング、システム構築、デザイン、執筆、リサーチなど、ITに関係する内容であれば、テーマは自由です。
日頃の学習や仕事でなかなか時間が取れない方、集中できる環境が欲しい方、同じような目標を持つ仲間と一緒に進めたい方を歓迎します!
初心者から上級者まで、どなたでも参加可能ですので、気軽にご参加ください。

日時:2024/10/11(金) 19:00〜21:00
場所:貸し会議室 UNIELL 静岡駅北口 (〒420-0033 静岡県 静岡市葵区 昭和町 10-4 SOZOSYA 昭和町ビル 501)

arms.connpass.com