【ブログ初心者の悩み】WEBサイトの配色のデザイン方法!厳選カラーツール10選

Webサイト の配色方法 簡単ツール

こんにちは、ユタカです。(@yutaka_dreams

ブログを作っていく中でとても重要なことが、配色です。配色は人の心理に感覚的に届くのでデザインしていく上でとても重要なことなのです。

今回はその配色をカラーツールを使ってデザインしていく方法です。

あなたの知りたい項目から読めるように出来ています。
知りたいタイトルから始めてください。

プロが愛用するAdobeのカラーツール

Adobe Color CC

Adobe Color CCの画面

操作はカラーホイールで配色パレットを直感的に作ることができます。

Adobe Creative CloudのアカウントIDが必要ですが、IDが あれば「Illustrator」や「Photoshop」などのAdobe製品との連携ができるので、デザインで使うのにもとても便利です。

また世界中のAdobeユーザーが投稿した配色パレットも閲覧利用が出来るのでとてもオススメです。

写真もアップして色を抽出することができます。

Adobeアカウントを持っていない人はコレを機会に作ってみてはいかがでしょうか。

シンプルで使いやすい配色ツール

Hue 360

Hue 360の画面

左側にあるブライトネスで色の明るさを決め、次に右のカラーホイールから色を選ぶことで、その色に合った手だけが残っていく仕事です。

自由にカラーパレットを作って行けるので、とてもシンプルで使いやすいカラーツールです。

Hue 360

Color Scheme Designer

Color Scheme Designerの画面

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

Color Scheme Designer

Color Drop

Color Dropの画面

これは今までのものとは違い、きれいに配色された4色を集めたサイトです。

決められた色を視覚的に選びたい人はオススメのサイトです。

Color Drop

文字と背景色をチェックできる

Colorable

Colorableの画面

背景と文字の色との相性が、ユーザーにとって見やすいかどうかを判断してくれるツールです。

WCAG(ウェブアクセシビリティ基盤委員会)の評価も表示してくれます。

例えば、

背景と文字の配色が見やすいコントラストであれば「AAA」
少し見にくいなどは「AA」
問題がある場合は「Fail」など評価してくれます。

Colorable

アップした画像でカラーパレットを作れる

Color Kitty

Color Kittyの画面

画像をアップロードして自動で配色を抽出してくれるツールです。 

ここまではよくあるツールですが、Color Kittyの特徴は、

配色された色を、画像上で動かすことができ微妙な調整ができます。

Color Kitty

アップした画像でカラーパレットを作れる

NIPPON COLORS

NIPPON COLORSの画面

NIPPON COLORS

和色大辞典

和色大辞典の画面

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

和色大辞典

きれいなグラデーションをさがす

WebGradients

WebGradientsの画面

美しいグラデーションの配色を集めたサイトです。cssコードもコピーできるのでとても便利です。

その他の特徴としては 、PhotoshopとSketchなどと行ったアプリケーション用にダウンロードすることができます。

WebGradients

Googleのとても便利な配色ツール

Google Material Color Tool

Google Material Color Toolの画面

最後に、今までの配色サイトの進化系とも言えるツールです。

こちらは、選んだ色を実際にサイトやスマホページに配置したのイメージを提示してくれます。

色だけでなく、サイトの構成としてイメージできる優れたツールです。

Google Material Color Tool

≫副業ブログでアフィリエイトを始めたい方は下記をごらんください。

【初級者向け】 副業でブログ アフィリエイト を始める手順 ブログ開設 初心者がアフィリエイトを始める方法【簡単】