この記事は約 7 分で読めます。
こんにちは！Chie(@funfanmakers)です。
今回は、
「サイトの色、イメージに合ったサイトカラー選び」
についてお話をしていきます。
お悩みシスターズも、サイトカラーで苦戦しているようですね。
自分メディアを実際に創り出すときに、最初に悩むポイントがサイトのカラーです。
色は、あなたの世界観を表現するのに、
大きな武器になると同時にうまく活用しないと「なんだかダサいサイト…」になってしまう危険性があります。
ですので、今回は主要な色が与える印象についてと、サイトカラーに悩んだ時に強い味方となってくれるサイトをご紹介します。
目次
サイトの色の配色基準
WEBサイトの配色は役割別に３つあります。
それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。
ベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、バランスの良い配色に仕上げることができます。
以前SEOを理解しよう！の記事の中で、SEO対策の一つとして、Googleのガイドラインに記載されている「ユーザーがサイトを利用しやすいように手助けする」必要があるというお話をしました。
SEOの理解は、ブログで収入を生み出すうえでは必須の知識になりますので、SEOって？という方はこちらも是非ご覧ください。
Googleの掲げる「ユーザーがサイトを利用しやすいように手助けする」一つの工夫として、ユーザーがコンテンツを読みやすくすることが挙げられます。
コンテンツを読みやすくデザインするうえで、サイトカラーは重要項目です。
ユーザーが読みやすい配色をすることで、読了率や滞在時間がアップしますのでポイントを押さえてユーザビリティの高いサイトにしていきましょう！
ベースカラー
ベースカラーとは、余白や背景、サイトの大部分を占める色です。
サイト内で最も大部分を占める色になりますので、メインカラーを引き立たせるような白やグレーなど無彩色や一見白とほとんど変わらないような淡い色を選ぶのが良いでしょう。
このサイトであれば白（#ffffff）になります。
メインカラー
メインカラーは、サイトのイメージになるカラーです。
当サイトであれば見出しやメニューバーに使用しているターコイズ色（#6be5d5）になります。
与えたい印象や表現したい世界観と色が与えるイメージを加味して選択するのが良いでしょう。
サイトのイメージに直結するので、メインカラーを一番最初に決めます。
文字の読みやすさを考慮すると明度の低い色を使用した方がよいとされていますが、重要なのが文字色とのコントラスト比（濃淡のバランス）です。文字とのコントラスト比を十分に確保して読みやすさを意識するようにしましょう。
アクセントカラー
名前の通り、アクセントになる刺し色です。全体の5％と少ない使用量ながら一番目立つ色で、全体を引き締める、ユーザーの目を引く役割があります。
メリハリを付けたい時に使用する色で、最も目立つ色であることが理想です。
アクセントカラーはお問い合わせフォームや目立たせたい部分に重点的に使用するとよいでしょう。
当サイトであれば赤やピンクを使うことが多いです。
では、サイトの配色のバランスを知ったところで、「メインカラー」を決めましょう。
次の項で、主要8色のカラーイメージについてお話していきます。
色が与えるイメージ
ではそれぞれの色が与える印象はどのようなものなのでしょうか。
色をメインカラー、アクセントカラー、ベースカラーのどこに使うかによっても、印象が大きく変わりますね。
赤
警戒心、注意力を喚起し、人間の感情的興奮や刺激をもたらす。
エネルギッシュで強いインパクト、目を集める色なので、広告や商品パッケージに多用されます。
販売色や購買色とも呼ばれています。生命力や情動を感じる色です。
オレンジ
活気や親しみ、健康を感じる色です。楽天的、陽気な印象をあたえます。
暖色の中で、万人受けする活動的なビタミンカラーです。
食欲を増進させる効果があるため、レシピサイトにも活用されることがあります。
黄
にぎやか、明るさや希望を与え、活発さを感じる色です。
見ているだけで心を弾ませ楽しい気分にさせるのでコミュニケーションを円滑にしてくれます。
保育園などの教育施設や学習塾でも使われる色です。集中力をアップさせる効果もあります。
緑
平和、安全、癒し効果のある色です。安定、安心感を与えリラックス効果があります。
ナチュラルな印象を与えたいときに使われます。
落ち着いたイメージがあるのでニュースサイトや、安心感を与える住宅サイトでも多く使われています。
青
さわやか、冷静、誠実、安心感や信頼を感じる色です。
夏には爽やかさや涼みを、冬には寒さをといったように季節によっても与える印象が変わります。
「知性」や「若さ」を表現する色として、FacebookやTwitterなどIT企業でも多く取り入れられています。
紫
高貴、上品な印象を与える色です。
感受性豊かな色なので、他のサイトと差別化したい時に使われることが多いです。
大人の上品さを表現したい化粧品サイトやウェディングサイトに多く使われています。
黒
力強さや高級感を与える。自信や威厳のある色ですので、サイト全体が洗練された印象になります。
白・グレー
白は清潔感・純粋さを表す色です。グレーは落ち着きを表す色です。
どちらも無彩色ですので、他の色の主張をうまく引き立てる色です。ベースカラーとして使われたり、ありのままの情報を伝えるという意図を持ったニュースサイトや通販サイトで使われています。
カラー配色参考サイト
ここまで、サイトの配色バランスとそれぞれのカラーが与える印象についてお話してきました。
メインカラーを決めることは私自身難しくなかったのですが、サイト全体のバランスを見たときにアクセントのカラーやベースカラーとのバランスですごく悩みました。
その時に参考にしたサイトを3つ紹介します。
今後、ブログ記事を書いて行くときにも役立つサイトですので、ぜひ参考にされてみてください。
Adobe Color
類似色や補色の組み合わせや、色の組み合わせのパターンを調べることが可能です。
メインカラーが決まっている場合は、その色を基軸として他の色を考えることができるので使い勝手が良いです。
↓写真をクリックするとAdobe Colorサイトにリンクします↓
Color Drop
4色構成の色のパターンを集めたサイトです。
いいねの数が表示されるので、どのパターンが多くの人に使われているかを知ることもできます。
お気に入りのパターンを選ぶと右側に色コードがそれぞれ出てくるので
そのコードを該当箇所に入れるだけでOKなので、便利ですね。
↓写真をクリックするとColor Dropサイトにリンクします↓
原色大辞典
色単体のコードを集めたサイトです。原色、洋色、和色など微妙な色の違いにも対応可能です。
個人的なおすすめは、Adobe ColorやColor Dropにて色の大枠を決めたのち、こちらのサイトで色の微調整をすることです。また、囲み枠やアンダーライン、吹き出しの色を変えたい場合は、それ単体での色の選択になるので、こちらのサイトを参考にしています。
↓写真をクリックすると原色大辞典サイトにリンクします↓
サイトの色選びのまとめ
いかがでしたか？
サイトカラーは、あなたのサイトの印象を決める大きな要因の一つです。
ですので、色が与える印象とあなたが与えたい印象を考慮して決めていきましょう。
カラーには正解はありませんので、自分が気に入るカラー選定が理想的だと個人的には感じています。
サイトカラーが決まれば、既にブログで結果を出している方やカラーの知識のある方に一度見ていただくのをおすすめします。第三者にフラットに見てもらうことで、自分で気づかないアドバイスがもらえる可能性が高いからです。
なぜ、ブログの経験者やカラーの知識のある方と敢えてお伝えしたかというと、
ブログを書いたことのない方にアドバイスを求めても、自分の好き嫌いでアドバイスされることが多く、あなたも迷ってしまって迷宮入りしてしまう可能性があるからです。
自分の好みではなく、あなたの世界観とブログのコンセプトを踏まえたうえでアドバイスいただくのがベストですね！
サイトカラーを決めて実装すると、「自分のサイト」とどんどん愛着がわいてきます。
記事執筆まであと少しですね！
突然ですが、あなたのブログは収入を生み出すブログですか？
収入を稼ぐために始めたブログが、行動していく中で、ブログをキレイに作るという目的にすり替わってしまう方が実は多いんです。
そんな時は、ブログでの収入の稼ぎ方をおさらいして、「どのように収入に繋げるか」を確認しましょう。
こちらの記事で、ブログでの収入の稼ぎ方をまとめておりますので、宜しければこちらもご覧ください。
