「サイトが見やすくなる色の決め方・使い方を教えて欲しい」
「人が持っている共通の色のイメージがあるのか知りたい」
今回はこんなお悩みを解決します！
色の使い方や見やすいカラーコーディネートは、人それぞれ好みが違いますが、理論的に配色することでユーザーにより情報を的確に与え、印象強くしたいですよね。それができると、ブロガーの方は自身のブログの価値が高まりますし、どの分野でも強みになります。
そこで、今回は『色を決める方法2つ』と『サイトが見やすくなる色の3要素』を具体的にご紹介します。
✔︎本記事の内容
- 計算的に色の決める方法がわかる
- 人は本能的に共通の色にイメージを持っており、色それぞれの特徴がわかる
- サイトが見やすくなる色の要素3つから構成までできるようになる
この記事は、計算的に色を選べるようになり、具体的な使い方と組み合わせまでが詳しくわかります。
「色の使い方がわからない方」や「カラーコーディネートを学びたい方」は参考にご覧ください。
色を決める2つの方法
結論、計画的に色を決める方法は具体的に2つあります。
「イメージカラーから決める方法」と「コーポレートカラーに沿って決める方法」です。
ひとつひとつ詳しくお伝えします。
イメージカラーから決める
それぞれの色（カラー）には、人が持つ共通のイメージがあります。それに合わせて色を決めましょう。
それには、目的や内容、ユーザーなどに合わせて、ふさわしい印象の色選びが重要です。
ブロガーを例にすると、サイト内と各記事のカラーコーディネートがあげられます。
サイトの内容や目的に合わせて、色を選ぶとユーザーの行動が変わります。
これでは、深くイメージしづらいと思うので、具体的な例をご紹介します。
例えば、バイクの記事を書いたとしましょう。
そうなると、記事を読んでくれるユーザーのほとんどは男性ということが予測できます。そのため、女性に人気のあるピンクを中心にカラーコーディネートすると、ユーザーに内容が伝わりにくくなってしまい、記事が最後まで読まれません。
こういったことを意識してカラーコーディネートすると、より見やすくなり、ユーザーに内容が伝わりやすくなります。これがイメージカラーから決める方法です。
- それぞれの色には、人が持つ共通のイメージがある
コーポレートカラーに沿って決める
コーポレートカラーが決まっている場合は、それに沿って色を決めることが一般的です。
コーポレートカラーとは、企業のイメージやサービスを印象付けるために使用されている色のことです。
企業などはもともと企業のイメージカラーやサービスを印象付けるために、コーポレートカラーが決まっているので、それらに沿って色を決めることがユーザーにとっても、わかりやすく伝わりやすいことが多いです。
企業にとっては、【コーポレートカラー ＝ イメージカラー】とも言えるでしょう。
皆さんの身近な具体例をご紹介します。
✔︎具体例①「コカ・コーラ」
コカ・コーラの「赤」と「白」には馴染みありますよね。
✔︎具体例②「ファミリーマート」
次の具体例として、ファミリーマートを見ていましょう。
ファミリーマートといえば、「水色」と「黄緑」がイメージカラーですね。
✔︎具体例③「マクドナルド」
マクドナルドのイメージが「赤」と「黄色」だということはパッとイメージできますよね。
このように企業によっては、もうすでに皆さんのイメージカラーがあると思います。
【ポイント】実際に色を選ぶときはトーンで選択する
実際に色を選ぶときはトーンで選択する理由は、2つあります。
①同じトーンの色を選んだ場合：色に統一感が生まれるので、イメージが伝わりやすく、より見やすくなるからです。
②異なるトーンの色を選んだ場合：対比効果から強弱を生み出せるからです。
トーンとは色調のことです。色の三属性である明度と彩度で表した色の系統のことを言います。
明度が上がるとより明るくなり、彩度が上がるとより鮮やかになります。
人は色にイメージを持っている
それぞれの色（カラー）には、人が持つ共通のイメージがあるということは上記で説明しましたが、色のイメージを3つに分けることができます。
- 暖色系（赤、黄色、オレンジなど）
- 寒色系（青、緑、紫、紺など）
- 無彩色系（白、黒、グレーなど）
色のイメージはこれらに分けられ、人は本能的にそれぞれの色にイメージを持っているのです。
そして、生活の中で人は色のイメージから無意識に判断し、選択しています。
イメージによって、与える印象やインパクトが変わってくるので、それぞれの色のイメージを知ることはデザインをする上で非常に重要です。
具体的にひとつひとつ見ていきましょう。
暖色系のイメージ（赤、黄色、オレンジなど）
暖色系の色は、「赤」「黄色」「オレンジ」「ピンク」などがあります。
✔︎具体的なイメージ
赤：情熱的、派手、危険、デメリット、元気など
黄色：陽気、明るい、ポジティブ、若々しい、注意など
オレンジ：健康、元気、爽やか、フレッシュなど
ピンク：可愛い、ロマンチック、ラブリー、女性など
寒色系のイメージ（青、緑、紫、紺など）
寒色系の色は、「青」「緑」「紫」「紺」などがあります。
✔︎具体的なイメージ
青系：爽やか、涼しい、スッキリ、清潔、新鮮など
緑系：自然、やすらぎ、清々しい、優しいなど
紫：優雅、ゴージャス、派手、神聖など
紺：落ち着き、大人、ビジネス、信頼、堅実さなど
※紫や緑、紺は中間色と例えられることもあります。
無彩色系のイメージ（白、黒、グレーなど）
無彩色系は、白や黒が主になりますが、場合によっては、グレーも無彩色系に分類されることがあります。
✔︎具体的なイメージ
白：清潔感、静か、落ち着き、スッキリ、クリア、無駄がないなど
黒：かっこいい、高級感、重圧感、重厚感など
グレー：はっきりしない、中立、冷静、シンプルなど
見やすくなる色の要素3つ
デザインをする上で、見やすくなる色の要素は3つあります。
- テーマカラー
- サブカラー
- アクセントカラー
これら3つの色の要素を組み合わせることで、デザインが見やすくなり、内容が分類分けされ、正しくユーザーに情報を伝えることが可能です。
ひとつひとつの特徴と違いを見ていきましょう。
テーマカラーとは
テーマカラーとは、情報を伝える際の主役になります。
いわゆる、デザインを象徴する色であり、ユーザーがデザインに対して感じるイメージ色です。
サブカラーとは
サブカラーとは、主役であるテーマカラーを引き立て、より見やすく強調性を生む脇役と言えます。
なので、テーマカラーと近い色を選ぶのをおすすめします。
なぜなら、あまりに異なった色を使うと、逆にサブカラーが目立ち、テーマカラーの強調性が薄れてしまう可能性があるからです。
サブカラーを選ぶときに、テーマカラーと近すぎる色や地味な色を多く入れてしまうと、デザインが単調になってしまうケースもあるので気をつけましょう。
アクセントカラーとは
アクセントカラーは、名前通り、アクセントになる色のことです。
具体的には、デザインを引き締める効果があります。
アクセントカラーも、テーマカラーがより目立つようにすることが目的です。テーマカラーと変化がある色を使うと強弱がつき、より有効的です。
3つの色の使い方【面積バランスを考える】
✔︎メインカラーの面積
より広い面積を使用する色が一番目立ち強調性が強いです。なので、テーマカラーはより広い面積を使うようにデザインするのがポイントです。
✔︎サブカラーの面積
サブカラーもテーマカラーの面積に合わせて、使用する範囲を調節するとテーマカラーがより目立つサブカラーの使い方ができます。
✔︎アクセントカラーの面積
アクセントカラーは、あくまでデザインの中のアクセントなので、面積を使いすぎず、厳選して使用すると効果が上がります。
このようにそれぞれの目的に合わせて、面積を調節するとより効果が上がります。
まとめ
それぞれの色（カラー）には、人が持つ共通のイメージがあり、目的や内容、ユーザーなどに合わせて、ふさわしい印象の色選びが重要でした。
そして、人は色のイメージを3つに分けていましたね。
- 暖色系（赤、黄色、オレンジなど）
- 寒色系（青、緑、紫、紺など）
- 無彩色系（白、黒、グレーなど）
これら3つをうまく組み合わせることで、人は自然に反応します。
その上で、『テーマカラー』『サブカラー』『アクセントカラー』があり、これらが見やすくなる色の要素は3つがあります。
それぞれには、目的があり、それに応じて配色と面積を考えることがポイントでした。
「これらを意識し、見やすくすることでユーザーが無意識に反応してくれるようにしましょう！」
今回は以上です！
最後まで読んでいただき、ありがとうございました！
✔︎関連記事「デザインについて学びたい方おすすめ」
コメント