【真面目版】ユーザーインタフェースとは?CUI/GUI/NUIをわかりやすく解説

情報セキュリティのポスター #1

情報セキュリティのポスター #2

目次

ユーザーインタフェースって何?

幽灯子/基本情報技術者副専門官

スマートフォンのアプリを操作するとき、ボタンをタップしたり、画面をスワイプしたりしますよね。あの「人間とコンピュータが情報をやり取りするための仕組み」のことをユーザーインタフェースといいます。

基本情報技術者試験では、このUIに関する技術が頻出テーマのひとつです。「難しそう…」と感じる方も多いかもしれませんが、実は私たちが毎日使っているスマホやパソコンの操作と深く関係しています。今回は、試験に出るUI技術の重要ポイントを、一般の方にもわかりやすく解説します。


UIの種類を覚えよう

幽灯子/基本情報技術者副専門官

UIにはいくつかの種類があります。それぞれの特徴を理解しておくことが試験対策の第一歩です。

CUI(Character User Interface)

CUIは「文字」を使ってコンピュータと対話するインタフェースです。かつての黒い画面にコマンド(命令文)を文字で打ち込む操作をイメージしてください。Windowsの「コマンドプロンプト」やMacの「ターミナル」がその代表例です。

操作を覚えるまでに時間がかかりますが、処理が速く、プログラマーやエンジニアには今でもよく使われています。

GUI(Graphical User Interface)

GUIは「グラフィック(図・アイコン・ボタン)」を使ってコンピュータを操作するインタフェースです。WindowsやMacのデスクトップ画面がまさにこれです。マウスでアイコンをクリックしたり、ファイルをドラッグ&ドロップしたりする操作はすべてGUIです。

直感的に操作できるため、コンピュータの知識がなくても扱いやすいのが大きな特徴です。現在のほとんどのアプリやシステムはGUIで作られています。

NUI(Natural User Interface)

NUIは「自然な動作や音声」でコンピュータを操作するインタフェースです。スマートフォンのタッチ操作、Siri・Alexaなどの音声アシスタント、ゲーム機のジェスチャー操作などがこれにあたります。ボタンやキーボードを使わずに、人間の自然な動作でコンピュータを動かせるのが特徴です。


GUIの主要な部品(ウィジェット)を覚えよう

幽灯子/基本情報技術者副専門官

試験では、GUIを構成する部品の名前と役割が問われます。日常的に目にしているものばかりなので、名前と外見を結びつけて覚えましょう。

ウィンドウは、アプリや情報を表示する「枠」のことです。複数のウィンドウを開いて並べたり、重ねたりすることができます。

メニューバーは、画面上部にある「ファイル」「編集」などの横並びのメニューです。クリックするとプルダウン形式でサブメニューが表示されます。

ツールバーは、よく使う機能をアイコン(絵)で並べたボタン列です。Wordの「保存」ボタンや「太字」ボタンのある部分がこれにあたります。

ダイアログボックスは、ユーザーに確認や入力を求めるための小さなウィンドウです。「本当に削除しますか?」と聞いてくる確認画面がその典型例です。

ラジオボタンは、複数の選択肢の中からひとつだけを選ぶためのボタンです。丸いボタンが並んでいて、ひとつ選ぶと他の選択が外れます。アンケートの「性別:○男性 ○女性」のような表示がこれです。

チェックボックスは、複数の選択肢から複数の項目を選べる四角いボタンです。「□メルマガを受け取る」のような同意チェックがよく使われます。

スクロールバーは、画面に収まりきらない内容を上下・左右にスクロールするための部品です。

プログレスバーは、処理の進み具合を棒グラフのような形で表示するものです。ファイルのコピー中に「残り○○秒」と表示されるあのバーです。


ユーザビリティとアクセシビリティ

幽灯子/基本情報技術者副専門官

試験では「ユーザビリティ」と「アクセシビリティ」という概念も重要です。

ユーザビリティ(Usability)

ユーザビリティとは、システムやUIが「どれだけ使いやすいか」を表す概念です。ISO(国際標準化機構)では、ユーザビリティを次の3つで評価しています。

「有効性」は、ユーザーが目標を達成できるかどうかです。「効率性」は、目標を達成するためにかかる時間や労力です。「満足度」は、ユーザーが使って感じる快適さや満足感です。

たとえば、ネットショッピングの購入ボタンがすぐ見つかって、3ステップで買い物が完了するサイトはユーザビリティが高いといえます。

アクセシビリティ(Accessibility)

アクセシビリティとは、高齢者や障害を持つ人も含めた、すべての人がシステムを利用できるかどうかを表す概念です。

具体的な例としては、画像に「代替テキスト(Alt属性)」を付けて視覚障害者でも内容を音声で聞けるようにすること、文字サイズを大きくする機能、色覚異常の方でも区別しやすい配色などがあります。Webサイトのアクセシビリティについては「WCAG(ウェブコンテンツアクセシビリティガイドライン)」という国際基準も定められています。


UIデザインの重要な原則

幽灯子/基本情報技術者副専門官

試験では、良いUIを設計するための原則についても問われることがあります。

「一貫性」は、画面の中でボタンの色や配置、操作方法を統一することです。メニューボタンが「このページでは左上、別のページでは右下」では混乱してしまいます。

「フィードバック」は、ユーザーの操作に対して反応を返すことです。ボタンを押したときに色が変わる、処理中はローディング画面を表示するなどがこれにあたります。操作が受け付けられたのかどうかが明確になることで、ユーザーは安心して操作できます。

「エラーの防止と回復のしやすさ」は、誤操作を防ぐ設計と、もしエラーが起きても簡単に元に戻せることです。「本当に削除しますか?」という確認画面や、「元に戻す(Ctrl+Z)」機能がその例です。


まとめ:試験で押さえておくべきポイント

基本情報技術者試験で問われるUIの主な知識をまとめると次のとおりです。

まず、CUI・GUI・NUIの違いと特徴を理解しておくことが基本です。次に、ウィンドウ・ダイアログ・ラジオボタン・チェックボックスなどGUIの部品の名称と役割を覚えましょう。さらに、ユーザビリティの3要素(有効性・効率性・満足度)と、アクセシビリティの意味と具体例を押さえておくことも大切です。

幽灯子/基本情報技術者副専門官

難しく聞こえる用語も、日常の操作と結びつけて考えると意外とすんなり理解できます。「あのボタンの名前はラジオボタンというんだ!」という発見を楽しみながら、試験対策を進めてみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ITTIのアバター ITTI 運営長

ITTI運営長
調べものと学ぶことが止められなくなり、現在は以下の4ブログを運営中:
・DXブログ(今ここ!)
・CODEブログ
・INFRAブログ
・XRブログ

保有資格:ITパスポート
目標資格:情報処理安全確保支援士(学ぶこと多すぎて道のりは遠いですが、毎日コツコツ進めています…泣)

ブログでは、実務経験と最新技術を掛け合わせて、読者の「わかりにくい」を「わかる!」に変える記事を発信中!
最終目標は、これらの知識を活かして「ドラえもんのような万能AI」を開発すること(AIを副運営長任命が待ち遠しい!)。
DX・CODE・INFRA・XRに興味ある方、気軽にX(@llEqmDGOYZ4258)でDMください。一緒に学びましょう!

IT企業のAIイラスト #1

IT企業のAIイラスト #2

IT企業のAIイラスト #3

コメント

コメントする

CAPTCHA


目次