Adobe colorの使い方・おしゃれな配色を自動生成!

こんにちは、ツイちゃんです!
この記事では、Adobe colorの使い方をメモしておきます。

今日、Adobe colorを使って自分の配色を作ってみました。
Adobe colorでは、自分が好きな色を一つ選ぶだけで、自動的にその色に合った配色パターンを作成してくれます。

おしゃれな配色ができた

上の画像の場合、私は真ん中のみどり色を一つ選んだだけ。
残りの配色は、Adobe colorがマッチするものを自動で選んでれたんですよね。

「デザインで使う色のパターンが欲しいんだけど、いい配色がわからない!」
「自分の好きな色に合わせられる色が知りたい!」

そう考えている人は、ぜひこの記事を読んでAdobe colorを使ってみて下さい!

目次

Adobe colorの使い方

まず、Adobe color(リンク)を開きましょう。

そうするとこのような初期画面が出てきます。


次に、カラーホイール上の色のボタンを動かしてみましょう。
切り欠きがあるのがメインカラー(画像赤丸)なので、それをクリックしていろいろ動かしてみると、


紫ベース
うすだいだいベース

このように、自動的に合った色を出力してくれるんです!


左側の「カラーハーモニールを適用」下にあるボタンをクリックすれば、

アクセントの赤色がとてもおしゃれ!
補色から少しだけ離れたおしゃれなカラー

ベースカラーはそのままに、いろいろなバリエーションの配色を試すことができます。
かなりおしゃれです!

使ってみた

実際に作ってみた配色がこちらです。

緑ベースで落ち着いた色合いが気に入っています!

この配色を使って、Youtube動画用のテロップを作ってみました。

よくありそうな自己紹介のテロップ
基本テロップと右上の見出し
アクセントのオレンジの強調テロップ
カラーを並べた動画の最終画面

Adobe colorで作った配色を実際に使ってみて、違和感ない配色ができました。

今まで動画のテロップを作っていたときは、あれもこれもといろいろと色を入れていって、

「なんか統一感なくて、ごちゃごちゃしてるなあ」

と思っていたことが多かったんですよ。

Adobe colorで作られた正しい配色を使うことにより、自然な見た目で統一感があるテロップを作ることができました。
大変便利です!

おわりに

以上、Adobe colorの使い方をメモしました。
配色に気を付けるだけで、統一感はぐっと増すのがよく理解できました。

これからは、新しく何かをデザインするときは、Adobe colorで配色を作ってからチャレンジしてみます!

この記事を書いた人

群馬県前橋市に住む22歳の男性。
2021年1月にADHDという発達障害だと診断され、
精神障害者手帳3級を取得しました。
普段はブログとかYoutubeとかで遊んでます。

コメント

コメントする

目次
閉じる