Web関連

【ホームページ制作】GUIの歴史を辿ってみた

0

みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。

GUIとは、「グラフィカルユーザーインターフェース」の略で、コンピューター上の指示・命令をグラフィカルな要素を用いて直観的に操作できるインターフェースの事です。

「ちょっと何言ってるかわかんない」という声が聞こえますが・・

例えば、カラオケも一昔前は、ぶっとい広辞苑みたいな本から歌いたい曲を探して、書いてある番号をリモコンで打ち込んでカラオケ機器に送信、という操作が普通だったと思います。(25歳以上の方は覚えていませんか?^^;)
私は小学生のころ、モー娘。の曲を入力しすぎて、ザ・ピース★あたりから番号を丸暗記していました。

最近はタブレットのような機械を使って、タッチパネルで簡単に曲が入力できますね。。。便利。

「操作を番号入力して指示」から、「アイコンや項目名(グラフィカルな要素)を見て、選択」に変わった事で、”番号入力をする”という工程が無くなりました。
これも、操作がGUI化された一例です。

そう考えると、今私たちの身の回りにある電子機器は、ほとんどがGUIを用いたものばかりですね。

今回は、GUIの歴史について辿ってみました。

GUIの歴史

命令文を入力・実行

1946年、アメリカで人類最初のコンピュータとされる「ENIAC(エニアック)」が発表されました。
その当時のコンピューターの操作といえば、コマンドを入力し、実行すると、それをコンピューターが読み込み、処理を行う・・というものが主流でした。
グラフィカルな要素は1ミリもありません。
コンピューターの操作を行うためには、専門的な知識が必要で、技術者や専門職以外の人間が操作をすることは難しかったと言います。

机の上の書類をゴミ箱へ「ドラッグアンドドロップ」

1973年、Xerox(ゼロックス)社が世界初のGUIベースのOSを搭載したコンピューター「Alto(アルト)」を発表。
ビットマップディスプレイとマウス操作を装備し、グラフィカルな操作を可能にしました。その後もGUIを取り入れたコンピューターはいくつか開発されてきましたが、どれも一般化されることはありませんでした。

しかし、後年となる1984年、Appleがパーソナルコンピューター「Macintosh(マッキントッシュ)」を発表。
「ゴミ箱」や「書類」などをアイコン化し、それをフォルダにまとめたりドラッグ&ドロップする、などの直感的な操作方法で、技術者や専門家以外の一般的なユーザーにも親しみやすいインターフェースの開発に成功しました。

このMacintoshの登場以来、GUIを採用したコンピューターは爆発的に普及していきます。

どんどんリアルな質感に

PCが一般家庭にまで浸透した2000年以降、GUIは「スキュアモーフィックデザイン」と呼ばれる、リアルでより本物に近いグラフィック要素が増えていきます。

ウインドウを半透明にして透かしたり、ボタンを立体的に浮かせてみたり、ポップアップがフワッとフェードアウトしたり・・

1980年代から、GUIの操作性や機能・考え方は変わっていないものの、グラフィック要素だけが格段にリアル化していったのです。

▼Mac OSXのアイコン。リアルな質感を追及し、まるでデスクトップに「置いてある」かのような鏡面効果まで。

タッチデバイスの登場

2007年以降、Appleが発表した「iPhone」をはじめとしたマルチタッチと呼ばれる操作を可能としたデバイスが登場。
更に直感的なGUIが台頭してきました。

リアルから情報の簡略化へ

人々の生活の中にコンピューターがある事が一般化されると、インターフェースはどんどん簡略化していきます。

例えばスマートフォンのメニューボタンは、数年前は「MENU」と記載があったにも関わらず、最近のWEBサイトでは「MENU」の明記がありません。
「この位置にあるこの形状のボタンはメニューボタンに違いない」という、インターフェイスや操作方法がより一般化したからこその傾向と言えます。

▼最近のスマートフォンサイト。メニューが「三」のマークだけ、検索ボタンもピクトグラムのみなどデザインが簡略化されている。

未来のGUIは?

いかがでしたでしょうか?
はじめてGUIが登場した1980年代から比べると、わずか40年の間に、めまぐるしい進化があったことがわかります。

タッチ操作を可能とするデバイスが一般化されてからわずか数年ですが、今後はグラフィック(視覚要素)に限らず、もっと直感的なインターフェースが登場するのかもしれません。
今でも、スマホには音声で命令を読み取り、実行する機能があったりしますよね。

個人的には、攻殻機動隊のように、脳みそとデバイスを繋いで、キーボードを叩かなくても、考えるだけでメール返信できるようになりたいです。
そうすると、両手が空くので、ポテチを食べながら仕事することが可能になります。
あ~、やってみたい。

WebにおけるUIのあり方も、近い未来、大幅に変わっていくかもしれないので、日々勉強して追いつけるようにします!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ユーザビリティの向上

レスポンシブ・ウェブデザイン

0

こんな採用サイトあったらいいな。アイデアまとめ前のページ

リッチスニペットの新しい手法 schema.orgとは?次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    webサイトにおけるアクセシビリティの考え方

    Webサイトでは「ユーザビリティ」という考え方が非常に重要視されていま…

  2. Web関連

    【人工知能・AI×観光】迷子は人工知能で解決できる!

    観光地や街中で迷子を見かけたり、自分が迷子になった経験はありますでしょ…

  3. Web関連

    コンピュータが人類を超える!?2045年問題について調べてみた。

    こんにちは、ティファナでSEをしている森です!今回は、最近噂になった今…

  4. Web関連

    良質な情報配信で顧客獲得。オウンドメディアの役割とは

    昨年から、様々な業界で「オウンドメディア」という言葉を聞くようになりま…

  5. Web関連

    基礎からわかるサーバー選び

    サーバーのこと知っていますか?サーバーとはWebページの公開やメー…

  6. Web関連

    ワイヤーフレームを作る前に気を付けたい5つのこと

    最近、ワイヤーフレームや画面設計書を作るときに、事前の情報も無く、真っ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    コンテンツマーケティングの魅力とは?
  2. Web関連

    AWSってなぁに?
  3. Web関連

    WordPressを使った簡単なオリジナル(っぽい)フォトブログ制作
  4. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Cu…
  5. Web関連

    マイクロターゲティングで「個」客を獲得
PAGE TOP