WEBツールWEB

ノンデザイナー向け!ブログの配色を決める時に使える配色サイトまとめ

WEBツール

ブログの配色を決めるときに参考になったサイトを備忘録。
僕と同じようにノンデザイナーの方でもできるだけ使いやすいサイトを紹介しようと思うので良ければ参考にしてみてください。

簡単な配色の基本

最初にサラッと配色の基本について少しお話を。

  1. ベースカラー:70%(白や灰色など背景色)
  2. メインカラー:25%(ヘッダーやロゴの色などブログの基調になる色)
  3. アクセントカラー:5%(ボタンなど注意を引く色)

基本的には上ような割合でベースカラー、メインカラー、アクセントカラーの3色で配色するとバランスの良い見栄えになるとされています。
ですので、ノンデザイナーの方は3色だけつかって配色するのがおすすめです。
3色以上はバランスよく配色しないと見づらいですし、そもそもプロのデザイナーの方でも難しいので真似しないのが無難です。

https://www.smashingmagazine.com/

3色だけ使った配色でわかりやすいのが上の画像のサイトです。
ベースカラーが白、メインカラーは赤、アクセントカラーが青となっていて各カラーがバランスの良い割合で配色されているのがわかると思います。
同じ色でも重要でない所は少し薄くした色を使うなどコントラストをつけるとより見栄えがよくなるので、好きな配色のサイトやブログを参考にする際は気にしてみましょう。

おすすめ配色サイト

 COOL COLORS

配色の見本が40パターン紹介されているサイトです。
万人受けする配色や個性的な配色まで色々紹介されています。
右の配色プレビューから選んだパターンが実際にサイトで使うとどんな感じになるのか分かるのでノンデザイナーの方でもイメージが付きやすくなっています。

Happy Hues

見出し、本文、背景、リンクなどの色が一通り揃った状態で紹介しているサイトです。
配色パターンは少ないですが、ブログを一通り配色する際に参考になると思います。

Color Hunt

リンク::https://colorhunt.co/

メイン、サブ、アクセントカラーを含めた4色の配色パターンを紹介しているサイトです。
紹介されている配色パターンが多いので、見ているだけでも飽きません

colorsupplyyy

リンク:https://colorsupplyyy.com/app

中央の色相環から好きな色を選んで相性の良い組み合わせを教えてくれるサイトです。
色相環や「次へ」クリックするといろいろなパターンが表示されます。

左上の「Hexマッチ」から好きな色のカラーコードを入力して、その色と相性の良い色や似た色の組み合わせを教えてくれたりもします。

0to255

リンク:https://www.0to255.com/

色の濃さを細かく比較できるシンプルなサイトです。

右上の入力欄に色の濃さを比較したいカラーコードを入力して使います。使いたい色をクリックするとカラーコードがコピーされるので便利です。

以上になります。
また参考になるサイトがあったら追記していきます。

コメント