明度とは_配色と視線誘導のレイアウト | デジマースブログ

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

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

白に目が行く

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

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

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

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

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

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

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

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

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

何故でしょうか。

白を含めた７色を、色の明るい順（明度順）に並べてあります。

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

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

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

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

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

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

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

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

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

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

他の記事をさがす ⇒ 記事一覧へ