昨今、システムやアプリ、WEBサイトでは「使いやすい」「分かりやすい」ようなデザインが求められています。
そんなニーズに応えるために注目されているのが、UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）です。
ここでは、UI/UXについての概要と、システムやアプリの画面デザイン時に押さえておきたいポイントについて紹介していきます。
目次
UI（ユーザーインターフェース）とは
UI（ユーザーインターフェース）とは、人とシステム（アプリ）が触れる接点である「画面から得られる情報群」のことです。
具体的には、あなたがシステム（アプリ）を使う際に目に飛び込んでくる
- 画像
- テキスト
- ボタン
- アイコン
などのことです。
UX（ユーザーエクスペリエンス）とは
一方、UX（ユーザーエクスペリエンス）とは、人が「システム（アプリ）を使うことで得られる印象や体験、経験」のことです。
UIと混同されがちですが、例えば先ほど挙げた「画像」「テキスト」「ボタン」といった要素がUIであるならば、UXはそれらの要素を見たユーザーが感じた
- 画面の印象
- 初見でのシステム（アプリ）に対する抵抗感
- 使い勝手の良さ/悪さ
- 読み込み速度によるストレス
- システム（アプリ）を使うことで得られたメリット/デメリット
などが挙げられます。
UIは画面に限定した情報ですが、UXは画面だけでなくシステム（アプリ）全体を通しての情報になるので、UIを改善することでUXにも影響が出るなど、この２つの要素には密接な関わりがあります。
システム、アプリのUI/UXで押さえておきたいポイント
実際にUI/UXを考慮してデザインする場合、押さえておきたいポイントが大きく４つあります。
順番に見ていきましょう。
デザインテイストの統一
まずは、デザインテイストの統一です。
一般に、「フラットデザイン」「マテリアルデザイン」など、色々なデザインテイストの総称がありますが、これらのどれを適応するかは、システム（アプリ）がユーザーに与えたい印象や、想定されるユーザーの年齢や性別といった情報から選択します。
よりニーズにあったデザインテイストを選択できればベターではありますが、それぞれに使いやすくするポイントはあるので、どれを選んでもUI/UXに有利・不利はないとされています。
ただし、フラットデザインが主体となっているのにボタンだけがマテリアルデザインとなっていたり、ページによってデザインテイストが違っているような場合は、ユーザーに要らぬストレスを与えるので良くありません。
しっかりとデザインテイストは全体で統一していきましょう。
ボタンの位置
「操作性」の向上としてボタンの位置はしっかりと考えて配置していきましょう。
ユーザーが自然な流れでボタンを押せることが、UI/UXの向上につながります。
YES系ボタンは中央か一番右下
まず、YES系ボタンは中央か一番右下に配置しましょう。
YES系ボタンとは、「次へ」「登録」「更新」といった、ユーザーに次の行動に進んでもらうことを促すボタンです。
人間工学の観点から、人の視線は左上から右下に向かって流れていくことがわかっています。
そのため、画面のタイトルや入力欄を左上から配置していき、右下のボタンで完結することが一番自然な操作性となります。
ただし、デザインによっては右下にボタンを配置すると浮いてしまうこともあるため、YES系ボタンは中央でも可とされています。
NO、 キャンセルボタンはYES系ボタンよりも左に配置する
NO、キャンセルボタンも、画面全体で見ると右下の方に配置するのがベターです。
行動としてはYES系と同じで、入力が進んでいって最後に行動を止めるという動作になりますので、画面のタイトルや入力欄を左上から配置していき、右下のボタンで完結することが一番自然な操作性となります。
しかし、システム（アプリ）において一番促したい行動は、戻ることではなく進むことなので、YES系ボタンが一番右端の一番自然に行動できる位置に配置され、NO、キャンセルボタンは次に自然に行動できる位置に配置されます。
また、YES系ボタンと混ざると誤操作を誘発するため、YES系ボタンとはデザインを変えて配置する必要があります。
一覧へ戻るボタンは左上に配置する
一覧へ戻るボタンは左上に配置されることが多いです。
「一覧へ戻る」という動作は、入力に対する「YES」「NO、キャンセル」とは関係がない別の動作になります。
そのため、あえて遠い場所に配置することで誤動作を防ぐ狙いがあります。
また、画面遷移後すぐに前のページに戻る可能性があったり、一般的なイメージとして画面は右に右に進んでいく印象があるので、前の画面に戻る際は左側に戻るもの、と認識するとされているため、左上に配置されるケースが多いです。
色
システム、アプリ、サイトなど、何のデザインを作る際でも、UI/UXにおいて、色が与える印象というのは大きいです。
推定されるユーザーの年齢やシステム（アプリ）の種類、使用場所などから、色が与える印象や影響を考慮して色を決める必要があります。
例えば、使う場所が病院なのに黒や赤をメインとしていたり、推定ユーザーが高齢者なのに目がチカチカするようなビビットカラーというのは、一般常識的には相応しくはありません（あえて他に何か狙いがあるのならば良いですが）
システム（アプリ）に合わせた色を決めていくことで、ユーザーは抵抗なく利用することができるのです。
色を決める際、組み合わせに迷うことがあります。
そんな際は、Googleが提供しているカラーツールを使ってみると、組み合わせの良い色を簡単に知ることができます。
動線
UI/UXにおいて、ユーザーが「期待した通りに動けるか」ということを評価する上で動線が重要になってきます。
ボタンの位置も動線の一つですが、そのボタンやリンクで行われる画面遷移も動線の一つにあたります。
「期待した場所に期待したものがあり、それを押すことで期待した動きができる」それがUI/UXとして評価が高いということです。
図を描いてみる
「どの画面の何をクリックしたらどこに飛ぶのか？」を整理するために、簡単に図に描いてみると良いでしょう。
図で視覚的に表すことで、切れていた動線を見つけやすくなったり、もっと良い動線が見つかったりします。
関連項目はまとめる
基本的に、関係しているリンクやボタンは１箇所にまとめましょう。
点在していると、ユーザーに探させることになっていまいます。
あまりにも関連項目が多い場合は、もう少し細かいグループに分けて配置する方が親切です。
まとめ
UI/UXデザインの押さえておくべきポイントについて紹介してきました。
これらに共通することは、「いかにユーザー目線に立てるか？」ということです。
「誰が使うんだろう」
「使う上で問題となるのは何だろう」
「どうやったら、もっと使いやすくなるだろう」
こういったことを考え、研究されてきた結果がUI/UXです。
UI/UXデザインを行う際は、ノウハウやテクニックも良いですが、まず大前提として「ユーザー目線」に立ってシステムやアプリを見るということを意識してみてください。
