ITパスポート 学習ページ|テクノロジ系・技術要素

インタフェース設計

使いやすいシステムを作るには、利用者の操作や情報の見せ方を考える必要があります。画面、帳票、Webサイトを利用者の視点で設計します。

人とシステムの接点

ヒューマンインタフェースは、人とコンピュータシステムの接点です。画面を指で操作するマルチタッチや、音声で操作するVUIなどもその一例です。

利用者が迷わず操作でき、目的を達成しやすいことがユーザビリティの向上につながります。

人とシステムの接点を使いやすくする

GUIの部品を見分ける

GUIでは、ウィンドウやアイコン、メニューなどを使い、視覚的に操作できるようにします。選択肢から一つを選ぶラジオボタンや、複数を選べるチェックボックスなど、目的に応じて部品を使い分けます。

画面上の項目にポインタを重ねたとき、補足説明を表示するものをツールチップと呼びます。ラジオボタンとチェックボックスでは選択方法が異なる点が狙われやすいところです。

GUI部品は用途に応じて使い分ける

画面と帳票を読みやすく

画面設計では、入力する順番を業務の流れに合わせたり、同じ意味の色や配置を統一したりします。必要に応じて操作方法や入力例を示すことで、利用者の誤操作を減らせます。

帳票では、関連する項目を近くに配置し、不要な情報を減らして読み取りやすくします。画面や帳票では統一性と分かりやすさを意識することが基本です。

操作の流れと表示の統一性を意識する

端末に合わせて表示する

レスポンシブWebデザインは、画面サイズなどに応じてレイアウトを調整し、PCやスマートフォンなどで見やすくする考え方です。端末ごとに別のURLを用意することとは異なります。

CSSを使うと、文字の大きさや色、配置などの見た目を複数のページで統一しやすくなります。内容の構造と見た目の指定を分けるという考え方も押さえます。

レスポンシブは画面サイズに応じて調整する

利用者中心で改善する

人間中心設計では、実際に利用する人の特性や利用状況を理解し、それを設計へ反映します。設計したものを評価し、問題があれば改善を繰り返します。

作り手の都合だけでなく利用者の視点で設計と評価を行うことが、人間中心設計の基本です。

利用者を理解し評価と改善を繰り返す

本番の形で解いてみる

基本の問題(このページのために作った問題・本番と同じ四肢択一)

商品の申込画面で、支払方法の候補を画面上に並べて表示し、利用者にその中から一つだけ選択させたい。適したGUI部品はどれか。

  1. ラジオボタン
  2. チェックボックス
  3. トグルスイッチ
  4. スライダー
答えと解説を見る

正解: ラジオボタン

並べて表示した候補から一つだけを選ばせる場合はラジオボタンが適しています。チェックボックスは複数選択、トグルスイッチはオンとオフの切替え、スライダーは連続した値の指定に使います。

まちがえやすい点: 一つだけ選ぶのか、複数選ぶのか、オンとオフを切り替えるのかで部品を見分けます。

基本の問題(このページのために作った問題・本番と同じ四肢択一)

レスポンシブWebデザインの説明として、最も適切なものはどれか。

  1. 利用端末の画面サイズなどに応じて、ページのレイアウトを調整する
  2. 端末ごとに別々のURLを用意し、専用ページへ自動的に切り替える
  3. 画面の拡大率を一定に保ち、どの端末でも同じ配置のまま表示する
  4. 閲覧するブラウザごとに異なるHTMLファイルを作成して表示する
答えと解説を見る

正解: 利用端末の画面サイズなどに応じて、ページのレイアウトを調整する

レスポンシブWebデザインは、同じページを画面サイズなどに応じて柔軟にレイアウト変更する考え方です。端末ごとに別ページや別HTMLを用意すること自体を指すものではありません。

まちがえやすい点: 端末別ページの用意と、同じページの表示調整を混同しない。

基本の問題(このページのために作った問題・本番と同じ四肢択一)

人間中心設計の考え方として、最も適切なものはどれか。

  1. 利用者の特性や利用状況を調べ、設計と評価に反映する
  2. 利用者への調査は最初だけ行い、その後の設計は開発者の判断だけで進める
  3. 利用者の要求よりも実装できる機能数を優先し、完成後に操作方法を説明する
  4. 一度作成した設計案を基準とし、評価結果は次期システムだけに反映する
答えと解説を見る

正解: 利用者の特性や利用状況を調べ、設計と評価に反映する

人間中心設計では、利用者や利用状況を理解し、設計と評価を繰り返して改善します。利用者評価を設計途中の改善に反映する点が重要です。

まちがえやすい点: 利用者調査は最初の一度だけでなく、評価と改善にもつなげる。

この内容を問題で確かめる

読んだところを、本番と同じ四肢択一の10問セットで思い出してみましょう。

ITパスポートの問題を解く →

このページの内容は、IPA「ITパスポート試験 シラバス Ver.6.5」(2026年1月公表)の範囲にもとづきます(2026年10月確認)。