インタフェース設計

営業伝票を入力する画面の設計に際し，リストボックスを使った選択画面において，作業効率を高めるために，画面が表示された時点で，ある値がすでに選択された状態になるように設定することにした。 取引先の所在地（関東地方の七つの都道府県の名称）を選択するリストボックスの場合，選択された状態で設定される都道府県として，適切なものはどれか。ここで，入力作業に関する事項は，次のとおりである。 〔入力作業に関する事項〕 (1) 営業担当者ごとの取引先の所在地は，一つ又は隣接する二つの都道府県にある。 (2) 営業担当者は，伝票を取引先ごとに分類して，入力作業担当者に渡す。 (3) 入力作業は，営業担当者ごとの伝票をまとめて行う。 (4) まとめて入力する伝票の数は，都道府県ごとに複数枚ある。 (5) 1画面の入力操作で，1枚の伝票が入力できる。

スーパマーケット N 町店の広報スタッフである D さんは，本社の Web サイト担当の E さんと協力して N 町店紹介のページを作成している。このたび，N 町店紹介のページのアクセス数増加を目的として，Web サイトで懸賞付きアンケートを実施することになった。D さんは，図 1 のような懸賞ページ案を作成し，E さんに相談した。 図 1　懸賞ページ案 ・〈懸賞ページタイトル〉 ・賞品：A 賞 〈写真 1〉，B 賞 〈写真 2〉，C 賞 〈写真 3〉 ・希望賞品を一つ選んでください [ ] ・〈アンケートでの個人情報の取得目的，用途，管理などに関する記述〉 ・アンケート 〈アンケートの内容の一部〉 　・N 町店の Web ページを見たご感想 [ ] 　・お名前 [ ] 　・性別 [ ] 　・連絡先メールアドレス [ ] ・（応募する）　（キャンセル） ・注記：[ ] は入力領域，（ ）はボタン，〈 〉は表示する部品や表示内容が省略されている箇所の説明を示す。 D さんは，懸賞ページ案を確認した E さんから，次のようなアドバイスと指示を受けた。 〔デザインに関する主なアドバイス〕 (1) マウスでの入力など，操作性の良い入力方法を採用する。 (2) 回答などの操作がしやすい順序に，入力領域やボタンを配置する。 (3) 入力の誤りを防ぐため，データ形式に応じた入力フォームを利用する。 〔作成に関する主な指示〕 (1) 懸賞ページは HTML 形式の ank01.html というファイル名で作成し，Web サーバの指定されたディレクトリに転送する。 (2) ファイルを指定する場合は，相対パスで記述する。 (3) 使用する写真のファイルサイズは，1 枚当たり 200k バイト以下とする。 D さんは，E さんから受けたアドバイスの内容を考慮して，図 1 の懸賞ページ案のデザインを改善することにした。改善内容として，適切なものはどれか。

スーパマーケット N 町店の広報スタッフである D さんは，本社の Web サイト担当の E さんと協力して N 町店紹介のページを作成している。このたび，N 町店紹介のページのアクセス数増加を目的として，Web サイトで懸賞付きアンケートを実施することになった。D さんは，図 1 のような懸賞ページ案を作成し，E さんに相談した。 D さんは，懸賞ページ案を確認した E さんから，次のようなアドバイスと指示を受けた。 〔デザインに関する主なアドバイス〕 (1) マウスでの入力など，操作性の良い入力方法を採用する。 (2) 回答などの操作がしやすい順序に，入力領域やボタンを配置する。 (3) 入力の誤りを防ぐため，データ形式に応じた入力フォームを利用する。 〔作成に関する主な指示〕 (1) 懸賞ページは HTML 形式の ank01.html というファイル名で作成し，Web サーバの指定されたディレクトリに転送する。 (2) ファイルを指定する場合は，相対パスで記述する。 (3) 使用する写真のファイルサイズは，1 枚当たり 200k バイト以下とする。 完成した懸賞ページを本社の Web サイトで公開するために，サイト内でのリンクを設定したい。公開に当たっては懸賞付きアンケートの実施をトップページで告知して，トップページから懸賞ページへのスムーズな誘導と，N 町店紹介のページのアクセス数の増加を図りたい。最も適切なサイトのページ構成を示した図はどれか。 　なお，図中の □ はサイトの1画面（ページ）を，→ はページのリンク経路を示す。

オンラインヘルプに関する記述として, 適切なものはどれか。

Webページの見栄えをデザインするためのものはどれか。

Web ページの作成・編集において, Web サイト全体の色調やデザインに統一性をもたせたい場合, HTML と組み合わせて利用すると効果的なものはどれか。

PC の操作画面で使用されているプルダウンメニューに関する記述として, 適切なものはどれか。

図2のテストの採点結果入力のワークシートに、組別の得点分布表を作成するために、セルB40に計算式を入力してセルB40〜G50に複写する。セルB40に入れる適切な式はどれか。 〔ワークシートの説明〕 (1) セルA40〜A50には、得点を示す数値として、それぞれ0〜10を入力する。 (2) セルB40〜B50には、P組の0〜10点の人数を、それぞれ表示する式を入力する。 (3) 同様にセルC40〜C50にはQ組、セルD40〜D50にはR組、セルE40〜E50にはS組、セルF40〜F50にはT組、セルG40〜G50にはU組の得点別人数を表示する式を入力する。

注記 網掛けの部分は、表示していない。 図2 テストの採点結果入力のワークシート

次の記述 a〜d のうち, システム利用者にとって使いやすい画面を設計するために考慮するものだけを全て挙げたものはどれか。 a 障害が発生したときの修復時間 b 操作方法の覚えやすさ c プッシュボタンの配置 d 文字のサイズや色

F 社の総務部では，社員（役員を含む）による購買や契約などの申請と承認を行うシステム（以下，稟議システムという）を構築することにした。総務部の G さんは，稟議システムの申請画面と申請の流れについて検討を行っている。 申請画面の入力項目は，表 1 のとおりである。 表 1　申請画面の入力項目

稟議システムを用いた申請の流れは，次のとおりである。 (1) 申請者が申請画面に必要事項の入力を行う。申請前に稟議を一時保存できる。 (2) 必要事項の入力が完了した後に，稟議の申請を行う。 (3) 申請された稟議は，同意者の参照が可能となる。 (4) 同意者は，稟議に問題がなければ同意し，問題があれば差戻しを行う。 (5) 同意者が全て同意した後に，承認者は申請された稟議について，承認処理が可能となる。 (6) 承認者は，稟議に問題がなければ承認し，問題があれば差戻しを行う。 稟議システムは，申請，同意，差戻し，承認の各画面に表示した実行ボタンが押されることによって処理を実行し，入力項目と日時を履歴として保存する。申請前の入力情報は，履歴としては保存しない。差戻しされた稟議は，申請者が編集可能で再申請できる状態となる。 入力項目“種別”の入力に使用する GUI (Graphical User Interface) 部品として, 適切なものはどれか。

F 社の総務部では，社員（役員を含む）による購買や契約などの申請と承認を行うシステム（以下，稟議システムという）を構築することにした。総務部の G さんは，稟議システムの申請画面と申請の流れについて検討を行っている。 申請画面の入力項目は，表 1 のとおりである。 表 1　申請画面の入力項目

稟議システムを用いた申請の流れは，次のとおりである。 (1) 申請者が申請画面に必要事項の入力を行う。申請前に稟議を一時保存できる。 (2) 必要事項の入力が完了した後に，稟議の申請を行う。 (3) 申請された稟議は，同意者の参照が可能となる。 (4) 同意者は，稟議に問題がなければ同意し，問題があれば差戻しを行う。 (5) 同意者が全て同意した後に，承認者は申請された稟議について，承認処理が可能となる。 (6) 承認者は，稟議に問題がなければ承認し，問題があれば差戻しを行う。 稟議システムは，申請，同意，差戻し，承認の各画面に表示した実行ボタンが押されることによって処理を実行し，入力項目と日時を履歴として保存する。申請前の入力情報は，履歴としては保存しない。差戻しされた稟議は，申請者が編集可能で再申請できる状態となる。 申請画面での入力間違いを防ぐために, 複数の入力項目間でシステムが行うことのできるエラーチェックはどれか。

キーボード入力を補助する機能の一つであり, 入力中の文字から過去の入力履歴を参照して, 候補となる文字列の一覧を表示することで, 文字入力の手間を軽減するものはどれか。

タッチパネルの複数のポイントに同時に触れて操作する入力方式はどれか。

Web サイトを構築する際にスタイルシートを用いる理由として, 適切なものはどれか。

サムネイルの説明として, 適切なものはどれか。

レスポンシブ Web デザインに関する記述として, 適切なものはどれか。

アプリケーションソフトウェアの操作を行うとき，質問に答えていく対話形式によって，複雑な操作を簡単に行えるようにする機能はどれか。