資格道場 › レッスン一覧 › ユーザーインタフェース
ユーザーインタフェース・2/3・8分

GUI部品の使い分けと操作を速くする仕組み

ゴール

ラジオボタン・チェックボックス・プルダウンメニューなどの入力部品を「いくつ選ぶか」「値が決まっているか」で正しく選び分けられるようになる。あわせて、ショートカットキー・マクロ機能・自然言語インタフェースなど、操作を楽にする仕組みの目的を選択肢から見抜けるようになる。

入力画面の部品選びは「どの部品が適切か」という1問で決着する、点の取りやすい分野です。要件定義で画面項目を決めるときにも同じ考え方を使います。

このレッスンで稽古する(用語チェック・過去問)

結論:入力部品は「選べる数」と「値が決まっているか」で決まる

入力部品は、①いくつ選ばせるか(1つだけか、複数か) と ②入る値があらかじめ決まっているか の2つで決めます。GUI(グラフィカルユーザインタフェース:ボタンやアイコンを見て操作する画面)の部品は見た目が似ているので、試験では用途の説明文を入れ替えてひっかけてきます。

部品 選べる数 向いている入力 典型例
ラジオボタン 1つだけ(互いに排他的) 少数の選択肢を全部見せて、1つを選ばせる 配送方法(通常/速達)、性別
チェックボックス 0個以上いくつでも 項目ごとに「選ぶ・選ばない」を決める メルマガを受け取る、興味のある分野(複数可)
プルダウンメニュー(ドロップダウンリスト) 1つ 少数で固定の値を、画面を広く使わずに選ばせる 商品区分(5区分)、会員種別、支払方法の種類
コンボボックス 1つ(一覧に無ければ入力) 候補から選ぶか、無ければ文字を入力する 「その他」を自由に書ける職業欄
テキストボックス 自由入力 値が多数・毎回違う・文章 商品名、備考欄、商品番号

排他的とは「どれか1つを選ぶと、ほかは自動で外れる」という意味です。昔のカーラジオの選局ボタンは、1つを押し込むと前のボタンが飛び出しました。これが名前の由来なので、「ラジオボタン=必ず1つだけ」と覚えれば迷いません。

ラジオボタンチェックボックス配送方法通常速達速達を押す通常速達選ぶと前の選択が外れる=必ず1つだけ興味のある分野分野A分野B分野Cそれぞれ選ぶ・選ばない0個でも全部でもよい選んでもほかは外れない=0個以上いくつでも
ラジオボタンは1つ選ぶと前の選択が外れ、チェックボックスは項目ごとに選ぶ・選ばないを決められる。

プルダウン(一覧から選ぶ方式)は「少数で固定」の項目だけ

一覧から選ぶ方式が向くのは、入る値があらかじめ決められた数種類しかない項目です。候補が多すぎると探すのが大変になり、自由な値や連続した数値はそもそも一覧にできません。

約200品目を扱う店の商品登録画面で考えると、次のように決まります。

項目 値の性質 適した入力方式
商品番号(5桁英数字) 商品ごとに違う=約200種 テキストボックス
商品名(40字以内) 商品ごとに違う自由な文 テキストボックス
商品区分(5区分) 少数で固定 プルダウンメニュー ◎
価格(10,000〜100,000円) 範囲内の連続した数値 テキストボックス(数値入力)
flowchart TD
  A["選べる数は?"] -->|"いくつでも"| B["チェックボックス"]
  A -->|"1つだけ"| C["値は決まっている?"]
  C -->|"多数・毎回違う・文章"| D["テキストボックス"]
  C -->|"候補+一覧に無い値も"| H["コンボボックス"]
  C -->|"少数で固定"| E["画面にどう出す?"]
  E -->|"全部並べて見せる"| F["ラジオボタン"]
  E -->|"場所を取らずに出す"| G["プルダウンメニュー"]

操作を速くする仕組み:ショートカットキーとマクロ

よく使う操作を速くするならショートカットキー、決まった一連の作業の操作数を減らすならマクロ機能です。似た選択肢として、操作を速くすることが目的ではない支援機能が並びます。

機能 何をするか 目的
ショートカットキー キーの組合せ1回で操作を実行(例:Ctrl+S で保存) 頻繁に行う操作を効率よく
マクロ機能 一連のコマンドを1つにまとめて登録し、まとめて実行 定型作業の操作数を減らす
Undo機能(元に戻す) 直前の操作を取り消す 誤操作からの回復
プログレスバー 処理が全体のどこまで進んだかを表示 待ち時間の不安を減らす
オンラインヘルプ 画面上で使い方を調べられる 操作方法が分からないときの支援
入力エラーの表示 入力の誤りを知らせる 誤入力の防止・修正

マクロは、飲食店で「いつもの」と言えば決まった注文一式が通るようなものです。手順を毎回1つずつ伝えなくて済むので、操作数が減ります。

ショートカットキー:1つの操作を速くCtrl+S保存マクロ:一連の操作をまとめる毎回1つずつだと4回の操作操作1操作2操作3操作4まとめて登録マクロを実行(1回)定型作業の操作数が減る
ショートカットキーは1つの操作をキーの組合せ1回で実行し、マクロは一連の操作をまとめて登録して1回で実行する。

慣れた人にも慣れていない人にも使いやすくする

キーボードに慣れた人と慣れていない人の両方に対応するには、できる限り多くの操作に、マウスとキーボードの両方の手段を用意します。マウスだけに寄せると、キーボードで素早く操作したい熟練者が不便になります。

画面の表示や配置を利用者が変えられるカスタマイズ機能を付けるなら、変えた内容を保存する機能もセットにします。保存できないと、毎回設定し直すことになるからです。

逆に、次のような「全部」「一切」と言い切る極端な設計は不正解になります。

  • ガイドをすべて常時表示する(画面が埋まって見づらい)
  • キーボードを一切使わない(熟練者が遅くなる)
  • すべての項目に既定値(あらかじめ入っている値)を用意する(確認せずに進んで誤入力のもとになる)

インタフェースの種類:自然言語インタフェース

人がふだん話したり書いたりする言葉(自然言語)でコンピュータとやり取りする方式を、自然言語インタフェースといいます。音声で「名古屋から東京まで大人2名」と話し、コンピュータが言葉で聞き返す予約システムが典型例です。

種類 特徴 見分けるポイント
自然言語インタフェース ふだんの言葉(話し言葉・書き言葉)で対話する 言葉のやり取りが中心
マルチモーダルインタフェース 音声・タッチ・視線・身振りなど複数の手段を組み合わせて操作する 手段が複数
ノンバーバルインタフェース 表情・身振り・視線など言葉以外の情報を使う 言葉を使わない
感性インタフェース 人の感覚や感情に働きかける・読み取ることを重視する 気持ち・感覚がテーマ

音声「だけ」でやり取りしている場合、手段は1つなのでマルチモーダルではありません。言葉を使っているのでノンバーバルでもありません。

利用者予約システム「名古屋から東京まで大人2名」(言葉で聞き返す)(言葉で答える)言葉のやり取り=自然言語インタフェース音声だけ=手段1つ→マルチモーダルでない言葉を使う→ノンバーバルでもない
音声の予約システムでは利用者とコンピュータが言葉でやり取りするので自然言語インタフェースになり、手段が音声だけなのでマルチモーダルではない。

試験での問われ方

  • 部品の用途問題:4つの選択肢が、ラジオボタン・チェックボックス・コンボボックス・プルダウンメニューの説明になっています。「互いに排他的」「一つを選ぶ」とあればラジオボタン、「それぞれ選択するかどうか」はチェックボックス、「選択項目にないものは入力」はコンボボックスです。
  • 項目と入力方式の問題:表に項目が並び、「プルダウン(一覧選択)に向くのはどれか」を問われます。少数で固定の項目を選び、商品ごとに違う値・自由な文・範囲の数値は外します。
  • 目的から機能を選ぶ問題:「頻繁に行う操作を効率よく」ならショートカットキー、「定型的な作業の操作数を少なく」ならマクロ機能です。Undo・プログレスバー・ヘルプは目的が違います。
  • 設計の留意点問題:「すべて」「一切」を含む極端な選択肢は外し、「両方を用意する」「保存機能もセットで付ける」といったバランスの取れた選択肢を選びます。

要点(試験直前に読む)

  • ラジオボタン=互いに排他的な選択肢から1つだけ。チェックボックス=いくつでも。コンボボックス=一覧に無い値も入力できる。
  • プルダウン(一覧選択)は「少数で固定」の値の項目に使う(例:商品区分5区分)。商品ごとに違う値・自由な文・範囲の数値には使わない。
  • 頻繁な操作を効率よく=ショートカットキー。定型作業の操作数を減らす=マクロ機能。
  • 慣れた人と慣れていない人の両方に対応するには、マウスとキーボードの両方の操作を用意する。カスタマイズ機能は保存機能とセットで付ける。
  • 言葉で対話する=自然言語インタフェース。複数の手段の組合せ=マルチモーダル。言葉以外を使う=ノンバーバル。

ひっかけ

  • 「選択項目にないものはテキストボックスに入力」はコンボボックスの説明。ラジオボタンと取り違えない。決め手は「互いに排他的」の語。
  • 商品番号・商品名のように商品ごとに値が違う項目や、価格のような範囲の数値にプルダウンを選ばせるひっかけ。値の種類が少数で固定かどうかだけを見る。
  • 「操作を効率化」の問いにUndo・プログレスバー・オンラインヘルプを混ぜてくる。目的はそれぞれ誤操作の回復・進捗の表示・使い方の支援で、操作を速くするものではない。
  • 「すべて常時表示」「キーボードを一切使わない」「全項目に既定値」など極端な表現の選択肢は不適切。マウスに偏らせる選択肢も熟練者に不便なので外す。
  • 音声だけの対話をマルチモーダルと迷わせる。手段が1つで言葉を使っているなら自然言語インタフェース。

用語(17)

GUI Graphical User Interface(グラフィカルユーザインタフェース)
ボタン・アイコン・ウィンドウなどを見ながら、マウスやタッチで操作する画面方式。
⚠ CUI(文字でコマンドを打ち込む方式)と対比される。
ラジオボタン らじおぼたん
互いに排他的な選択肢を画面に並べ、その中から1つだけを選ばせる部品。
⚠ チェックボックスは複数選べる。「排他的」「一つを選ぶ」ならラジオボタン。
チェックボックス ちぇっくぼっくす
項目ごとに「選ぶ・選ばない」を指定させる部品で、いくつでも選べる。
⚠ ラジオボタンは1つだけ。「それぞれの項目を選択するかどうか」ならチェックボックス。
プルダウンメニュー ぷるだうんめにゅー(ドロップダウンリストとも)
押すと候補の一覧が開き、その中から1つ選ぶ部品で、少数で固定の値の入力に向く。
⚠ コンボボックスは一覧に無い値も入力できる。プルダウンは一覧の中からしか選べない。
コンボボックス こんぼぼっくす
候補一覧からの選択と、一覧に無い値の文字入力の両方ができる部品。
⚠ 「選択項目にないものはテキストボックスに入力」とあればコンボボックスで、ラジオボタンではない。
テキストボックス てきすとぼっくす
文字や数値を自由に入力させる部品で、値が多数・毎回違う項目に向く。
⚠ 値が少数で固定ならプルダウンやラジオボタンのほうが入力ミスを防げる。
排他的 はいたてき
1つを選ぶと他が選べなくなる(同時に成り立たない)関係のこと。
ショートカットキー しょーとかっときー
キーの組合せ1回でよく使う操作を実行し、頻繁な操作を効率よく行えるようにする仕組み。
⚠ マクロは一連の手順をまとめるもの。ショートカットは1つの操作を素早く呼び出すもの。
マクロ機能 まくろきのう
一連のコマンドをひとまとめに登録し、定型作業の操作数を減らす機能。
⚠ ショートカットキーとの違いは「一連の手順をまとめる」点。
Undo機能 あんどぅーきのう(元に戻す)
直前の操作を取り消して前の状態に戻す、誤操作から回復するための機能。
⚠ 操作数を減らす・速くする目的ではない。
プログレスバー ぷろぐれすばー
処理が全体のどこまで進んだかを棒の長さなどで表示する部品。
⚠ 進捗の表示が目的で、操作の効率化ではない。
オンラインヘルプ おんらいんへるぷ
操作中の画面から使い方の説明を参照できる機能。
⚠ 分からないときの支援であり、慣れた人の操作を速くするものではない。
カスタマイズ機能 かすたまいずきのう
利用者が画面の表示や配置を好みに合わせて変更できる機能で、変更内容の保存とセットで用意する。
自然言語インタフェース しぜんげんごいんたふぇーす
人がふだん使う話し言葉や書き言葉でコンピュータと対話する方式。
⚠ マルチモーダルは複数の手段の組合せ、ノンバーバルは言葉以外。音声の言葉だけでやり取りしているなら自然言語。
マルチモーダルインタフェース まるちもーだるいんたふぇーす
音声・タッチ・視線・身振りなど複数の入出力手段を組み合わせて操作する方式。
⚠ 手段が1つだけ(音声だけ等)ならマルチモーダルではない。
ノンバーバルインタフェース のんばーばるいんたふぇーす
表情・身振り・視線など、言葉以外の情報を使ってやり取りする方式。
⚠ 言葉で対話していれば自然言語インタフェース。
感性インタフェース かんせいいんたふぇーす
人の感覚や感情に働きかけたり読み取ったりすることを重視した方式。

このレッスンの過去問

このレッスンで稽古する