【もう悩まない】サイトの配色は4つのツールで簡単&プロ級に決まる

どうも、たっくん(@wakutakublog)です。

「色について詳しい知識はないけど、より良い配色デザインを作りたい…」

そんなお悩みの解決には、4つのツールを使えばOKです。

これら4ツール使えば、デザイン初心者でも簡単にプロっぽい配色がキマリます。

逆に、初心者がなんとなくでサイトの配色を決めると「雰囲気ぶち壊し・直感的に伝わらない」そんな失敗のデザインになるかと。

WEBサイト制作を仕事をしている僕ですが、これら4ツールは「配色決めに悩んだら即参考にする」ぐらいに重宝しています。

たっくんのアイコン画像たっくん

マジで簡単なので、すぐに使えるよ…!

目次

【初心者こそ色は少なめに】サイトの配色は3色でOK

初心者がやりがちな失敗例として「色の使いすぎ」があります。

グラデーションを使ったり、強調するために何色も使ったり。

色を追加して「注目を集める」ことは簡単ですが、色を追加するほど「配色のバランスを取る」ことは難しくなります。

結論をいうと「サイトの配色は無彩色+3色まで」にしましょう。

配色についての基本的な考え方は以下の3つです↓

  • ベースカラー:背景や文字に使われる。無彩色が良い【全体の70%】
  • メインカラー:サイトの印象を決める。濃い色が良い【全体の25%】
  • アクセントカラー:注目を集める。目立つ色が良い【全体の5%】
たっくんのアイコン画像たっくん

3種類の色をもとに、ツールを使って配色を決めていきましょう!

【センス不要】4つのツールを使ってサイトの配色を決める

今回使うツールの一覧はこちらです↓

1色目:無彩色をHTMLカラーコードから選ぶ【ベースカラー】

まずはサイト全体の70%を占める「ベースカラー」を決めていきましょう。

ベースカラーには主張の少ない「無彩色(白黒グレー)が一般的です。

HTMLカラーコードを使い、下の赤く囲った範囲から選ぶといいでしょう。

厳密に言うと、横列は無彩色ではないので、縦列から選ぶことをオススメします。

サイトのイメージが明確に決まっており「薄いカラー付き背景がピッタリ」という場合は横の列から選びましょう。

たっくんのアイコン画像たっくん

迷ったら「背景色:#FAFAFA」と「文字色:#333333」でOK

2色目:雰囲気から選ぶ or 画像から抽出する【メインカラー】

次にサイト全体の25%を占める「メインカラー」を決めていきます。

「この1色がサイトの雰囲気を決める」と言っても過言ではないので、慎重に選びましょう。

とはいえ簡単で、以下の2パターンです↓

Hue360でサイトの雰囲気から選ぶ

作りたいサイトの雰囲気に合わせて選ぶ場合は「Hue360」を使いましょう。

このような流れで色を決めていくことができます。

ただ1つ注意点があり「メインカラーは背景にも文字にも使えるよう、明度の高すぎる色は選ばない」ことです。

具体的には以下の2点に注意すればOK↓

  • 「2:色を選ぶ」でなるべく円の外側から選ぶ
  • 少し内側から選ぶなら「1:明度を決める」で少しグレーにする

イメージカラーピッカーで画像から抽出する

商品画像など、サイトに使用する画像と同じ色を使いたい場合は「イメージカラーピッカー」を使いましょう。

これも同じように「商品カラーの明度の高すぎる」場合には不向きです。

そのような場合は、次のアクセントカラーで使ってみましょう。

たっくんのアイコン画像たっくん

メインカラーは「サイトの雰囲気」を決めるので、丁寧に選ぼう!

3色目:補色を使う or Coolorsで自動生成【アクセントカラー】

最後に「アクセントカラー」を決めていきます。

「申し込みボタン」など注目させたい箇所に使うので、ハッキリと目立たせないといけません。

また3色目なので、その他カラーとの相性も気にする必要があります。

とはいえ、以下の2つのツールを使えばこれも簡単です↓

  • Hue360」で補色or対象色を選ぶ
  • Coolors」で良い配色を自動生成する

Hue360を使って補色or対象色から選ぶ

アクセントカラーは「メインカラーの補色・対象色」から選ぶと目立ちます。

このような「メインカラーと正反対にある色」を使って、視線のあつまる配色を作りましょう。

Coolorsを使って良い配色を自動生成する

3色目以降はその他カラーとの相性も重要になるので、自動生成ツールを使うと簡単に配色を決められます。

そこで使用するのが「Coolors」です。

https://twitter.com/wakutakublog/status/1272696598196219904?s=20

ツイートの動画にあるように、Coolorsを使えば下記のようなことができます↓

  • 既に決めた色を指定して、その他カラーを自動生成
  • 3色でも5色でも、配色の数は自由に増やせる

なので「ベースカラー・メインカラー」をCoolorsで固定して、その2色と相性の良いカラーを生成することができます。

ただ1つ注意点があり「Coolorは相性の良い色を生成してくれるだけで、目立つ色とは限らない」ということです。

なので、アクセントカラーの生成に使う場合は、目立つ色が作られるまで変更しましょう。

たっくんのアイコン画像たっくん

「Coolors」はメインカラーの色数を増やしたいときにも便利…!

【感覚で決めるなツールを使え】配色はサイトの印象を大きく左右する

なんとなくで配色を決めるのはもう止めましょう。サイトの雰囲気を決める重要ポイントなので。

今回紹介した4ツールはすべて無料で使えるので、もう使わない手はないです。

もちろん配色の知識があればツールに頼る必要はないですが、知識がないなら素直に頼りましょう。

ぶっちゃけ、初心者がなんとなくの感覚で「サイトの配色」を決めてしまうと高確率で大変なことになります。

「ぜんぜん雰囲気とあってない」とか「とにかく見辛い」とか『伝わらないデザイン』の完成です。

以下がツールのまとめです↓

たっくんのアイコン画像たっくん

これらを使いこなして「伝わる配色」を作りましょう!

【おまけ】サイトデザインに使えるその他配色ツールの紹介

最後におまけとして「今回紹介しなかったけどおすすめの配色ツール3つ」を紹介しておきます。

  • Adobe Color CC:配色パターンを決めて5色を一括変換
  • Happy Hues:カラーパレットを選ぶとサイトにも反映され、使用例がパッと分かる
  • Colorhunt:他の人のおすすめカラーパレットが見れる
たっくんのアイコン画像たっくん

使いやすいツールは人によるので、いろいろ使ってみましょう…!

この記事が気に入ったら
いいね または フォローしてね!

目次
閉じる