配色には方程式があるとプロは言いますが、一般素人には中々難しい部分があると思います。
「趣味の悪い配色にするならシンプルでいた方がマシ。」
って事で結果、例えば私のサイト一つとっても気づけば白黒のモノトーン配色になっちゃってますが、本当は色々修正したいと考えています。
今回紹介するwebツールは配色の黄金比を自動生成してくれるAdobeが誇る最高の無料ツールになっていますので、是非ご参考にしてください！
Contents
配色パターンを５色で設計する
https://color.adobe.com/ja/create/color-wheel/
トップページに飛ぶとまずこの画面が表示されていますが、デフォルトで赤の類似色で統一されています。
五本の線があると思いますが、その中の白の矢印付きの線をメインで使いたい色へ調整させると他の４本も連動して黄金比を保ちながら自動調整される仕様になっています。
配色パターンの見本を参考にセンスを磨く
「探索」をクリックしてもらうと上記の画面が表示されますが、ここに登録されている配色パターンが本当に良い！！
というかイチから模索している人はここからイメージする理想の配色パターンを参考にしたいり、選択してそのまま引用するのも大いにアリだと思います。
ちなみにフィルタで色々設定できます。↓
人気の高い順・使用回数の多い順で見ることが出来ます。
配色パターンで人気の高い順
何か国旗を連想しそうになるパターンもありますが、このキャプチャ以下にもスクロールしていくと沢山出てきますよ。
ファッションの色使いの参考にもなりそうで、見ているだけでも地味にセンスが磨かれていきそうです。
配色パターンで使用回数の多い順
個人的にはイエローがベースになっている配色を探しているんですが、意外と少ないんですよね！
黄金比を保ちにくい色なのかも？
逆に自然っぽい土っぽい色のベースは結構多い印象。
個人的にビビッ！と来た配色パターンはこれでした。
探しているうちに更生させたい配色イメージが徐々に固まっていく自分に気付きます。
是非皆さんもちょっと試してみてほしいです♬
配色パターンのカラールール
さっき気になった配色パターンで調整したいと思ったので、クリック。
そうするとトップページに選択したパターンが反映されます。
個人的にはイエローとホワイトをもっと明るくて透明感ある様に調整したいなと思いました。
ちなみにカラールールは７種類選択できます。
- 類似色
- モノクロマティック
- トライアド
- 補色
- コンパウンド
- シェード
- カスタム
このツールを使って吟味していくと結構短時間で配色パターンが固まってきますよ！！
まとめ
何か新しくイチからデザインしていく時にはこういったツールからヒントを得て作成すれば、失敗しちゃう事も減ると思います。
Adobeがせっかく用意してくれている無料ツールなので、先人に習って使わない手はありません。
是非ともこのツールを使ってセンスを磨いてみてはいかがでしょうか！？
