はじめに
今回、UI デザインについて勉強したく、以下の 2 冊の書籍を読みました。
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために
これらの書籍には、アプリケーションを開発する上で意識すべき UI デザインのポイントがたくさん書かれていました。
そこで、今後の開発に活かすために、個人的に重要だと思った UI デザインのポイントをいくつかピックアップして、まとめてみました。
個人的な備忘録にはなりますが、同じように UI デザインについて学びたい方の参考になれば幸いです。
対象読者
注意点
UI デザインで意識したいポイント
① 色数はむやみに増やさない
1 から 9 までの数字をランダムに並べてみました。
この中に 7 がどこにいくつあるかを数えてみてください。
全ての数字が同じ色で表示されているため、7 を見つけるのが難しいことが分かります。
次に、7 のみ色を変えてみました。
すると、7 を見つけるのが容易になったことが分かります。
最後に、1 から 6 の数字にもそれぞれ色を付けてみました。
すると、またしても 7 を見つけるのが難しくなりました。
このように、色を付けることで、ユーザーが目的の情報を見つけやすくすることができますが、逆に色を増やしすぎると、ユーザーが目的の情報を見つけるのが難しくなるため、色数は適度に抑えることが重要です。
② 色の意味
色には、それぞれ固有の意味を持つものがあります。
一般的によく使われるものとしては、以下のようなものがあります。
それぞれの色の意味を意識して、ボタンやリンクの色を設定することで、ユーザーは直感的に操作を理解しやすくなります。
③ 文字の可読性
文字の可読性には、背景色との明度差が確保されていることが重要です。
明度が低い色に対しては、明度の高い色を使うと可読性が向上します。
逆に、明度が高い色に対しては、明度の低い色を使うと可読性が向上します。
④ 変化があることで、入力されたことが分かる
例えば、アプリケーションにコピーボタンが設置されているとします。
このボタンを押したときに、何も変化がないと、ユーザーはコピーされたかどうか分かりません。
そのため、ボタンを押したときに変化があることで、ユーザーはコピーされたことを確認することができます。
以下の例では、ボタンを押すと、ボタンのテキストが変わり、コピーされたことが分かるようになっています。
⑤ アイコンにはラベルを添える
アプリケーションを開発する中で、アイコンを使うことがあると思います。
その中で、検索アイコンのように、アイコンだけで意味が分かるもの、ほとんどのユーザーが同じ意味だと認識しているものは、ラベルを添えなくても問題ありません。
しかし、ユーザーアイコンのように、アイコンだけではどんな意味か分からないもの、場所やタイミングによって意味が変わるものは、ラベルを添えることが重要です。
以下のように、アイコンにはラベルを添えることで、ユーザーはアイコンの意味を理解しやすくなります。
⑥ コントラスト（対比）
2 つ以上の要素があるとき、それらに生じている認知の大きさの違いをコントラスト（対比）といいます。
色を変える、サイズを変える、形を変えるなどをすることで、ユーザーの意識を誘導することができます。
以下の例では、ライオンのサイズを大きくすることで、ユーザーの意識をライオンに誘導しています。
⑦ 「ひとつ戻る」と「最初に戻る」を担保する
アプリケーションには、「ひとつ戻る」ボタン、「最初に戻る」ボタンをそれぞれ用意することが重要です。
「ひとつ戻る」ボタンは、ユーザーがひとつ前のページに戻ることができるボタンで、「最初に戻る」ボタンは、ユーザーがトップページに戻ることができるボタンのことを指します。
以下の例では、「戻る」ボタンを押すと前のページに戻ることができ、「Test App」というロゴを押すとトップページに戻ることができるようなデザインになっています。
まとめ
ご紹介した書籍には、まだまだたくさんの UI デザインのポイントが書かれていましたが、今回は個人的に意識したいポイントをいくつかピックアップして、まとめてみました。
UI デザインを工夫することで、同じ機能を持ったアプリケーションだとしても、ユーザーにとってより使いやすく、より魅力的なアプリケーションにすることができます。
もっと UI デザインについて学び、今後のアプリケーション開発に活かしていきたいと思います。
最後までご覧いただき、ありがとうございました。
Discussion