WEBデザイン小ネタ集：ハレーションを知ってちゃんとした色の組み合わせを知ろう！

2015/11/29

初めまして、東雲です。
初めてでない人はこんにちわでしょうか？
今回ご紹介する小ネタは色に関する事で『ハレーション』です。
これを知っていると”見やすいサイト”に一歩近づくことが出来ます。

ハレーションって何？

ハレーションをものすごくざっくりと説明すると、
「目がチカチカするような色の組み合わせ」の事を言います。

ちょっとこの画像を見て下さい。



…こう、目がチカチカしませんか？
文字にするとこうなります。



多分大部分の人が「文字見づらいよ！？」と思ったと思います。
このような現象をハレーションと呼ぶのです。

どんな組み合わせで起こっちゃうの？

さて、ハレーションというのは色の組み合わせで起こる現象です。
組み合わせなのですから、”起こる組み合わせ”と”起こらない組み合わせ”というのが存在します。

◆ハレーションが起こる組み合わせ

この画像で例えると、ハレーションが起こりやすい組み合わせというのは
「２つ色の違いがはっきりしていて、更にどちらも色が濃く、更にどちらも明るい」
という感じになります。

◆ハレーションが起こらない組み合わせ

逆に言えば、そうならない組み合わせではハレーションというのは起こりづらいです。

知って得する安全策

ハレーションが起こる組み合わせと言うのは基本的には避けたいところ。
ですが、どうしても…どうしても！ということがあると思います。
そんなときのための安全策をおひとつ紹介しておきましょう。

さて先程の画像

文字が見づらいと誰もが思うこれを、ちょいちょいと弄ると……

見やすくなった感じがしませんか？
このように、間に白を挟んであげると改善されます。組み合わせによっては黒とかでもOKです。ちなみに、こうやって間に挟む色を”セパレーションカラー”なんて呼んだりもします。

ハレーションに関するお話でした。

派手な色と言うのは目立つのでついついたくさん使いがちですが、沢山使うと色が反発して見づらくなってしまいます。
WEBデザインの観点からみれば、画面を見続けても疲れないように配慮しなければなりません。そうならないためにも組み合わせが大事なんだ、ということが伝われば良いなと思います。

余談ですが、ハレーションを起こす組み合わせは絶対にやっちゃダメということはないです。逆に活かせるようになったらそれはもう素晴らしいことだと思いますので、色々試してみることをオススメしたいです。