GUI（グラフィカルユーザーインターフェース、Graphical User Interface）とは、アイコンやボタンなどのグラフィックを利用し、コンピュータへの指示・命令を出す方法のことです。
マウスやタッチパネルで視覚的・直感的に操作できるため、専門的な知識がない人にもわかりやすいという点がメリットです。
パソコン・タブレットやスマホのほか、現在ではカーナビや銀行のATM、そして多くの家電でもGUIが採用されています。今やGUIの知識はデザインやUI/UXに携わる人にとって必須のものといえるでしょう。
この記事では「GUIとは何か」「GUIのメリット・デメリット」「CUIとの違い」について、具体的かつ簡単に解説します。
最後まで読んでいただければ、GUIの基本的な概念や意味を整理できるはずです。
目次
GUI（グラフィカルユーザーインターフェース）とは
まずGUI（グラフィカルユーザーインターフェース）の概念や意味について、わかりやすく解説します。
GUIの意味
GUIとは、グラフィカルユーザーインターフェース（Graphical User Interface）の略称であり、読み方は「ジーユーアイ」「グイ」「グーイ」など複数あります。
GUIを簡単にわかりやすく説明すると、「アイコンなどのグラフィックを使ってユーザーがコンピュータに指示・命令を出せるUI」「グラフィックを使ってわかりやすく操作できるUI」となります。なお「UI」については次の章で解説します。
たとえば、多くのパソコンでは以下のような操作が可能です。
● マウスを使って画面上のアイコンをクリックして、ソフト・アプリを起動する
● マウスでアイコンをクリックして、ファイルを選択して開く
● ドラッグアンドドロップでファイルを移動させる
● 表示された選択肢から「印刷」「上書き保存」などの処理を選ぶ
上記のような操作はGUIによって可能になっており、1980年代まで使用されていた古いコンピュータのように、テキストでコマンド（命令）を入力して操作する必要はありません。
また、スマホやタブレットでは「マウスでクリック」の代わりに指でタッチパネルをタップすることで、コンピュータに指示を出せます。
現代のパソコンやスマホではGUIは当たり前のように使われており、UIの主流となっています。
UIとは
GUIは「グラフィックを使ったUI」です。では、UIとは何でしょうか。
UI（読み方：ユーアイ）とは、ユーザーインターフェース（User Interface）の略称です。
ユーザーとは「何かを使う人」という意味です。そしてインターフェースはIT分野でよく使われる言葉で、コンピュータシステムにおける「接触面」「接点」という意味があります
つまりUIは「ユーザーとコンピュータが情報・指示をやり取りするときの接点」という意味です。より具体的に述べるとすると「ユーザーとコンピュータが情報・指示をやり取りするときに使うデバイス・操作画面・操作方法」を指します。
「UI」という言葉が指す範囲は入力装置から出力装置まで幅広く、以下のような具体例があります。
● キーボード
● マウス
● タッチパネル
● モニター
● スピーカー
● プリンター
● マイク
● ソフトウェアのメニュー画面
● 製品そのものの外観・形
● Webサイトのデザイン・フォント
システム自体が高性能でもUIが使いにくいと、ユーザーに「使いにくい」「わかりにくい」と思われてしまい、ユーザーの離脱を招く可能性があります。ユーザーが離脱してしまうと商品・サービスの収益にも直結します。そのため「使いやすいUI」は商品・サービスの設計において高い重要性をもちます。
関連記事
・インターフェースとは？様々な場面で使われる意味を解説
・UI（ユーザーインターフェース）とは？意味や役割
UIと混同されやすい「UX」とは
UIを一緒に使われることが多く、混同しやすい言葉として「UX」があります。「UI/UX」や「UI/UXデザイン」として、UIと合わせて表記されているのを見かけたことがある方も多いのではないでしょうか。
UXとはユーザーエクスペリエンス（User Experience）を略した言葉で、意味は「ユーザーが製品・サービス利用により得る体験」となります。
具体的には「ECサイトで目当ての商品を簡単に見つけられて、快適にショッピングができた」などの体験がUXの代表的な例です。
インターネット上の体験だけではなく、「実店舗での接客・陳列・設備などによる体験」もUXに該当します。たとえば「宝探しのような買い物が楽しめる店内の陳列」「コンシェルジュや店舗スタッフによる丁寧・親切な接客」などもUXです。
UIが優れていれば、ユーザーはより質の高いUXを得られます。ただしUXを構成する要素としてはUIのほかにも「対応の良し悪し」「提供されるサービスの質」などがありますので、「UI＝UX」ではありません。
つまりUIはUXを高める要素のひとつであり、UIを考えるときにはUXについても考える必要があります。
関連記事：【UI/UXとは？】それぞれの意味や違い、デザインの改善方法まで解説
GUIの歴史
GUIは、1960年代からアメリカ空軍のシステム（SAGE）などで用いられていました。一般向けコンピュータでGUIを搭載して商業的な成功を収めたのは、1984年にAppleが発売したMacintosh（通称：Mac）と、1985年にMicrosoftが発売したWindows 1.0です。
さらに2007年（日本では2008年）にはiPhoneが登場し、タッチパネルディスプレイによるGUIが普及し、物理的なボタンで操作を行う携帯電話やスマートフォンは急激に数が減少しました。
GUIによって、コンピュータに馴染みのなかった一般ユーザーも簡単にコンピュータを扱えるようになったことは、大きな功績です。現在では高齢者や子どもでも簡単にデジタルデバイスを扱っていますし、ATMや家電にもGUIが搭載されるようになっています。
ビジネスにおいても、GUIの発達により「効率的な業務遂行」や「より円滑な顧客とのコミュニケーション」「より魅力的なコンテンツの提供」などが可能になりました。
GUIの身近な例
現在では、「デジタルデバイスのほとんどにGUIが搭載されている」といっても過言ではありません。数多くある例の中から、特に身近でわかりやすい具体例をいくつか紹介します。
パソコン/タブレット
WindowsやMac、iPadといったパソコンやタブレットの操作画面は、GUIに該当します。
一般的に、画面上に表示されたグラフィックであるウィンドウ・メニュー・アイコンなどを、マウスや指を使って操作するでしょう。これが、GUIに当てはまるのです
WindowsやMacintoshではGUIが標準搭載されていますが、UNIX・Linux系のOSは、GUIではなくCUI（Character User Interface）を実装しているケースが多くなっています。CUIについては、後述します。ただし「X Window System」というグラフィックスシステムを使うことで、UNIX・LinuxにもGUIの機能を追加することが可能です。
Webサイトも、アイコンやメニューといったグラフィックを用いて視覚的にわかりやすいデザインになっています。
スマートフォン
スマホの画面もGUIに該当します。
スマホを使うときには「アイコンをタップしてアプリを起動する」「×ボタンをタップしてWebページやアプリを閉じる」「タブをタップしてページを切り替える」といった操作をほとんど考えることなく行っている人も多いのではないでしょうか。
GUIによる直感的でわかりやすい操作が、素早い動作を可能にしています。
デジタルカメラ
デジタルカメラにもGUIが採用されています。
たとえば、撮影時に液晶画面上をタップすることで画面の拡大や縮小ができたり、オートフォーカス（AF）の位置を選択できたりします。
また液晶画面上で「モード変更」「画像の削除」といったメニューが表示されるので、取扱説明書がなくてもさまざまな操作を快適に行うことが可能です。
カーナビ
自動車の分野でも、GUIが活用されています。
車の中で「グラフィック」というと、カーナビを思い浮かべる方も多いでしょう。最近のカーナビは物理的なボタンで操作するのではなく、タッチパネルで操作するものも増えています。
また、地図だけではなく「車内のエアコンやステアリングヒーターの設定」「シートポジションやドアミラー角度の設定」などの操作をタッチパネル式の液晶モニターに集約し、物理的なボタンを減らしている車種も増えています。
洗濯機などの家電
最近では家電にもGUIが搭載されています。
たとえば「物理的なボタンではなく、液晶パネルで操作する洗濯機やプリンター」などが市販されています。
洗濯機では、タッチパネルで簡単に「すすぎの回数」「脱水や乾燥の時間」を変更できたり、本体のお手入れ方法を確認できたりします。
またキッチン家電の場合、液晶画面でメニューを選べるコーヒーメーカーや電気圧力鍋・自動調理鍋（オートクッカー）、タッチパネルで温度調節などができる冷蔵庫も一般化しつつあるといえるでしょう。
GUIとCUIの違い
GUIと対比して語られるものに「CUI」があります。「CUIとは何か」「GUIとCUIの違い」について解説します。
CUIとは
CUIは、GUIが普及する前に主に用いられていた操作方法です。
Characterには「アニメや物語の登場人物」という意味もありますが、CUIでは「文字」という意味で使われます。つまりCUIとは「文字ベースのUI」という意味です。
CUIでは、ユーザーはコマンド（コンピュータへの指示・命令）をテキストで入力してコンピュータを操作します。「テレビドラマなどで、コンピュータ技術者やハッカーが黒背景画面に高速で文字を打ち込んでいくシーン」というと、イメージできる方も多いかもしれません。
CUIでは特定のコマンドを入力することで「ファイルのコピー」「ファイルの移動」といった操作が可能です。
コマンドに関する知識が必要で習熟に時間がかかる一方、複数の処理を組み合わせたコマンドを保存しておくことで、複雑な操作でも効率的に繰り返し、人為的なミスが少ない状態で実行できるというメリットがあります。
現在でもサーバー管理やソフトウェア開発などの現場では、GUIではなくCUIが使われています。
なお、WindowsやMacは基本的にGUIで操作しますが、「コマンドプロンプト（Windows）」や「ターミナル（Mac）」を使えばCUIでの操作が可能です。
GUIとCUIの違い
GUIとCUIの主な違いをまとめました。
| GUI | ● 視覚的な要素を利用 ● ユーザーはタッチパネルやマウス・カーソルでコンピュータを操作 ● 直感的な操作が可能 ● コマンドを知らなくても操作可能 ● コンピュータの知識がない人や初心者でも使える ● 現在の主流となっている |
| CUI | ● テキストのみで操作 ● コマンドをキーボード入力 ● 自動化・一括操作や細かい設定が可能 ● コマンドの知識が必要 ● 習熟するまでに時間がかかるため、一般ユーザーには難しい ● サーバー管理やプログラミングなどの開発現場で利用される ● 少ない容量で済み動作が速い |
GUIとCUIの違いは、「視覚的な要素を使っているかどうか」と「操作方法がグラフィックベースか文字ベースか」に集約されるでしょう。GUIは直感で操作しやすいという点が特徴となっています。
一方、CUIは知識が必要で習熟にも時間がかかりますが、上手に利用することで自動化や一括操作が可能です。ベテランユーザーや開発者にとっては、メリットが大きい方法といえるでしょう。グラフィックを使わないため、容量が少なく済み動作が速いのもCUIならではの特徴です。
GUIのメリットとデメリット
GUIにはメリットだけではなく、デメリットもあります。GUIの代表的なメリット・メリットを紹介します。
メリット：直感的な操作ができる
GUIのメリットは直感的な操作が可能な点にあります。アイコンなど視覚的な要素が使われているため、操作方法がわかりやすく、コマンドを覚える必要もありません。
キーボードで文字を打つのが遅い人でも、マウスや指で操作可能です。そのためコンピュータ初心者や一般のユーザーにとっては、「使いやすいインターフェース」「利用のハードルが低いインターフェース」となっています。
またCUIに比べると、操作方法だけではなく「今コンピュータ上で何が進行中なのか」「どこまで処理が終わっているのか」などもわかりやすくなっています。たとえば「どこまで処理が終わっているのか」を示すGUIとしては、「プログレスバー」があります。
デメリット：システム負荷が大きい
GUIのデメリットとしては、システム負荷が大きいことが挙げられます。
グラフィックを使用しているために、データ量が大きくなり、システムに負荷をかけてしまうのです。そのため、「パフォーマンスの低下・動作が遅くなる」「大容量のメモリーを必要とする」といった点がデメリットといえるでしょう。
さらに、GUIには「データの一括処理が難しい」「複数処理の自動化が難しい」といったデメリットもあります。また開発現場やサーバー管理の現場はCUIがほとんどですので、GUIではできない作業もあります。
とはいえ、一般的なユーザーがパソコン・タブレットやスマホを利用する程度なら、GUIだけで問題なく操作可能です。つまりGUIのデメリットが強く感じられるのは、エンジニア・開発者が高度・専門的な操作を行う場合といえるでしょう。
GUIの構成要素
GUIの主な構成要素を紹介します。
なお、以下で詳しく紹介するもののほかには「チェックボックス」「ラジオボタン」「テキストボックス」などもGUIに該当します。
アイコン
アイコンとは、「アプリケーション・ソフトウェア」「ファイル（の種類）」「フォルダ」などを小さな図形で表したものです。図形で示すことにより、ユーザーはアプリやファイルがもつ役割や特徴を直感的に理解できます。
たとえばメールソフトのアイコンが封筒だったり、パスワード管理ツールのアイコンが鍵だったりすると、パッと見ただけでどんな機能を備えているアプリなのかがわかりやすいでしょう。
「ゴミ箱のアイコンで、ファイルの削除機能を示す」「虫メガネのアイコンで、検索機能を示す」など、わかりやすく機能を示すことも可能です。
また、アイコンは小さいのでスマートフォンなど小さなデバイスの画面スペースを効率的に活用できます。
ボタン
ボタンは、ユーザーがタスクを実行するためにクリック・タップする要素です。
通常は実行したいタスクを示す簡単なテキストやアイコンとともに表示されます。たとえば「削除」「キャンセル」「購入」「カートに入れる」「送信」「ログイン」といったテキストで、ボタンを押すとどんなアクションを実行するのかが表示されます。
なお、ページ・画面内でインターフェースがユーザーに対して最も意識して欲しい重要なボタン（強力なボタン）を「プライマリボタン」、主要な選択肢以外のオプションを提示するボタンを「セカンダリボタン」と呼びます。
たとえば、ECサイトの商品ページなら「購入手続きへ」がプライマリボタンで、「かごに追加」などがセカンダリボタンと位置づけられるでしょう。また、マンガや小説を読めるサイト・アプリなら、「今すぐ読む」がプライマリボタンで、「リストに追加する」や「あとで読む」がセカンダリボタンになります。
ボタンの位置や大きさ・形状によっては、ユーザーが重要あるいは便利なボタンを見逃したり、「押せない」と勘違いしてしまったり、ついボタンを押し間違ったりして困惑するケースもあります。
また、ユーザーが検索結果やWeb広告などを経由して最初にアクセスするページであるLP （Landing Page）などにおいても、「ボタン上に表示するテキスト」「色」などによってクリック率が変化します。これも、GUIにおける重要な要素のひとつです。
なお「ウィンドウを閉じる」という同じアクションをする場合でも、「閉じるボタン」を設置するのか、「×印のアイコン」で操作してもらうのかといった選択肢があり、サイトやページのつくりによって使い分けが必要です。
関連記事：LP（ランディングページ）を作る意味は？費用対効果を高める方法を解説！
メニュー
メニューとは、アプリケーション・ソフトフェアの機能をリスト化し、ユーザーが選択しやすくしたものです。Microsoft WordやExcelを開いたときに、ウィンドウ上部に出てくるメニューを見るとわかりやすいでしょう。
たとえばMicrosoft Wordの場合、挿入メニュー内にある画像のアイコンをクリックすると、「このデバイスにある画像を挿入するのか、オンラインで画像を検索するのか」という選択肢が表示されます。
テキストに「色」「背景色」「取り消し線」などの効果を追加する機能についても、アイコンでわかりやすく表示されています。
メニューがアイコンなどで明確に表示され、ジャンルごとに整理されて並んでいることで、目的の機能を見つけやすくなり、操作がスムーズになる効果が期待できるでしょう。
アプリケーションの機能を把握し、使いたい機能にたどり着きやすくするために、メニューは重要な役割を果たしているのです。
ウィンドウ
ウィンドウとは、プログラム起動時やファイル展開時にディスプレイ上に表示される画面のことです。
たとえば、パソコン上でインターネットブラウザを開くと、ブラウザの画面が表示されます。表示された画面がウィンドウです。
パソコンの画面全体を勉強机だとすると、ウィンドウは勉強机の上に開かれた参考書・教科書やノートというイメージになります。
ユーザーはウィンドウ内で、情報を見たり検索したり、目的に合わせた操作を行います。
ひとつのディスプレイ上で複数のウィンドウを開くこともできますから、複数のウィンドウを開いて（複数のファイルやアプリを開いて）、それぞれのウィンドウを行き来したり、見比べたりしながら作業可能です。
たとえば「インターネットブラウザで参考記事を読みながら、Microsoft PowerPointで営業資料を作成する」「Excelの数字をWordに書き写す」といった作業ができます。
なお、パソコンだとウィンドウの大きさはユーザーが自由に変更できるケースがほとんどです。ただし、一部のアプリ・ソフトウェアによってはユーザーによるサイズ変更ができなくなっています。
スクロールバー
スクロールバーとは、表示したい部分がウィンドウに入りきらない場合に、表示範囲を変更できるパーツのことです。ウィンドウの右端や下に現れます。
たとえば、インターネットブラウザで縦に長いWeb記事などを読む際などには、右側にスクロールバーが表示されます。スクロールバーの中に表示されるスライダーを上下に動かしたり、スクロールバーの上下についている矢印マーク・三角マークをクリックして画面をスクロールしたりができます。
またMicrosoft Wordでも、文書が長くなったり文書全体が収まりきらないほどウィンドウを小さくしたりすると、スクロールバーが表示されます。
上下に動かすスクロールバーは「垂直スクロールバー」、左右に動かすものは「水平スクロールバー」と呼ぶのが一般的です。
キーボードの「page up」「page down」ボタンでもスクロールできますが、視覚的なスクロールバーがあることで迷わず操作が可能となります。
GUI開発のプログラミング言語-よく使われるのはPython
GUIはどのようなプログラミング言語でも作成できます。また、GUI開発の現場ではイチからコードを打ち込むのではなく、フレームワークを使う手法が一般的ですが、GUI開発に使うフレームワークもプログラミング言語ごとに用意されています。
その中でもポピュラーなプログラミング言語はPythonです。Pythonはシンプルな構文が特徴で、GUIアプリケーション開発の現場でもよく使われており、「Tkinter（ティーケーインター）」「Kivy（キビー）」「PySimpleGUI（パイシンプルGUI」」などのGUIライブラリが使えます。
Pythonは構文がシンプルで理解しやすく、日本語の解説記事なども多いことから、初めてでも比較的勉強しやすいプログラミング言語のひとつといえるでしょう。さらにGUアプリケーション開発だけではなく、データ分析や機械学習・深層学習などの分野でも汎用性が高く、人気の言語です。
また、GUI開発関連の求人を見ていますと、「C言語」「C＋＋」「QML」が要件となっている募集も多くなっています。
まとめ
現代のデジタルマーケティングにおいて、UI/UXは重要な要素と考えられています。UI/UXの改善によって、購買率が大幅に向上する事例も多数あります。ユーザーが製品やサービスを直感的に操作し、快適な体験を得られるように設計されたUI/UXは、顧客満足度向上やブランドイメージ向上にも貢献するでしょう。顧客満足度が向上すれば、リピート率も上がり、企業の収益にもつながるはずです。
GUIをはじめとするUI/UXの知識は、エンジニアやデザイナーだけでなく、彼らと協業するマーケターにとっても必須です。ユーザーの行動を分析し、ニーズに合ったUI/UXを設計することで、競合との差別化を図り、市場での成功を収めることができるでしょう。
GUIに関する知識と精度を高めて、効果的なマーケティングを実施しましょう。
