◆ UI/UXの違い
※ webデザイナー向けの解釈です。主観で小難しい表現を使わずより想像しやすい表現にしてます。
※ 全然間違ってるよ！という内容にお気づきの場合は教えて頂けると嬉しいです。
UIとは
UI = ユーザインターフェイス = PCやスマホなどの表示、操作などの仕組み
↓
「使いやすさ」や「使い勝手」「見やすさ」などが求められる。
補足：UIの種類
CUI（キャラクターユーザーインターフェース）
※キャラクターはこの場合「 文字。記号。」の意。
＝コマンドライン入力によって操作を行う。
（macのターミナルやwinのコマンドプロンプトでやってるやつです）
GUI（グラフィカルユーザーインターフェース）
＝マウスや指でボタンやアイコン画像などを押すだけで操作できる。
（アプリ全般GUIです。アドビもソースツリーもほぼぜーんぶGUIです）
デザイナーで苦手に感じる方も多い「コマンドライン入力（CUI）」も実はUIですが、苦手と感じる方が多いので一般に普及できません。
その際にGUIが必要になります。
= CUI よりも GUI の方が " UIが良い " ということです。 （極端な比較ですが...）
UXとは
UX = ユーザエクスペリエンス = ユーザ体験
↓
「使いやすさ」や「使い勝手」「見やすさ」などに加えて、使い心地・感動・印象も求められる。
UI/UXの違いのまとめ
大抵の場合UXが良ければUIも良いですが、UIが良いからと言ってUXが良いとは限らないとなります。
例：
- ボタンの配置もサイズもよくテキストも読みやすい。 =
UIが良い。 - ボタンの配置もサイズもよくテキストも読みやすい が 、
ページの読み込み速度が 遅くてやだ！ =UIは良いがUXは悪い。 - ボタンの配置もサイズもよくテキストも読みやすい し 、
ページの読み込み速度が 早くて快適 (^^) =UIが良くUXも良い。
◆ UIをよくする
- 片手操作時は右利きが多いからボタンなどは右に配置する。
- ボタンのサイズを押しやすい大きさにする。
- アイコンのみのボタンではなく一緒に名前も記載する。（例：ハンバーガーメニューは慣れてない人はメニューだとわからないので下にMENUなどの表記もつける）
- 行間や余白をとって見やすくする。
◆ UXをよくする
※ UI以外の部分
- 読み込み中のローディングアニメーションを愉快なものにする（待たされても楽しい気分になる）
- 遅延ロードさせて読み込み体感速度をあげる
- ユーザの欲しい情報を欲しいタイミングで表示させる
- 入力フォームの入力のしやすさ（全角、半角入力どちらも対応、パスワードは表示・非表示選択できるなど）