読み方/英語:ゆーざーいんたーふぇーす/user interface
ユーザーがサービス、またはコンピュータやソフトウェア等とやり取りするためのデザインや操作方法の事。
ユーザーインターフェース(UI)を詳しく説明すると
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
大嫌いな英語の略語や~。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
ん、何ていう言葉?
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
UI。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
「UI」ね。じゃあちょっとUIについて勉強しましょうか。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
お願いします。
UI(ユーザーインターフェース)とは
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
UIとは「User Interface」の略語で、ユーザーインターフェースと言うのよ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
ユーザーインターフェース?
聞いたことがあるような無いような。。。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
どんな意味?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
まずインターフェース(interface)とは、「境界点」、「接点」という意味があるわ。そして「ユーザー」とは「サービスを利用する人」という意味ね。
それらを組み合わせると?
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
サービスを利用する人との接点、か。
むむ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
接点とは一体なに?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
![スマホ画面イラスト](https://hyonnakikkake.com/wp-content/uploads/2023/08/b7542947b906f8647a6341bc5dcdc0fe.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
見た目や使いやすさの事か?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
UIは見た目だけではなくて、例えば文字のフォントやメニューボタンの大きさ、またはデバイスなどの触り心地や操作性まで、ユーザーが認識するもの、使うものすべてを含むのよ。
![スマホ画面操作イラスト](https://hyonnakikkake.com/wp-content/uploads/2023/08/0cf329fafd0fd10794c9495fe67016a7.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
なるほど。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
UIのおおよそのイメージはつかんだかしら。
そしてUIはいろんなサービスを作るうえで非常に重要になってくるのよ。なぜだかわかる?
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
わかりづらいUIは使いにくいから?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そうよ、その通りよ。
例えば画面が見にくい、どこにボタンがあるかわからない、使い方がわかりづらい、といった評価のUIの場合は、ユーザーはどんどんそのサービスを利用しなくなるわ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
なるほど。使い勝手の良いUIを作る必要があるんやな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そういう事ね。
さらにUIに関連して、「CUI」と「GUI」という言葉も知っておいた方が良いわ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
また知らんアルファベット略語が増えた。。。
CUIとは
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
CUIは「Character User Interface」の略で、キャラクターユーザーインターフェースといって、文字によるユーザーインターフェースの事よ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
文字による?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
こういう画面を見たことがあるかしら?
![CUI画面](https://hyonnakikkake.com/wp-content/uploads/2023/08/UI10.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
むむ、これはパソコンに詳しい人が使う画面やな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
そうね、たいていはパソコンが詳しい人やプログラマーが使う画面で、文字や記号でコンピュータを操作する画面の事よ。コマンドプロンプトとも言うわ。一般の人にはよくわからないかもしれないわね。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
何がなんやらさっぱりや。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
CUIはコンピュータ初期の時代のユーザーインターフェース(UI)よ。文字や記号を入力してファイルを操作したりプログラムの実行を行っていたの。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
なんか使いにくそうやな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そうね、CUIは効率的な操作が可能なんだけど、使用するためには専門知識が必要で一般のユーザーにとってはCUIでパソコンを扱うのはハードルが高かったの。
なのでGUIが登場したのよ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
GUIとは?
GUIとは
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
GUIは「Graphical User Interface」の略で、グラフィカルユーザーインターフェースといって、グラフィカルな、つまりビジュアルによるユーザーインターフェースの事なの。
![GUI画面](https://hyonnakikkake.com/wp-content/uploads/2023/08/UI.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
おお、見やすいし分かりやすい。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
そうね、GUIは人間の心理に合わせて視覚的な工夫が凝らされた画面で、見やすさや使いやすさを追求したユーザーインターフェースの事ね。例えば下のアイコンは何の意味を表すものか分かるかしら?
![アイコン画面](https://hyonnakikkake.com/wp-content/uploads/2023/08/UI0.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
これは、左から「動画再生」、「アンテナ」、「電源」やな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そうね、正解よ。
もうこれらのアイコンの意味はほとんどすべての人々に浸透していたり、なんとなく感覚で理解できるので、これらのアイコンがあるだけで操作できたり確認が出来たりするのよ。それがGUIなのよ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
CUIからGUIに変わったという事、やな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
確かに一般ユーザーにとってはGUIの方が使いやすくて直感的な操作ができるので今はすべてのパソコンがGUIに移行しているわ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
なるほど。俺のブログももっとGUIを追求していって使い勝手を良くしていきたい。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そうね、頑張ってね。
ただし、どちらも同じコンピュータ操作の方法の違いに過ぎないわ。用途に応じてCUIとGUIを使い分けていくのよ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
わかった。
UXとは
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
あともう一ついいかしら。
「UI」と似た言葉で「UX」というのがあるの。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
UX?
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
UXとは「User eXperience」の略で、ユーザーエクスペリエンスというのよ。
意味は「ユーザーがサービスや製品を使って得る満足度」という意味ね。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
むむ。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
わかりやすく言えばUXとは「ユーザーがそのサービスや製品でどれだけ使いやすく、満足度の高い体験をするか」という事よ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
ふむ。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
それで、UI(ユーザーインターフェース)の質やデザインが優れていれば、ユーザーはより良質なUX(ユーザーエクスペリエンス)を得ることが出来るのよ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
ふむ、という事はUXには優れたUIが必要という事やな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
そうよ、その通り。
ただし、UXはUIの他にもタスク効率性や学習性、ユーザーへの配慮など、さまざまな要素が関わるの。UIはUXを向上させるための要素の一つに過ぎないわ。
![UX範囲イラスト](https://hyonnakikkake.com/wp-content/uploads/2023/08/UI11.png)
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
ふむ、UIはUXの一つなのか。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
そうなの、UIを語るうえで、UXは必ず登場してくるので、セットで覚えておいてね。
まとめ
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
はあ、色々似たような言葉が次々に出てきたんで覚えるのが大変や。
UIにCUI、GUI、でUXやったっけ。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/06/1a6e4098ae8170588f82d94438f228e1-1.png)
今回、登場した単語を表にしてみると、
用語 | 説明 |
---|---|
UI(ユーザーインターフェース) | ユーザーとサービスや製品との接点。デザインや操作方法も含む。 |
UX(ユーザーエクスペリエンス) | ユーザーがサービスや製品を使う際の全体的な満足度。UIはUXの一部の要素。 |
CUI(キャラクターユーザーインターフェース) | 文字ベースのUI。操作効率は高いが専門知識が必要。 |
GUI(グラフィカルユーザーインターフェース) | 視覚的な要素で見やすさと使いやすさを重視したUI。 |
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
なるほど、これで何とか整理できそうやな。
![かみさん](https://hyonnakikkake.com/wp-content/uploads/2023/04/36ca3e874d8a9951ab4a78f8fc519db6-1.png)
大体の感覚がつかめていたら大丈夫よ。
![ちゃば](https://hyonnakikkake.com/wp-content/uploads/2023/03/cropped-ちゃばアイコン1-e1680187037208.png)
OK~。
ありがとうございました。
【関連用語】
・UX
・GUI
・CUI