UI作成でカラーリングは重要な要素ですが、中でもコントラストは大切です。ちょっとしたコントラストの差で見え方が変わってきます。
同じ黒系でも見え方が異なる
レイアウト講座の受講生の作品で、上手なデザインをされている方がいたのですが、情報の優先度が低い[SPEAKER]の背景のコントラストがキツイことで、スピーカー名より、カテゴリを示す項目のUIが目立ってしまうデザインがありました。
他の箇所では黒系統の「#3E3F43」でデザインされているので、それらを利用することで統一感がでます。
何を伝えたいのかを考慮する
キャンプ場を紹介するサイトでも、リンクボタンを目立たせ過ぎてしまって大切な画像やテキスト等のコンテンツが目立たなくなっているケースがあります。
ボタンのテキストも、全部[キャンプ場一覧はこちら]と単調です。
コンテンツで重要なテキスト・画像よりボタンが目立ち過ぎていませんか？
ボタンはCTAでもあるので重要ですが、何をこのページでは伝えるべきかの優先度を付けましょう。
コントラストで、優先度の表現が変わってくるので考慮して設計しましょう。「詳細はこちら」などの、リンクを示す内容の方が目立ち、コンテンツに集中できない邪魔な存在になっていることもあります。
バナー・リンクがあることをアフォーダンスでわかるようにさせる
「詳細はこちら」の言葉が入ってしまう理由として、ユーザーがリンクがあるかを認識できていないため入れていると予測されます。
デジタルのアフォーダンスがUIに実装できていれば、この問題は発生しません。操作を言葉にするのはNGという内容の「言葉を添えなければならない悪いデザイン」記事も公開しましたが同類の問題です。
まとめ
- 優先度を決めてからコントラストを利用してデザインする
- 伝えたいものは何かをハッキリさせる
- 全てを目立たせようとしない
- デザインにアフォーダンスを用いてユーザーを誘導しよう
