デザイン初心者は色の視認性をマスター!トーンを揃えた調和が良い配色のポイントとは!?

デザイン初心者は色の視認性をマスター!トーンを揃えた調和が良い配色のポイントとは!?

デザイン初心者は色の作用と視認性に関する知識を習得することで立体的に配色を行ったり、調和のとれたトーン調整が可能になります。

この記事では色が与えるイメージとトーンについてデザイン初心者に分かりやすく説明しています。少し難しい用語もありますが、一度は生活の中で見たことのある効果で読んでみると「なるほど!」と感じることでしょう。

デザイン初心者も知っておこう!ほとんどの人が感じる色や配色の力とは?

配色やトーンや調和等は色の作用と視認性に関係している!?

デザインやレイアウトそのものにも読み手に伝える力はありますが、色には文章では表すことが難しい情報を読み手に伝える力があります。

この記事では数ある色の作用をうち、デザインする際に知っておくと便利なものをいくつか説明します。

立体感を感じる「進出色」と「後退色」とは?

色の情報は不思議で同じ面積の色面でも、色が異なると出っ張って見えたり、へこんで見えたりします。

下図の例を見てください。中央部分はどのように見えるでしょうか。暖色系の色で配色すると手前に出っ張って見えます。寒色系の色で配色するとへこんで見えていると思います。

下図を見てわかるとおり暖色系の色は「進出色」(しんしゅつしょく)、寒色系の色は「後退色」(こうたいしょく)と言われています。

「進出色」と「後退色」

同じデザインでも色の配色により、出っ張って見えたり(進出色)、へこんで見えたりします(後退色)。

同じ面積なのに質量が違うように感じる「膨張色」と「収縮色」とは?

よくファッションの世界では「白い服を着ると大きく見え、黒い服を着るとスリムに見える」といわれます。

下図の例を見てください。下図は同じ大きさの図ですが、中央にある白い四角形は大きく見え、黒い四角形は白い四角形よりも小さく見えているのではないでしょうか。

このように色や配色は、制作物のデザイン要素を大きく見せたり、小さく見せたりする効果もあります。比較的大きく見える色を「膨張色」(ぼうちょうしょく)、小さく見える色を「収縮色」(しゅうしゅくしょく)といいます。

「膨張色」と「縮小色」

同じデザインでも色や配色によって大きく見えたり(膨張色)、小さく見えたりします(収縮色)。

大気の影響を考慮した「空気遠近法」とは?

空気遠近法(くうきえんきんほう)とは「描画位置に対して遠くにあるものほど大気の影響を受けて色彩や色調が薄くなる」という地球環境である大気の性質を利用した遠近法です。

下図の例を見てください。左側は遠くにあるはずの山のほうが濃い色なっていることで近いのか遠いのかよくわからない状態です。右側のように遠くになるほど薄くして、背景に溶け込むようなグラデーションを演出するほうが自然に見えます。

空気遠近法

同じデザインであっても色や配色により自然に見えたり、不自然に見えたりします。

グラデーションで重心を整えるには?

下図は単純にグラデーションの方向を変えた図です。

グラデーションで重心を整える

瞬時にどのような情報がイメージされ見えてくるでしょうか。

この違いはとても異なり、左側は上空にいるイメージを連想させ、右側は海中の深い場所にいるように連想されます。

これは濃い色は「重い」、薄い色は「軽い」と感じる色のイメージから連想される印象なのです。重い色を上部に配色すると重心が上がるため空間の広がりを感じます。逆に下部へ配色すると重心が下がるため安定感が感じられます。

上図のようにグラデーションで配色を利用すれば、向きや方向を変えるだけで反対のイメージを演出することが可能です。

デザインにおける色の視認性とは何か?

デザインレイアウトの文字や図版には「見えやすさ」、「見えにくさ」について語られることが頻繁にあります、それは明度差で決まることが多いです。

明度差が少ないもしくは小さいと見えにくくなり、明度差が徐々に大きくなると見えやすくなります。

印刷物の紙面デザインでは、最低でも2色以上の色が使用されます。1つは紙の色(通常は白が多い)、もう1つは印刷する文字や図版などの色です。印刷では厳密に言うと1色ですが、ここでは人の目で感じる色と言うことで2色と記載しています。

使う色は基本的には自由ですが制作物の目的や用途を理解して文章や地図、グラフのように内容をきちんと伝えなければならない要素については、視認性のある色や配色にするようにしてください。

このように、はっきりと見えることを「視認性が高い」と表現し、見えにくいことを「視認性が低い」と表現します。

色の視認性

同じトーンの配色にすると色は程よく調和しますが、明度差がないと視認性は低下し見づらくなります。

目がチカチカする現象「ハレーション」とは?

デザインの中に彩度が高い色同士を組み合わせると「ハレーション」と呼ばれる、目がチカチカする現象が発生して内容要素が見づらくなります。

デザインする際にどうしてもこの組み合わせの色を使う場合には、目がチカチカする色と色の間に黒や白のセパレーションカラーを入れることでハレーションを抑えることができます。

ただし、ハレーションがまったくなくなるわけではなく、セパレーションしないよりは見やすくなります。

目がチカチカするハレーション

彩度の高い色同士を組み合わせると、目がチカチカするハレーションが発生してしまいます。

軽く区切るセパレーションカラーとは?

セパレーションカラーとは、配色の中間に入れて隣り合わせになる2色を分割する色のことです。適切にセパレーションすることでメリハリをつけたり、全体を引き締めたりする効果を期待できます。

セパレーションカラー

隣り合わせになる2色の間にセパレーションカラー(この場合は白)を入れると、デザインにメリハリがつきます。デザイン内容によりセパレーションカラーは適切な色を選んでください。

デザインをするうえで調和のとれた配色はトーンの力!

デザインで調和のとれた配色はトーンが関係している?

自分の周りに美しいと感じるデザインがあればそれをよく見てみましょう。おそらくですが美しいと感じるデザインの多くは、トーンが統一されているのではないでしょうか。

配色やトーンで美しくするには「同系色」、「類似色」でまとめる!

類似色とは、色相環で隣り合う色同士のことです。この配色は色相差が少ないため、調和がとりやすく統一感が演出できる仕上がりになります。

同系色とは、同じ色の明度差の組み合わせのことです。この配色でも調和のとれた統一感のあるイメージに仕上げることができます。

色が本来持つイメージを的確に情報伝達したい場合などに使うと良いでしょう。

類似色を組み合わせる色や配色にすると、自然と調和のとれたイメージに仕上がります。

類似色を組み合わせる色や配色

同系色を組み合わせる色や配色の場合も、類似色の場合と同様に自然と調和のとれたイメージになります。

同系色を組み合わせる色や配色

説明では同系色や類似色でまとめると良いとは書いていますが、明度差はきちんとつけることを忘れないようにしてください。

明度差はきちんとつける

明度差が少ないと、とても見づらいデザインになります。

調和のとれた配色やトーンの基本とは!?

デザインで調和のとれた配色の基本とは「同じトーンで色を揃える」ことです。トーンとは色の調子のことを言います。

色の調子、トーンを揃えると自然に調和のとれた配色になり美しくなります。しかし複数の色を使う場合は、すべての色の調子であるトーンを揃えてしまうと色の強弱が判断しづらくなり、ぼやけてしまいます。

トーンを揃えることは美しくなりますが、揃え方を間違えてしまうと見づらいデザインとなってしまいます。デザインをする際に目的や用途の都合上どうしても色数が多くなることはデザインをしているとよくあります。

複数の色を使う場合はトーンが揃った配色の中にトーンが異なる色を組み合わせる対処方法があります。下図の例を見てください。左側は背景と文字に異なるトーンを使用した例です。紙面にメリハリが発生して落ち着いたイメージになっていることがわかります。

右側はすべてのデザイン要素を同じトーンで配色した例です。調和も程よくとれており左側と比べると、明るいイメージになることがわかります。

色数が多い場合の対処法

メリハリという意味で見てみると左側のように背景にトーンの異なる色を組み合わせたほうが、はっきりと表現でき視認性が高いことがわかります。この場合どちらが正解というわけではありません。制作物の目的や用途により使い分けると良いでしょう。

トーンが揃っていない色や配色では調和がとれないため、見た目が悪いイメージになります。

グラデーションによる空間デザイン演出も効果的です。

グラデーションとは、色を段階的に変化させて色を配列した多色配色です。奥行き感や、空気感を演出する場合に使うと良いでしょう。

微妙なグラデーションによる効果も良いです。

微妙なグラデーションによる効果

ベタ面にうっすらと明度差の小さいグラデーションを設定すると、色に深みが出るため、透明感や高級感を演出できます。

派手なグラデーションは滑らかになるようにすると効果的です。

派手なグラデーションは滑らかに

派手なグラデーションを使用する際は、滑らかに色を変化させていくと良いでしょう。ただし明度差の大きいグラデーションを使用すると、まとまり感がなくなってしまいます。

他にもいろいろなグラデーションを見てみましょう。

「明度差」、「色相差」、「彩度差」のグラデーション配色にすると、程よく和らいだイメージになります。

いろいろなグラデーション

明度差の大きいグラデーション、彩度差の大きいグラデーション、色相差の小さいグラデーション、色相差の大きいグラデーション等があります。

隣り合う色どうしは色相やトーンが類似した関係性になります。また、両端の色同士は反対要素の関係性になります。グラデーションの配色には、類似の要素も反対の要素もあるので、調和しやすいと言えるでしょう。

色の重心を考えた配色も効果的です。

色にも「重い」、「軽い」のイメージがあるため、色の使い方によって紙面の重心は異なります。トーンが低い色を「重い色」といいます。

トーンが高い色を「軽い色」といいます。「重い色」をデザイン面の下部で使用すると重心が下がり、安定感のあるイメージになります。それを「低重心型」といいます。

その反対はデザイン面の上部で使用すると重心が上がり「高重心型」といいます。色の重心を意識することでデザインのイメージは異なります。下図の参考例を見てみましょう。

色の重心を考えた配色

上図の左側は重心が下部にあるため、デザイン面に安定感があります。動きのないイメージも感じられます。

上図の右側は重心が上部にあるため、安定感は感じられません。その反面、緊張感があり動きがあるイメージに感じられます。

トーンの重い、軽いを下図で見てみましょう。

重い色(トーンの低い色)

重い色(トーンの低い色)

軽い色(トーンの高い色)

軽い色(トーンの高い色)

トーンの高い色は軽い印象になり、低い色は重い印象になります。軽い色や重い色をどこに配色するかでデザインの重心はかわります。

デザインに使用する文字色は使用する写真でほぼ決まる!?

写真と文字色の関係とは?

デザインを行う際、写真の上に文字を乗せることはよくあることです。写真との関係性を考慮しながら文字色を選択する必要があります。写真のイメージに合った色を選ぶことで見栄えのする、美しく、かっこいいいデザインに仕上げることができます。

写真イメージに合わせた文字色の選び方とは?

写真の上に文字を乗せるときのポイントは、

  • 背景とのコントラストをつけること
  • 文字にはデザインの中でポイントとなる色を選択すること

上記2つがポイントになります。

大前提として、しっかりとコントラストを設定しておかないと、文字要素が読み手にとって読みづらくなります。そのうえで文字に色を使う際は、写真に含まれる色との相性が良い色を使う。もしくはデザインのポイントやアクセントになるような色を選択します。

どちらにしても写真自体の雰囲気を壊すことなく、写真の雰囲気を活かしたレイアウトをする際には無彩色の文字を採用することも良いでしょう。下図に具体例を制作してみました、見てみましょう。

写真の雰囲気を活かした場合

写真の雰囲気を活かしたい場合、文字を無彩色にします。無彩色にすると、写真との調和をとることができます。

写真や画像の雰囲気を引き立てるには書体選びも大切!

写真はデザイン全体のイメージを決定づけるため大きな役目を持っています。写真の上に文字を乗せる場合は文字色の選択も大切ですが、それ以上に目に入る形として使用する書体選択も重要です。

デザインした後に文字は入れない方が良かったということにならないようにしましょう。「写真」、「文字」、「色」の3要素が相乗効果を発揮できるように調整を行いましょう。

写真の雰囲気を引き立てるには書体選びも大切

「植木祭」の文字を丸ゴシックに変更しました。弱々しい印象があり、可愛らしい雰囲気が躍動的な写真とミスマッチです。

色の対比現象を知ることで色選択が上手になる!

色の対比現象とは、隣り合わせになる色と色が接したときに発生する影響です。単体で見る本来の色イメージとは異なる色に見えてしまう現象です。色自体は変わりませんが明らかに色が違うように見えてしまいます。

対比現象にはいくつかの種類があります。この記事では「明度」、「彩度」、「色相」の対比について見ていきます。

明度対比(めいどたいひ)

色面「3」を明度の異なる色の中央に配置します。すると周りにある他の色の影響を受けます。

明度対比

結果、本来よりも明るく見えたり、または暗く見えたりする現象です。この現象は明度差が大きいほど、はっきりと現れます。

彩度対比(さいどたいひ)

色面「3」を彩度の異なる色の中央に配置します。すると周りにある他の色の影響を受けます。

彩度対比

本来よりも鮮やに見えたり、またはくすんで見えたりする現象です。

色相対比(しきそうたいひ)

隣り合わせになる色同士が影響し合い色相が違うように見える現象です。

色相対比

「1+3」の中央にある「3」は色が黄色っぽく感じます。「2+3」の中央にある「3」は赤っぽく感じます。

補色対比(ほしょくたいひ)

色相が正反対にある補色同士を組み合わせます。するとお互いの色が強調されて彩度が増したように感じます。

補色対比

「1+3」の中央にある「3」は色がくすんで見えます。「2+3」の中央にある「3」はより鮮やかに感じます。

デザイン初心者は色や配色、トーンや調和のポイントを押さえるまとめ

  • 配色やトーン、調和等は色の作用により視認性が左右される。
  • トーンを揃えると調和がとれて美しくなる。
  • 色の重心をコントロールすることで見た目は大きく異なる。
  • 写真の上に文字要素を配置する場合には写真に使わている色を重視するか、無彩色を選択する。
  • 色の対比現象を知ることで適切な色選択をできるようになる。

デザイン初心者はトーンの調整が最初はわからなく、見た目の形であるデザインはよく出来ていても配色でうまくいかないことがあります。

デザインはさまざまな要素の調和をとっていくことで見た目に美しい、かっこいいという所にたどり着きます。まずは配色やトーンの調整をマスターして総合的なデザインの調和をとれるように心がけていきましょう。

自分で色の資料を作る際には、さまざまなものがあり何から手をつけてよいのかわからなくなります。まずは自分でデザインしたものについて、どのような色を使い調和をとっていったのかをデザインしたデータの中に記載しましょう。

その際、メインで使用した色とサブで使用した色玉を加えることで後から見直せる簡単な資料ができあがります。また、次回似たようなデザインをすることがあれば参考資料として使うことができるでしょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする