毎年新しい戦隊が発表されるとグリーン担当がいるか、どんなキャラかを毎回チェックしてしまう橋本です。
プリキュアはグリーンが少ないんや……なんでや……女児には人気ないんか……。
どんな色のキャラクターがいるかで全体のイメージが変わりますよね。
さて今回は、色の組み合わせの罠についてのお話です。
こちらの画像、こんな色を使いたいです！と指定されることがある、いわゆるかわいい系カラーです。
なんとなく、秋・夏・春のイメージですね。ふわっとした中に落ち着きもあって、女性に人気がありそうな気がします。
これらは「中差色相配色」に該当します。英語では「インターミディエート」で、だいたい色相環で90度くらい（60度〜105度）の配置になる色の組み合わせです。
バランスのとれた配色として紹介されているのも見かけます。
いや〜良い組み合わせじゃないですか！……と、そそくさと画面を作り始めると、目の前がぐるぐるし始めることに。
シンプル・スッキリ系にしたくて細い線や文字をメインに配置すると、結構きついものがあるんです。
個人差がありますが、中にはひどいちらつきを感じる人がいます。
隣接する色の対比効果によって起こるグレア効果によるちらつきです。
このグレア効果は色相差が大きく明度が近い色同士で起きやすくなります。
先ほどの色の彩度を落として明度を比べると、
明度がとても近いです。
チップ状の色面だけ見ていると平気なのに形を持たせるとちらつくって、人間の目って不思議ですね。
画面や紙面ではなく、服やメイク、ネイルといったファッション分野では、こうした配色を見てもちらつきを感じることはあまりありません。
（ファッション好きな人ほどこの配色が好きな気もします）
ファッションの場合
WEBサイトやパンフレットなどの場合
こうした違いがあるのかなと思います。
さらにスマートフォンだと画面が狭いのと、容量削減のために画像素材などをなるべく控えるので、質感が少なく要素が詰め込まれた画面になりがちです。
画面のライトで目が疲れるのもあって、コントラストで「ヴッ」となりやすくなります。
明度が近いほどちらつくわけで、明度差が開くように調整すると割と見やすくなります。
あとは透過率を変えたり、色面と色面が接する線を減らしたり、文字だけ濃くしたり……。
色を変えずにちらつきを抑えるにはどうしたらいいか。
狭い面積の要素や文字を読む必要がある場所で色を見分けようとして目がチラつくので、色の面積を増やすと良さそうです。
あとは色ごとに置く場所をまとめたり、
メインの２色とは違うアクセントカラーを入れてみたり、
いっそグラデーションにしたり……。
かなり雰囲気変わっちゃいますね。
情報量が多い場所を見るときに他の要素がケンカしないように、色がなじむようにするか、逆にくっきり見分けられるようにするか。
その辺に気をつけるしかないかなあと思います。
カラーチップで見ていたときには問題なくても、レイアウトされた要素に反映させて画面で見てみると印象が変わることはよくあります。
カラーを決めてからワイヤーフレームにあてることは昔から多いので、結構あるんじゃないかな〜。
テーマカラーや最初に決めた雰囲気から大きくブレていなければ、配色は最初に決めたものに固執せず調整して行くことが大事だと思います。
ディテールを詰めることで何とかできることはありますが、スマートフォンでフラットデザインとかだと自由度が少ないので、色の役割が大きくなります。
寿司とチョコレート、どっちも美味しいし並べて見るのは楽しいけど一緒に食べたら最悪、みたいな組み合わせ、色にもあるのです……。
