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

2015/11/29

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

ハレーションって何?

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

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

hare01

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

hare02

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

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

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

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

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

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

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

知って得する安全策

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

さて先程の画像
hare02

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

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


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

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

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

投稿者情報

東雲楓

店内装飾やらPOPを作り続け、今ではWEB関係にも手を出してます。
色々広く浅く勉強中だけど、そろそろ一本に絞りたい今日このごろ。

>> 東雲楓が執筆した他の記事を読む

法人向け人気レンタルサーバー
法人向け人気専用サーバー
個人向け人気レンタルサーバー