エクスチュア株式会社ブログ

はじめに

今回紹介する「UI（ユーアイ）」はIT業界に身をおく方からすれば、耳にタコができるほど聞き飽きた単語かもしれません。
頻繁に会話に出てくるというわけではないのですが、会話中に「UIって何ですか？」なんて質問した際には恥ずかしさのあまりその日の夜は眠れなくなることでしょう。
そんな基本単語とともに、関連単語の「CUI」「GUI」「UX」もご紹介したいと思います。
それでは、早速みていきましょー！！✨

用語説明〜最速で理解したい人のためのIT用語集より抜粋〜

UI（User Interface）・・・人とコンピュータがやり取りをすること。スマホ、PCの画面など。
CUI（Character User Interface）・・・コマンドプロンプトのように、文字を介してコンピュータとやり取りをするもの。
GUI（Graphical User Interface）・・・スマホ, PCなど視覚的な操作でコンピュータとやり取りをするもの。
UX（User Experience）・・・ユーザーが製品やサービスを通して得られる体験。

UI、CUI、GUIの違いと使い分け

まずは各用語の意味をザックリと解説していきます。
◾️UI＝「画面上の全ての情報」：画面上部のサイトメニュー、中央に文章、下部に他のサイトへの誘導リンクがあって〜…など。
◾️CUI＝「文字だけで情報をやり取りするUI」：コマンドプロンプトなど。
◾️GUI＝「図や表だけで情報を中心にやり取りするUI」：スマホ画面、PC画面、カーナビなど。
「UI」は言葉の指す対象が広いので、非常に使いやすい言葉です。
（例）
・「今回のアップデートでUIが良くなったね〜」(訳：ツールのデザインが良くなって使いやすいね)
・「PCだけじゃなくて全体的なUIを良くしよう！」（訳：マウスやキーボードなども色々性能を良くしよう）
・「このサービスの弱点はUIなんだよな〜」（訳：システムはいいが、なんか使いづらいな）
次に「CUI」「GUI」を見てみましょう。
CUIとは、エンジニアのPCの画面のようなイメージです。コマンドプロンプトのアレです。
なぜ彼らはあの使いにくそうな画面を使っているのでしょうか。
それは「プログラムの共有・再現がしやすい」からです。
画面上のボタンを押して〜上のタブを右クリックして〜という操作では作業効率が悪くミスも起こりやすいです。
また、WEBサーバーなどでは文字だけのやり取りになるのでCUIしか使用することができません。
また、CUIには魅力的な点がいくつも存在します。
例えば「コピペで操作を再現できる」「操作の記録を残すことができる」「操作が早い」「画面を切り替えずにほとんどの操作を行うことができる」などがあります。
GUIとは、スマホやPCの画面をイメージするとわかりやすいです。
私たちが普段使用するWEBサイトには「戻るボタン」「×ボタン」「サイト遷移タブ」などがあります。
それらのボタンやURLも「GUI」の一つです。
さらにいうと、LINE, Instagram, iPhoneの設定なども全てGUIに該当します。

UIとUXの関係性

UXとは「顧客体験」のことで、顧客が満足したか、顧客にどのような影響を与えるかなどです。
ですので、UIを改善することはUXの向上に直結します。
しかしここで勘違いしてはいけないのが「UIとUXは別物である」という点です。
最近では、UIとUXを同じニュアンスで使用する人も増えているような気がしますがそれは正しくありません。
UIを改善してサイトデザインが良くなったとしても、ユーザーが欲しい情報を手に入れることができなければUXは悪いということになります。
ありがちなのが、デザイン性の高いサイトをただ作成すればUXが良くなると勘違いしてしまうケースです。
美しいサイトでも購入プロセスが長すぎたりすると、ユーザーは購入プロセスから離脱してしまいます。
UIはあくまでUXを高めるためのものなので、優先順位を間違えないようにしたいところですね。

おわりに

ユーザーを引きつけるには「UI」への取り組みが必要で、
ユーザーと長い関係を持つには「UX」への取り組みが必要です。
もっとサイト訪問者を増やすにはどうしたら良いか、CV率を上げるにはどのようなUIが適しているのか、UXは良い状態を保っているか、、などなど分析には多くの視点が必要ですよね。
私もUIやUXに関する知見を深めていきたいなと思いました。
この記事を通して「UI」「CUI」「GUI」「UX」に関する理解を深めていただければ幸いです。
最後まで目を通していただきありがとうございました🙇‍♂️

参照元

.https://uxmilk.jp/27546
.https://proengineer.internous.co.jp/content/columnfeature/4962
.https://www.marke-media.net/mp/genre.php?msid=30
.http://www.cc.kyoto-su.ac.jp/~hirai/text/cui.html
.https://www.stacky-health.work/2018/11/17/cui%E3%81%A8gui%E3%81%A8%E3%81%AF%EF%BC%9F%E5%99%9B%E3%81%BF%E7%A0%95%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC%EF%BC%81/