ユーザインタフェースとは

• 日程: Day 2 / セッション7
• 時間: 14:10-14:30
• 形式: 座学
• ゴール: CUI/CLI/GUIの違いと、クライアントサーバ型・Webブラウザ技術（HTML5/DOM/JavaScript/JSON）の役割を説明できる
• 学習形式: 対話型解説

🗣️ 要約

• UI（ユーザインタフェース）とは、利用者とシステムがやり取りする仕組みのこと
• スマホの画面操作もエンジニアのコマンド操作も、どちらもUIの一種
• UIの種類とWebアプリケーションを支える基本技術がこのセッションの範囲

前のセッションでは、非機能要件を定義しました。「どれくらいの速さで動くべきか」「どれくらい安全であるべきか」を考えましたね。

今回はその続きとして、「利用者はシステムとどうやってやり取りするのか」を考えます。これがユーザインタフェース（UI）です。

ところで、UIと聞いて何を思い浮かべますか？ スマホの画面でしょうか。それとも黒い画面に文字を打ち込むエンジニアの姿でしょうか。実は、その両方が正解です。

このセッションが終わる頃には、UIの種類と、Webアプリケーションを支える基本技術を説明できるようになっています。

🗣️ 要約

• UIとは入出力の仕様であり、CUI・CLI・GUIの3種類に分けられる
• 現代のWebアプリはクライアントサーバ型で、HTML5・DOM・JavaScript・JSONなどの技術で成り立つ
• UI設計はマルチプラットフォーム・Universal・UX・ワイヤーフレームの観点に加え、AIDMA等の購買行動モデルとも関係する

🗣️ 要約

• UIは利用者とコンピュータの「入出力の仕様」であり、レストランの接客係にあたる
• CUI（文字のみ）・CLI（コマンド操作）・GUI（アイコン・ボタン操作）の3種類がある
• CUI/CLI/GUIに優劣はなく、目的に応じて使い分けるものである

UIとは、利用者とコンピュータシステムの「入出力の仕様」のことです。料理に例えると、UIは「お客様と接する接客係」のようなものです。厨房（システムの内部処理）がどれだけ優れていても、接客係の対応が悪ければお客様は満足できません。

UIには大きく分けて3つの種類があります。

• CUI（Character User Interface）：文字だけでやり取りする方式。たとえば銀行のATMの一部の操作画面
• CLI（Command Line Interface）：コマンドを打ち込んで操作する方式。エンジニアがターミナルで git commit と打つのはこれに該当します
• GUI（Graphical User Interface）：アイコンやボタンを使って直感的に操作する方式。スマホアプリのほとんどはこれに該当します

ここで少し考えてみてください。ATMの「振込」ボタンを押す操作はGUIですが、その裏で銀行の基幹システムがCUI的な文字コマンドでやり取りしていることもあります。1つのシステムの中に複数のUIが共存することも珍しくありません。

特に注意してほしいのは、「CUIやCLIは古い・GUIは新しい」という優劣の話ではないということです。プログラマーが大量のファイルを一括操作する場合、CLIの方がGUIより圧倒的に速く正確です。目的に応じて選ぶものであり、優劣ではありません。

GUIの生みの親としてよく語られるのは、1970年代のゼロックス社パロアルト研究所（Xerox PARC）です。マウスとアイコンとウィンドウという、今では当たり前の仕組みがここで生まれました。面白いのは、ゼロックス自身はこの発明を製品として大きく育てられず、後に見学に訪れたスティーブ・ジョブズがそのアイデアをMacintoshに取り入れて世に広めた、という逸話です。良いアイデアも、それを「誰に届けるか」を設計しなければ価値にならない——これはまさに情報アーキテクチャの教訓そのものですね。

🗣️ 要約

• 現代のWebアプリの多くはクライアント（ブラウザ）とサーバが分かれるクライアントサーバ型
• HTML5（構造）・DOM（操作の仕組み）・JavaScript（プログラミング言語）・JSON（データ形式）が基本技術
• RIAはブラウザ上でデスクトップアプリ的な操作性を実現する技術・考え方で、スマートデバイス向けアプリもこの延長線上にある

現代のWebアプリケーションの多くは、クライアントサーバ型という構造を取っています。これは、利用者が操作する「クライアント」（スマホやPCのブラウザ）と、データや処理を持つ「サーバ」が分かれている仕組みです。

Webブラウザは、以下の技術でこのやり取りを実現しています。

• HTML5：画面の構造を作る言語
• DOM：HTML5で作った構造をプログラムから操作するための仕組み
• JavaScript：ブラウザ上で動くプログラミング言語
• JSON：サーバとクライアントの間でデータをやり取りする際の軽量な形式

たとえばWebブラウザは該当しますが、電卓アプリの多くは該当しません。なぜなら、電卓アプリは単体で完結しており、サーバと通信してデータをやり取りする必要がないからです。

RIA（Rich Internet Application）は、ブラウザ上でデスクトップアプリのようなリッチな操作性を実現する技術・考え方のことです。近年はスマートフォンやタブレットといったスマートデバイス向けのアプリも、この延長線上にあります。

ここまでで、クライアントサーバ型のイメージはできましたか？ 分からなければ、AIに「レストランの注文システムを例に、クライアントサーバ型を説明して」と聞いてみましょう。

🗣️ 要約

• UI設計にはマルチプラットフォーム・Universal・UX・ワイヤーフレームという観点がある
• AIDMA（注意→関心→欲求→記憶→行動）は購買行動を説明するモデルで、AISAS・AISCEASは検索・共有の行動を加えた発展形
• UIの見せ方が利用者の行動を左右するという点で、UIとIAは交わる

UIを設計する際は、次のような観点が重要です。

• マルチプラットフォーム：スマホ・PC・タブレットなど複数の環境で使えるか
• Universal（ユニバーサルデザイン）：年齢や障がいの有無によらず使えるか
• UX：使い心地全体の設計
• ワイヤーフレーム：画面のレイアウトを線画で表した設計図

そして、UIの設計は「利用者の行動」にも影響します。マーケティングの世界では、消費者が商品を認知してから購入に至るまでの心理プロセスをモデル化した理論があります。代表的なものがAIDMA・AISAS・AISCEASです。

これはAIDMAというモデルの流れです。インターネットが普及した後は、「検索する（Search）」「共有する（Share）」といった行動が加わったAISASやAISCEASというモデルも生まれました。

なぜマーケティングのモデルをIAの授業で扱うのでしょうか。少し考えてみてください。実は、これは「情報の見せ方（UI）が、利用者の行動を左右する」という点で、UIとIAが交わる場所なのです。目立つ位置にボタンを置く、必要な情報を必要なタイミングで見せる——これらはすべて、情報アーキテクチャの設計判断です。

🗣️ 要約

• CUIとCLIの違い、RIAとGUIの違い、AIDMA・AISASの実務での使われ方などをAIに質問できる

ここまでの内容で疑問があれば、AIに質問してみましょう。たとえば：

• 「CUIとCLIの違いがよく分からないので、別の例で説明して」
• 「RIAとGUIの違いは何？」
• 「実務ではAIDMAやAISASをどう使うの？」

🗣️ 要約

• UIは利用者との接点であり、その裏側にクライアントサーバ型という構造がある
• 次回は良いユーザインタフェースとは何かを議論し、開発テーマの保守期間を考える

今回学んだことを一言でまとめると、「UIは利用者との接点であり、その裏側にクライアントサーバ型という構造がある」ということです。

次回は、良いユーザインタフェースとは何かをチームで議論し、開発テーマに必要な保守期間についても考えます。今回学んだUIの種類や技術の知識が、その議論の土台になります。

🗣️ 要約

• CUI・CLI・GUIの違いを具体例つきで説明できるか
• HTML5・DOM・JavaScript・JSONがそれぞれ何の役割を担っているか説明できるか

以下の問いに答えられるか確認してみましょう：

• CUI・CLI・GUIの違いを、それぞれ具体例つきで説明できますか？
• クライアントサーバ型において、HTML5・DOM・JavaScript・JSONはそれぞれ何の役割を担っていますか？

答えに自信がない場合は、該当部分を読み返すか、AIに質問してみてください。

🗣️ 要約

• 参考資料はMDN Web Docsの「HTMLの紹介」「JSONとは」などのWeb技術解説ページ
• 発展課題は、よく使うアプリのどの部分がAIDMAの「Attention」を狙っているかを考えること

• 参考リンク: MDN Web Docs「HTMLの紹介」「JSONとは」などのWeb技術解説ページ
• 発展課題: 自分がよく使うアプリを1つ選び、GUIのどの部分がAIDMAモデルの「Attention」を狙っているか考えてみましょう

🗣️ 要約

• 受講者からよく出る質問への回答例と、つまずきやすいポイントへの対処法をまとめている

このセクションは、受講者が理解を深めることをサポートする参考情報です。

🗣️ 要約

• RIAとGUIは対立する概念ではなく、見た目・操作方法の軸と技術・思想の軸という切り口の違い
• マーケティング用語（AIDMA等）は、UIの「情報の可視性」の応用例として位置づけられる

🗣️ 要約

• CUI/CLI/GUIを「古い技術／新しい技術」の優劣で捉えてしまいやすい
• HTML5・DOM・JavaScript・JSONの役割を混同しやすい