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

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

サイトの色なんて、各自のセンスで好きなのを使えばいいんじゃない…？

プロのデザイナーでも、サイトの配色はとても慎重になるものです。適当な配色は、『なぜかダサくなってしまう』『理由は分からないけど見にくい』原因になりますよ！

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

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

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

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

2019年1月31日

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

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

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

理由はよく分からないけど、なぜかそうなるんですよ。

理由はズバリ、デザインや配色のルールを無視して作ってしまうからです。

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

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

パッと見で違いますね！見やすくなった！

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

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

何だか、最初と全く違うサイトのようになりましたね。

難しいテクニックは使っていません。簡単なルールに従って整えただけです。ポイントを押さえれば、誰でも簡単に真似をすることができますよ。

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

まずは配色のコツを掴んで、ブログの印象をプロデュースしましょう！

デザインとか勉強したことないので、自分にもできるか不安なんですが…

大丈夫！初心者の方でも簡単に実践できる “失敗しないための配色ルール” をお伝えします！

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

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

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

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

なるほど！って、それだけじゃ分かりません…。

本題はここからです。どうすれば、その「トーン」と「バランス」を考えられるのかをご紹介します！

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

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

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

まずは「トーン」について見ていきましょう！

色のトーンとは？

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

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

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

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

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

色のバランスとは？

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

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

ベースカラーとは

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

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

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

メインカラーとは

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

１色、もしくは近い色味でプラス２～３色を選んでまとめます。
その２～３色は適当ではなく、トーン（主に明度）を合わせることでバランスがよくなります。

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

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

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

アクセントカラーとは

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

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

「トーン」と「バランス」、両方を考えて使う色を決めるといいんですね。

配色のルールについて学んだところで、具体的にサイトの配色を決めていきましょう！

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

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

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

１：訪問者に与えたい印象を考える

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

私は女性向けの美容ブログなので、「明るい」「かわいい」イメージにしたいです。

僕は最新のデジモノを紹介するブログなので、「男性的」「機械的」なイメージが理想かな…。

訪問者に「どんなイメージを持ってもらいたいか」で、大まかな色味を決めると効果的ですよ✨

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

「赤」が与えるイメージ

「赤」をメインに使ったサイト例

日本オリンピック委員会

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

楽天市場

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

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

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

「オレンジ」をメインに使ったサイト例

ファーストキッチン

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

ヒのヨコ.com

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

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

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

「黄色」をメインに使ったサイト例

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

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

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

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

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

「緑」が与えるイメージ

「緑」をメインに使ったサイト例

人間環境大学

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

爽健美茶

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

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

「青」が与えるイメージ

「青」をメインに使ったサイト例

TSUTAYA

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

ミルク王国ウチナダ

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

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

「紫」が与えるイメージ

「白」が与えるイメージ

「白」をメインに使ったサイト例

ちふれ

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

ニコニコニュース

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

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

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

「グレー」をメインに使ったサイト例

B.E.A.T

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

有限会社マルヒロ

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

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

「黒」が与えるイメージ

「黒」をメインに使ったサイト例

ANTEPRIMA

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

ONE DIRECTION

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

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

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

２：印象に合わせてトーンを決める

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

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

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

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

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

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

「HUE/360」の使い方

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

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

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

色を決めるための準備

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

準備ができたら、土台となるベースカラーから決めていきましょう！

ベースカラーを決める

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

ベースカラーが鮮やかだと、訪問者の目が疲れちゃいそうですね。

迷ったら、「白」か「めっちゃ薄いグレー」がいいですよ。

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

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

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

メインカラーを決める

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

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

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

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

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

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

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

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

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

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

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

色々組み合わせて、１～２色選んでみましょう！

決定した色の、色コードを確認する

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

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

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

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

自分のブログに合った色選びができましたか？この選び方なら、誰でも簡単に「トーン」と「バランス」の合った色設定が行えます✨

選んだ色が「なんだかしっくりこない」という場合や、ひとまずサンプルから選んでおきたい、という場合はこちらの記事も参考にしてみて下さい。

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

2019年1月31日

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

ブログに設定したい色が決まったら、早速変更してみましょう。

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

ストークやテーマついてはこちら

WordPress初心者でもおしゃれで見やすいブログが作れるテーマ

2019年1月25日

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

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

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

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

ベースカラーを設定する

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

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

ぶっちゃけ白が一番無難＆見やすく、採用しているサイトが多いです…！

メインカラーを設定する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーロゴ

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

１：メインカラーを使う場合

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

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

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

背景とのコントラストを大切に！

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

３：画像を使う場合

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

ヘッダーリンク（マウスオン時）

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

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

または、アクセントカラーを使うのもオススメです。

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

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

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

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

バランスを見て整える

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

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

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

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

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

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

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

なかなか長かったですね！お疲れ様でした！

レッスン11日目　まとめ

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

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

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

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