コントラストを上手に利用してユーザーをナビゲートする

UI作成でカラーリングは重要な要素ですが、中でもコントラストは大切です。ちょっとしたコントラストの差で見え方が変わってきます。

同じ黒系でも見え方が異なる

レイアウト講座の受講生の作品で、上手なデザインをされている方がいたのですが、情報の優先度が低い[SPEAKER]の背景のコントラストがキツイことで、スピーカー名より、カテゴリを示す項目のUIが目立ってしまうデザインがありました。

SPEAKERの背景が[#000000]なのでコントラストがキツく目立ってしまっている

他の箇所では黒系統の「#3E3F43」でデザインされているので、それらを利用することで統一感がでます。

他の場所で黒系の[#3E3F43]を利用しているので統一すると良い

何を伝えたいのかを考慮する

キャンプ場を紹介するサイトでも、リンクボタンを目立たせ過ぎてしまって大切な画像やテキスト等のコンテンツが目立たなくなっているケースがあります。

画像よりボタンが目立ち過ぎてしまっている

ボタンのテキストも、全部[キャンプ場一覧はこちら]と単調です。

コンテンツで重要なテキスト・画像よりボタンが目立ち過ぎていませんか?

blank
「詳細はこちら」が多すぎ

ボタンはCTAでもあるので重要ですが、何をこのページでは伝えるべきかの優先度を付けましょう。

コントラストで、優先度の表現が変わってくるので考慮して設計しましょう。「詳細はこちら」などの、リンクを示す内容の方が目立ち、コンテンツに集中できない邪魔な存在になっていることもあります。

バナー・リンクがあることをアフォーダンスでわかるようにさせる

「詳細はこちら」の言葉が入ってしまう理由として、ユーザーがリンクがあるかを認識できていないため入れていると予測されます。

デジタルのアフォーダンスがUIに実装できていれば、この問題は発生しません。操作を言葉にするのはNGという内容の「言葉を添えなければならない悪いデザイン」記事も公開しましたが同類の問題です。

まとめ

  • 優先度を決めてからコントラストを利用してデザインする
  • 伝えたいものは何かをハッキリさせる
  • 全てを目立たせようとしない
  • デザインにアフォーダンスを用いてユーザーを誘導しよう
blank

大本 あかね

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。