【じーゆーあい】

GUI とは?

💡 マウスとアイコンで操作する「見た目でわかる」インターフェース
📌 このページのポイント
GUI vs CLI:操作方法の違い GUI(グラフィカル) フォルダ ファイル 設定 実行ボタン マウスで直感的に操作 初心者にやさしい CLI(コマンドライン) $ ls -la drwxr-xr-x docs/ -rw-r--r-- file.txt $ cp file.txt backup/ done. $ _ キーボードで文字入力 効率的で自動化しやすい
GUIとCLIのイメージ
ひよこ ひよこ

GUIとCUIって何が違うの?

ペンギン先生 ペンギン先生

GUIは「マウスでクリック・ドラッグして操作」するグラフィカルな方式。CUI(Character User Interface)は「キーボードでコマンドを打って操作」するテキスト方式。WindowsのファイルエクスプローラーがGUI、コマンドプロンプトがCUI。

ひよこ ひよこ

GUIの方が使いやすいのに、なんでCUIを使う場面があるの?

ペンギン先生 ペンギン先生

①自動化:GUIは人間の操作が前提だがCUIはスクリプトで自動化できる。②遠隔操作:サーバにGUIは不要でCUI(SSH)で操作する方が軽くて速い。③精度:複雑な設定や大量処理はコマンドの方が正確にできることが多い。

ひよこ ひよこ

開発者がターミナルを使うのはそういう理由?

ペンギン先生 ペンギン先生

そう。Gitコマンド・ビルドツール・パッケージマネージャなど、開発ツールはCUIが多い。GUIツールもあるけど、CUIの方が細かい制御ができて自動化もしやすい。慣れると実はCUIの方が速かったりするよ。

ひよこ ひよこ

GUIの設計で大事なことって何?

ペンギン先生 ペンギン先生

「ユーザーが考えなくても使えること」が理想だよ。ボタンの配置、色の使い方、文字の大きさなどでユーザーを自然に誘導するのがUXデザインの基本。例えば重要なボタンは目立つ色にして、キャンセルは控えめな色にするのは世界共通のお約束だね。

ひよこ ひよこ

GUIフレームワークって何があるの?

ペンギン先生 ペンギン先生

Webならreact、Vue.js、Angular。デスクトップアプリならElectronVS Codeもこれで作られている)、Qt、.NETのWPF。モバイルならFlutterReact Nativeがクロスプラットフォームで人気だよ。最近はTauriというRust製の軽量デスクトップフレームワークも注目されていて、Electronよりメモリ使用量が少ないのが特徴なんだ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
GUIって出てきたら「ウィンドウ・ボタン・アイコンをマウスで操作するグラフィカルなインターフェース」と思えばOK!
📖 おまけ:英語の意味
「Graphical User Interface」 = グラフィカルなユーザーインターフェース
💬 1970年代にXerox PARCが開発したAlt(Alto)で初めて採用。Appleが商用化してMacintoshに搭載し、その後Windowsも採用して広まった
← 用語集にもどる