【ゆーあい】

UI(ユーザーインターフェース) とは?

💡 人とコンピューターの「接点」のデザイン
📌 このページのポイント
UI(ユーザーインターフェース)― 人とシステムの接点 ユーザー (人間) 操作 表示 UI ボタン 入力欄... チェックボックス 選択▼ メニュー 画面上の操作部品の総称 システム (機械)
UIのイメージ
ひよこ ひよこ

UIって具体的に何のこと?

ペンギン先生 ペンギン先生

スマホアプリのボタン、Webサイトのメニュー、検索バー、スクロールバー…ユーザーが「見たり触ったりする部分」すべてがUIだよ。テレビのリモコンのボタン配置もUIの一種だね。

ひよこ ひよこ

いいUIって何が大事なの?

ペンギン先生 ペンギン先生

「考えなくても使える」ことだね。たとえば赤いボタンは「削除」、緑は「追加」みたいに、色や形で直感的に意味がわかること。説明書を読まなくても操作できるUIが良いUIだよ。

ひよこ ひよこ

GUIとCLIって何?

ペンギン先生 ペンギン先生

GUI(Graphical User Interface)はアイコンやボタンをクリックして操作する方式で、WindowsやmacOSがこれだね。CLI(Command Line Interface)はキーボードでコマンドを打って操作する方式で、ターミナルコマンドプロンプトがこれ。どちらもUIの種類だよ。

ひよこ ひよこ

UIとUXって何が違うの?

ペンギン先生 ペンギン先生

UIは「見た目や操作部品」で、UXは「使ったときの体験全体」なんだ。ボタンがキレイでも、押した後に何秒も待たされたらUXは悪い。UIはUXを構成する要素の一つだよ。

ひよこ ひよこ

UIデザインで特に難しいのはどこ?

ペンギン先生 ペンギン先生

アクセシビリティ」との両立だね。見た目がオシャレでも、色覚異常の人にはボタンが見分けられなかったり、スクリーンリーダーで読めなかったりすると使えない。WAI-ARIAという仕様でアクセシビリティ情報を付加するんだけど、aria属性を正しく付けることと、キーボード操作への対応を両立させるのは、UIの専門家でも細かいパターンまで網羅するのが本当に難しいポイントなんだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「UI」って出てきたら「ユーザーが見て触る画面のデザインや部品のことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「User Interface」 = ユーザーとの接点・接触面
💬 Interface(接点)はinter(間の)+ face(面)が語源。ユーザーとシステムの「間にある面」がUIだよ
← 用語集にもどる