Webデザインを作り始めるときにいつも迷ってしまうのがサイトの配色です。
外出先で見かけた風景など、ふとした瞬間に「あ!この配色いいな。今度のWebサイトで使ってみよう」と思っても、その場ですぐ記録する方法がなく、結局デザインする頃には忘れてしまっていたり…。
今回は、配色テーマ作成ツールでおなじみの「Adobe Kuler」が新しく「Adobe Color CC」とサービス名を変更し、とても使いやすくなっていましたので、スマートフォンでの使い方を中心にご紹介したいと思います。
目次:
1. Adobe Color CCにアクセス
まず、スマートフォンで「Adobe Color CC」にアクセスします。
※もしiPhoneをお持ちでしたら専用のアプリがありますので、そちらもおすすめです。
この画面でも、指でグリグリ動かすだけで、自動的に素敵な配色パターンがどんどん作れて楽しいのですが、今回は「好きな風景をパレットに」がテーマですので、右上にあるカメラアイコンをクリックします。
ちなみにこの画面で配色パターンを作成する場合は、左上の『○』アイコンを押すと「類似色」「補色」などのカラールールが選択でき、1つのカラーからたくさんの配色パターンを作成することができます。
「今回使いたい色はこれ!」と決まっている場合におすすめです。
2. カメラで写真を撮る
右上のカメラアイコンをクリックすると、スマートフォンのカメラが起動します。
好きな風景やお気に入りの雑貨など、配色が素敵だなと思ったものをカメラでパシャッと撮影してみましょう。
今日は、蒸し暑さに負けてつい買ってしまったブルーベリーのアイスクリームがとても可愛かったので、思わず記念に撮ってしまいました。さっそく、この写真の配色をAdobe Colorで取り込んでみることにします。
3. 写真の中の好きな色を選択
写真を撮影すると、何も操作しなくてもAdobe Colorが瞬時に配色を決定してくれます。
もし自動で決定された配色が気に入らない場合は、指でドラッグして色の抽出ポイントを変更することもできますし、左上の『○』アイコンから「カラームード」を選び、好みの配色の組み合わせを選ぶこともできます。
「カラームード」を変更した場合の配色はこちら。左からそれぞれ「カラフル」「ブライト」「ミュート」「ディープ」「ダーク」を選択した場合の配色になります。このようにカラームードを変更するだけでも、同じ写真から抽出したとは思えないほど、かなり雰囲気の異なる配色パターンが作成できます。
4. 配色テーマを保存
「保存」ボタンを押すと、配色テーマの設定画面が開きます。もしAdobe IDにログインしていない場合は、ログイン画面に移動します。今までアカウントを作成したことが無い方でも、Adobe IDは無料で作成できます。
今回は秋っぽい配色だな…と感じたので、テーマ名を「fall blooming」にしてみました。
“このテーマを「探索」に公開します。”にチェックを付けると、Adobe Colorのサイトで共有できます。タグには配色に含まれている「pink」「orange」などの色の名前や、色の組み合わせから感じる季節や物のキーワードなどを追加するのがおすすめです。
全ての設定が終わったら「保存」ボタンを押してください。
公開にチェックを付けた場合は、Adobe Color CCの「探索」にもすぐに反映されています。
5. Photoshopに取り込む
自分で作成した配色テーマは色々なAdobeソフトで使う事ができます。Photoshopで利用する場合は、「ウインドウ」→「エクステンション」→「Adobe Color テーマ」から、「マイテーマ」ボタンを選ぶことで、今までに作成した全ての配色テーマが表示されます。
Adobe Color CCは上記のような説明を見なくても直感的に操作することができるのですが、Adobe KulerからUIがかなり変わり、スマートフォンとの連携がますます便利になっていると感じたので、今回紹介記事を書かせていただきました。
iPhoneアプリの評判も良いので、iPhoneをお持ちの方はぜひアプリのほうをお試しいただければと思います。