色の組み合わせでもう迷わない！配色手助けツールを紹介！

こんにちは。

以前のブログで「色のイメージと見ている人に与える印象」を取り上げましたが、今回は色の組みあわせについて発表したいと思います。

配色の大事さ

↓をご覧ください。

同じデザインで配色を変えたものです。

配色の違いで与える印象が結構変わってきますね。

左のデザインは統一感のある色合いですが、右のデザインは統一感がなく落ち着かない感じがします。

ユーザーが見やすいデザインにするには、ある程度統一感のあり、自然な色合いにすることが大切です。

統一感の出る色の選び方

統一感の出る色の選び方は、まずメインカラーとアクセントカラー2色を、伝えたい雰囲気にあわせて選びます。

色を選ぶ基準は以前のブログで書かれている情報を参考にすると良いです。

メインカラーに合わせた薄い色と濃い色を選ぶと統一感のあるカラーチャートができます。

さらに色を増やしたい場合は色相だけ変えると統一感を保ったままアクセントカラーを増やせます。

色の組み合わせの手助けツール

綺麗な色の組み合わせ決めは、私にはまだ難しくよく迷うことがあります。

作業中迷ったときによく私が使う、配色を手助けしてくれるツールを紹介します。

Color Hunt

綺麗な色の組み合わせをたくさん提案してくれます。

使いたい色や雰囲気で検索する機能もあるので使いやすいです。

https://colorhunt.co/

Accessible Brand Colors

組み合わせた色の視認性や色合いなどを点数で評価してくれるサイトです。

実際に組み合わさった状態で見られるので、確認するときに使います。

https://abc.useallfive.com/

Adobe Color

adobeが無料でやってるツールです。

カラーホイールで色を選ぶと自動で合う色を見つけてくれるので、直感的に色を決めることができます。画像からカラーチャートを作ることもできるのでかなり便利です。

https://color.adobe.com/ja/create

また、上記サイト以外にもPinterestやLPまとめサイトなども配色の参考に使っています。

まとめ

今回は見やすい色の組み合わせを紹介しましたが、統一感がなく、たくさん色を使っているサイトでも、綺麗に纏まっていたり、ユーザーの目を引く可能性もあります。

正解のデザインを作るのは難しいですが、少しでも正解に近いデザインをすばやく作れるように、様々なツールを駆使してこれからの作業に活かしていきたいですね。

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。