『30日間でおしゃれブログ完成レッスン』11日目は、サイトの「色設定」を行います。
この記事では、“デザイナーではない人でもおしゃれで心地よい配色をするコツ” について解説します。
ご紹介するコツを実践するだけで、垢抜けた配色、おしゃれな配色でブログをデザインすることが可能です。
- サイトの配色法則について学ぶ
- 無料ツールを使って配色を決める
- ログの色設定を行う
サイトカラーの重要性、決め方も合わせて見ていきましょう！
もくじ
適当な配色は、ダサくて見にくいサイトを生む
突然ですが、こんな色合いのサイトを見たことはありませんか？
または、色選びでこんな悩みを感じたことはありませんか？
- カラフルにしたいだけなのに、奇抜で目が痛い感じになってしまう
- 明らかに “素人が作った感” がすごい
- 誰がどう見てもダサい、胡散臭く見えてしまう
デザインや配色のルールが分かれば、ブログが一気に変わる！
それでは、先ほどのサイト例を “デザインはそのままで” 配色のルールを考えて再度設定してみます。
さらに、デザインも少し整えてみます。
このように、サイトを『おしゃれ・心地よく』整えるためにはデザインや配色のルールを学ぶ必要があります。
失敗しない “色の決め方”
デザインには、色んな「理論」や「法則」があります。
しかし、デザイナー以外の人がそれらをイチから勉強して実践していくのはとても大変です。
ということで、簡潔に・分かりやすく “失敗しない” 配色を行う方法をご紹介します。
それは、「トーン」と「バランス」を考えて色を組み合わせること です。
プロも実践している配色のルール
まず、色には「３つの要素」があります。
それは「色相」「彩度」「明度」です。
- 色相 … 「赤」「青」「黄」など、名前で区別できる色の種類です。
- 彩度 … 色の鮮やかさの度合いです。彩度が高いと鮮やかで、低いとくすんだ色になります。
- 明度 … 色の明るさの度合いです。明度が高いと白に近く、暗いと黒に近くなります。
これら３つの要素を組み合わせながら、「トーン」と「バランス」を調整していきます。
色のトーンとは？
トーンは、「彩度」と「明度」の組み合わせで表現することができます。
色のトーンを合わせれば、簡単に整った配色を行うことができます。
初心者が行ってしまうよくある失敗は、「トーンが合っていない」配色です。
元気でポップなイメージにするには「彩度」や「明度」の高いトーンで合わせ、柔らかい・上品なイメージにするには「彩度」や「明度」の低いトーンで合わせるとうまくいきます。
色のバランスとは？
色のバランスとは、「どの色をどれだけ使うか」という比率です。
色のバランスには黄金比があり、ベースカラー・メインカラー・アクセントカラーを「70：25：5％」に設定するととてもきれいにまとまります。
ベースカラーとは
ベースカラーとは、背景色のことです。
全体的なイメージ合わせて選びます。
全体的に明るいイメージなら、白や白に近い明るい色を、暗いイメージなら、黒や黒に近い暗い色を選びます。
メインカラーとは
メインカラーは、その名の通りサイトのメインになる色です。
１色、もしくは近い色味でプラス２～３色を選んでまとめます。
その２～３色は適当ではなく、トーン（主に明度）を合わせることでバランスがよくなります。
また、全体的に彩度の高い色（原色に近い色）は扱いが難しく、彩度の高い色を複数選ぶと目に痛い “素人っぽさのある” 配色になってしまいます。
同じ色味でも、彩度を抑えるだけで全体的に垢抜けたおしゃれなイメージになります。
アクセントカラーとは
アクセントカラーとは、デザインのアクセントとして目立たせたい箇所などに使う色です。
メインカラーと比べて「反対に近い色」や「トーンに差がある色」を選ぶことで、バランスよく目立たせることができます。
サイトの配色を決める３ステップ
サイトの配色を決めるためのステップは３つです。
- 訪問者に与えたい印象を考える
- 印象に合わせてトーンを決める
- ベースカラーを決め、メイン・アクセントカラーを決める
ひとつずつ見ていきます。
１：訪問者に与えたい印象を考える
扱うブログの内容によって「訪問者にどのようなイメージを持ってもらいたいか」が違います。
それぞれ、色が与える代表的な印象は次の通りです。
「赤」が与えるイメージ
- 元気、エネルギッシュ（鮮やかな赤）
- 活動的、注目を集める色
- 大人っぽさ、高級感（落ち着いた赤）
発色のいい赤が、元気でエネルギッシュな印象を与えています。
赤は購買を促す色でもあるため、価格訴求やキャンペーンなどをアピールする場面でも効果的です。
「オレンジ」が与えるイメージ
- ポジティブ、健康的
- 食欲をそそる色
- ポップ、大衆的
健康的で、食欲をそそるカラーリングにまとまっています。
子育て支援に関するサイト。
元気で前向きに、ママを応援する雰囲気が色とマッチしています。
「黄色」が与えるイメージ
- 明るい、にぎやか
- 子どもっぽい、かわいい、陽気
- 希望、幸せ
子どもを対象にしていることがパッと見で分かりやすく、トーンもポップでかわいらしくまとまっています。
『明るい店舗』『おいしい、至福のひととき』といったイメージが色味からよく伝わります。
「緑」が与えるイメージ
- ナチュラル、リラックス
- 安心、安全、平和
- 自然、若さ
大学などの教育施設や、建設業を始めとした様々な企業で緑が採用されています。
緑は、「自然」や「リラックス」を連想させる商品・サービスのページでもよく使われます。
「青」が与えるイメージ
- 清潔、信頼、誠実
- 冷静、知性
- ビジネス、礼儀正しい（暗めの青）
青は、ジャンルを問わず様々な企業のブランドカラーとしても採用されています。
水色は「涼しい」「清涼感」「瑞々しい」などのイメージとしても使われます。
「紫」が与えるイメージ
- 高級、上品、優雅
- 美、芸術的
- 神秘的、スピリチュアル
「白」が与えるイメージ
- 純粋、清潔、公平
- シンプル、無機質
白は清潔感があるので、医療や化粧品、ブライダル関連のサイトなどでも多く使われます。
白ベースのサイトはコンテンツやサムネに注目・集中してもらえるので、ニュースやショッピングサイトなどでも多く採用されています。
「グレー」が与えるイメージ
- 上品、スタイリッシュ
- 優しい、控えめ
- 知的、先進的
トレーニングスペースのサイト。グレーベースにすることで、上品でスタイリッシュにまとめつつ、写真の魅力をより引き立てています。
ベースをグレーと白でまとめているため、写真もアクセントカラーも強調されておりとてもおしゃれにまとまっています。
「黒」が与えるイメージ
- 威厳、重厚、気高い
- プロフェッショナル、伝統的
- 都会的、男性的
黒は他の色のイメージに流されず、高級・安定・優秀といった印象を与えます。「権威」や「伝統」も感じさせるため、ハイブランドなサイトで多く使われます。
硬質で男性的なイメージを持つ黒は、バンドなど音楽系のサイトでもよく使われます。
自分のブログで採用したい色は決まりましたか？
続いて、サイトのトーンを決めていきましょう。
２：印象に合わせてトーンを決める
イメージカラーが決まったら、全体的にどんなトーンでまとめるかを考えます。
明るく元気、ポジティブな印象にしたい場合は明るめのトーンを、
おしゃれで落ち着いた印象にしたい場合はやや暗めのトーンを、
力強さや、高級感のある印象にしたい場合は暗めのトーンを選ぶとイメージに近づきます。
３：ベースカラーを決め、メイン・アクセントカラーを決める
トーンが決まったら、いよいよ具体的にブログに使う色を決めます。
イチから色を考えるのは難しいので、ここでは無料のツールを使ったやり方をご紹介します。
「HUE/360」の使い方
HUE/360というサイトのツール（無料）で具体的な色を決めていきます。
まずはツールにアクセスし、設定を行うための準備をします。
色を決めるための準備
「① Hue Step」の数値を「30」に、「② Chroma Step」の数値を「10」に設定します。
すると、表示される色が細かくなります。
ベースカラーを決める
ベースカラーは、サイトの７割を占める色です。
色設定に慣れない内は「白」か薄いグレーなど「白に近い彩度が低めな色」がオススメです。
ベースを白にする場合は、ツールの設定はそのままで大丈夫です。
白以外の背景色にする場合は、シフトキーを押しながら希望に近い色をクリックします。
すると、画面の背景色が変わります。
メインカラーを決める
次に、ブログのメインカラーを決めていきます。
「③ Brightness」で好みの明るさ（トーン）を選択します。
トーンを決めたら、「④」のパレット部分で使いたいイメージの色をクリック。
すると、自動で色の組み合わせが相性よく絞られます。
色を選び直したい場合は、画面の左下にじ表示される『選んだ色の情報』にあるバツマークを押すと選択し直すことができます。
メインカラーを２色や３色にしたい場合は、「同じ列にある色」か「隣接する色」を選びます。
この時、メインカラーよりも明度が高い色を選ぶとまとまりやすくなります。
以上で、メインカラーの選択は終了です。
アクセントカラーを決める
アクセントカラーは、メインカラーの「反対側に近い」色を選びます。
また、「明度が違う」ものを選ぶのも、バランスをよくするポイントです。
決定した色の、色コードを確認する
ブログに色の設定を行うために、それぞれの「色コード」を確認しておきます。
画面左下の「⑤ Print User Color」をクリック。
半角シャープから始まる６ケタの色コード（#d36161 など）が表示されるので、メモを取るかスクリーンショットで保存しておきましょう。
これで、ベース・メイン・アクセントカラーの選択と色コードの確認ができました。
ブログの色を設定をする方法
ブログに設定したい色が決まったら、早速変更してみましょう。
ブログのカスタマイズ方法はテーマによって異なります。
ここからは、私のオススメテーマでもある「ストーク」
の設定方法を例にしてご紹介します。
ブログのカスタマイズ画面を開く
まずは、メニューの【 外観 】＞「カスタマイズ」を選択します。
カスタマイズ用のメニューが表示されるので、「サイトカラー設定」をクリック。
ベースカラーを設定する
まずはベースカラーから設定していきます。
ベースカラーの色コードを、「①背景色」に入力。
デフォルトのまま（薄いグレー）、白に近い彩度の低い（＋明度が高い）色、または白に設定するとバランスが取れます。
メインカラーを設定する
メインカラーのおすすめ設定パターンは２つです。
- ヘッダー（ブログの上部）の背景に使う
- ヘッダーのロゴに使う
メインカラーをヘッダーの背景に使う場合
メインカラーをヘッダーの背景に使う場合は、「②ヘッダー背景（メインカラー）」にメインカラーを設定します。
メインカラーをロゴやヘッダー内のテキスト使う場合
このブログのようにロゴにメインカラーを使いたい場合は、「②ヘッダー背景（メインカラー）」は白や薄めのなど、メインカラーとバランスがいい色を選びます。
メインカラーに合わせて色を設定していく
次に、メインカラーに合わせて「③ヘッダーテキスト」「④ヘッダーロゴ」「⑤ヘッダーリンク」「⑥ヘッダーリンク（マウスオン時）」「⑦記事ページ見出し(H2)背景」を設定していきます。
ヘッダーテキスト・ヘッダーリンク
メインカラーをヘッダーの背景色にした場合、メインカラーが濃い色の場合は「③ヘッダーテキスト」「⑤ヘッダーリンク」薄めの色に、薄い色の場合は濃いめの色にするとまとまります。
この時、配色のルールを無視すると「ダサい・見にくい」色になってしまうので、メインカラーの彩度や明度のみが違う色を使うか、サブカラーに決めた色を使ってみるなど、バランスがおかしくならないかを確認しながら設定しましょう。
メインカラーをロゴ色にする場合は、「③ヘッダーテキスト」「⑤ヘッダーリンク」はメインカラーと同じかサブカラーにするときれいにまとまります。
ヘッダーロゴ
「④ヘッダーロゴ」の配色パターンは３つです。
- メインカラーを使う
- メインカラーとコントラストが取れた色を使う
- 画像を使う
１：メインカラーを使う場合
メインカラーを使う場合は、そのままメインカラーを設定します。
２：メインカラーとコントラストが取れた色を使う場合
メインカラーをヘッダーの背景として使っている場合は、「③ヘッダーテキスト」「⑤ヘッダーリンク」と同様にバランスを確認しながら設定しましょう。
「③ヘッダーテキスト」「⑤ヘッダーリンク」を『白』や『メインカラーの彩度・違いの色』を選んだ場合は、アクセントカラーを使うのがオススメです。
３：画像を使う場合
ロゴに画像を使いたい場合は、そのままの設定で大丈夫です。
（画像を使ったロゴについては、次回のレッスンで解説します）
ヘッダーリンク（マウスオン時）
「⑥ヘッダーリンク（マウスオン時）」では、パソコンでリンク部分にマウスを乗せた時に変わる色を設定します。
メインカラーとテキスト（リンク）カラーの中間色にするときれいにまとまりやすいです。
または、アクセントカラーを使うのもオススメです。
記事ページ見出し(H2)背景
「⑦記事ページ見出し(H2)背景」は、メインカラーかサブカラーをどちらかお好みで設定します。
設定した色に合わせて、その下の「⑧記事ページ見出し(H2)文字色」を決めましょう。
バランスを見て整える
配色が終わったら、プレビュー画面を見ながら微調整を行います。
設定できたら、メインカラーに合わせてお好みで「ラベル背景」「ラベルテキスト」も変更してみましょう。
この時、「ラベル背景」はサブカラーかアクセントカラーを使うのがオススメです。
その他、テキストの色などはそのままにしておくのがオススメです。
あまり変更しすぎる（色を入れすぎる）と、全体的なバランスが崩れて読みにくくなってしまいます。
以上で、ブログの色設定は終了です！
レッスン11日目 まとめ
『30日間でおしゃれブログ完成レッスン』11日目は、サイトの色設定を行いました。
明日はロゴの作成や設定について見ていきます。
