令和7年度 秋期 応用情報技術者試験 午後 問題 問8 モバイルオーダーの画面設計

テクノロジインタフェース・メディアシステム開発技術セキュリティ技術

この問題は2025(R7)秋 応用情報技術者 午後に出題されたものです。出題時点の法令・制度に基づく内容のため、現行の内容と一致しない場合があります。

本ページの問題文・選択肢は、原本の体裁を Web 表示用に正規化しています(改行・記号・数式・図表参照の調整)。設問の趣旨および正解に影響する変更は加えていません。

学習ガイド

カフェのモバイルオーダーシステムを題材にした画面設計の問題です。画面項目定義書の空欄補充、電話番号の正規表現チェック、コンポーネントの活性・非活性制御、設計レビュー指摘への対応、そしてSQLインジェクション対策まで、フロントエンド設計の実務知識が問われます。この記事では、利用者の誤操作と悪意ある入力の両方を防ぐという画面設計の目的から、各設問の解答を根拠付けて解説します。

この記事で押さえる論点

  • 画面項目定義書の記載(制御・チェック)を読み書きする
  • 正規表現による入力チェックを設計する
  • 設計レビューの指摘から不備を特定し修正する

問題本文

問8 モバイルオーダーシステムの画面設計に関する次の記述を読んで,設問に答えよ。

C社は,カフェを運営する会社であり,オフィス街の駅前を中心に約50店舗を運営している。C社の商品は,顧客の好みに応じたトッピングやサイズを細かくオーダーできることが人気を呼び,売上げを伸ばしている。しかし,朝や昼のピーク時間帯では,オーダーに時間が掛かることが原因で,顧客からクレームが来ている。
そこで,C社では,顧客自身のスマートフォン(以下,スマホという)でオーダーできるモバイルオーダーシステム(以下,新システムという)を構築することにした。新システムの構築は,C社情報システム部のR君が担当することになった。

〔新システムへの要望〕

R君は,C社の商品開発部の部員やスマホからのオーダーへのニーズがある店舗の店長を招集し,新システムに対する要望のヒアリングを行った。R君はヒアリング結果を次のように整理した。

  • 顧客のスマホにC社専用のアプリケーションソフトウェアをあらかじめインストールして利用してもらう。
  • 顧客が商品のオーダーから決済までをスマホでできるようにする。
  • 店内利用かテイクアウトかを選択するとともに,連絡が取れる電話番号をハイフン記号を含めて入力できるようにする。顧客の中には海外からの観光客も多いので,プラス記号から始まる国番号を含む電話番号も入力できるようにする。
  • 季節商品を顧客にアピールできるようにする。
  • 店舗ごとのおすすめ商品や独自商品をアピールできるようにする。
  • 選択された商品についてはアイス又はホットのいずれかを選択できるようにする。
  • サイズの指定は,S(150ml),M(200ml),L(250ml)の3段階に加え,100ml〜500mlの間で50ml間隔で設定できるようにする。
  • トッピングの指定は,コーヒーパウダー,チョコパウダーなど複数のトッピングも指定できるようにする。
  • 商品に関する“おこのみ要望”を受け付けられるようにする。
  • 商品の受取りは,対象店舗の当日の開店時刻から閉店時刻の30分前までとする。

R君は,これらの要望を満たすための要件定義書を作成した。

〔画面の設計〕

R君は,新システムの要件定義書を基に画面設計を開始した。R君が設計中のトップ画面と商品選択画面の画面レイアウト例を図1に,トップ画面の画面項目定義書を表1に,商品選択画面の画面項目定義書を表2に示す。

図1 トップ画面と商品選択画面の画面レイアウト例
図の説明テキスト

トップ画面と商品選択画面の2つの画面レイアウト例が並べられている。
【トップ画面】

  • ヘッダ部: 左側にロゴ、中央に「C社カフェ」、右側にハンバーガーメニュー。
  • 季節商品: カルーセル形式の商品画像表示領域。
  • モバイルオーダー:
    • 店舗選択(ドロップダウン): ○○○駅北口店
    • 受取り時刻(ドロップダウン): 15:00
    • 連絡先(テキスト入力): +1-123-4567890
    • 利用形態(ラジオボタン): 店内利用、テイクアウト
  • ボタン: 「商品選択へ進む」
    【商品選択画面】
  • ヘッダ部: トップ画面と同様。
  • 商品選択: 画像・商品名・サイズ別価格が記載されたリスト(本日のコーヒー、本日の紅茶、アメリカンコーヒーなど)。
  • ホット/アイス指定(ラジオボタン): ホット、アイス
  • サイズ指定(ラジオボタン): S、M、L、自由指定(+入力欄 200mL)
  • トッピング指定:
    • パウダー(複数選択可のチェックボックス): コーヒーパウダー、抹茶パウダー、チョコパウダー、モンブランパウダー
  • おこのみ要望: テキスト入力欄
  • ボタン: 「注文」
表1 トップ画面の画面項目定義書(前半)
図の説明テキスト
No. 画面項目名 コンポーネント種別 選択肢 初期値 入力チェック その他仕様
1 メニュー a 商品紹介サイト,ログイン,顧客情報変更 設定なし なし なし
2 季節商品 (省略) なし 季節商品の画像 なし 3秒で画像を切替え
3 店舗選択 b 現在位置から半径5km以内の店舗 現在位置から最も近い店舗 なし なし

二つの画面ともに,画面上部にC社のロゴと会社名を配置する。さらに,右上には商品紹介サイト,ログイン,顧客情報変更へのリンクを表示するための a 型の画面コンポーネントを配置する。

トップ画面には,季節商品を表示する領域を配置し,商品の画像を順に表示する。

表1 トップ画面の画面項目定義書(続き)
図の説明テキスト
No. 画面項目名 コンポーネント種別 選択肢 初期値 入力チェック その他仕様
4 受取り時刻 b 開店時刻以降かつ現在時刻+15分以降の時刻のリスト 選択肢のうち最も早い時刻 開店時刻以降かつ表2のNo.9のボタン押下時の時刻以降であるか 時刻の早い順に表示
5 連絡先 テキストボックス なし 前回オーダー時に入力された連絡先 正規表現チェック なし
6 店内利用/テイクアウト c 店内利用,テイクアウト 店内利用にチェック 1個の選択肢が選択されているか なし
7 商品選択へ進むボタン ボタン なし 設定なし (省略) なし
表2 商品選択画面の画面項目定義書
図の説明テキスト
No. 画面項目名 コンポーネント種別 選択肢 初期値 入力チェック その他仕様
1 メニュー a 商品紹介サイト,ログイン,顧客情報変更 設定なし なし なし
2 商品選択 テーブル 対象店舗で販売可能な商品 選択なし 1個の商品が選択されているか 横2列の表とし,縦方向にスクロール
3 選択できる商品 (省略) なし 商品画像+商品名+S,M,Lの価格 なし No.2のテーブルの中に表示
4 ホット/アイス指定 (省略) ホット,アイス 選択なし 1個の選択肢が選択されているか なし
5 サイズ指定 (省略) S,M,L,自由指定 選択なし 1個の選択肢が選択されているか なし
6 サイズ自由指定 (省略) 100ml〜500mlの間で50ml間隔で小さい順に表示 200ml 1個の選択肢が選択されているか No.5が自由指定時だけ操作可能にする
7 トッピング指定 d トッピングごとの選択肢 人気順に表示 設定なし なし パウダーなどのトッピングごとに用意
8 おこのみ要望 テキストエリア なし 設定なし なし なし
9 注文ボタン ボタン なし 設定なし (省略) なし

店舗選択と受取り時刻の画面項目は,画面項目の選択時に選択肢のリストを表示し,表示された複数の選択肢から一つを選択するb型の画面コンポーネントを利用する。連絡先の画面項目は,連絡先の電話番号を入力できるようにする。また,店内利用/テイクアウトの画面項目は,あらかじめ表示された選択肢の中から一つを選択するc型の画面コンポーネントを利用する。

商品選択画面には,商品を選択するための画面項目を配置する。サイズ指定の画面項目の,S,M,L,自由指定の選択肢のうち,自由指定を選択した場合だけサイズ自由指定の画面項目を操作可能にし,自由指定以外を選択した場合は操作できないようにする。また,トッピング指定の画面項目は,あらかじめ表示された選択肢から任意の数のトッピングを選択可能とするためにd型の画面コンポーネントを利用する。

〔設計レビュー〕

R君は設計した画面について,R君の上司であるU課長にレビューを依頼した。U課長は,次のように指摘した。

指摘1: トップ画面の受取り時刻の画面項目について,選択肢と入力チェックに関して,設計に不備があるので修正すること。

指摘2: 商品選択画面の商品選択の画面項目について,テーブル型の画面コンポーネントを利用する場合,“店舗ごとのおすすめ商品や独自商品をアピールできるようにする”という要望の具体化不足が疑われる。これは商品の売行きに影響があるので,商品開発部に確認すること。

〔新システムのテスト〕

新システムの実装を完了し,R君が商品選択画面をテストしたところ,画面の初期表示に時間が掛かるという問題が検出された。この問題は,全商品の情報を一度に読み込むことが原因であったので,一度に読み込む商品数を少なくするために画面コンポーネントを追加した。また,セキュリティ診断ツールを用いたテストを実施したところ,商品選択画面のおこのみ要望の画面項目に関して,SQLインジェクションに関する不具合が検出された。

その後,R君は検出された不具合の修正を行って新システムの構築を完了させ,C社は新システムの運用を開始した。

設問と解答・解説

設問1

〔画面の設計〕について答えよ。

(1)

表1,表2及び本文中の a に入れる,最も適切な字句を解答群の中から選び,記号で答えよ。

  1. カルーセル
  2. コンボボックス
  3. チェックボックス
  4. ドロップダウンリスト
  5. パンくずリスト
  6. ハンバーガーメニュー
  7. ラジオボタン
  8. リストボックス

模範解答

選択肢カ: ハンバーガーメニュー

配点 1

解説

画面設計において、モバイル端末など画面の横幅が限られている場合、メニュー項目を折りたたんでおく UI が一般的に用いられます。三本線のアイコンなどをタップすることでメニュー一覧が表示される UI コンポーネントを ハンバーガーメニュー と呼びます。

各選択肢の解説

  • ア: カルーセルは、画像やコンテンツを横にスライドさせて表示する UI コンポーネントです。
  • イ: コンボボックスは、テキスト入力とドロップダウンリストを組み合わせた UI コンポーネントです。
  • ウ: チェックボックスは、複数の選択肢の中から複数を選択するための UI コンポーネントです。
  • エ: ドロップダウンリストは、タップすると選択肢が下に展開される UI コンポーネントです。
  • オ: パンくずリストは、ユーザーが現在どの階層にいるかを示すナビゲーション用の UI コンポーネントです。
  • キ: ラジオボタンは、複数の選択肢の中から1つだけを選択するための UI コンポーネントです。
  • ク: リストボックスは、常に複数の選択肢を表示しておき、そこから選択させる UI コンポーネントです。

(2)

表1,表2及び本文中の b に入れる,最も適切な字句を解答群の中から選び,記号で答えよ。

  1. カルーセル
  2. コンボボックス
  3. チェックボックス
  4. ドロップダウンリスト
  5. パンくずリスト
  6. ハンバーガーメニュー
  7. ラジオボタン
  8. リストボックス

模範解答

選択肢エ: ドロップダウンリスト

配点 1

解説

「タップすると下に選択肢が展開される」という動作から、限られたスペースで1つの選択肢を選ばせるためのコンポーネントである ドロップダウンリスト が該当します。

各選択肢の解説

  • ア: カルーセルは、画像やコンテンツを横にスライドさせて表示する UI コンポーネントです。
  • イ: コンボボックスは、テキスト入力とドロップダウンリストを組み合わせた UI コンポーネントです。
  • ウ: チェックボックスは、複数の選択肢の中から複数を選択するための UI コンポーネントです。
  • オ: パンくずリストは、ユーザーが現在どの階層にいるかを示すナビゲーション用の UI コンポーネントです。
  • カ: ハンバーガーメニューは、メニュー項目を折りたたんでおく UI コンポーネントです。
  • キ: ラジオボタンは、複数の選択肢の中から1つだけを選択するための UI コンポーネントです。
  • ク: リストボックスは、常に複数の選択肢を表示しておき、そこから選択させる UI コンポーネントです。

(3)

表1,表2及び本文中の c に入れる,最も適切な字句を解答群の中から選び,記号で答えよ。

  1. カルーセル
  2. コンボボックス
  3. チェックボックス
  4. ドロップダウンリスト
  5. パンくずリスト
  6. ハンバーガーメニュー
  7. ラジオボタン
  8. リストボックス

模範解答

選択肢キ: ラジオボタン

配点 1

解説

「複数の選択肢から1つだけ選ぶ」ための標準的な GUI コンポーネントは ラジオボタン です。

各選択肢の解説

  • ア: カルーセルは、画像やコンテンツを横にスライドさせて表示する UI コンポーネントです。
  • イ: コンボボックスは、テキスト入力とドロップダウンリストを組み合わせた UI コンポーネントです。
  • ウ: チェックボックスは、複数の選択肢の中から複数を選択するための UI コンポーネントです。
  • エ: ドロップダウンリストは、タップすると選択肢が下に展開される UI コンポーネントです。
  • オ: パンくずリストは、ユーザーが現在どの階層にいるかを示すナビゲーション用の UI コンポーネントです。
  • カ: ハンバーガーメニューは、メニュー項目を折りたたんでおく UI コンポーネントです。
  • ク: リストボックスは、常に複数の選択肢を表示しておき、そこから選択させる UI コンポーネントです。

(4)

表1,表2及び本文中の d に入れる,最も適切な字句を解答群の中から選び,記号で答えよ。

  1. カルーセル
  2. コンボボックス
  3. チェックボックス
  4. ドロップダウンリスト
  5. パンくずリスト
  6. ハンバーガーメニュー
  7. ラジオボタン
  8. リストボックス

模範解答

選択肢ウ: チェックボックス

配点 1

解説

「複数の選択肢から複数選べる(または1つも選ばないことも可能)」ための標準的な GUI コンポーネントは チェックボックス です。

各選択肢の解説

  • ア: カルーセルは、画像やコンテンツを横にスライドさせて表示する UI コンポーネントです。
  • イ: コンボボックスは、テキスト入力とドロップダウンリストを組み合わせた UI コンポーネントです。
  • エ: ドロップダウンリストは、タップすると選択肢が下に展開される UI コンポーネントです。
  • オ: パンくずリストは、ユーザーが現在どの階層にいるかを示すナビゲーション用の UI コンポーネントです。
  • カ: ハンバーガーメニューは、メニュー項目を折りたたんでおく UI コンポーネントです。
  • キ: ラジオボタンは、複数の選択肢の中から1つだけを選択するための UI コンポーネントです。
  • ク: リストボックスは、常に複数の選択肢を表示しておき、そこから選択させる UI コンポーネントです。

(5)

本文中の下線①について,電話番号の入力チェックに用いる正規表現として最も適切なものを解答群の中から選び,記号で答えよ。なお,正規表現の表記法は,[]は括弧内に含まれる1文字,0-9は数字1文字,+は直前の文字の1回以上の繰返し,{m, n}は直前の文字のm回以上n回以下の繰返し,¥はエスケープ文字を表すものとする。

  1. [0-9]+
  2. [0-9¥-]+
  3. ¥+{0, 1}[0-9]+
  4. ¥+{0, 1}[0-9¥-]+

模範解答

選択肢エ: ¥+{0, 1}[0-9¥-]+

配点 1

解説

電話番号の要件として、「国際電話を示す先頭の +(プラス)がつく場合とつかない場合がある」「数字とハイフン - で構成される」という点を満たす正規表現を選ぶ必要があります。
+ はメタ文字としての意味を持たないよう ¥ でエスケープして ¥+ とし、それが 0 回または 1 回現れることを示すために ¥+{0, 1} とします。
続く電話番号本体は、数字 0-9 とハイフン -(これもエスケープして ¥-)の1回以上の繰り返しになるため [0-9¥-]+ となります。これらを組み合わせた が正解です。

各選択肢の解説

  • ア: [0-9]+ は、ハイフンや先頭の + を許容しないため誤りです。
  • イ: [0-9¥-]+ は、ハイフンは許容しますが、先頭の + に対応していないため誤りです。
  • ウ: ¥+{0, 1}[0-9]+ は、先頭の + には対応していますが、ハイフンを許容しないため誤りです。

(6)

本文中の下線②について,配置した画面コンポーネントを操作できない状態にすることを何というか。10字以内で答えよ。

模範解答

非活性化

採点基準(配点 3点)

知識・理解度(内容)(2点)

  • 2: コンポーネントを操作できない状態を表す用語として、「非活性」または「非活性化」などの語が明確に含まれており、画面設計の観点を正しく理解している。
  • 1: 意味合いは近いが、情報処理用語としてやや不正確な表現となっている(例:「無効化」「操作不可」など)。
  • 0: 未解答、または全く異なる内容が記述されている。

論理性(構造)(1点)

  • 1: 対象となる用語が独立した単語として自然かつ的確な構造で記述されている。
  • 0: 文脈として不自然、または用語の体をなしていない。

解説

配置した画面コンポーネントを操作できない(グレーアウトされたような)状態にすることを 非活性化(または無効化・ディセーブル)と呼びます。ユーザーの誤操作を防ぎ、現在の状態ではその操作が行えないことを視覚的に示す、重要な画面設計の手法です。

高得点のポイント

  • コンポーネントを操作できない状態を示す正確な情報処理用語「非活性」や「非活性化」を用いていること
  • 日本語として不自然でない、独立した用語として簡潔に記述されていること

設問2

〔設計レビュー〕について答えよ。

(1)

指摘1について,設計の不備を20字以内で答えよ。

模範解答

閉店時刻の30分前までとする。

採点基準(配点 3点)

知識・理解度(内容)(2点)

  • 2: 閉店時刻の30分前という時間的な制約が、設計の不備として具体的に指摘されている。
  • 1: 時間的な制約への言及はあるが、「30分前」という具体的な数値が抜けている、または解釈に曖昧さが残る。
  • 0: 時間の制約について全く触れられていない。

論理性(構造)(1点)

  • 1: 指摘事項として意味が通じる形で、簡潔かつ論理的に文章が構成されている。
  • 0: 文章の構造が破綻しており、設計の不備としての意味をなしていない。

解説

カフェの店舗でのモバイルオーダーシステムにおいては、いつまでオーダーを受け付けるかというオーダーストップの時間が重要な業務要件となります。「閉店時刻の30分前までとする」といった具体的なオーダー受付の締め切り時間が考慮されていないことが、設計の不備として指摘されています。

高得点のポイント

  • 時間的な制約(閉店の30分前など)が具体的に指摘されていること
  • 20字以内という制限の中で、簡潔かつ論理的な文章として構成されていること

(2)

指摘2について,商品開発部に確認すべきことは何か。10字以内で答えよ。

模範解答

商品の並び順

採点基準(配点 3点)

知識・理解度(内容)(2点)

  • 2: リストやテーブル表示における設計要素として、「商品の並び順(ソート順)」が商品開発部への確認事項であることを正しく理解し記述できている。
  • 1: 表示順に関する記述はあるが、「商品」という対象が不明確、または表現がやや曖昧である。
  • 0: 全く異なる確認事項が記述されている。

論理性(構造)(1点)

  • 1: 確認すべき内容が、簡潔な名詞句または短い文で論理的に記述されている。
  • 0: 記述の意図が読み取れない、または論理的でない。

解説

テーブル型の画面コンポーネントなどを用いて商品一覧を表示する際、どのような順序(おすすめ順、価格順、カテゴリ別など)で表示するかは、ユーザビリティや販促効果に直結します。したがって、設計要素として商品開発部に 商品の並び順 を確認する必要があります。

高得点のポイント

  • リストや一覧表示における重要な設計要素である「並び順(ソート順)」に言及していること
  • 確認すべき対象が「商品」であることが明確になっていること

設問2(2)は,正答率が低かった。テーブル型の画面コンポーネントを用いる場合に必要な設計要素について問うた。要求や要件をインプットに,画面コンポーネントの種類に応じた必要な設計要素について網羅的に設計することは,設計工程への手戻りを減少させるだけではなく,システム利用者のユーザビリティにも影響を与えるので,よく理解しておいてほしい。

設問3

〔新システムのテスト〕について答えよ。

(1)

本文中の下線③について,どのような画面コンポーネントを追加したか。画面コンポーネント名を15字以内で答えよ。

模範解答

ページネーション

採点基準(配点 4点)

知識・理解度(内容)(2点)

  • 2: モバイル通信の帯域を意識し、データを分割表示するための適切な画面コンポーネントとして「ページネーション」等の用語を正しく提示できている。
  • 1: 概念は合っているが、「ページ分割」など、コンポーネント名として標準的でない表現となっている。
  • 0: 全く異なる機能やコンポーネントが記述されている。

論理性(構造)(2点)

  • 2: 単語のみ、あるいは簡潔な名詞句で明確に構造化されており、無駄な記述がない。
  • 1: 用語に加えて余分な説明が含まれており、焦点がややぼやけている。
  • 0: 用語の記述として構造をなしていない。

解説

大量のデータを一度に取得して画面に表示しようとすると、モバイル通信の帯域を圧迫し、画面の描画にも時間がかかります。これを防ぐために、データを一定件数ごとに分割して表示し、次ページへ遷移させる画面コンポーネントである ページネーション(またはページング)を追加します。

高得点のポイント

  • モバイル通信の帯域を意識した分割表示のコンポーネント名「ページネーション」を正しく挙げていること
  • 余分な説明を含まず、15字以内で簡潔に用語を記述していること

(2)

本文中の下線④について,SQLインジェクションの対策にならないものを解答群の中から選び,記号で答えよ。

  1. SQLで利用する記号を入力不可にする入力チェックを追加する。
  2. SQL文の組立てにおいて,プレースホルダを使用する。
  3. 新システムへのアクセスはWAF経由とする。
  4. 新システムを動作させるサーバにマルウェア対策ソフトを導入する。

模範解答

選択肢エ: 新システムを動作させるサーバにマルウェア対策ソフトを導入する。

配点 2

解説

SQLインジェクションは、アプリケーションの入力値処理の不備を突いて悪意のある SQL を実行させる攻撃です。これを防ぐためには、入力値の無害化や外部からの攻撃通信の遮断が必要です。

各選択肢の解説

  • ア: SQLで利用する記号(シングルクォートなど)を入力不可にすることで、悪意のある SQL の注入を一定程度防ぐことができるため、対策になります。
  • イ: プレースホルダを使用することで、入力値が SQL の命令として解釈されることを防ぐため、根本的な対策になります。
  • ウ: WAF(Web Application Firewall)は、Webアプリケーションへの攻撃パターンの通信を検知・遮断するため、対策になります。
  • エ: マルウェア対策ソフトは、サーバ上のウイルスやマルウェアの検知・駆除を行うものであり、Webアプリケーションの脆弱性を突く SQLインジェクションの対策にはなりません。したがって、これが正解です。

設問3(1)は,正答率が低かった。モバイル通信の通信帯域を意識した画面設計について問うた。画面設計においては,要件やアプリケーションについて考慮するだけではなく,システムの利用環境を想定して設計することが重要である。