こんにちは、ユタカです。(@yutaka_dreams)
ブログを作っていく中でとても重要なことが、配色です。配色は人の心理に感覚的に届くのでデザインしていく上でとても重要なことなのです。
今回はその配色をカラーツールを使ってデザインしていく方法です。
あなたの知りたい項目から読めるように出来ています。
知りたいタイトルから始めてください。
目次
Adobe Color CC

操作はカラーホイールで配色パレットを直感的に作ることができます。
Adobe Creative CloudのアカウントIDが必要ですが、IDが あれば「Illustrator」や「Photoshop」などのAdobe製品との連携ができるので、デザインで使うのにもとても便利です。
また世界中のAdobeユーザーが投稿した配色パレットも閲覧利用が出来るのでとてもオススメです。
写真もアップして色を抽出することができます。
Adobeアカウントを持っていない人はコレを機会に作ってみてはいかがでしょうか。
シンプルで使いやすい配色ツール
Hue 360

左側にあるブライトネスで色の明るさを決め、次に右のカラーホイールから色を選ぶことで、その色に合った手だけが残っていく仕事です。
自由にカラーパレットを作って行けるので、とてもシンプルで使いやすいカラーツールです。
Color Scheme Designer

こちらも使いたい色を選ぶと、その色に合ったカラーパターンを表示してくれます。日本語にも対応しているのでとても使いやすいです。
Color Drop

これは今までのものとは違い、きれいに配色された4色を集めたサイトです。
決められた色を視覚的に選びたい人はオススメのサイトです。
Colorable

背景と文字の色との相性が、ユーザーにとって見やすいかどうかを判断してくれるツールです。
WCAG(ウェブアクセシビリティ基盤委員会)の評価も表示してくれます。
例えば、
背景と文字の配色が見やすいコントラストであれば「AAA」
少し見にくいなどは「AA」
問題がある場合は「Fail」など評価してくれます。
Color Kitty

画像をアップロードして自動で配色を抽出してくれるツールです。
ここまではよくあるツールですが、Color Kittyの特徴は、
配色された色を、画像上で動かすことができ微妙な調整ができます。
NIPPON COLORS

和色大辞典

日本の伝統色を調べたい時に役立つサイト2つです。日本の色の深さを知ることができる面白いサイトです。
WebGradients

美しいグラデーションの配色を集めたサイトです。cssコードもコピーできるのでとても便利です。
その他の特徴としては 、PhotoshopとSketchなどと行ったアプリケーション用にダウンロードすることができます。
Google Material Color Tool

最後に、今までの配色サイトの進化系とも言えるツールです。
こちらは、選んだ色を実際にサイトやスマホページに配置したのイメージを提示してくれます。
色だけでなく、サイトの構成としてイメージできる優れたツールです。
≫副業ブログでアフィリエイトを始めたい方は下記をごらんください。
