- 見た時に印象の良いブログにしたい!
- まとまりのある配色ってどうすれば･･･
- 色って何色でも使うべき?
あなたのブログの色････適当に決めていませんか?
- 好きな色だから
- 目立つ色だから
こんな理由で色を使ってしまうと見た目の印象が非常にもったいない!!
自由度の高いワードプレスだからこその悩みとも言える【配色】を今一度見直してみましょう!!
という事で、美術成績で2を取ったことのある近所です(´･ω･｀)
※5段階評価
そんなヤツが偉そうに語るな！って声も聞こえてきそうですが、美術センス皆無でもキレイなブログが作れるよ！
っていう励みになればと思ってます。
このブログは自作のLPをトップページとしていますが見ていただくと、結構まとまりある色使いが出来ていると思います。
ブログの配色は見た目に直結するので中々挑戦できない！って人も多い、そんな【ブログの色】に関して考え方や決め方をまとめました！
この記事の目次
配色次第で見た目と印象がガラリと変わる
単純に色を決める･･･と言ってもかなり奥深い大事な項目となります。
例えばこのブログの見出しを青から赤に変えただけでも見え方は恐ろしく変化します。
服でも同じデザインで色が変わると別物のように見えるのと一緒ですね。
色は印象に直結する
このブログは青を中心に作っていますが、これをピンク系に変えると一気に女性っぽい雰囲気に変わります。
なので、使う色のチョイスも大事になってきます。
実際のお店の例を挙げると、イオンはピンクをコーポレートカラーにしています。
- 幸福
- 優しい
- 愛情
などのイメージを与えてくれる効果があります。
中の人ではないので真意は分かりませんが、少なくともピンク色を使う事で
- イオンに来ると幸せな気分になれますよ
- イオンはお客様に優しいお店ですよ
という印象を潜在的に与えてくれているという訳です。
では、人のイメージにつながる【色】をどうやってブログ内で作り上げていくか説明していきます！
テーマカラーを3色決める
なんで・・・３色？もっと使った方がカラフルやん！
テキトーに色を使うのではなく主要となる色を決める方がまとまりが良く見やすさがアップします。
中心に使う色数の基本は3色と言われています。
その3色はバランスにも黄金比がありこんなイメージ
- ベースカラー(引き立て役の色)･･･70%
- テーマカラー(中心となる色)･･･25%
- ポイントカラー(アクセント)･･･5%
ベースカラーはブログでは背景色になるので白～グレーが基本であり王道です。
それ以外の色は使いこなすにはかなりハードルが高いですが、バシッと決まるとかなり差別化したサイトになります。
背景色は無難な「白」「グレー」を選択する人が多いため、決めておきたいのは【テーマカラー】と【ポイントカラー】ということになります。
いきなり両方決めるのではなく、まずは【テーマカラー】を決めましょう。
テーマカラーは自分が好きな色でも良いですし、ブログのイメージで決めてもOK。
私は色が与える【印象】で決めました。
色は見た目の【心理的印象】を考えて決める
上の画像は私のブログトップの一部ですが・・・例えばテーマカラーをブルーから黄色とかにすると全く違う印象になります。
凄い明るい陽気なブログになるのではないでしょうか？
こんな感じで色にはそれぞれ人に心理的に与える印象があります。
実際にこのブログで取り入れた色で解説していきます。
テーマカラー【ブルー(アビスブルー)】
テーマカラーにしたブルー系には
- 良いイメージ【誠実･知的･リラックス】
- 悪いイメージ【不安･冷酷･悲しみ】
などの印象があります。
ち･･･知的?このブログが?
この青という色は多くの企業がコーポレートカラーとしても採用していて、高感度も高く嫌いな人が少ない色味と言われます。
実際にFacebook、Twitter、はてブと、青をイメージカラーにしているSNSも多数あります。
私は青の中でも色味を深海に近い色にすることでキュッと引き締まったカッコいい雰囲気にしています。
そんな中でちょとしたオトボケを入れることで和やかにしたい・・・と考えてます。
アクセントカラー【ミントグリーン】
アクセントカラーにしたグリーン系には
- 良いイメージ【リラックス･自然･幸せ】
- 悪いイメージ【未熟･保守的･青臭さ】
などの印象があります。
これをミントグリーンのような明るい色でフレッシュな印象と同時に、アビスブルーの深い青との対比で目を引く効果を狙っています。
アクセントカラーは私のように同系色の明暗で考える方法と、対極色で考える方法があります。
ブルーの場合は対極色はオレンジなのですが・・・見やすさを考えた時に同系色の方が良いと判断しました。
なお、これ以外の色味の印象やアクセントカラーの決め方の詳しい解説が知りたい場合は以下のサイトをご覧ください。
各色の人に与える印象はもちろん、アクセントカラーのチャートや、ある一色を好む人が好きな色・嫌いな色などを確認できます。
参考にさせていただいた色の印象解説サイト
色の種類はかなり多い！色コードで微調整
さて、無事色系統を決めたら濃淡・明暗の調整をしましょう。
原色状態のブルーはスマホやPCで見ると色味が強いので個人的にはおすすめ出来ません。
私のブログのテーマカラーは上で紹介の通りブルーの中でも深い色合いのアビスブルーですが・・・色コードってすさまじい数ありまして。
一文字変えるだけで色味がググっと変わるので濃淡・明暗の微調整と言っても至難の業。
そこで使いたい色を見つける方法を２つご紹介します。
色コード見本で確認する
- テーマカラー・ポイントカラーで使いたい色が大体決まってる
- デザインセンスにある程度自信がある
web上表現できる色コードがリスト化されているサイトがあります。
原色・和色・洋色・パステルカラーなどなど。
テーマカラー・アクセントカラーで使いたい色系統が決まっている場合は、これでビビッと稲妻が走るカラーを探しても良いでしょう。
１色だけ決め打ちするのではなく使いたい色を何個かピックアップしてきて、カスタマイズ画面で使ってみて合う・合わないを確認しましょう。
デザイン本で使う色を決める
- テーマカラーがはっきりと決められない
- テーマカラーは決まってるけどポイントカラーが決められない
- デザインセンスに自信がない
美術成績２を出した私はもちろんこっち
私は「テーマカラーはしっかり見える青が良いかな～」ぐらいのぼんやりとしたものしかなく、デザインセンスも(悪い意味で)ヤバいのでデザイン本を利用しました。
配色アイディア手帖と言う本ですが、9色ピックアップ×127パターンの配色例があります。
その9色の中から2色・3色の配色例まで用意されていまして・・・トドメに色コードも書いてあり、気に入った色使いをそのままブログの色に採用できます。
127パターンの中から気にいった雰囲気の配色例を見つけて、その中から数打てば当たるの勢いで試しまくりましょう。
私のブログもこの本の【神秘のオーロラ】と言う配色例を活用しています
この本についてはこちらの記事もご覧ください。
本の解説から実際に０からデザインしてみた画像も載せています。
- 中心となるカラーを３色決めよう
- 色が人に与える印象は大きい
- 色が決まったらイメージに合わせて微調整
- 決めかねる時はサイトや本の力を借りよう
以上、ブログのテーマカラーの決め手は【印象】！おすすめの選び方も紹介！でした！
アクセス(PV数)を増やすLP(ランディングページ)を作る為の考え方を見る
