管理人がサイトを作成するうえで心がけていることがあるっすよ。
見た目をおしゃれにするってことだよね。
確かにそれもあるっすが、わかりやすさ、使いやすさ、居心地の良さといったことなどをユーザー目線で考えることに気を付けてるっす。
なるほど、見た目だけじゃダメってことだね。さすが管理人さん（自画自賛）。
| 目標 | ・ヒューマンインタフェースの特徴を理解する。 ・インタフェース設計の考え方を理解する。 |
| 説明 | ・ヒューマンインタフェースの特徴と，その代表的なインタフェースである GUI について，各構成要素の特徴を理解する。 ・人とシステムの接点となるインタフェースが，使いやすさや理解しやすさを大きく左右することを理解するとともに，望ましいインタフェースの考え方を理解する。 |
ヒューマンインタフェース
ヒューマンインタフェースとは
ヒューマンインタフェース（Human Interface）とは、人間とコンピュータや機械などのシステムがやり取りを行う際の接点や方法、設計思想を指します。
ヒューマンインタフェースでは、人がストレスなく、直感的に機械やソフトを使えるようにすることが重要であり、ユーザビリティ（使いやすさ・分かりやすさ）やアクセシビリティ（年齢や身体的制約に関係なく誰もが使えるようにすること）にも考慮する必要があります。
ヒューマンインタフェースの手法
ヒューマンインタフェースには、次のような様々な手法があります。
ジェスチャーインタフェース
人の動き（ジェスチャー）で機械やコンピュータを操作するインタフェースで、手や腕、顔、体全体の動きを使って、直接触れずに操作できるようにする仕組みです。ゲームやスマホ、車、家電などで利用されています。
マルチタッチインタフェース
1本の指だけでなく、2本・3本…と複数のタッチを同時に認識して、それぞれに意味を持たせる操作方式のことです。
| 操作名 | 内容 | 例 |
|---|---|---|
| タップ | 軽く1回触れる | アプリを開く、リンクをタップ |
| ダブルタップ | 2回素早くタップする | 拡大・ズーム（地図や画像） |
| ロングタップ | 長押し（1秒以上） | メニュー表示、ドラッグの開始 |
| スワイプ | 指で画面を滑らせる | ページ送り、リストのスクロール |
| フリック | 素早く短くはじくように動かす | フリック入力、通知を消すなど |
| ピンチイン／アウト | 2本指でつまむ／広げる | ズームイン・アウト（写真・地図） |
| 回転 | 2本指でくるくる回す | 画像の回転、UIの向き変更 |
| ドラッグ | タッチしたまま指を動かす | アイコン移動、スクロールバー操作 |
VUI（Voice User Interface）
人間の声を使って、コンピュータや機械とやり取りするインタフェースです。スマホ、スマート家電、車のナビシステムなどで利用されています。
GUI
GUI（Graphical User Interface）とは、グラフィカル（視覚的）な要素を使ってユーザーが操作するインタフェースで、文字だけでなく、アイコン・ボタン・ウィンドウ・メニューなどの視覚的な部品を使って、誰でも直感的に操作できるのが特徴です。
GUIではウィンドウと呼ばれる表示領域に特定の動作を実行するアイコンなど様々な要素を表示し、ポインティングデバイスなどで操作します。
ウィンドウの上部にはメニューバーと呼ばれる機能やコマンドへのメニュー一覧があり、クリックすると下に一覧が引き出されるプルダウンメニューになっています。プルダウン式に詳細メニューが表示されて、ファイル操作・編集・表示切り替えなどを簡単に実行できます。
また、画面上でユーザーのアクション（右クリックなど）に反応して表示される一時的なメニューのポップアップメニューや操作内容を確認できるヘルプ機能もGUIの重要な要素の一つです。
その他にもGUIでよく利用される要素として次のようなものがあります。
ラジオボタン
複数の選択肢の中から「どれかひとつ」を選ぶときに使います。
チェックボックス
複数選択が可能でひとつひとつの項目が独立しています。
リストボックス
ユーザーが選択肢の一覧を見ることができる入力フォームです。
ツールチップ
アイコンやボタン、リンクなどにカーソルを合わせたときに表示される簡単な説明や補足情報のことです。
主に画像や動画の小さなプレビュー画像のことを指します。英語の thumbnail（親指の爪）から来ていて、「小さな画像」という意味合いで使われます。
ユーザーがマウスカーソルを特定の要素（ボタンや画像など）の上に置くことを指します。マウスを合わせたときに色が変わったりボタンが浮き上がる、画像が変化するなどの用途で用いられます。
今日では、ホバーとロールオーバーはほぼ同義で使われることが多いです。特にWebデザインやユーザーインターフェースの文脈では、どちらも「カーソルを要素に合わせる」という意味で使用され、違いはあまり強調されません。
画面設計・帳票設計
画面設計と帳票設計は、どちらもシステム開発や業務アプリケーション開発において重要な工程です。ただし、目的や対象、利用するユーザー層が異なります。
画面設計
ユーザーが直接操作する画面の構成や機能の配置を設計する作業です。入力の流れが自然になるようにする、色の使い方にルールを設ける、操作ガイダンスを表示するなど、操作性の高い画面設計をすることが重要で、ユーザー体験（UX）にも考慮しながら設計します。
帳票設計
帳票とは、業務で使われる出力帳票（請求書、納品書、集計表など）のことです。帳票設計は、それらの出力レイアウトと内容の構成を設計する作業です。
関連項目を隣接させる、余分な情報は除いて必要最小限の情報を盛り込む、ルールを決めて帳票に統一性をもたせる、などに考慮して設計します。
Webデザイン
WebサイトやWebアプリの見た目・使い勝手を設計・デザインすることをWebデザインといいます。単に見た目をオシャレにするだけでなくて、伝える・誘導する・体験させることが目的です。
サイト全体の色調やデザインにCSSを用いて統一性をもたせたり、複数種類のWebブラウザに対応したりするなど、Webデザインにおいてはユーザビリティ（使いやすさ）の観点が必要です。
なお、CSS（Cascading Style Sheets：カスケーディングスタイルシート）とは、HTMLで作られたWebページの見た目（デザイン）を整えるためのスタイル言語です。「文字の色を変える」「レイアウトを調整する」「スマホでも見やすくする」など、Webデザインには欠かせない要素です。
また、現代では多くのユーザーがスマホでWebサイトを見るのが当たり前になっているため、最初にスマートフォン向けのデザインや機能を設計し、それからタブレットやPCへと拡張していく考え方・手法（モバイルファースト）をとることがあります。
スマホ・タブレット・PCなど、あらゆる画面サイズに自動でレイアウトを最適化するWebデザイン手法のことをレスポンシブWebデザインといます。
あるURLにアクセスしたときに、自動的に別のURLへ転送する仕組みのことをリダイレクトといいます。サイトのURLを変更したり、ページの統合や削除をした場合などに、古いURLにアクセスした人を新しいURLへ誘導するなどの目的で利用されます。リダイレクトはSEO（検索エンジン最適化）やユーザビリティの向上に役立ちます。
人間中心設計
人間中心設計（Human-Centered Design：HCD）とは、製品・サービス・システムなどを設計する際に、「使う人（＝人間）」の立場を最優先して設計を進める考え方・プロセスです。
例えば「この機能は本当にユーザーが使いたいか？」「このデザインはユーザーが迷わず使えるか？」など、ユーザー目線で設計することを指します。
ISOでは人間中心設計の基本プロセスとして以下が示されています。
- ユーザーの理解と明確化：誰が、何のために、どう使う？を深掘り
- ユーザーの要求事項の明確化：ユーザーが本当に求めている機能・価値を洗い出す
- 設計による解決策の作成：ユーザーの視点でUIや構造を考えてプロトタイピング（試作品の製作）
- ユーザーによる評価：実際のユーザーに試してもらって改善点を見つける
確認○×問題
人の動きで機械やコンピュータを操作するインタフェースをVUIという。
答え：×
人の動き（ジェスチャー）で機械やコンピュータを操作するインタフェースはジェスチャーインタフェースです。VUI（Voice User Interface）とは、人間の声を使って、コンピュータや機械とやり取りするインタフェースをいいます。
複数の選択肢から一つを選ぶときに使うGUI(Graphical User Interface)部品として、ラジオボタンがある。
（出典：サンプル問題1 問56一部改変）
答え：〇
ラジオボタンは、1つだけ選択可能で選択肢の中から「どれかひとつ」を選ぶときに使います。
画面設計において、入力データのとり得る値が多数ある場合や、文章のような多量のデータを入力する場合は、データを直接入力する方式よりも、候補一覧から選択する方式を採用するのが適切である。
（出典：サンプル問題2 問18一部改変）
答え：×
候補となる一覧から選択する方式としては、ラジオボタン、チェックボックス、リストボックスなどがありますが、これらは入力データの種類が少なく、データの内容が固定している場合に適切な方式となります。
入力データのとり得る値が多数ある場合や文章のような多量のデータを入力する場合にこれらを用いると、候補のリストが多くなりすぎて、ユーザーにとって使い勝手の悪いUIになってしまいます。
ネット上で利用者の分身として動作するキャラクターのことをサムネイルという。
（出典：令和7年度春期分 問79一部改変）
答え：×
設問の文章はアバター（avatar）の説明です。サムネイルとは、画像や文書ファイルの内容を縮小して表示したものをいいます。
利用のしやすさに配慮してWebページを作成するときの留意点として、選択肢の数が多いときは、選択肢をグループに分けたり階層化したりして構造化し、選択しやすくするといったことが挙げられる。
（出典：サンプル問題1 問57一部改変）
答え：〇
WebサイトやWebアプリの見た目・使い勝手を設計・デザインすることをWebデザインといいます。
サイト全体の色調やデザインにCSSを用いて統一性をもたせたり、複数種類のWebブラウザに対応したりするなど、Webデザインにおいてはユーザビリティ（使いやすさ）の観点が必要です。
Webサイトを構築する際にスタイルシートを用いる理由としては、Webサイトの更新情報を利用者に知らせることができるようになるといったことが挙げられる。
（出典：平成31年度春期分 問81一部改変）
答え：×
設問の文章はRSSの説明です。スタイルシート（CSS）は、HTMLで作られたWebページの「見た目（デザイン）」を整えるためのスタイル言語です。これを利用することで複数のWebページの見た目を統一することが容易になります。
製品・サービス・システムなどを設計する際に、「使う人」の立場を最優先して設計を進める考え方・プロセスをユニバーサルデザインという。
答え：×
設問の文章は人間中心設計（Human-Centered Design：HCD）の説明です。なお、ユニバーサルデザインとは、文化、言語、年齢及び性別の違いや、障害の有無や能力の違いなどにかかわらず、できる限り多くの人が快適に利用できることを目指した設計をいいます。
