COLUMN
コラム
2021年10月07日
#UI #UX – 知ったかテックワード!君もIT博士
カテゴリー:知ったかテックワード
タグ:Web, 基本用語
UIとは
UI(User Interface:ユーザーインターフェース)は、製品やサービスで利用者(ユーザー)が操作する部分のこと。パソコンやスマホで、データを表示する画面や操作方法のことを指す。パソコンやスマートフォンがユーザーと接する境目という意味だね。
UIには、いくつかの種類がある。
- GUI(Graphical User Interface):ウィンドウと呼ばれる矩形領域に情報を表示し、マウスやタッチパネルでアイコンやアイコンやメニューを選択して操作する。
- CUI(Character-based User Interface):文字で情報を表示して、キーボードによるコマンドで操作する。
UIの見た目の分かりやすさや操作の使いやすさは、製品やサービスの使い勝手の大事な要素になっているよ。
同じGUIであっても、パソコンなどのようなマウスで操作するより、スマートフォンのようなタッチ操作のほうが、ずっと簡単に感じるだろう。また、スマートスピーカーのような音声入力もすっかり実用的になってきた。
さらに、VR/ARやメタバースといった新しいユーザーインターフェースも色々と試されている。
UXとは
UX(User Experience:ユーザーエクスペリエンス)は、製品やサービスを通じて得られる体験のこと。UIは、その一部ということになる。
WebサービスでUXを考える場合、そのWebサービスの利用者や場面といった体験を具体的に思い描くことが重要なんだ。
たとえば、食事に行くためグルメ検索サービスを使ってもらう場合、どんな人たちがどんな目的で食事に行くのか、そのシチュエーションに合わせてジャンルや場所・価格帯などを条件に店を選択するだろう。場合によっては、GoogleやInstagramに検索結果を直接表示させることになる。
グルメ検索サービスは、食事に行く店を見つけるこうした状況に応える必要がある。その場面と条件「を分解していくことで、どのような画面を用意して、どのように検索させるのかといった、UIに落とし込むことができるんだ。
ちなみに、UX(User Experience)とよく似た言葉にCX(Customer Experience)がある。こちらは、その製品・サービスを知って・試して・使うといった、プロモーションからユーザーサポート、さらにその先の行動まで含んだ広い範囲を扱っている。
おまけのコント
ウサギ:ねえ、Experienceって、なんで略称が「X」になるの?
カエル:2文字目の「X」を取っているんだろうね。あと「Ex」がエックスっぽく読めるし。それから・・・
ウサギ:それから?
カエル:「X」がカッコいい。
ウサギ:「X」がつくとカッコいい!じゃあ、ウサギに「X」で、ウサギックス!
カエル:いいね。何だかカッコいい。
ウサギ:カエルに「X」を付けたカエルックスは、ちょっとおマヌケな感じだね。
カエル:いや、英語でカエルは「Frog」だからFrogX!
ウサギ:うーむ、かっこいいけど、なんて読めばいいのか。
- カテゴリー
- タグ
- システム運用 (16)
- TypeScript (1)
- WebAssembly (2)
- ウォーターフォール開発 (2)
- 業務システム (28)
- CSS (2)
- GraphQL (1)
- プログラミング (31)
- スタートアップ (11)
- Nexaweb (1)
- BaaS (10)
- データベース (5)
- SPA (2)
- 基本用語 (26)
- Case study (5)
- Keyword (10)
- FaaS (1)
- システム開発 (69)
- スクラム (1)
- フロントエンド (38)
- AI (26)
- アジャイル開発 (18)
- Supabase (1)
- イノベーション (5)
- Database (2)
- 月額制 (1)
- PaaS (3)
- ACF (1)
- BookReview (3)
- サービス開発 (5)
- React (3)
- Firebase (1)
- クラウドサービス (12)
- low-code (2)
- バックエンド (8)
- ナレッジマネジメント (1)
- ChatGPT (1)
- Vue.js (2)
- Tailwind CSS (1)
- DBaas (2)
- プロジェクト管理 (13)
- セミナー (2)
- Web (21)
- 失敗事例 (2)
- Hexabase_health (1)
- 生成AI (7)
- 受託開発 (1)
- Kubernetes (3)
- WebComponents (1)
- 通知 (1)
- API (6)
- Next.js (1)
- フレームワーク (3)
- ローコード開発 (4)
- ノーコード開発 (1)
- JavaScript (2)
- Hexabase (12)
- LLM (3)
- 画像生成 (1)
- DX (34)