ブログのカラーを見直してみた！

Webサイトやブログを運営していて、記事を書いているときやデザインに手を加えるとき、「カラーをどうしようかなぁ」ってなりませんか？最近、本ブログもWordPressのいろいろなプラグインも導入して、より自由なデザインにできるようになり、今まで以上にカラーに関して迷うようになりました。それというのも自分のブログのカラーを最初の段階でしっかりと決めていなかったためです。

今回はWebデザインのカラーについて調べつつ、本ブログのカラーをきちんと決めることにしました。

Webデザインの配色は3色を意識して

よくWebデザインは、「ベースカラー」「メインカラー」「アクセントカラー」の３つのカラーを上手に配色することで美しいデザインにすることができると言われています。（出典は不明です。。）割合は、ベースカラー70%：メインカラー25%：アクセントカラー5%

もちろん写真や広告も入れたいので、これはあくまで基本としてこの割合を意識してデザインすることが“良い”Webデザインへの近道なのかなと個人的に思います。

ベースカラー、メインカラー、アクセントカラーについて

ベースカラー

背景色といっても過言ではないと思います。大雑把に言えば、基本は白系か黒系、彩度の低い色がおススメです。そこに少しカラーを入れたりしてサイトの“色”を出していきたいですね。
ガッツリとRGB系で行くなら、しっかりとしたコンセプトをもって仕上げたいですね。そうなるとメインカラーとしての役割も担うことになります。

メインカラー

そのサイトを印象を左右する重要なカラーです。サイトのコンセプトや会社のカラーなどをしっかりとアピールする部分なので、じっくりと決めたいですね。

アクセントカラー

ワンポイントで目立たせたい部分や差し色として使ったりします。個人的には赤とか黄色みたいな目立つ安全色やベースカラーとの補色（色相環で反対の色）を使用するのが選ばれやすいのかなと思います。

---

と言いつつも、コンセプトに合わせてトリコロールやサイケデリックみたいな有名な色の組み合わせや、色調（トーン）や色相で組み合わせたりするのも良いですよね。

何が大切かといえば、結局コンセプトが大切ってことだと思います。

Webサイト、ブログのカラーの決め方

まっさらな状態からWebサイトやブログを立ち上げて、いざカラーを決めようとなると迷っちゃいますよね。そんな時はまずはメインカラーを決めてしまいましょう！そうすればおのずとベースカラーやアクセントカラーの選択肢が見えてきます

以下は私が考えるメインカラーの決め方を簡単にまとめてみました。ただし色の決め方に関しては正解はありません！何かの色を決めるヒントになればいいなぁと思います。

コンセプトから連想して色を決める！

例えば「キャンプ」をコンセプトにしたブログなら、山や土、空、川などの自然が思い浮かびますよね！そこかから連想して　緑　とか　茶色　とか　青　とかをメインカラーにすると「キャンプ」らしいイメージになるかと思います。

では、もっと抽象的なコンセプトのブログの時はどうするの？ってなりますよね。その場合も一緒です。そのコンセプトから連想される色をメインカラーにするのがおススメです。

例えば「老後の人生」を扱うブログなら、例えば「おだやか」「のんびり」「こころ」「えがお」などを連想したとして、素直に自分が思い浮かべた色や世間一般が思い浮かべる色をテーマカラーにするとよいと思います。困ったら、ネットで画像検索してイメージを膨らませるとかもできますね。私は彩度の低い　緑　や落ち着いた　黄茶　のようなカラーが思い浮かびました。

いろいろなイメージで複数の色か思い浮かんだら、一番伝えたいことは何かを考えて、一番マッチしているカラーを選ぶのがいいのかなと思います。「老後の人生」の例でいうなら、「おだやか」よりも、「尊敬」とか「歴史」を重んじるコンセプトであれば格式高いと言われている　紫　や　青　なんかもいいですね！

好きな色を使う！

もし自分のサイトなら、思い切って自分の好きな色を使うというのもありだと思います！その色は自分自身のパーソナルカラーという色で、自分のことを発信するブログならむしろ最適です！

決まりきっている色があるならその色で！

例えば会社のブログだとコーポレートカラーってありますよね。前述のパーソナルカラーもそうですし決まりきった色があるならそれを使うべきだと思います。いろんな会社のWebサイトを見てみるとけっこう会社のロゴの色が、そのままサイトのメインカラーになっていることが多いです。

---

メインカラーが決まったらあとは、その色と相性の良い色をサブカラーやアクセントカラーにします。相性の良い色の決め方は突き詰めると難しいのですが、かんたんな決め方として、以下のような決め方があります。

近いトーン（色調）の色から選ぶ

デザインがまとまりやすくてとてもおススメです！“パステルカラー”なんかはすごくイメージしやすいのではないでしょうか。メインカラーを決めるときにコンセプト次第ではトーンから決めてしまうというのも全然ありですね。例えばベビー用品＝パステルカラーみたいな。

近い色相のから選ぶ

こちらの配色もデザインがまとまりやすいのでおススメです！メインカラーが特に彩度の高い色ならこちらの選び方がまとめやすいです。

明度さをつける

何も考えずにこの配色をするとすこし単調なイメージになるので、簡単そうに見えて実は上級者向けな配色方法だと個人的には思います。例えばアクセントカラーだけちょっとだけ色をずらしてあげるみたいなことをすると“わかってる感”が出るので、単調だなぁって思ったら試してみてください。

反対の色（補色）を使う

例えば、黄色と紫みたいな関係の色です。黒と白の組み合わせも厳密には補色ではないですが相性が良いというのは言わずもがなですよね。反対の色ということでアクセントカラーにすると目立たせたりすることができます。

補色を使用するうえで一つ気を付けなければいけないことがあります。それは組み合わせによっては見づらい、そしてユニバーサルデザインの観点からふさわしくない組み合わせがあります。ここでは詳しくは触れませんが、ずばり赤緑の組み合わせは、使うとき注意する必要があります。色同士をくっ付けると如実になります。

色がついているときに見ても普通に目がちかちかして見づらいですよね。さらに彩度をなくすとほとんど同じグレーになって境目がわかりづらくなります。クリスマスカラーですし、どうしても使いたくなる状況は結構ある組み合わせですよね。そんな時は白いセパレーションを引いてあげればいいですね。まだチカチカするので、彩度を落としてあげたり多少調整が必要ですね。

補色を使ってキレイに配色できる人はセンスを感じますよね。ちなみに私は苦手です！

ツールを使う

少し趣旨はズレますが、ツールを使って配色をするという方法もおススメです。無料で使用可能な「Adobe Color」というツールを紹介します。業界的に良いとされる配色のルール“カラーハーモニールール”をもとにカラーホイールを動かして色を選べるので知識がなくても素敵な色の組み合わせを作ることができます。

本ブログのコンセプトと配色を考えてみた

コンセプト

本ブログは、デザインのメモというコンセプトで運営しています。“デザイン”というコンテンツをベースに扱っていくつもりです。「デザイモ」としいうブログ名はデザインメモを略して名付けました。

サイト名のおしりの部分の読みが“イモ”なので、言葉遊びでそのまま“芋”というイメージを盛り込んでいきたいと思っています。また、後付けですが、Webの世界で根強く育ってほしいという思いも込めています。特に荒地でも育つというイメージのサツマイモをチョイスしています。

配色

どちらかと言えばハウツー系のブログなのでということで、“メモ”ということもありベースからーは明るい色に。上のサツマイモのイメージをからいくつかカラーのバリエーションを考えてみました。

サツマイモの赤紫を差し色としてアクセントカラーにしたかったので、メインカラーは黄色に近いカラーにしました。また、全体の色合いを見てメリハリをつけたかったので、サブカラーとしてダークグレイッシュな感じの色を加えました。

結局、最終的には以下のような配色にしました。

基本の割合（70：25：5）には則してないですが、作りながらデザインを調整して色合いのバランスはまとまったと思います。ビフォーアフターはこんな感じです。

大きく印象は変わってませんが、コンセプトに基づいてカラーをしっかりと固められました。今後サイトを編集したり、記事を書く時に迷いなく色を決めていけると思います。

まとめ

Webデザインの配色の基本はベースカラー70%、メインカラー25%、アクセントカラー5%で配色することを意識して、コンセプトに合ったカラーを選定したいですね。