ブログデザインの統一感を生む文字色の選び方｜背景やヘッダーの色味に合わせる方法とは。

ブログって記事を書くのももちろん楽しいんですけど、デザインを考えているときが一番楽しくないですか？

ブログデザインを洗練していくことは、自分自身のモチベーションが上がるのはもちろんのこと、ブログを訪れたユーザーに対して視覚的に好印象を与えることができるので、めちゃくちゃ重要なことなんですよね。

ただ、ブログデザインに凝りすぎるのも良くなくて、

特に、記事の文字色は要注意だと感じますね。

記事はあくまで文章なので、あまりデザインと関係がないように思うじゃないですか。

なので、「よくある強調色」を使って文字装飾をしている人が多いんですけど、文字の色もブログ全体の色味に合っていないと明らかな違和感が生まれることになります。

とういうことで、本記事では、ブログデザインの統一感を損なわないための文字色の選び方についてお話していきたいと思います。

統一感のないブログデザインでは読者が離脱してしまう

いくら細かいディティールまでこだわってブログデザインに労力をかけても、その結果として全体的に統一感のないブログデザインになってしまうと、ユーザーに言い知れぬ不快な感覚を与えてしまいます。

視覚情報はブログ記事を開いて最初に飛び込んでくるので、ここで違和感を与えてしまうとどんなに素晴らしいブログコンテンツを用意していたとしてもユーザーはブログにのめり込んでくれない。

本屋で何となく手に取って読んじゃう雑誌って、「その表紙のデザインや写真が自分好みかどうか」で決まるじゃないですか。

雑誌の中身、つまりどんなことが書いているかなんて、読み進めていく上で知ることであって、最初から「読み進めるモチベーション」を減退させちゃうようなデザインだとどんなに中身が面白い雑誌でも読もうとはならないわけで。

そういった意味で、ブログデザインにこだわり、ユーザーに違和感を与えないように全体の統一感を大切にすることは、すごく大事だと思っています。

特に、最も分かりやすく違和感が生まれるのは、配色のちぐはぐさじゃないかと。

例えば赤色と水色は、色相環で言うと90度の位置にあるので、あまり合わない色と言われます。

素人目に見てもちょっと違和感があるし、例えばヘッダー画像やサムネイル画像がこんな色の組み合わせだと何か気持ち悪いじゃないですか。

せっかくブログを訪れてくれた読者さんに、開幕一発目で視覚的な気持ち悪さを与えてしまっては、当然ながら次の記事へと進む意欲が減退してしまいますよね。

逆にこれだとどうでしょう。

僕だったら、

せっかく魂込めてブログ記事を書いているんだから、配色の違和感くらいで読者さんが離脱してしまうのはもったいないじゃないですか。

なので、ブログデザインに統一感を持たせる配色を意識すべきだということです。

記事中の文字の強調色がブログデザインの統一感を崩している

そんなこんなで、ブログデザインの配色は違和感のないようにした方がいいよって話なんですが、大抵の場合ヘッダー画像やサムネイル画像は皆さん気を使っていると思うんですよ。

ヘッダーやサムネイルはブログの顔になる部分なので嫌でも気になるじゃないですか。

僕は専門の知識を持っているわけではないし、ましてやプロでも何でもないので、僕のブログのサムネイルを見た読者さんに「そのデザインセンスどうなのよ」って言われちゃうと返す言葉もないです。

一応こういうのは自分で作ってるんですけど、じゃあ「何をもってこの配色にしたのか？」と聞かれると理論武装が出来ていないので言葉に詰まりますね。

ただ、最低限ではありますけど自分の感性で「何か気持ち悪いな」って感じる配色を使わないように気をつけています。

ただ、問題は記事中の文字色。

文章にアクセントを付けるため、文字装飾に強調色を用いることってあるじゃないですか。

この文字の色がブログ全体のデザインの統一感を崩しちゃってることってすごく多い気がします。

記事を書くときにブログデザインなんて意識しないじゃないですか。

このような赤色強調色だったり

このような黄色マーカーだったりを

無意識に使っている人が多いと思うんです。

まぁ、昔の僕自身もそのうちの1人なんですけどね。

それがブログの色味に合っていて、ちゃんと全体に統一感があるなら問題ないんですよ。

だけど、明らかにバナー画像やサイドバーの雰囲気と合っていない場合もある。

例えば僕のブログを例に下画像をちょっと見てほしいんですけど…

僕は基本的に淡い色が好きで、それにより柔らかい印象を与えるようなバナーを作ることが多いんです。

上画像で言うと右サイドバーのバナーなんかがいい例ですね。

が、そんな淡い色使いのバナーと記事文章が横に並ぶと、文章中の強調色やマーカー色の彩度が高すぎて違和感が生まれませんか？

サイトバーの人気記事一覧では、サムネイル画像が全体的に淡い色味でまとめられていたり、順位を表す番号にくすんだピンクやグレー色を使っていたりするのに、記事文章中の強調色やマーカーは目がチカチカするような色味。

それでブログのデザインに統一感が失われていると非常にもったいないです。

文字装飾の色は自分で簡単に変更できるわけですから、しっかりブログ全体の色味に合ったものを選びましょう。

バナー画像などからカラーコードを抽出して文字装飾色を決める

それでは、文字装飾の色をブログデザインになじませるにはどうすればいいか？

何度も言いますが、僕はデザインのプロでも何でもないし、「この色とあの色の組み合わせこそ嗜好！」なんてことは分かりません。

ただ、一般的に相性が良いとされる色の組み合わせくらいは分かります。

ファッションコーディネートとかでも、これさえ守っていればとりあえず無難にまとまりますよね。

ということで、記事本文中の文字装飾の色を決める場合は、まずブログデザイン全体の中で強調的な色味を抽出してみましょう。

ブログや画像のカラーコードが知りたい？配色デザインに便利な拡張機能とは。

カラーコード取得拡張機能『色ピ』でサイト中の好きな色を保存しよう。

上画像のように、拡張機能を使ってブログトップページから「#F08E9C」というカラーコードを抽出しました。

そして、このカラーコードを指定して文字に強調色をつけていきます。

ワードプレスの記事執筆画面で、文字色選択から「カスタム」を選択。

すると、カラーコードの入力画面が表示されますので、先ほど抽出したコードを入力しましょう。

入力したカラーコードの下に実際の色味が表示されますね。

ちなみに、文字の強調色はブログデザインの色とぴったり合わせなくてもOKです。

先ほど説明したとおり、「同一系統の類似色同士」なら違和感なく馴染むので、

これと同じようにして、強調色として選んだ色の補色をマーカーの色にすれば、ブログデザインに統一感が生まれます。

記事の文章がさっきよりも明らかにブログデザインに馴染んでいる感じがしますよね。

こんなふうに、ただありものの強調色を文字装飾に使うのではなく、ブログデザインの統一感を意識して自ら文字装飾の色を決めてやれば、読者さんの視覚的なストレスも緩和できます。

終わりに

以上、ブログデザインに統一感を持たす重要性と、この統一感をくずさないための文字装飾の色選びについて説明しました。

ブログって自分の趣向や理想像をそのままデザインに反映させることで個性が出るじゃないですか。

要するにブログは、いくらでも自分好みにカスタマイズできる居心地の良い部屋みたいなもの。

そんな最高の部屋に遊びに来てくれた読者さんに、

なんて思われるのはシンプルに悲しいことだし、どうせなら「いつまでもここにいたい」と思ってもらいたいですよね。

当然その方がブログのPV数やリピート率は向上するし、それこそブログ収益化に大きく寄与するわけですから、デザインにはしっかり気を使った方がいいです。

たとえ美術に関してど素人であっても、上述した文字装飾の色選定など、素人なりに出来ることはたくさんあると思うし、失敗したらその都度学んで修正していけばいいので（というか僕自身がその連続なので）、統一感を意識してブログをカスタマイズしていきましょう。

Souhei

僕Souheiは今、PC1台片手にカフェを渡り歩き、自由気ままなノマドライフをまったりと愉しんでいます。

副業でネットビジネスを始め、個人起業という道を選んだ結果、好きな人と好きなシゴトをする日常で大きな収入を生み出せるようになったんです。

どうやってこんな日常を手に入れたのか？

興味がありましたら、僕のプロフィールをごらんいただければ幸いです。