はじめに
こんにちは。株式会社ベーシックでデザイナー寄りのフロントエンドエンジニアをやっています。Uと申します。好きな食べ物はぶりしゃぶです。
UI/UXの重要性が説かれて久しいですが、社内のエンジニア仲間や個人開発をしている知人などから「自分はセンスがない」とか「お客さんに論理的な説明ができない」という悩みをよく聞きます。しかしですね。基本的な考え方をおさえれば、（"それなり"のレベルまでなら）誰でもデザインができるようになると私は思うのです！
ということで今回はそのような基本をお伝えするべく、よくあるWEBアプリケーションを例に「デザイン間違い探し」をつくってみました。いったいどこが違うのか？当ててみてください！
第1問 情報の順序を考えよう（例：乗換案内アプリ）
電車の乗換案内アプリはみなさん馴染み深いと思います。（弊社は2021年2月現在、テレワークメインになっているため乗車機会は減りましたが…）
こちらの画像も普段何気なく使っている乗換案内の画面のようですが、実はひとつ大きな間違いがあります。どこでしょうか？
解答・解説はこちら
第1問 解答
出発・到着駅入力エリアと、日時等詳細入力エリアが上下入れ替わっている！
↓正解はこちら！
第1問 解説
こういった入力パーツは情報の優先度・重要度を整理して、高い順から配置するとよいでしょう。
ポイントは、 ユーザーの思考順序を邪魔しない ことです！
たとえばこんな風に、ユーザーの頭の中を想像して書き出してみるといいですね。
- 「東京から新横浜の経路を知りたい」
- 「来週末の朝10時に到着したい」
- 「慣れていないので乗り換え時間を多くとりたい」
- 「新幹線ではなく在来線で行きたい」
1と2の重要度の高さは明らかなので上部に配置！（1に関しては、入力パーツのサイズも大きくなっていますね）
3、4の優先度はほぼ同列でしょうか。細かい順序は気にしなくてよさそうです。
もし項目の数が多くて困ったら、無理に一つ一つの順序を考えなくてもよいです。
重要度 高 ＞ 中 ＞ 低 の3グループに分類し配置するだけでもまずはオッケー！
第2問 情報の強弱を考えよう（例：ECサイト）
外出を控えるようになって、みなさんもオンラインでのお買い物が増えたのではないでしょうか。お手軽すぎるあまり、深く考えずにポチっとしてしまうんですよね〜。気をつけなければ…。
ということで、2問目はよくあるECサイトの商品検索結果より問題です。間違いはどこだ？？
解答・解説はこちら
第2問 解答
使われているフォントのスタイル（大きさ、太さ、色）がすべて同じになっている！
↓正解はこちら！
第2問 解説
「間違い」ではいろんな情報が一律で目に飛び込んできて、視線が迷子になりませんか？一方「正解」では、商品名・価格が瞬時に認識できます。
重要度の高い商品名と価格のフォントを濃く、その他の補助情報を小さく薄く表現する--つまり 情報に強弱をつける ことで、ユーザーの認知負荷が軽減されているのです。
レイアウト都合で配置の自由が効かない（スマートフォンアプリなど特に）……という場面においても、このように強弱を意識してサイズや色を工夫すれば、わかりやすさを損なわずに情報を配置することができますね！
今回のポイントまとめ
今回のテーマは 「情報の優先度・重要度を考える！」 でした。ポイントをおさらいしましょう。
- まずは要素を洗い出し、優先度をつけてみる
- 優先度が高い順に配置する
- 色や形で強弱をつける
これらを意識することで、ユーザーの操作手順・思考を邪魔しない、つまりストレスの少ないアプリになります
もちろん、ポスターやPOP、スライド等にもこのポイントが使えますのでぜひお試しください。
いかがでしたか？今後も「間違い探しでデザイン脳トレ」シリーズとしてこのような問題を出していく予定です。ご期待ください！