配色と目線誘導、明度のレイアウト

配色と目線誘導、明度のレイアウト

Pocket

色にはそれぞれ、隣り合わせた色、囲む色により影響を受けます。

配色の組み合わせについても目線を誘導するメインの色と、それを引き立たせる周りの色があり、それらが逆転すると構成レイアウトの目線が変わってきます。

白に目が行く

白に目が行く

グレーと白の構成ですが、白に目が行きます。

赤丸が置かれた白の領域に目線(意識)が誘導されます。

右側の画像は、周りの白に誘導され、差分のグレーに行き着きます。

余白が白い構成は多いですが、目線は、左の画像に比べて多少寄り道しています。


黄色に変えてみる

黄色に変えてみる

薄いグレーから明るい黄色に変えても目が行くのは白の領域です。

黄色の方が目が行くかたも、「明るい」「暗い」の「明度」を意識してみてください。


白を使わず黄色と水色

白を使わず黄色と水色

黄色と水色の構成に変更しましたが、ここでも「明度」の違いが表れます。


水色と緑

水色と緑

「明度」が僅差ですが、水色に目が誘導されます。


黄色と緑の構成

黄色と緑の構成

黄色と水色、
水色と緑、
2つの構成よりも黄色の明度差が引き立ちます。

何故でしょうか。


色の明るさ

色の明るさ

白を含めた7色を、色の明るい順(明度順)に並べてあります。

先ほどの「黄色と緑」の構成がより黄色が目立ったのは、隣り合わせの構成ではなく、水色を飛ばしコントラストが高まった影響です。


明度をグレースケールで確認

明度をグレースケールで確認

7色の色をグレースケールに変換すると明度の違いに納得ができるのではないでしょうか。


七色は光の三原色で構成

七色は光の三原色で構成

白はすべての可視領域の光(今回の場合は光の三原色)を含んだ一番明るい色です。

原則、一番明るい部分に目線は誘導されます。


明度の違いが小さい組み合わせ

明度の違いが小さい組み合わせ

隣り合わせた色で構成レイアウトしてしまうと、明度の差異が小さく見にくい組み合わせになります。


明度の違いが大きい組み合わせ

明度の違いが大きい組み合わせ

補色など、離れた色で構成レイアウトすれば、明度の違いによるコントラストが高まり視認性が上がります。


中間色で落ち着いた色へ

中間色で落ち着いた色へ

しかしながら、
明度はある程度離れていれば視認性は十分確保されるため、目に優しい中間色に落とすことで、疲れを意識する必要があります。


さいごに

印刷(色の三原色_CMYK)を必要としないデジタルサービスが中心となってきた影響もあり、スマートフォンの画面の中にはRGB(光の三原色)による目に刺さる明度の高い色が増えてきました。

明度の違いを上手に取り入れながら、計算された配色レイアウトを意識していきましょう。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です