ブログ

センス不要!ブログカラーの選びかた

更新日:

ブログを書いていると、こんなことを言われます。あなたも聞いたことがありませんか?

  • サイトカラーが決まらない
  • 好きな色をなんとなく設定しているけど、なんとなく違和感がある
  • そもそもセンスがないことに悩んでいる

確かに配色って難しいですよね。

それこそ、ウェブの配色だけで専門書籍あるくらい。
わたしはぶっちゃけ、デザインの基本とかも知らないし。感覚でやってる部分はかなりあります。

自分のブログのデザインとか写真を加工する程度やったら、センスとか要らない!
なんなら、「センス」の定義すらわかってませんわ。オシャレっぽいってことかな?

配色を決めるために必要なこと2つ

  1. あなたのブログを読むのはどんな人でどんなイメージを持ってもらいたい?
  2. ウェブの基本カラー

知っておくのはこの2つだけなんです!

ブログカラーとイメージ

色にはそれぞれ「イメージ」があります。

あなたのブログは誰に向けて書いていますか?
どんなイメージを持って欲しいですか?

職種やブログの内容から考えるとわかりやすい

病院関係は青とか水色+白の配色が多いですね。
ヒーリングとかセラピーだと、緑とか薄紫+白。
食品関係ならオレンジ、赤+白かな。

カラーコードとか難しいことは置いといて、「だいたいこんな感じ」を考えてみましょう( ´ ▽ ` )
雑誌とかも参考にするといいかもしれません。

ウェブの基本カラー

今は白ベースのブログやサイトが多いですね。
背景色は白とか薄いグレー、薄いベージュあたりの色が無難ですね。

文字は黒(#000000)か濃いグレー(#333333とか#666666あたり)がいいかな。
ここはお好みで。
文字色が薄いと、柔らかい印象になります。がモニターなので薄すぎると目が疲れます。

リンクは青色がいいよ!クリック率が違うし、読者さんを迷わせないという意味で。

今はリンクの色が青以外のブログも増えて来ていますが、ウェブの基本は青色下線はリンクです。
※これはどこにもリンクしてないけどね!

カナモさんもこげんいいよんしゃーよ!!(カナモさんもこんな風に言ってるよ!)

配色が決まったら、カラーコードを選ぶ

いよいよ「使う色」を決めましょう。
いろんなツールがあるんだけど、個人的にオススメなサイトをご紹介。

HUE/360

http://hue360.herokuapp.com/

メインカラーを決めると、自動で相性のいいカラーを表示してくれます。

  • 「Brightness」で明度(明るさ)を選ぶ
  • メインで使いたいカラーをクリック
  • サブで使いたいカラーをクリック
  • 「Print User Color」をクリックするとカラーコードが表示される

メインカラーを選んだら、それに合わない色は見えなくなるのがすごく便利なんです。

選んだ色は下のバーに追加されていきます。

バーをクリックするとカラーコードが出てきますよ〜!

このカラーコードをサイトのどこに使うか?を決めましょう。
簡単にカラー設定ができるテーマもたくさんありますね( ´∀`)

3つのカラーとその比率

先に、使うテーマを決めちゃおうね!

  1. ベースカラー : 70%
  2. メインカラー : 25%
  3. アクセントカラー : 5%

ベースカラー

背景色に使うことが多いです。

このブログでは白です。
カラーコードは#ffffff

メインカラー

ブログの印象を決定づける色になります。
一番初めに選んでおくのはこの色がいいよ!

このブログでは濃いピンクです。マゼンタに近い色。

アクセントカラー

メリハリをつけるために使う色です。
本来は一番目立つ色にするのがオススメです。

このブログでは、リンクの色かな。

色数が多くなるとごちゃごちゃした印象になるので、わたしは基本的に3色を使いまわしています。
強調しているマーカーの部分はCSSで40%で表示したり。

ポップな印象にしたいときは色数を増やすのもいいかもしれませんね( ´ ▽ ` )

あ、洋服とかはね。
「パーソナルカラー診断」っていうのを受けたことがある。
ので「こんな感じの色が似合う」とか「好きなのはこんな色」とかくらいは分かるよ。

ぜひ参考にしてみてね!

もっと詳しく知りたいなら、書籍もいいかもね

  • この記事を書いた人

ゆうこりん

システム手帳を活用して、暮らしをラクにする方法を模索する手帳ブロガー。 ブログは趣味。発信したい人が増えたので、ちょこっとお手伝いも。

-ブログ

Copyright© ゆころぐ , 2017 All Rights Reserved.