脱・初心者配色!ダサくならないサイトカラー設定の法則

『30日間でおしゃれブログ完成レッスン』11日目は、サイトの「色設定」を行います。

サイトの色なんて、各自のセンスで好きなのを使えばいいんじゃない…?
アンディ
プロのデザイナーでも、サイトの配色はとても慎重になるものです。適当な配色は、『なぜかダサくなってしまう』『理由は分からないけど見にくい』原因になりますよ!

この記事では、“デザイナーではない人でもおしゃれで心地よい配色をするコツ” について解説します。
ご紹介するコツを実践するだけで、垢抜けた配色、おしゃれな配色でブログをデザインすることが可能です。

11日目のメニュー
  • サイトの配色法則について学ぶ
  • 無料ツールを使って配色を決める
  • ログの色設定を行う

サイトカラーの重要性、決め方も合わせて見ていきましょう!

色選びは苦手…手っ取り早く、おしゃれなサンプルから配色を選びたい方はこちら。

個人ブログ向け|白背景で使えるおしゃれな配色見本73パターン

2019年1月31日

適当な配色は、ダサくて見にくいサイトを生む

突然ですが、こんな色合いのサイトを見たことはありませんか?

原色をたくさん使ったサイト

または、色選びでこんな悩みを感じたことはありませんか?

  • カラフルにしたいだけなのに、奇抜で目が痛い感じになってしまう
  • 明らかに “素人が作った感” がすごい
  • 誰がどう見てもダサい、胡散臭く見えてしまう
理由はよく分からないけど、なぜかそうなるんですよ。
アンディ
理由はズバリ、デザインや配色のルールを無視して作ってしまうからです。

デザインや配色のルールが分かれば、ブログが一気に変わる!

それでは、先ほどのサイト例を “デザインはそのままで” 配色のルールを考えて再度設定してみます。

色数もトーンも抑えたサイト

パッと見で違いますね!見やすくなった!
アンディ
同じような色使いでも、ルールに従って修正すれば文字が見やすくなりますね。目立たせたいところを強調することもできます。

さらに、デザインも少し整えてみます。

デザインの整ったサイト

何だか、最初と全く違うサイトのようになりましたね。
アンディ
難しいテクニックは使っていません。簡単なルールに従って整えただけです。ポイントを押さえれば、誰でも簡単に真似をすることができますよ。

このように、サイトを『おしゃれ・心地よく』整えるためにはデザインや配色のルールを学ぶ必要があります。

アンディ
まずは配色のコツを掴んで、ブログの印象をプロデュースしましょう!
デザインとか勉強したことないので、自分にもできるか不安なんですが…
アンディ
大丈夫!初心者の方でも簡単に実践できる “失敗しないための配色ルール” をお伝えします!

失敗しない “色の決め方”

失敗しない「色の決め方」
デザインには、色んな「理論」や「法則」があります。
しかし、デザイナー以外の人がそれらをイチから勉強して実践していくのはとても大変です。

ということで、簡潔に・分かりやすく “失敗しない” 配色を行う方法をご紹介します。

それは、「トーン」と「バランス」を考えて色を組み合わせること です。

失敗しない配色ルール
「トーン」と「バランス」を考えて色を組み合わせる
なるほど!って、それだけじゃ分かりません…。
アンディ
本題はここからです。どうすれば、その「トーン」「バランス」を考えられるのかをご紹介します!

プロも実践している配色のルール

配色ルール 3つの要素
まず、色には「3つの要素」があります。
それは「色相」「彩度」「明度」です。

色の3大要素
  1. 色相 … 「赤」「青」「黄」など、名前で区別できる色の種類です。
  2. 彩度色の鮮やかさの度合いです。彩度が高いと鮮やかで、低いとくすんだ色になります。
  3. 明度色の明るさの度合いです。明度が高いと白に近く、暗いと黒に近くなります。

色の3大要素
これら3つの要素を組み合わせながら、「トーン」と「バランス」を調整していきます。

アンディ
まずは「トーン」について見ていきましょう!

色のトーンとは?

トーンは、「彩度」「明度」の組み合わせで表現することができます。

色のトーンを合わせれば、簡単に整った配色を行うことができます。

トーンのイメージ
初心者が行ってしまうよくある失敗は、「トーンが合っていない」配色です。

トーンを合っていないと…
元気でポップなイメージにするには「彩度」や「明度」の高いトーンで合わせ、柔らかい・上品なイメージにするには「彩度」や「明度」の低いトーンで合わせるとうまくいきます。

トーンの組み合わせを考えることで、配色に統一感が出るんですね。

色のバランスとは?

色のバランスとは、「どの色をどれだけ使うか」という比率です。

色のバランスには黄金比があり、ベースカラー・メインカラー・アクセントカラーを「70:25:5%」に設定するととてもきれいにまとまります。

色の黄金比

ベースカラーとは

ベースカラーとは、背景色のことです。

ベースカラー
全体的なイメージ合わせて選びます。
全体的に明るいイメージなら、白や白に近い明るい色を、暗いイメージなら、黒や黒に近い暗い色を選びます。

ベースカラーの選び方

アンディ
基本的には「明るいイメージ」のサイトが多いですね。

メインカラーとは

メインカラーは、その名の通りサイトのメインになる色です。

1色、もしくは近い色味でプラス2~3色を選んでまとめます。
その2~3色は適当ではなく、トーン(主に明度)を合わせることでバランスがよくなります。

メインカラーの選び方

アンディ
メインカラーに遠い色同士(オレンジと青など)を選ぶと、後から決めるアクセントカラーが目立たなくなり、バランスが悪くなってしまいます。

また、全体的に彩度の高い色(原色に近い色)は扱いが難しく、彩度の高い色を複数選ぶと目に痛い “素人っぽさのある” 配色になってしまいます。

彩度の高い配色
同じ色味でも、彩度を抑えるだけで全体的に垢抜けたおしゃれなイメージになります。

彩度を抑えた配色

アクセントカラーとは

アクセントカラーとは、デザインのアクセントとして目立たせたい箇所などに使う色です。

メインカラーと比べて「反対に近い色」「トーンに差がある色」を選ぶことで、バランスよく目立たせることができます。

アクセントカラー

「トーン」と「バランス」、両方を考えて使う色を決めるといいんですね。
アンディ
配色のルールについて学んだところで、具体的にサイトの配色を決めていきましょう!

サイトの配色を決める3ステップ

サイトの配色を決める3ステップ
サイトの配色を決めるためのステップは3つです。

サイトの配色を決める3ステップ
  1. 訪問者に与えたい印象を考える
  2. 印象に合わせてトーンを決める
  3. ベースカラーを決め、メイン・アクセントカラーを決める

ひとつずつ見ていきます。

1:訪問者に与えたい印象を考える

扱うブログの内容によって「訪問者にどのようなイメージを持ってもらいたいか」が違います。

私は女性向けの美容ブログなので、「明るい」「かわいい」イメージにしたいです。
僕は最新のデジモノを紹介するブログなので、「男性的」「機械的」なイメージが理想かな…。
アンディ
訪問者に「どんなイメージを持ってもらいたいか」で、大まかな色味を決めると効果的ですよ✨

それぞれ、色が与える代表的な印象は次の通りです。

「赤」が与えるイメージ

「赤」が与えるイメージ
  • 元気、エネルギッシュ(鮮やかな赤)
  • 活動的、注目を集める色
  • 大人っぽさ、高級感(落ち着いた赤)
「赤」をメインに使ったサイト例

日本オリンピック委員会
日本オリンピック委員会

発色のいい赤が、元気でエネルギッシュな印象を与えています。

お花

楽天市場
楽天市場

赤は購買を促す色でもあるため、価格訴求やキャンペーンなどをアピールする場面でも効果的です。

アンディ
スーパーのチラシなどでも価格が赤なのは、赤が販売を促進する色でもあるからですね。

「オレンジ」が与えるイメージ

「オレンジ」が与えるイメージ
  • ポジティブ、健康的
  • 食欲をそそる色
  • ポップ、大衆的
「オレンジ」をメインに使ったサイト例

ファーストキッチン
ファーストキッチン

健康的で、食欲をそそるカラーリングにまとまっています。

お花

ヒのヨコ.com
ヒのヨコ.com

子育て支援に関するサイト。
元気で前向きに、ママを応援する雰囲気が色とマッチしています。

アンディ
食品関係だけではなく、明るくポップなイメージカラーとして用いられることが多いです。少しくすんだオレンジは、健康的ながらも “やわらかく温かい” イメージになります。

「黄色」が与えるイメージ

「黄色」が与えるイメージ
  • 明るい、にぎやか
  • 子どもっぽい、かわいい、陽気
  • 希望、幸せ
「黄色」をメインに使ったサイト例

子どものキライを好きに!
子どものキライを好きに!

子どもを対象にしていることがパッと見で分かりやすく、トーンもポップでかわいらしくまとまっています。

お花

ビアードパパの作りたて工房
ビアードパパの作りたて工房

『明るい店舗』『おいしい、至福のひととき』といったイメージが色味からよく伝わります。

アンディ
彩度の高い(鮮やかな)黄色は、使うと明るく楽しい雰囲気になりますね。宅配や、ショッピングなど「サービスを提供するサイト」などでもよく使われます。彩度を落とす(暗めにする)と、秋っぽいイメージにもなりますよ。

「緑」が与えるイメージ

「緑」が与えるイメージ
  • ナチュラル、リラックス
  • 安心、安全、平和
  • 自然、若さ
「緑」をメインに使ったサイト例

人間環境大学
人間環境大学

大学などの教育施設や、建設業を始めとした様々な企業で緑が採用されています。

お花

爽健美茶
爽健美茶

緑は、「自然」や「リラックス」を連想させる商品・サービスのページでもよく使われます。

アンディ
その他、ニュースサイトや銀行、若者向けのページなど、様々なジャンルでイメージカラーとして使われています。緑は汎用性が高いですね。

「青」が与えるイメージ

「青」が与えるイメージ
  • 清潔、信頼、誠実
  • 冷静、知性
  • ビジネス、礼儀正しい(暗めの青)
「青」をメインに使ったサイト例

TSUTAYA
TSUTAYA

青は、ジャンルを問わず様々な企業のブランドカラーとしても採用されています。

お花

ミルク王国ウチナダ
ミルク王国ウチナダ

水色は「涼しい」「清涼感」「瑞々しい」などのイメージとしても使われます。

アンディ
青は、水色や紺色など多くのサイトで使われているカラーです。日本人は青が好きなので、幅広い層に受け入れられます。

「紫」が与えるイメージ

「紫」が与えるイメージ
  • 高級、上品、優雅
  • 美、芸術的
  • 神秘的、スピリチュアル
「紫」をメインに使ったサイト例

京都麻織物
京都麻織物

麻織物のオンラインショップ。淡い紫色で、高級感と女性好みの美しさが表現されています。

お花

Peach航空 求人サイト
Peach航空

紫は、メッセージ性のあるサイトでもよく用いられます。

「白」が与えるイメージ

「白」が与えるイメージ
  • 純粋、清潔、公平
  • シンプル、無機質
「白」をメインに使ったサイト例

ちふれ
ちふれ

白は清潔感があるので、医療や化粧品、ブライダル関連のサイトなどでも多く使われます。

お花

ニコニコニュース
ニコニコニュース

白ベースのサイトはコンテンツやサムネに注目・集中してもらえるので、ニュースやショッピングサイトなどでも多く採用されています。

アンディ
あくまで白はベースとして、他の色と組み合わせて使われることが多いですね。白が多すぎると、シンプルすぎて手抜きに見えることがあるので注意です。

「グレー」が与えるイメージ

「グレー」が与えるイメージ
  • 上品、スタイリッシュ
  • 優しい、控えめ
  • 知的、先進的
「グレー」をメインに使ったサイト例

B.E.A.T
B.E.A.T

トレーニングスペースのサイト。グレーベースにすることで、上品でスタイリッシュにまとめつつ、写真の魅力をより引き立てています。

お花

有限会社マルヒロ
有限会社マルヒロ

ベースをグレーと白でまとめているため、写真もアクセントカラーも強調されておりとてもおしゃれにまとまっています。

アンディ
白と並び、Webデザインのベースとしてはとてもよく使われます。洗練された、おしゃれなサイトにピッタリです。

「黒」が与えるイメージ

「黒」が与えるイメージ
  • 威厳、重厚、気高い
  • プロフェッショナル、伝統的
  • 都会的、男性的
「黒」をメインに使ったサイト例

ANTEPRIMA
ANTEPRIMA

黒は他の色のイメージに流されず、高級・安定・優秀といった印象を与えます。「権威」や「伝統」も感じさせるため、ハイブランドなサイトで多く使われます。

お花

ONE DIRECTION
ONE DIRECTION

硬質で男性的なイメージを持つ黒は、バンドなど音楽系のサイトでもよく使われます。

アンディ
黒は、他の明るい色をより引き立てる効果があります。写真やアクセントカラーを効果的に使うと良さそうですね!

お花

自分のブログで採用したい色は決まりましたか?
続いて、サイトのトーンを決めていきましょう。

2:印象に合わせてトーンを決める

イメージカラーが決まったら、全体的にどんなトーンでまとめるかを考えます。

明るく元気、ポジティブな印象にしたい場合は明るめのトーンを、
おしゃれで落ち着いた印象にしたい場合はやや暗めのトーンを、
力強さや、高級感のある印象にしたい場合は暗めのトーンを選ぶとイメージに近づきます。

サイトのトーン

アンディ
彩度の高すぎる色(原色)は扱いが難しいので、ポップにしたい場合もやや落ち着いたトーンにすると初心者っぽさがなくなります!

3:ベースカラーを決め、メイン・アクセントカラーを決める

トーンが決まったら、いよいよ具体的にブログに使う色を決めます。

イチから色を考えるのは難しいので、ここでは無料のツールを使ったやり方をご紹介します。

「HUE/360」の使い方

HUE/360というサイトのツール(無料)で具体的な色を決めていきます。

「HUE/360」の使い方

アンディ
順番に色を選んでいくだけで、最適な組み合わせが表示される便利ツールです✨

まずはツールにアクセスし、設定を行うための準備をします。

色を決めるための準備

「① Hue Step」の数値を「30」に、「② Chroma Step」の数値を「10」に設定します。
すると、表示される色が細かくなります。

「HUE/360」の使い方
「HUE/360」の使い方

アンディ
準備ができたら、土台となるベースカラーから決めていきましょう!
ベースカラーを決める

ベースカラーは、サイトの7割を占める色です。
色設定に慣れない内は「白」か薄いグレーなど「白に近い彩度が低めな色」がオススメです。

ベースカラーが鮮やかだと、訪問者の目が疲れちゃいそうですね。
アンディ
迷ったら、「白」「めっちゃ薄いグレー」がいいですよ。

ベースを白にする場合は、ツールの設定はそのままで大丈夫です。

白以外の背景色にする場合は、シフトキーを押しながら希望に近い色をクリックします。
すると、画面の背景色が変わります。

シフトキーを押しながら希望に近い色をクリック

アンディ
ブログに設定する時に明るさなど微調整ができるので、メインカラーを選びやすくするためにも、希望に近い色を選んでおきましょう。
メインカラーを決める

次に、ブログのメインカラーを決めていきます。

「③ Brightness」で好みの明るさ(トーン)を選択します。

Brightness

トーンを決めたら、「④」のパレット部分で使いたいイメージの色をクリック。

パレット部分

すると、自動で色の組み合わせが相性よく絞られます。

相性よく絞られる

色を選び直したい場合は、画面の左下にじ表示される『選んだ色の情報』にあるバツマークを押すと選択し直すことができます。

バツマーク

アンディ
色選びを最初からやり直す場合も、色選択にあるバツマークを押すと元に戻りますよ。

メインカラーを2色や3色にしたい場合は、「同じ列にある色」「隣接する色」を選びます。
この時、メインカラーよりも明度が高い色を選ぶとまとまりやすくなります。

メインカラー候補

以上で、メインカラーの選択は終了です。

アンディ
素敵なメインカラーは決まりましたか?続いてアクセントカラーを決めていきます。
アクセントカラーを決める

アクセントカラーは、メインカラーの「反対側に近い」色を選びます。
また、「明度が違う」ものを選ぶのも、バランスをよくするポイントです。

アクセントカラーを決める

アンディ
色々組み合わせて、1~2色選んでみましょう!
決定した色の、色コードを確認する

ブログに色の設定を行うために、それぞれの「色コード」を確認しておきます。

画面左下の「⑤ Print User Color」をクリック。

Print User Color

半角シャープから始まる6ケタの色コード(#d36161 など)が表示されるので、メモを取るかスクリーンショットで保存しておきましょう。

6ケタの色コード

これで、ベース・メイン・アクセントカラーの選択と色コードの確認ができました。

アンディ
自分のブログに合った色選びができましたか?この選び方なら、誰でも簡単に「トーン」と「バランス」の合った色設定が行えます✨
選んだ色が「なんだかしっくりこない」という場合や、ひとまずサンプルから選んでおきたい、という場合はこちらの記事も参考にしてみて下さい。

個人ブログ向け|白背景で使えるおしゃれな配色見本73パターン

2019年1月31日

ブログの色を設定をする方法

ブログカスタマイズ 色の設定
ブログに設定したい色が決まったら、早速変更してみましょう。

ブログのカスタマイズ方法はテーマによって異なります。
ここからは、私のオススメテーマでもある「ストーク」の設定方法を例にしてご紹介します。

ブログのカスタマイズ画面を開く

まずは、メニューの【 外観 】>「カスタマイズ」を選択します。

ブログのカスタマイズ画面を開

カスタマイズ用のメニューが表示されるので、「サイトカラー設定」をクリック。

サイトカラー設定

アンディ
ここから、決めた色コードを順番に入力していきます。色のバランスを見ながら、配置や明るさなど微調整してみて下さいね。

ベースカラーを設定する

まずはベースカラーから設定していきます。
ベースカラーの色コードを、「①背景色」に入力。

ベースカラーを設定する

デフォルトのまま(薄いグレー)、白に近い彩度の低い(+明度が高い)色、または白に設定するとバランスが取れます。

アンディ
ぶっちゃけ白が一番無難&見やすく、採用しているサイトが多いです…!

メインカラーを設定する

メインカラーのおすすめ設定パターンは2つです。

メインカラー設定おすすめパターン
  • ヘッダー(ブログの上部)の背景に使う
  • ヘッダーのロゴに使う

メインカラーのおすすめ設定パターン

メインカラーをヘッダーの背景に使う場合

メインカラーをヘッダーの背景に使う場合は、「②ヘッダー背景(メインカラー)」にメインカラーを設定します。

メインカラーをヘッダーの背景に使う場合

メインカラーをロゴやヘッダー内のテキスト使う場合

このブログのようにロゴにメインカラーを使いたい場合は、「②ヘッダー背景(メインカラー)」は白や薄めのなど、メインカラーとバランスがいい色を選びます。

このブログの例
白や薄めの色を設定する

アンディ
メインカラー自体が薄い色の場合は、ロゴに使うのではなくヘッダーの背景にすることをオススメします。全体的にぼんやりしたイメージになってしまったり、コントラストをつけるために濃い色を背景にすると、メインカラーがよく分からなるからです。

メインカラーに合わせて色を設定していく

次に、メインカラーに合わせて「③ヘッダーテキスト」「④ヘッダーロゴ」「⑤ヘッダーリンク」「⑥ヘッダーリンク(マウスオン時)」「⑦記事ページ見出し(H2)背景」を設定していきます。

メインカラーに合わせて色を設定していく

ヘッダーテキスト・ヘッダーリンク

メインカラーをヘッダーの背景色にした場合、メインカラーが濃い色の場合は「③ヘッダーテキスト」「⑤ヘッダーリンク」薄めの色に、薄い色の場合は濃いめの色にするとまとまります。

コントラストが大切

アンディ
背景が濃い場合は「白」がシンプルで見やすい場合が多いですよ。背景が薄い場合は、同じトーンの濃い色(彩度・明度低め)だときれいにまとまります。

この時、配色のルールを無視すると「ダサい・見にくい」色になってしまうので、メインカラーの彩度や明度のみが違う色を使うか、サブカラーに決めた色を使ってみるなど、バランスがおかしくならないかを確認しながら設定しましょう。

バランスがおかしい例

メインカラーをロゴ色にする場合は、「③ヘッダーテキスト」「⑤ヘッダーリンク」メインカラーと同じかサブカラーにするときれいにまとまります。

アンディ
その他、背景色が薄い場合は文字色が「濃いグレー」や「彩度・明度の低い色」でも、読みやすくまとまりやすいですよ👍

ヘッダーロゴ

「④ヘッダーロゴ」の配色パターンは3つです。

ヘッダーロゴの配色パターン
  1. メインカラーを使う
  2. メインカラーとコントラストが取れた色を使う
  3. 画像を使う
1:メインカラーを使う場合

メインカラーを使う場合は、そのままメインカラーを設定します。

2:メインカラーとコントラストが取れた色を使う場合

メインカラーをヘッダーの背景として使っている場合は、「③ヘッダーテキスト」「⑤ヘッダーリンク」と同様にバランスを確認しながら設定しましょう。

アンディ
背景とのコントラストを大切に!

「③ヘッダーテキスト」「⑤ヘッダーリンク」を『白』や『メインカラーの彩度・違いの色』を選んだ場合は、アクセントカラーを使うのがオススメです。

アクセントカラーでロゴを目立たせる

3:画像を使う場合

ロゴに画像を使いたい場合は、そのままの設定で大丈夫です。
(画像を使ったロゴについては、次回のレッスンで解説します)

ヘッダーリンク(マウスオン時)

「⑥ヘッダーリンク(マウスオン時)」では、パソコンでリンク部分にマウスを乗せた時に変わる色を設定します。

メインカラーとテキスト(リンク)カラーの中間色にするときれいにまとまりやすいです。

マウスオン色は中間色がオススメ
または、アクセントカラーを使うのもオススメです。

アクセントカラーもオススメ

記事ページ見出し(H2)背景

「⑦記事ページ見出し(H2)背景」は、メインカラーかサブカラーをどちらかお好みで設定します。

設定した色に合わせて、その下の「⑧記事ページ見出し(H2)文字色」を決めましょう。

記事ページ見出し(H2)文字色

アンディ
この文字色も、選んだ背景色と文字色のコントラストを意識するのがポイントです。背景が濃い色であれば明るめ、薄い色であれば暗めのものを選ぶのと見やすくなります。

バランスを見て整える

配色が終わったら、プレビュー画面を見ながら微調整を行います。

設定できたら、メインカラーに合わせてお好みで「ラベル背景」「ラベルテキスト」も変更してみましょう。

ラベル背景

この時、「ラベル背景」はサブカラーかアクセントカラーを使うのがオススメです。

その他、テキストの色などはそのままにしておくのがオススメです。

テキストの色

あまり変更しすぎる(色を入れすぎる)と、全体的なバランスが崩れて読みにくくなってしまいます。

アンディ
文字は、真っ黒より少しグレーがかっている方が読みやすい上におしゃれですよ。

お花

以上で、ブログの色設定は終了です!

アンディ
なかなか長かったですね!お疲れ様でした!

レッスン11日目 まとめ

『30日間でおしゃれブログ完成レッスン』11日目は、サイトの色設定を行いました。

アンディ
自分のブログに合った色設定はできましたか?配色のルールを考えて設定を行えば、それだけでブログ全体が垢抜けた印象になります✨

明日はロゴの作成や設定について見ていきます。

アンディ
ロゴに画像を使わない(デフォルトのままがいい)場合は、「ストーク」が最適な表示をしてくれるので飛ばしてOKです!どんどん進めて行きましょう!