Google chrome（グーグル ク...
続きを読む
WEBサイトやブログを作成しているときに、サイトの配色（カラーリング）に悩む事はありませんか？
今回は、様々な色の組み合わせやカラーテーマを探すことができ、WEBサイトやブログの雰囲気やイメージにあった色を見つけることができる便利なツール「Adobe Color」の特徴と使い方について紹介します。
Adobeのアカウントを持っていなくても、無料で簡単に使うことができるので雰囲気やカラー決めに迷っている方はぜひ一度使ってみてください！
↑Adobe Colorには作成のほかに「探索」や「トレンド」、「ライブラリ」といった機能があります。「トレンド」のページでは、グラフィックデザインやイラスト、UI/UX、ゲームなど様々なジャンル別のカラーリングアイディアを得ることができます。
ここからは、Adobe Colorの実際の使い方について紹介します。
Adobe Colorには、カラーホイール、テーマを抽出、グラデーションを抽出、アクセシビリティツールの4つのツールがあります。
↑トップページから「カラーテーマを作成」の「アクセス」をクリックします。
↑「カラーテーマを作成」に入ると画像のようなカラーホイールが表示されます。
↑画面左側の「カラーハーモニー」から配色の好みを選択する事ができます。
「類似色」を選んだ場合は近い色の組み合わせが、「モノクロマティック」を選択すると選択した色味の中で色の彩度が似た組み合わせになるなど、配色のパターンを選ぶことができます。
↑メニューから「テーマを抽出」をクリックし、中央の「ファイルをドラッグ＆ドロップ」にロゴや画像などをドラッグ＆ドロップします。
↑ロゴの画像などをアップロードすると、画像に使われている色を抽出する事ができます。
色のコードも調べることができるので、とても便利な機能です。
↑メニューから「グラデーションを抽出」をクリックし、中央の「ファイルをドラッグ＆ドロップ」にロゴや画像などをドラッグ＆ドロップします。
↑画像をアップロードすると、その画像にある色からグラデーションを抽出することができます。
グラデーションの分岐点や分岐点の数を自由に変更することができます。
↑アクセシビリティツールは、背景色と文字色のコントラスト比を調べることができるツールです。
メニューから「アクセシビリティツール」をクリックします。
※アクセシビリティとは…
すべてのユーザーがコンテンツにアクセスしやすく、使いやすいように設計することです。具体的には、視覚障害者のためのスクリーンリーダー（読み上げ）対応や、色覚異常を持つ人のために色のコントラストを工夫するなどが含まれます。
↑文字色（テキストカラー）と背景色を設定すると、テキストのサイズ・ロゴなどの図形別でコントラスト比を確認することができます。
合格・不合格も判定されるので、一つの目安として文字色と背景色の選定に役立てることが可能です。
↑テーマを抽出で抽出したカラーを確認し、ワードプレスやElementorでカラーテーマを決める際に参考にすることができます。
カラーコードも表示されており、コピペで使用できます。
↑Elementorの場合は、固定ページまたは記事のElementorの編集ページ（どのページでもOK）から画面左上のハンバーガーメニューアイコンをクリックします。
↑サイト設定をクリックします。
↑グローバルカラーをクリックします。
↑グローバルカラーでWEBサイトやブログのカラーテーマを設定することができます。
Adobe Colorで抽出した色のカラーコードをコピペして設定することが可能です！
今回の記事では、アカウント作成の必要無く誰でも無料で簡単に使える「Adobe Color」の特徴と使い方、そしてWEBサイトやブログ制作への応用方法（Elementor）をご紹介しました。
これからWEBサイトやブログを制作される方はもちろん、ご自身のブランディングやサイトの雰囲気作り、カラーテーマの選定に悩まれている方などあらゆる方に役立つサイトです。
ぜひ今回の記事を参考にしてAdobe Colorを使ってみてください！
2024-09-08
Sunday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
ブラウザのタブについているマークを「ファ...
続きを読む
