UI（User Interface）とは

UIとは、ユーザとシステムやサービスの接点のことを指します。
具体例として、Webサイトやテレビのリモコンなどが該当します。

UX（User Experience）とは

UXとは、ユーザがサービスや製品を知ってから忘れ去るまでのすべての「体験」を指します。
使いやすさだけでなく、楽しい・満足といったユーザ自身が受ける主観的な感情も含まれます。

UIとUXの関係性について

UXに比べ、UIが扱う範囲は限定的ですが、UXの中でも特に重要な「使う」といった要素を担っており、UXの中でも中核となる存在といえます。

ここからは、ユーザにとって使いやすいUIとはどのようなものか、デザインのポイントについて解説します。

インタラクションコスト

UIについて語るうえで重要な概念として、「インタラクションコスト」というものがあります。
インタラクションコストとは、ユーザが受ける負担・支払うエネルギーのことで、大きく精神的負荷・身体的負荷に分類されます。
精神的負荷・身体的負荷が少なければ少ないほど、ユーザはそのサービスを「使いやすい」と感じるため、インタラクションコストを最も小さくすることが、良いUIの指標になります。

精神的負荷を減らすには？

精神的負荷とは、ユーザが画面内から目的のものを探すとき・文章を読むとき・選択肢から適切なものを選ぶときに発生する精神的な労力を指します。

避けるべきデザイン

• ぱっと見判断がつきにくいデザイン
• ユーザが考える必要があるデザイン（直感的に操作できないデザイン）

NG例は、ラベルと誤認される可能性がある。一目でボタンと分かるようなデザインが◎

システムを扱うのはユーザであるため、ユーザが主語の言葉を選ぶとよい

身体的負荷を減らすには？

身体的負荷とは、クリックする/スクロールする/スワイプするといったように、人間が物理的に体を動かすときに発生するエネルギーのことを指します。

避けるべきデザイン

• クリックもしくはタップしづらいデザイン
• 移動が多いデザイン
• 目的のものが遠いデザイン

×ボタンのサイズが小さい場合、誤タップを招き意図しない画面遷移が発生してしまうのでボタンサイズを考慮する

LPサイトの場合、CVボタンが画面最下部にしかないとユーザの離脱につながる。 適宜CVボタンを配置するなど工夫が必要

では、インタラクションコストを減らした良いデザインとは具体的にどのようなものか、数あるデザインの基本原則から3つご紹介します。

一貫性

サービスの世界のなかでデザインを統一することで、デザインの意味・操作方法をユーザが予測できるようになります。

⭐意識するポイント

• ✅サービスごとにデザインガイドラインを作成し、ブランディングを統一する
• ✅マルチデバイスなサービスの場合も、根本的なデザインはそろえる

シンプルさ

必要な情報や機能だけを提供し、余計なものを省くことで、人間の認知できるリソースを有効活用できます。

⭐意識するポイント

• ✅目的・ターゲットを明確にする
• ✅コンテンツの優先順位をつける

共通概念

ゴミ箱のアイコンは「削除」、フロッピーディスクのアイコンは「保存」といったように、これまでさまざまなデザインで既知となった共通概念をそのままの意味で利用します。
そうすることで、ユーザの理解と解釈、学習にかかる脳の負担を軽減できます。

⭐意識するポイント

• ✅アイコンボタンを採用する際は、普遍的な意味で使用する

他にも様々なデザインの原則がありますが、いずれも共通していかに使う人のストレスを減らせるかが根本にある考えとなります。

以下、本記事のまとめとなります。

• UIとはユーザとシステム・サービスの接点であり、UXはユーザがサービスから受けるすべての体験を指す
• UIは、UXの一部であるが、UXの中でも中核となる存在である
• 良いUI＝ユーザにとって使いやすいUIとは、インタラクションコストが小さいデザイン
• 数あるデザインの原則は、いずれも共通して「ユーザの使用時のストレスを減らすこと」が根本にある考えである

良いUIデザインとは、単純に見た目の美しさだけでなく、ユーザの目線に立って考えられていることが重要であると分かりました。
Webサイトやアプリ等のUI設計の際に、本記事の内容を役立てていただけますと幸いです。

最後までお読みいただき、ありがとうございました。