ユーザインタフェースとは
概要
- 日程: Day 2 / セッション 08
- 時間: 14:20-14:50
- 形式: 座学
- ゴール: UIの定義（利用者とコンピュータの入出力仕様）を述べ、CUI/CLI/GUIの違いを具体例で説明し、クライアント・サーバ構成とWebの基本要素（HTML5/DOM/JavaScript/JSON）、そして購買行動モデル（AIDMA／AISAS／AISCEAS）を説明できる
- 学習形式: AI協働型（自分が日常使うアプリをUIの観点で分解させて理解を深める）
導入（5分）
ここまでで「情報モデル」「状態遷移」「機能」「画面（プレゼンテーション）」「非機能要件」が揃いました。残るのは「画面をどう作るか」のUI設計です。
「UI」は「ユーザインタフェース（User Interface）」の略。多くの人が「画面のデザイン」と思っていますが、もっと広い概念です。利用者とコンピュータがやり取りするための入出力の仕様すべてを指します。
ボタンの位置、フォーマット、エラーメッセージの言い回し、レスポンスのスピード感、すべてがUIです。このセッションでUIの全体像を押さえ、次のセッションで実際にモックアップを作ります。
本編（20分）
1. UIの定義と種類（CUI/CLI/GUI/その他）
UIは「人が情報を入出力するための仕様」と定義できます。歴史的には次のように発展してきました。
文字ベース
(1960s)"] --> CLI["CLI
コマンドライン
(1970s)"] CLI --> GUI["GUI
グラフィカル
(1980s)"] GUI --> Touch["タッチUI
(2007 iPhone)"] Touch --> VUI["VUI
音声
(2014 Alexa)"] VUI --> NUI["NUI
自然
(ジェスチャー/AI)"]
| 種類 | 特徴 | 例 |
|---|---|---|
| CUI | 文字（キャラクタ）ベース | 古いBASIC、メインフレーム端末 |
| CLI | コマンドを入力して操作 | Windows PowerShell、Linux bash |
| GUI | アイコン・ウィンドウで操作 | Windows、macOS、Web |
| タッチUI | 指で直接操作 | スマホ、タブレット |
| VUI | 音声で操作 | Siri、Alexa、Googleアシスタント |
| NUI | 自然な動作で操作 | ジェスチャー、視線、AIチャット |
ここがポイント
新しいUIは古いUIを置き換えない。CLIは今もエンジニアの必須ツールで、Webにも内部でAPI（CLI的なもの）が動いています。役割で住み分けています。
コラム：ゼロックスPARCの大恩
今のGUIの原型は1973年、ゼロックス社のパロアルト研究所（PARC）で生まれました。Alto（アルト）というマシンで、マウスとウィンドウとアイコンが世界で初めて統合されたのです。スティーブ・ジョブズがPARCを見学して衝撃を受け、Lisa、Macintoshへと発展させました。ゼロックスは「コピー機」のイメージのままで、自社の発明をビジネス化できなかった伝説的な企業です。「技術はあっても活かす設計（IA）がなければ商売にならない」を象徴する話です。
2. クライアント・サーバ型とWebの基本要素
現代のシステムは大半がクライアント・サーバ型です。
ブラウザ/アプリ"] -->|リクエスト| Server["サーバ"] Server -->|レスポンス| Client Server --> DB[(データベース)]
Webの基本要素は次の4つ。
| 要素 | 役割 | 補足 |
|---|---|---|
| HTML5 | 画面の構造（タグで文書を表す） | セマンティック要素・マルチメディア対応 |
| CSS | 画面の見た目 | レイアウト・色・アニメーション |
| JavaScript | 画面の動き | DOM操作・通信・状態管理 |
| JSON | データの形式 | サーバとの通信に使う軽量フォーマット |
DOM（Document Object Model）はHTMLをツリー構造で表現したもので、JavaScriptはこのDOMを操作することで画面を動かします。
(ツリー構造)"] DOM --> JS["JavaScript
(操作)"] JS --> API["API通信
(JSON)"] API --> Server["サーバ"]
RIA（Rich Internet Application）とスマートデバイス
- RIA：ブラウザ内で動くがデスクトップアプリ並みのリッチなUI。Ajax、Flash（過去）、現代はSPA（Single Page Application）が代表
- スマートデバイス：スマホ・タブレット。タッチUIとセンサー（GPS・カメラ・加速度）を活用
ここがポイント
研修テーマは「Webブラウザで動くものを前提」とします。HTML/CSS/JavaScript/JSONの4つは、明日以降の実装で必ず触れます。
コラム：JSONの大躍進
JSON（JavaScript Object Notation）は2001年にDouglas Crockfordが発見（発明と呼ばないのが彼の流儀）しました。元はJavaScriptの一部の構文。シンプルすぎて誰も注目しなかったところ、Web APIの標準フォーマットとして大ブレイク。今やXMLを駆逐し、世界のシステム間通信の主役です。「シンプルなものが勝つ」UNIX哲学の正しさを証明する事例です。
3. 購買行動モデル：AIDMA／AISAS／AISCEAS
UIは「使いやすさ」だけでなく「ユーザーの行動」を設計することでもあります。代表的な購買行動モデルが指針になります。
1920年代"] --> A2["AISAS
2000年代"] A2 --> A3["AISCEAS
SNS時代"]
| モデル | 段階 | 時代背景 |
|---|---|---|
| AIDMA | Attention → Interest → Desire → Memory → Action | マスメディア時代 |
| AISAS | Attention → Interest → Search → Action → Share | 検索エンジン時代 |
| AISCEAS | Attention → Interest → Search → Comparison → Examination → Action → Share | EC・SNS時代 |
例：旅行サイトのUI設計に当てはめる
| 段階 | 必要なUI要素 |
|---|---|
| Attention（注意） | 大きな旅行写真、キャッチコピー |
| Interest（興味） | おすすめプラン、季節特集 |
| Search（検索） | 目的地・日付・予算で絞り込み |
| Comparison（比較） | 複数プランの並べて比較 |
| Examination（検討） | 口コミ、Q&A、よくある質問 |
| Action（行動） | わかりやすい予約ボタン、決済 |
| Share（共有） | SNSシェアボタン、招待コード |
ここがポイント
画面1枚を「何の段階のためのものか」と問いながら設計すると、迷いが減ります。次のセッションでモックアップを作るときに使う考え方です。
コラム：「ザイオンス効果」とUI設計
心理学に「単純接触効果（ザイオンス効果）」があります。「何度も見るうちに好きになる」。だから人気SNSは「アプリを開いたら最初に通知数」を見せる。「無意識に開かせる」が目的です。良い面も悪い面もあるUI設計の現実。倫理を考えながら使うべき道具です。
💬 AIに聞いてみよう
- 「自分のチームの『○○』アプリで、AISCEASの各段階に対応するUI要素を提案して」
- 「タッチUIとマウスUIで、デザインで気をつける違いは？」
- 「JSONとXMLは何が違う？なぜJSONが主流？」
まとめ（5分）
UIは「画面デザイン」だけでなく「人とコンピュータの入出力すべて」を扱う設計領域です。クライアント・サーバ型のWebアプリでは、HTML/CSS/JS/JSONの4要素を組み合わせて作ります。そして、ユーザーの行動段階（AIDMA等）を意識すると、画面に意味が宿ります。
次のセッション（Session09）は45分の実習。Session05で作ったプレゼンテーション一覧から主要3画面以上を選び、モックアップツール（Figma/draw.io等）でワイヤーフレームを作成します。
🔄 振り返りチェック
- UIの定義を1文で言えますか？
- CUI/CLI/GUIの違いを例で説明できますか？
- AIDMAとAISASとAISCEASの違いを言えますか？
補足資料
- 参考リンク：MDN Web Docs（HTML/CSS/JS）、Don Norman『誰のためのデザイン？』
- 発展課題：いつも使うアプリ1つを取り上げ、AIDMA/AISAS/AISCEASのどれに合うか分析する
学習ガイド
想定される質問と回答例
| 質問 | ヒント |
|---|---|
| CUIとCLIは同じでは？ | 厳密にはCUI＝文字ベース全般、CLI＝コマンドで対話。CLIはCUIの一種 |
| Webアプリとネイティブアプリどちらが良い？ | ペルソナのデバイスと用途次第。次セッションで考える |
| 購買行動モデルはECサイト以外でも使える？ | 業務システムでも「気づき→興味→使う→定着」と読み替えて応用可能 |
つまずきやすいポイント
| つまずきポイント | ヒント |
|---|---|
| UI＝デザインと狭く捉える | UIは入出力仕様。エラー文言・レスポンス感もUI |
| JSON＝難しいと身構える | キーと値のペアの羅列。JavaScriptのオブジェクトと同じ形 |
| 古いUI種別（CUI等）を軽視する | サーバ管理・組込・自動化では今もCLIが主役 |