ダウンロード

50. ヒューマンインタフェース技
術
テクノロジ系
ユーザインタフェース
メニューバー
ポップアップメニュー
プルダウンメニュー
ラジオボタン チェックボックス
技術要素
コンボボックス
リストボックス
ヒューマンインタフェース
テキストボックス
画面設計
会員管理
会員照会
会員登録
メニューへ戻る
GUI(Graphical User Interface)
平成26年春期 問32
CUI(Character User Interface)
次の記述 a ∼ d のうち,システム利用者にとって使いやすい画面を
設計するために考慮するものだけを全て挙げたものはどれか。
a 障害が発生したときの修復時間
b 操作方法の覚えやすさ
c プッシュボタンの配置
d 文字のサイズや色
WYSIWYG
モニタに表示された通りに印刷。
同色・同型・同サイズ。
最近は、入力画面=出力画面
という意味でも使われる。
What
You
See
Is
What
You
Get
ア a,b,c
イ a,b,d
ウ a,c,d
エ b,c,d
平成21年春期 問67
営業伝票を入力する画面の設計に際し,リストボックスを使った選択画面において,
作業効率を高めるために,画面が表示された時点で,ある値がすでに選択された状態に
なるように設定することにした。
取引先の所在地(関東地方の七つの都道府県の名称)を選択するリストボックスの場
合,選択された状態で設定される都道府県として,適切なものはどれか。ここで,入力
作業に関する事項は,次のとおりである。
WYSIWYG
ですよ
〔入力作業に関する事項〕
(1) 営業担当者ごとの取引先の所在地は,一つ又は隣接する二つの都道府県にある。
(2) 営業担当者は,伝票を取引先ごとに分類して,入力作業担当者に渡す。
(3) 入力作業は,営業担当者ごとの伝票をまとめて行う。
(4) まとめて入力する伝票の数は,都道府県ごとに複数枚ある。
WYSIWYG
ですよ
(5) 1 画面の入力操作で,1 枚の伝票が入力できる。
ア 営業成績の良い担当者の取引先がある都道府県
ウ 五十音順で先頭となる茨城県
イ 会社数が最も多い東京都
エ 前画面で入力した都道府県
平成23年特別 中問C(抜粋) 問97
平成25年春期 問65
PC の操作画面で使用されているプルダウンメニューに関する記述
として,適切なものはどれか。
ア エラーメッセージを表示したり,少量のデータを入力するため
に用いる。
D さんは,懸賞ページ案を確認した E さんから,次のようなアドバイスと指示
を受けた。
〔デザインに関する主なアドバイス〕
(1)マウスでの入力など,操作性の良い入力方法を採用する。
(2)回答などの操作がしやすい順序に,入力領域やボタンを配置する。
(3)入力の誤りを防ぐため,データ形式に応じた入力フォームを利用する。
イ 画面に表示されている複数の選択項目から,必要なものを全て
選ぶ。
D さんは,E さんから受けたアドバイスの内容を考慮して,図 1 の懸賞ページ
案のデザインを改善することにした。改善内容として,適切なものはどれか。
ウ キーボード入力の際,過去の入力履歴を基に次の入力内容を予
想し表示する。
ア 応募する ボタンは,押し忘れがないよう画面の一番上に配置する。
エ タイトル部分をクリックすることで選択項目の一覧が表示され,
その中からーつ選ぶ。
イ 希望賞品 は,マウスのクリックで賞品を選択できるようチェックボックス
を用いる。
ウ 性別 は, 男 , 女 の二つの選択肢から選べるようラジオボタンを用いる。
エ 画面の右上の項目から順に回答することを想定して,アンケート項目を配置
する。
平成23年特別 中問C(抜粋)
過去問題 正解一覧
Web サイトで懸賞付きアンケートを実施することになった。D さんは,図1
のような懸賞ページ案を作成し,E さんに相談した。
賞品
A賞 <写真1>
<懸賞ページタイトル>
B賞 <写真2>
C賞 <写真3>
希望商品を一つ選んでください [
]
<アンケートでの個人情報の取得目的,用途,管理などに関する記述>
アンケート
<アンケートの内容の一部>
N町店のWebページを見たご感想 [
お名前 [
]
連絡先メールアドレス [
応募する
性別 [
]
]
]
キャンセル
注記 [ ]は入力領域, はボタン,< > は表示する部品や表
示内容が省略されている個所の説明を示す。
図1 懸賞ページ案
問題
正解
平成26年春期 問32(マネジメント)
エ
平成21年春期 問67
エ
平成25年春期 問65
エ
平成23年特別 問97
ウ
HTML(構造と体裁の分離)
51. インタフェース設計
テクノロジ系
技術要素
ヒューマンインタフェース
HTML(構造と体裁の分離)
<!DOCTYPE html>
<html lang="ja">
<head>
<title>/人
人\</title>
<link rel="stylesheet”
href=”xxx.css" media="screen”>
</link>
<script type="text/javascript”
src=”zzz.js"></script>
</head>
<body>
<div id="contents">
<div id="header"></div>
<div id="main”>
<h1>僕と契約して
魔法少女になってよ!</h1>
<image src=“qb.jpg” alt=“” />
</div>
</div>
</body>
</html>
<!DOCTYPE
html>
CSS(Cascading
Style Sheets)
<html HTML/XMLのデザイン(体裁・装飾)を記述
lang="ja">
.css
<head>
ファイル
<title>/人
人\</title>
<link rel="stylesheet”
href=”xxx.css" media="screen”>
</link>
<script type="text/javascript”
/人
人\
src=”zzz.js"></script>
.js
</head>
ファイル
<body>
<divScript
id="contents">
Java
<div id="header"></div>
動的な処理、簡単なプログラムを記述
<div id="main”>
<h1>僕と契約して
僕と契約して魔法少女になってよ!
魔法少女になってよ!</h1>
<image src=“qb.jpg” alt=“” />
</div>
</div>
.html
</body>
ファイル
</html>
平成24年春期 問53
Web ページの見栄えをデザインするための
ものはどれか。
/人
人\
ア cookie
イ CSS
僕と契約して魔法少女になってよ!
ウ CUI
エ SSL
平成25年秋期 問80
Webアクセシビリティ
Web ページの作成・編集において,Web サイト全体
の色調やデザインに統一性をもたせたい場合,HTML
と組み合わせて利用すると効果的なものはどれか。
定義:高齢者や障害者など心身の機能に制約のある人でも、年齢的・
身体的条件に関わらず、ウェブで提供されている情報にアクセ
スし利用できること---みんなのWeb(※①)より
ア CSS(Cascading Style Sheets)
イ SNS(Social Networking Service)
ウ SQL(Structured Query Language)
エ XML(Extensible Markup Language)
主要なガイドライン:
WCAG 2.0(Web Content Accessibility Guidelines 2.0)
!  W3Cによって勧告(※②)
!  アクセシビリティの4原則
(知覚可能、操作可能、理解可能、互換性・ロバスト性)が土台
!  達成基準として3つの適合レベル
(A:最低レベル、AA、AAA:最高レベル)を定義
C
C
情報アクセシビリティ
•  情報アクセシビリティ JIS(JIS X 8341)
『高齢者・障害者等配慮設計指針−情報機器における機器,ソフト
ウェア及びサービス』
–  第1部:共通指標
•  高齢者・障害者などの情報アクセシビリティ向上のために必要となる基本的考え
方、技術的要件などを規定
–  第2部:情報処理装置
•  PC、周辺機器などの情報処理装置分野の個別規格
–  第3部:ウェブコンテンツ
•  ウェブコンテンツに関する個別規格(ウェブアクセシビリティJIS)
–  第4部:電気通信機器
•  電話(携帯・固定)、FAXなどの通信機器分野の個別規格
–  第5部:事務機器
•  コピー機、プリンタ複合機などの事務機器分野の個別規格
/.
2 3 22 : 0
.002
/
: 2A
Webアクセシビリティと類似した用語
•  ユーザビリティ
–  特定の利用状況において、特定の利用者によって、ある製品が、指定
された目標を達成するために用いられる際の、有効さ、効率、利用者
の満足度の度合い(ISO 9241-11)
•  情報バリアフリー
–  障害者でも支障なく情報通信を利用できるようにすること
•  ユニバーサルデザイン
–  年齢、障害、性別、言語、国籍などにかかわらず利用できる施設・製
品・情報の設計(デザイン)
–  「バリアフリー」は「障壁を取り除く」という意味であるのに対し、
ユニバーサルデザインは「初めから障壁がないように設計する」とい
う考え方
情報バリアフリー全般を理解するための用語:
/. 2 3 22 : 0
.
2:2 .
参照
平成23年秋期 問62
Web アクセシビリティの説明として,適切なものはどれか。
ア Web サイトを活用したマーケティング手法である。
イ Web ページのデザインを統一して管理することを目的
とした仕組みである。
ウ 年齢や身体的条件にかかわらず,誰もが Web を利用し
て,情報を受発信できる度合いである。
エ 利用者が Web ページに入力した情報に基づいて, Web
サーバがプログラムを起動して動的に表示内容を生成する
仕組みである。
平成22年秋期 問71
ユニバーサルデザインの考え方として,適切なものはどれか。
ア 一度設計したら,長期間にわたって変更しないで使える
ようにする。
イ 世界中どの国で製造しても,同じ性能や品質の製品がで
きるようにする。
ウ なるべく単純に設計し,製造コストを減らすようにする。
エ 年齢,文化,能力の違いや障害の有無によらず,多くの
人が利用できるようにする。
過去問題 正解一覧
問題
正解
平成24年春期 問53
イ
平成25年秋期 問80
ア
平成23年秋期 問62
ウ
平成22年秋期 問71
エ