文字が認識できない！リープマン効果とその対策！色選びの基本から解説します！

みなさんこんにちは！長崎のクリエイター ウズラです。

今回は、色の選び方を基本からお教えしたいと思います。

この記事はデザインの基本であり、応用としてもずっと活用することができます。

リープマン効果の解説

早速ですが、以下の画像を見て下さい。

かなり文字が見え辛いと思いませんか？

なんとなく見ているだけで目が疲れてきます。

なぜ、このような印象を持ってしまうのでしょうか？

それは、背景の色と文字の色に明るさの差が少ないからです。

このように、隣り合う色の明度差がなくチラチラとした印象になってしまうことをリープマン効果と言います。

これは、赤と緑だけではなく、以下の通り様々な色で発生します。

この効果、実は身近なところでも見る機会があります。

例えば、YouTubeを見ていると、このようなサムネイル画像を見ることはありませんか？

見辛い以前の問題かもしれませんが（笑）やはり文字が見辛いですね。これもリープマン効果が起きている例です。

さて、目がチカチカする画像をたくさん見ていただいたので、そろそろ解決策として、文字が見やすい画像をお見せしたいと思います。

リープマン効果の解決策１：文字に縁（フチ）をつける

リープマン効果は、隣接した色で条件が一致した場合のみおこなります。

つまり、隣接しないように、縁をつければいいのです。

どうでしょうか？

あれだけチカチカしていたのに、縁をつけるだけでこんなに見えるようになりました。

どうですか？見やすいでしょう？

え、見やすいけどしっくりこない？

そうなんです。これは実はリープマン効果を強引に解決したパターンで、デザイナー目線でみると、「そもそも配色変えようよ...」と思います。

リープマン効果を解決しても良い配色になるとは限らないので...

例えば、背景に様々な色が混ざっていて、どの色を置いても見えづらい部分がある場合などは、縁をつけることで対応しましょう。（縁以外でも他にも表現方法はありますが、リープマン効果以外の回でしたいと考えているので、今回は割愛します。）

そこで、もうひとつの対策がこちら

リープマン効果の解決策２：色自体を抜いて見やすくする

縁をつけることも解決策ではあるのですが、どのようなデザインにでも縁をつけることが解決とは限りません。

基本的には色自体の見直しをすることをおすすめしています。

この記事のメイン画像を見て下さい。

実はこの中に答えが書いています。

はい、縁をつけなくても”リープマン効果とは？”の文字はすっきり見えますよね？

さっきの縁をつけた解決策よりも。

鮮やかな色に鮮やかな色を組み合わせることは決して得策ではありません。

このような事をしてしまうと、目線が散らばり、どこを強調したいのかわからないデザインになってしまいます。

それよりも、文字を白にすることで赤という色の特徴を殺すことなく、文字も強調することができます。ちなみに背景が黄色の場合は黒や茶系統の色があいます。これは白や黒といった無彩色で解決したパターンです。

それと別に、赤青黄色といったグレースケールで表現できない色（有彩色）でも解決する方法もあります。

リープマン効果の解決策３：色相環で色の組み合わせを判断する

以下の画像をみてください。

これは、色の種類を円形に並べたもので、色相環といいます。（わかりやすくするために、12色だけにしていますが実際はもっと細分化され虹色に見えるように並びます。）

また、わかりやすいように黄色が頂点にくるように配置をしています。

上に行けば行くほど明るい色で下にいけば行くほど暗い色です。

以下のグレースケールにした画像を見れば一目瞭然だと思います。

※もちろん同じ青でも明るい青もあれば暗い青もあるので色自体の明度を調整することで解決もできるのですが、色の基本を勉強して頂くため、どの色も原色バリバリのビビッドカラーだという前提でお話します。

この色相環を覚えておいて下さい。

その上で、良い色の組み合わせを作るコツをお教えします。

色相環から見る色の組み合わせの選び方

それは、色相環の上の方の色と下の方の色を選ぶだけです。

一番わかり易い例でいうと黄色と青です。

するとこうなります。

下の図の通り、青と黄色は色相環の間で高さに差があるので見やすい配色といえるのです。

------------------------

さらにもうひとパターン。

黄色ほどの見やすさはないにしても、こういうオレンジ系統と青系統の配色も見やすくていいですね。快眠グッズのデザインで使えそうですねw

------------------------

逆に色相環の上下が近い色を選んでみましょう。

はい、見辛いですね。なぜかというと、下の図の通り2色が色相環の間で高さに差がないからです。

------------------------

さらにもうひとパターン。

完全なるリープマン効果ですw

というふうに、この色相環の色の高さを意識するだけで、リープマン効果を避けることができ、良い配色の組み合わせができるようになります。

例えば、空に黄色の文字を入れてみましょう。

何の処理をしなくても見やすいでしょ？

さらにもうひとつ！

こちらは高級感をより出すために、グラデーション＋ドロップシャドウを少々かけましたが、配色の相性がいいと、このように雰囲気作りをすることができます。

皆さんも色が見えづらくて困った時は、この色相環を意識してみてください。

最後に

いかがでしょうか？

今回はリープマン効果とその対策として、そもそもの色の考え方について基本的な色の選び方を紹介しました。

しかし、最終的には感覚です。イチイチ色相環を意識しなくても、無意識にいい色を選ぶことができるようになってきます。

まずはトライアンドエラー！うまく行かない時は色相環とにらめっこしながらデザインを楽しんでみてください！