教科書一覧へ

GUIの画面部品とメニュー・補助表示

低頻約 21 分インタフェース設計

概要

本ユニットでは、GUI(画面)で「候補を提示して選ばせる」リストボックスや各種メニュー、サムネイルといった選択部品と、ヘルプ機能・ツールチップのように操作を助けて反応を返すフィードバック表示を学びます。各部品の見た目と役割の違いを正しく言い当てられることが、インタフェース設計分野の出題で問われます。

用語7

リストボックス

複数の選択肢を一覧表示し、その中から項目を選ばせるGUI部品。

リストボックスは、あらかじめ用意した選択肢を縦に一覧で並べ、利用者にその中から選んでもらう画面部品です。項目数が多いときはスクロールして表示し、設定によっては複数選択もできます。 似た部品にプルダウン(コンボボックス)がありますが、リストボックスは選択肢が常に展開されて見えている点が特徴です。試験では、ラジオボタンやチェックボックスといった他の選択部品との役割の違い(一覧から選ぶか、ボタンで選ぶか)が問われます。利用者が自由入力するのではなく『用意された候補から選ばせる』部品だと押さえましょう。

たとえレストランで、紙のメニュー表に料理がずらりと並んでいて、その中から指さして注文するようなもの。候補が最初から全部見えています。

記憶フックリストボックスといえば一覧から選ぶ選択部品

メニューバー

画面上部に機能のメニュー項目を横一列に並べた帯状の領域。

メニューバーは、アプリケーションの画面上部に「ファイル」「編集」「表示」などの項目を横に並べた帯です。各項目をクリックすると、その下にメニューが展開し、より細かい操作を選べます。 メニュー類の入口・基点となる存在で、ここから後述のプルダウンメニューが開きます。試験では、メニューバーが各機能への窓口をまとめた最上位の場所であること、操作に応じて出るポップアップメニューとの位置づけの違いが問われます。常に画面上部に表示され続ける点も特徴です。

たとえデパートの入口にある「1階:化粧品、2階:婦人服…」というフロア案内板のようなもの。まず全体の入口を示し、そこから各売り場へ進ませます。

記憶フックメニューバーといえば画面上部に機能を横並びにした帯

メニューバー

ファイル

編集

表示

プルダウンメニュー(開く・保存…)

プルダウンメニュー

メニューバー等から下方向へ展開し項目を選ばせるメニュー。

プルダウンメニューは、メニューバーの項目をクリックすると下方向(プルダウン=引き下げる)に展開し、その中から操作を選べるメニューです。ドロップダウンメニューとも呼ばれます。 普段は折りたたまれていて、必要なときだけ開くため画面を広く使える利点があります。試験では、操作位置に応じて出現するポップアップメニューとの違い(プルダウンは決まった場所=メニューバーから下に開く)が問われます。常に開いているリストボックスとも対比して、必要時に展開する点を押さえましょう。

たとえ自動販売機の上にある折りたたみ式の商品案内を、見たいときだけ引き下げて広げ、欲しいものを選んで畳むようなイメージです。

記憶フックプルダウンメニューといえばメニューバーから下に展開

ポップアップメニュー

操作位置に応じてその場に出現する文脈依存のメニュー。

ポップアップメニューは、右クリックなどの操作に応じて、その操作した場所に飛び出して(ポップアップ)表示されるメニューです。今選んでいる対象に応じた項目が出るため、コンテキストメニュー(文脈メニュー)とも呼ばれます。 決まった上部の場所から開くプルダウンメニューに対し、ポップアップは『操作した位置にその都度現れる』点が大きな違いで、試験で対比されます。今の状況に合った選択肢だけを近くに提示できるため、操作の手数を減らせるのが特徴です。

たとえ美術館で作品の前に立つと、その作品専用の解説ボタンが手元にふっと現れるようなもの。今いる場所に合わせて選択肢が出てきます。

記憶フックポップアップメニューといえば操作位置にその場で出現

サムネイル

画像やページ内容を縮小表示した一覧用の小さな見本。

サムネイル(thumbnail=親指の爪)は、画像や文書ページの内容を小さく縮小して見せる見本画像です。多数のファイルやページを一覧で並べ、中身を一目で見比べて選ぶのに使われます。 文字名だけのリストと違い、見た目で中身を判断できるため目的のものを素早く選べます。試験では、サムネイルが『縮小見本による選択・閲覧の補助』であること、写真フォルダやWebページの一覧表示などの典型例で意味を問われます。実物そのものではなく縮小プレビューである点が要点です。

たとえ本屋で並んだ本の「表紙」を眺めて選ぶようなもの。中身を全部開かなくても、小さな見本を見比べれば目当てを探せます。

記憶フックサムネイルといえば縮小見本の一覧表示

ヘルプ機能

操作方法や用語を案内して利用者を支援する補助機能。

ヘルプ機能は、ソフトウェアの使い方や用語の意味、エラーへの対処などを利用者に案内する支援機能です。F1キーやメニューの「ヘルプ」から呼び出すものや、操作に合わせて自動で出る説明など、形はさまざまです。 選択部品が『操作する手段』なのに対し、ヘルプ機能は『操作を助ける支援・フィードバック』側に位置づけられます。試験では、ヘルプが利用者の理解と自己解決を助ける仕組みであること、後述のツールチップもヘルプ的な補助表示の一種であることを押さえておくとよいでしょう。

たとえ家電に付いてくる取扱説明書や、困ったときの相談窓口のようなもの。使い方が分からないときに頼れる案内役です。

記憶フックヘルプ機能といえば操作方法を案内する支援

ツールチップ

ボタンやアイコンにマウスを重ねると出る、小さな説明のふきだし表示。

ツールチップは、ボタンやアイコンの上にマウスポインタを重ねる(ホバーする)と、その近くにふきだし状で表示される短い説明文です。クリックしなくても、その部品が何をするものかを確認できます。 マウスを重ねるという原因(ホバー/ロールオーバー)に対し、ツールチップは説明が出るという結果にあたり、操作とフィードバックの対応として試験で問われます。アイコンだけでは意味が伝わりにくい場面で理解を助ける、ヘルプ的な補助表示である点が要点です。

たとえ博物館で展示物に近づくと、自動で短い解説プレートがふっと光って読めるようなもの。触れる前に「これは何か」を教えてくれます。

記憶フックツールチップといえばホバーで出る小さな説明

アイコンにマウスを重ねる(ホバー)

ツールチップが表示

部品の説明を確認

まとめ

要点

  • リストボックス・各種メニュー・サムネイルは、いずれも『候補を提示して選ばせる』選択補助の部品である。
  • メニューは、上部の決まった場所から下に開くプルダウンメニューと、操作位置にその場で出るポップアップメニュー(コンテキストメニュー)に大別される。
  • サムネイルは縮小見本で中身を見比べて選ぶための表示で、文字名だけの一覧との違いを押さえる。
  • ヘルプ機能・ツールチップは操作を助けるフィードバック表示で、選択部品とは役割が異なる。
  • ホバー(マウスを重ねる)が原因、ツールチップ(小さな説明が出る)が結果という操作と反応の対応を理解する。

記憶フック一覧

  • リストボックス: リストボックスといえば一覧から選ぶ選択部品
  • メニューバー: メニューバーといえば画面上部に機能を横並びにした帯
  • プルダウンメニュー: プルダウンメニューといえばメニューバーから下に展開
  • ポップアップメニュー: ポップアップメニューといえば操作位置にその場で出現
  • サムネイル: サムネイルといえば縮小見本の一覧表示
  • ヘルプ機能: ヘルプ機能といえば操作方法を案内する支援
  • ツールチップ: ツールチップといえばホバーで出る小さな説明

関連の過去問演習は今後のアップデートで追加予定です。