UI と UX

ウェブ開発、特にウェブデザインについて調べると「UI」や「UX」という言葉をよく聞きます。 この 2 つ、「違いがわからない」「つまりどういうこと？」となりがちなので、ここで簡単に紹介します。

参考サイト：M-HAND BLOG 今さら聞けない！ UI（ユーザーインターフェース）とは？

UI とは

UI はユーザーインターフェイス（User Interface）の略です。 ユーザーと何かとの接点（インターフェース）を全て含めてこう呼びます。 操作するものも、目にするものも、全てインターフェースです。

ウェブサイトにおいては操作性や視認性のことをさすことになります。

UI が悪いウェブサイトはすなわち使いにくかったり、見にくかったりするウェブサイトであり、望ましくありません。 ただし、UI の良し悪しはユーザーによって異なるため、注意が必要です。

UX とは

UI と似て非なる概念として UX があります。

UX とは、ユーザーエクスペリエンス（User Experience）の略です。 ユーザーが得られる体験のことを指します。

ユーザーは何らかの目的を持ってウェブサイトにアクセスしています。 多くの場合、この目的がより早く、より簡単に、より正確に成し遂げられることでユーザーは良い体験をしたと感じられるでしょう。

もし UI が悪い、つまり操作がしにくかったり、情報が見にくかったりするとどうでしょう？ ユーザーは目的を達成するのに時間がかかったり、労力が必要だったり、誤りが起きてしまったりすることで、良い体験を得られないでしょう。

必ずしも UI が良ければいいというものでもありません。 例えば画像や映像のサイズが無駄（ユーザーが求める以上）に大きかったり、サーバーの処理速度が遅かったりすることで、ページの読み込み速度が遅ければ、ユーザーは良く感じないでしょう。

なお「多くの場合」としたのは場合によってはユーザーが意識していなかった潜在的な目的を叶えることによって良い体験をしたと感じられることもあるからです。 スーパーに買い物に行ったら好きな芸能人とばったり会えた！　みたいなことです。

UX を向上させるウェブサイト設計

ところで、あなたが何らかのウェブサイトにアクセスするとき、どんな目的を持っていますか？ そしてあるウェブサイトを使う目的はいつも一定ですか？

例えば YouTube なら、好きな YouTuber の動画を見たいときも、テキトーに面白そうな動画を見つけて見ようとしているときもあるでしょう。

また、同じウェブサイトを使う場合でも、ユーザーによって目的が異なることもあるでしょう。

さまざまな需要を想定し、ターゲット層の気持ちになってウェブサイトを使うことをイメージしながら設計することで UX を向上させることができます。 ちなみにビジネスっぽい用語でユーザーペルソナを明確にして想定しながら作る、とか言ったりするらしいです。

アクセシビリティ

アクセシビリティ（accessibility）とは「利用しやすさ」と言った意味の用語ですが、Web では「どんな人にとっても使いやすい」ということを指します。 昔は障害（特に視覚など）を持っている人にとっての利用しやすさでしたが、現在ではより広義的に、「PC でもタブレットでもスマホでも」といった意味も持っています。

音声読み上げができるようにしたり、タッチだけでできるようにしたり（スマホでは右クリックにあたる動作ができない）、キーボードだけでも動かせるようにしたり、といった感じです。

またスマホで画面が見切れてしまう。PC で字が大きくなりすぎてしまう、といった形にならないようにする「フレキシブルデザイン」というものもあります。