情報デザインとユーザーインタフェース
情報デザインは情報をわかりやすく伝えるための設計で、近接・整列・反復・対比などの原則やLATCHの法則が使われます。ヒューマンインタフェースにはGUI・CUI・VUIなどがあり、GUIはウィンドウやラジオボタンといった部品で構成されます。
情報デザインの原則やUXデザインの考え方、GUIの構成要素、アクセシビリティやユニバーサルデザインの概念を説明できるようになります。
使いやすいシステムやWebサイトを作るには、見た目の美しさだけでなく、情報を正しく伝える設計が欠かせません。ITパスポート試験ではUI・UXやアクセシビリティに関する用語の意味を問う問題が出題されます。
情報デザインの考え方と手法
情報デザインとは、伝えたい情報を利用者にとってわかりやすく、誤解なく伝わるように整理・表現する設計のことです。単に見た目を装飾することではなく、情報の構造そのものを整理する点がポイントです。Webサイトやアプリの画面を作る仕事では、この考え方が土台になります。
情報を整理する代表的な原則に、関連する要素を近づけて配置する近接、要素の位置をそろえる整列、同じ形式を繰り返して使う反復、重要な部分を目立たせる対比の4つがあります。この4原則を守るだけでも、画面はぐっと見やすくなります。
情報を分類する切り口としては、場所・アルファベット・時間・分野・階層の5つの視点でまとめるLATCHの法則が知られています。たとえば商品一覧を五十音順に並べるのはアルファベット、価格の安い順に並べるのは階層の考え方にあたります。
ボタンが押せそうな形をしているなど、見た目そのものが使い方を示すヒントをシグニファイアと呼びます。また、利用者がどんな場面でどう使うかを、価値・行為・操作の段階に分けて具体化していく設計手法を構造化シナリオ法といいます。
こうした情報デザインの取り組みを、利用者が製品やサービスを使う過程で得る満足感や印象まで含めて考える活動をUXデザイン(User Experience デザイン)といいます。情報デザインは主に情報の整理を指すのに対し、UXデザインは体験全体を対象にする、より広い概念です。
たとえばネットショッピングのアプリを考えてみましょう。商品の価格やレビューを見やすく整理するのは情報デザインの役割ですが、注文してから商品が届くまでの一連の流れで「また使いたい」と感じてもらえるかどうかは、UXデザインが対象とする範囲です。構造化シナリオ法では、まず「便利に買い物がしたい」という価値シナリオを描き、そこから「比較して選ぶ」といった行為シナリオ、最後に「絞り込み機能をタップする」といった具体的な操作シナリオへと段階を分けて設計を進めます。段階を分けることで、目先の画面デザインだけに気を取られず、利用者が本当に求めていることを見失わずに設計できます。ITパスポート試験では、これらの用語が指す対象の広さの違いが問われます。
ヒューマンインタフェースとGUI
人とシステムの接点となる仕組み全体をヒューマンインタフェースといいます。使いやすさの度合いを表す言葉としてユーザビリティがあり、操作のしやすさや分かりやすさを評価する指標として使われます。
スマートフォンでは指で画面に触れて操作するマルチタッチインタフェースが主流です。画面に軽く触れるタップ、指で払うフリック、画面をなぞるスワイプ、2本指で広げたり縮めたりするピンチ、長く押し続けるロングプレスなど、動作ごとに名前がついています。話しかけて操作する音声インタフェース(VUI)、身振りで操作するジェスチャーインタフェースもヒューマンインタフェースの一種です。
マウスなどでアイコンやウィンドウを視覚的に操作するGUI(Graphical User Interface)は、いくつかの部品(コンポーネント)を組み合わせてできています。選択肢の中から1つだけを選ぶラジオボタンと、複数の項目を同時に選べるチェックボックスは、見た目が似ていますが選べる数が違う点に注意が必要です。会員登録画面で「性別」を選ぶ場合はラジオボタン、「興味のある分野」を複数選ばせる場合はチェックボックスが使われる、と考えると区別しやすくなります。
他にも、一覧から項目を選ぶリストボックス、画面上部に並ぶメニューバー、クリックすると下に選択肢が広がるプルダウンメニュー、操作した位置に応じて出てくるポップアップメニュー、画像を縮小表示するサムネイル、カーソルを合わせると情報が出るホバー(ロールオーバー)とその際に表示される補足説明のツールチップ、困ったときに参照するヘルプ機能などがあり、いずれも直感的な操作を助ける工夫です。
キーボードから文字によるコマンドを入力して操作するCUI(Character User Interface)は、GUIより習得に手間がかかりますが、決まった処理を素早く正確に実行できるという長所があり、システムの管理作業などでは今も使われています。用途に応じてGUIとCUIを使い分けることも、システムを設計するうえで意識しておきたい視点です。
画面・帳票・Webデザインとユニバーサルデザイン
画面を設計するときは、入力の流れが自然になるように項目を並べ、色の使い方にルールを設け、操作の途中で迷わないよう案内(操作ガイダンス)を表示することが大切です。伝票や請求書などの帳票設計では、関連する項目を隣接させ、余分な情報を省いて必要最小限の内容にまとめ、レイアウトに統一性を持たせることが求められます。
Webサイトの設計では、色やレイアウトをCSS(Cascading Style Sheets)でまとめて指定し、サイト全体の見た目に統一性を持たせます。スマートフォンでの見やすさを優先して先に設計する考え方をモバイルファースト、画面の大きさに応じて表示を自動的に最適化する設計をレスポンシブWebデザインといいます。また、あるURLにアクセスした利用者を別のURLへ自動的に転送する仕組みをリダイレクトといい、サイトの引っ越しなどで使われます。
利用者を中心に置き、試作と評価を繰り返しながらシステムを改善していく考え方を人間中心設計といいます。
高齢者や障がいのある人を含む、できるだけ多くの人が情報やサービスに問題なくアクセスできることをアクセシビリティ、年齢や身体的特徴、言語の違いにかかわらず、できるだけ多くの人が最初から使いやすいように設計する考え方をユニバーサルデザインといいます。アクセシビリティは「利用しやすさ」という結果を表す言葉であり、ユニバーサルデザインは「誰にでも使えるように設計する」というアプローチを表す言葉である点に違いがあります。文字を使わず絵や図で意味を伝えるピクトグラムや、データや情報を図解でわかりやすく見せるインフォグラフィックは、どちらもこうした考え方を実現する具体的な手法です。空港の非常口サインはピクトグラムの代表例ですし、新聞や雑誌でよく見る、統計データを棒グラフや地図と組み合わせて見せる図はインフォグラフィックにあたります。
企業や自治体のWebサイトでは、アクセシビリティを高めるための取り組みとして、文字サイズを利用者が変更できるようにしたり、画像に代替テキストをつけて音声読み上げソフトに対応させたりする工夫が広がっています。こうした取り組みの目安となる規格としてJIS X 8341があり、サイト制作の現場でも意識されるようになっています。情報デザイン・GUI・アクセシビリティは、それぞれ切り口は異なりますが、いずれも「利用者にとっての分かりやすさ」を高めるための考え方だという共通点を押さえておきましょう。
この単元の確認問題
答えを見る前に、まず自分の言葉で答えてみてください。言葉にできないところが、そのまま本試験で止まるところです。
Q. 関連する要素を近づけて配置する、情報デザインの原則を何と呼びますか。
A. 近接
近接は、近接・整列・反復・対比という情報デザインの4原則の一つで、関連する情報をまとめて見せることで、利用者が要素同士のつながりを直感的に理解できるようにする考え方だからです。
Q. 選択肢の中から1つだけを選べるGUI部品を何と呼びますか。
A. ラジオボタン
ラジオボタンは単一選択専用の部品で、複数の項目を同時に選べるチェックボックスと対比して区別されるためです。
Q. あるURLにアクセスした利用者を、自動的に別のURLへ転送する仕組みを何と呼びますか。
A. リダイレクト
リダイレクトは、サイトの引っ越しやURLの変更があった際に、古いURLへのアクセスを新しいURLへ自動的に誘導するための仕組みだからです。
情報デザインとユーザーインタフェースは、読んで分かることと、本番で点になることが別です。点にするための材料はこちらにまとめてあります。
- この単元の問題 10問（どこをどう間違えたかまで解説）
- この単元のひっかけ（本試験がどう引っかけてくるか）
- この単元をそのままITパスポート専用AIチューターに質問できます
- 間違えた問題だけを自動で拾い直す復習リスト
「第9章 技術要素」の他の単元
この単元を、手を動かして確かめる
ITパスポートAIチューターでは、いま読んだ単元の四択問題をその場で解いて、 どこで間違えたかまで解説付きで確かめられます。 わからないところはITパスポート専用のAIチューターに訊けます。
この単元をアプリで開く 登録は無料。メールアドレスだけで始められます。