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

 
ポチ
ブログを作っていて悩んでいることはない?
 
ヒデ

デザインの色の配色がいつもいつも迷うんだよね

 
ポチ
それじゃ、今回のヒデポチブログでは配色を簡単に選べるツールの紹介をするね
 
ヒデ
ありがとう!少しでも悩まず配色できるといいよね!

【この記事の信頼性について】

ヒデブログのアイコンイラスト
① 大手メーカーWEBコンサル歴10年ほど
② 経営の収益8桁の実績(WEB運用以外も諸々)
③ ブロガー(海外マーケティングを知ってるほう)Twitter  ヒデとポチ🌏ポチと始める副業ブログ収入

『【ブログ初心者の悩み】WEBサイトの配色選び!厳選カラーツール10選』

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

Adobe Color CC

Adobe Color CCの画面

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

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

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

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

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

Adobe Color CC

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

Hue 360

Hue 360の画面

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

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

Hue 360

Color Scheme Designer

Color Scheme Designerの画面

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

Color Scheme Designer

Color Drop

Color Dropの画面

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

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

Color Drop

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

Colorable

Colorableの画面

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

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

例えば、

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

Colorable

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

Color Kitty

Color Kittyの画面

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

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

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

Color Kitty

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

NIPPON COLORS

NIPPON COLORSの画面

NIPPON COLORS

和色大辞典

和色大辞典の画面

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

和色大辞典

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

WebGradients

WebGradientsの画面

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

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

WebGradients

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

Google Material Color Tool

Google Material Color Toolの画面

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

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

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

Google Material Color Tool

ポチとヒデのまとめ

 
ポチ
配色パレットのツールを紹介したけど、どうだった?
 
ヒデ
用途に応じて、色んなサイトを使い分けると更に良さそうだね。
 
ポチ
そうだね!ぜひ活用してみて!
記事を最後まで読んでくれて、ありがとうございました。
 まとめ

・まずは自分のイメージする色を選ぶ

・色から与える印象を考える

・カラーパレットのサイトを使ってイメージの配色を探す

Wardpressの始め方について、こちらも合わせて読んでみてください。

関連記事

 ポチと一緒に解決したい問題・アフィリエイトはどれぐらい稼げるか?・ドメインとサーバーは何を基準で選ぶか?・Wordpressテーマとは? ヒデ副業でアフィリエイトブログを始めたいんだけど、なにかいい手順って無いかな[…]

【初級者向け】 副業でブログ アフィリエイト を始める手順