![見出し画像](https://assets.st-note.com/production/uploads/images/161043719/rectangle_large_type_2_9fe6ad551a8c55e162bb400c8a6f4cf8.png?width=1200)
コントラストやメリハリは薄目で確認しよう
デザインを作成するとき、じぶんでは気が付かず人から指摘されることが多い、「コントラスト」「メリハリ」を、簡単に確認する方法をご紹介します。
コントラストを確認する
色差のコントラストは、専用のツールを使って確認できますが、今回はもう少しサッと手軽にできる方法です。それは
![](https://assets.st-note.com/img/1731036839-aAGN2B6Shqxl1zY5LVtm0FDe.png?width=1200)
薄目で見てみることです。
例えばこちらのバナー、普通の状態であれば、どちらの文字も「読める」という方が多いと思います。
では、次に目を細めて見てみてください。
![](https://assets.st-note.com/img/1731040916-DXaonHyiZeJUklVjWmz6db3F.png?width=1200)
これを薄目で見るとこんな感じに見えていると思います。
読めるかどうかではなく「文字の形が背景に対してくっきりしているか」というのが見極めのポイントです。「背景と溶け合ってしまって形がくっきりしない文字」は、背景に対してコントラストが低いです。
![](https://assets.st-note.com/img/1731040929-KGNFD1QadInwrWckfqzEhe7o.png?width=1200)
なぜ薄目を開けるのかというと、人間は「読める文字は頑張って読んでしまう」という習性があります。
この「頑張って」というのが良くないポイントです。バナーやチラシなど、ユーザーが能動的に目にするわけではないデザインは、「そもそも見てもらえない」前提で作らなければいけません。「頑張らなくても読める」ことが最低ライン、「読んでるつもりもないのに頭に入ってくる」を目指す必要があります。
デザイナーはテキストの中身を知っていますし、何時間もデザインと向き合っているうちに「頑張ったら読める」も「読める」になってしまうのです。そういった状況を剥がすためにも、薄目で見ることは有効です。
メリハリを確認する
色のコントラストだけでなく、デザインの中のメリハリを確認するのにも薄目で見てみるのがおすすめです。
下のバナーですが、よくある「平面的に並べてしまい、写真や文字の形から生まれる余白がデッドスペースとして空いている」例です。
![](https://assets.st-note.com/img/1731040962-Kfw4e3xVyhzoW6MBmPgJ8Env.png?width=1200)
これを薄目で見るとこんな感じに見えていると思います。
![](https://assets.st-note.com/img/1731040976-K8yTanAjpO4UH9ZNxs2iv5ql.png?width=1200)
特に背景色がある場合、色があるゆえに「空いているのに空いていない」ように錯覚してしまいます。それを薄目で見ると、小さい物が見えなくなったり色がはっきりしない分、物が置いてあるところとそうでないところがわかりやすくなります。
まとめ
目を細めるだけなら、デザイン作成中にいつでもできます。自分で気がつくのはなかなかむずかしいですが、デザインの仕上げの段階などにぜひ取り入れて見てください。
いいなと思ったら応援しよう!
![spicagraph](https://assets.st-note.com/production/uploads/images/5457943/profile_ae20d4d0235950a75f521f8782837776.jpg?width=600&crop=1:1,smart)