1.GUIの歴史

1946年 アメリカで人類最初のコンピュータとされる「ENIAC（エニアック）」発表

当時のコンピュータ操作はコマンドを入力し、実行するとそれをコンピュータが読み込み、処理を行うのが主流。
そのため、コンピュータの操作には専門的な知識が必要で、技術者や専門職以外の人間が操作をすることはできませんでした。

1984年 Apple Macintosh が登場

1973年にXerox社が世界初のGUIベースOSを搭載したコンピュータ「Alto（アルト）」を発表。
その後もGUI（：Graphical User Interface）を取り入れたコンピュータはいくつか開発されてきましたが、どれも一般化されることはありませんでした。

84年にAppleが「パーソナルコンピュータ（PC）」という概念のもと発表した「Macintosh（マッキントッシュ）」が登場。
いわゆるフツーの人が扱えるGUIにより、PCは1人1台と爆発的に普及していきます。

2000年代　PCが一般家庭にまで浸透

GUIは「スキュアモーフィックデザイン」と呼ばれる、リアルでより本物に近いグラフィック要素が増えていきます。

2007年　Appleが「iPhone」を発表

「マルチタッチ」と呼ばれる操作を可能としたスマートデバイスが一気に普及。
この流れの中で、無機質だったUIはグラフィカルに、リアルになり、そして最近は逆にシンプルになって来ています。

例えばスマートフォンのメニューボタンは単に二本線や三本線などで表現され、検索メニューは虫眼鏡のみになっています。
これは「この位置にあるこの形状のボタンはこのボタンに違いない」という、インターフェースと操作方法がより一般化したからこその傾向といえます。

2.エポック的な出来事とUI/UX

ここ数年間でWebに求められる役割は大きく変化しました。
Webデザイン、UI/UXに関わるメポック的なトピックスを取り上げます。

Web2.0

2005年9月、googleのティム・オライリーが発表した論文「What Is Web 2.0」（Web2.0とは何か）の中で”次世代インターネットを象徴する言葉”として紹介したことで注目され、2006年にかけて大流行しました。

ブログに代表される「これまで情報の受け手であったユーザが情報の発信者へとシフトする」次世代Webの現象を総称してWeb2.0と呼びました。

Web2.0の特徴は、大きく以下の7つにまとめられます。

①ユーザの手による情報の自由な整理
例:写真共有サイト「Flickr」（http://www.flickr.com/）
動画共有サイト「ニコニコ動画」（http://www.nicovideo.jp/）

②リッチなユーザ体験
例:Google Maps、Google Suggest、Gmailなど

③貢献者としてのユーザ
例：Amazon.com カスタマーレビュー、Google ページランク

④ロングテール
例：Amazon.com

⑤ユーザ参加
例：Facebookなどの各種ソーシャルメディア

⑥根本的な信頼
例：Wikipedia、OSS（オープンソースソフトウェア）、クリエイティブコモンズ

⑦分散性
例：BitTorrentなどのファイル共有ソフトや、Webサービスを利用したマッシュアップなど

中でも、②リッチなユーザ体験　において、UI/UXが大きく進化しました。

技術的には「Flash（Adobe Flash Plugin）」から「Ajax（Asynchronous JavaScript + XML）」への移行により、より斬新でリッチな操作体験が実現。

これは従来、サーバサイドとクライアントサイドで分割していた処理を、クライアントが認識せずに裏側で大量に処理する技術です。

「Google Maps」「Google Earth」などそれまでにない、ものすごい奥行と広がりのUXが可能になりました。

これは、PC、ネットワークの処理能力の向上に加え、ブラウザの進化も大きな役割を果たしました。

＜コラム＞
Adobeが2017年7月7日、「2020年末にFlash Playerのアップデートおよび配布を停止する予定である」と発表しました。
http://blogs.adobe.com/japan-conversations/201707adobe-flash-update/
長くWebのリッチコンテンツを支えてきたFlashも終焉、HTML5への移行が進められています。

「ブラウザ戦争」と「Web標準」

インターネット黎明期のブラウザは「Netscape Navigator」（1994年12月リリース）と「Internet Explorer：IE」（1995年8月リリース）の2強でした。

1997年にはIEの開発元であるMicrosoftはAppleと提携、MacにおいてもIEが標準ブラウザに昇格。Windows OSとの連携やCSS処理にも勝っていたことなどの理由により、
2000年ごろの「第一次ブラウザ戦争」と呼ばれる両社のシェア争いは、IEの勝利に終わりました。

一方、この争いは、双方のブラウザの独自な機能拡張をもたらし、Web制作者やユーザにとっては互換性の問題が大きくなってきました。

これに対応する動きとして、「Web標準」への取り組みが始まります。

・W3C（1994年に設立）
当時の主要ブラウザが独自実装していた機能をできるだけ標準化することで相互可用性（インターオペラビリティ）を確保し、その動きは「実装主義」と呼ばれる標準化プロセス運営ルールとして追及され続けました。

・WaSP（1998年設立）
「ウェブスタンダードプロジェクト」は、その名の通り「Web標準化」により制作者とユーザ双方の不具合を解消しようというプロジェクトです。

・WHATWG（2004年設立）
「Applications1.0」や「Forms2.0」といった技術仕様が整備され、それが後の「HTML5」の源流となっています。

このように「Web標準」を定義している団体は複数存在しますが、「Webで標準的に使われる技術を総称したもの」で、「JavaScriptやHTMLタグ、CSS2やCSS3、SVG形式画像の使用など」のWeb制作技術を指すことが一般的となっています。

「モダンブラウザ」の登場

2000年代中盤頃からこれらの「Web標準」に対応した「Mozilla Firefox」「Google Chrome」「Apple Safari」「Opera」などのブラウザが続々と登場し、「モダンブラウザ」と呼ばれました。

それに対し、「Web標準」への取り組みが積極的でない、とされた「IE6/7」などは「レガシーブラウザ」と呼ばれました。

＊「レガシーブラウザ」と「モダンブラウザ」の基準となるのは、W3CやISOなどの国際標準化団体が定義している「Web標準」に対応しているか。
前述のように「Web標準」を定義している団体は複数あり、制作者や会社によってどの団体の「Web標準」を元にするかというのは異なりますが、一番広く受け入れられているのは「W3CによるWeb標準に対応しているかどうか」とされています。

制作者にとって深刻な「IEレガシーブラウザ問題」

IE6/7でWeb標準に準拠したサイトを見ると、表示が崩れる、意図した通りに動作しない、などの不具合が起こります。

しかし、このIE6は2001年公開、IE7は2006年公開から非常に長い期間、最新バージョンとして提供されていたためその間に得た圧倒的なユーザ数と、圧倒的に使い慣れてしまった人たちと、圧倒的に依存してしまった社内システムがあり、なかなかアップデートできずにいるユーザが（特に企業内に）多く存在していました。

また、理論上は「モダンブラウザ」とされるIE8でも、実際には固有の不具合が多くありました。

このIE問題は、長く制作者を悩ませます。

もはや「圧倒的にシェアが少ない」にも関わらず、さらには「Web標準に準拠せず正常に動作しないブラウザ」にも関わらず、「依頼元企業のブラウザがIE6/7のために不具合が生じ、特別に対応を迫られる」というケースは後を絶ちませんでした。

この問題が解決？となりそうなのはごく最近で、まず2015年、Windows 10から標準ブラウザがIEから「Edge」になり、ようやく「Web標準に適合する」ものに生まれ変わりました。

また、IEの提供元であるMicrosoftのサポートポリシーが変更になり、「2016年1月12日（米国時間）以降、IEへのサポートを各OSの最新版のIEのみに限定する」
との発表がありました。「サポートの切れたIEには脆弱性に対処する更新パッチなどの提供が行われなくなり悪意のある攻撃者から狙われ放題になる」という理由で、最新のIEを使用することを推奨しています。

3.UI/UX技術トレンド

「フラットデザイン」という潮流

2012年8月からリリースされたWindows 8でMicrosoftは「メトロUI」というUIを採用し、大きな話題となりました。
また2013年6月、AppleがiOS 7を「フラットデザイン」という考え方のUIへの変更を発表します。

「フラットデザイン」の対義語は「リッチデザイン」とされていますが、その根源は「スキュアモーフィズム」、「現実世界に実際にある物の質感をUIに取り込んだ視覚的なデザイン」であり、これはiOS 6まで採用されていました。

「スキュアモーフィズム」から「フラットデザイン」への移行は、単なる見かけ上の変更ではなく、PCの本質に向きあう深い意味を持っていました。

コンピュータ＝メタメディアという表現の自由度と柔軟性を行使し、活かしていく流れがフラットデザインの世界です。

物理的制約を表現する必要や文化も表象する必要もなく、コンピュータの性能やデバイスの性質を活かして自由にデザインする世界です。

フラットデザインに対する反発

クリエイターが前述の本質を理解することなく、単に見た目だけで真似てしまったため、ユーザサイドからは「チープになった」「リッチさがない」という批判を浴びました。
特に日本市場では各パーツのデザインのリッチさを追求する声が高く、全体としての目的の本質や課題解決、全体最適、という考え方が通りにくいように感じます。

レスポンシブWebデザイン

次々と開発されるさまざまなデバイスに合わせたコンテンツを１つのHTMLで作成する、現在Googleがもっとも推奨するWeb制作の手法です。

今までのWeb制作の方法は、PCサイト（タブレット用サイト）、スマートフォンサイトが異なる複数のHTMLで作成されていましたが、レスポンシブWebデザインは1つのHTMLで作成します。

そのため、PCサイト、スマートフォンサイトの重複コンテンツのリスク、スマートフォンサイトからのリダイレクト設定によるペナルティなど、SEOに関するデメリットが軽減されます。

○メリット

大きなメリットは、サイト更新・管理の手間が少ないことです。
ページをワンソースで作るため、今までのようにPCはPC用、スマートフォンはスマートフォン用、タブレットはタブレット用というように端末ごとの画面サイズに合わせて制作する必要がなく、それぞれに適したサイトを自動的に表示させることが可能です。

また、ワンソースでサイト構築することにより、１つのHTMLを更新するだけで複数のコンテンツを一括更新でき、運用コストも軽減可能です。
さらに、上記にもある通りGoogleが推奨しているため、SEOにも有効と言われています。

●デメリット

１つのHTMLで作成するため、HTML・CSSが一般的なサイトよりも複雑になります。
デザインもブラウザの横幅ごとにレイアウトが変わるため、それを踏まえてデザインしなければいけません。
また、PCやスマートフォン、タブレットの各デバイスに合わせて画像の切り替えを行っているため、読み込みに時間がかかり、特にスマートフォンサイトでは、表示速度に影響が出る可能性があります。また、IE8以下の場合は、Webサイトのレイアウトが崩れる、表示されない場合もあります。

4.ゲームにおけるUI/UX

1980年代の任天堂 ファミリーコンピュータ時代から、ゲームはUI/UXについて非常によく考えられてきた分野です。

ビデオゲームはエンタテインメントのため、一見すべてがコンテンツに見えてしまいますが、遊び方がわかりにくいものは嫌われ、厳しい市場シェア争いにおいて死活問題となります。

そのため、UIも体験の質を落とさないための工夫がさまざまに施されています。

インストラクション

複雑なゲームでも「説明書を読んで遊んでください」ではなく、遊び方や各機能について自然なプロセスで学べるような仕掛けを最初に用意する、という工夫が行われています。
最近のスマホゲームでは、ゲーム開始直後にユーザにさまざまな操作を促し、その中で遊び方を理解させる、というものがほとんどです。

ダイエジェティック手法

映画やドラマでは「ダイエジェティック手法」というリアリティの表現手法があります。画面内に実際に音源となるものが映っており、音源が明示的に表現されている状態の事を指します。これを応用して「ゲームにおけるダイエジェティック手法」として、「格闘ゲームやシューティングゲームなどで自分の残りパワーを示すゲージをそのまま画面に表示するのではなく、そのゲージ自体をゲーム中の世界に取り込んでしまう」といったやり方が増えてきています。これはゲーム世界への没入感を高める工夫です。

ジェスチャ入力

さまざまなセンサーの登場や低価格化により、人間の身体の特徴を活かした入力手法が登場しています。その中でもよく話題にのぼるのがジェスチャによるインターフェースです。

代表例）
・Microsoft Kinect： 体全体をボーン（骨）として認識し人間の手足の動きや姿勢を検出
・任天堂Wii： コントローラを持ち人間の動きを認識し操作に利用
・Sony PlayStation: 人間の動きを認識するためのモーションコントローラPlayStation Move

・Apple iPhoneが採用、一気に普及した「マルチタッチディスプレイ」も画面平面上ではありますが、ジェスチャ操作の一つです。

5.IoTとUI/UX

INTERNET OF THINGS（IoT：モノのインターネット）というキーワードは，MITのKevin Ashton氏によって考案された思想です。

RFID（Suicaなどの無線ICタグ）とユビキタス センサ ネットワークなどによりさまざまなモノが個別のIDを持ち、モノ同士も相互接続されることによって何がどこにあるか、動作状況がわかる。すべてのモノの状態を把握することで，物流や消費など無駄のないスマートな社会を想定しています。

現在では物流などのインフラ的側面の話だけではなく、日常生活で一般的な人がブラウザ以外の方法によりインターネット（Web）の恩恵を受けられるといった認識も強くなりつつあります（≒ユビキタスコンピューティング）。

特に最近はインターネットの拡張としてのインフラの側面と、具体的にユーザへのメリットが見えるサービスの側面の両方で注目が集まっています。

◆画面から実世界へ

基本的に現代のICT（Information and Communication Technology）の流れはPCの画面の中から実世界へ広がる方向にあります。
コンピュータのインターフェース系の学術会議では、現在デザインしている「画面のユーザインタフェース」の研究や議論はだいぶ減ってきており、1990年台がピークとされています。

一方、最近の研究はBig Data解析のためのAIなど、多様な文脈でのコンピュータの利用であったり、3Dプリンタやロボティクスなど、モノと人との関係を探る研究が増えています。

IoTのインタラクションの側面では2000年ごろから始まったユビキタスコンピューティングの流れと近年からのインターネットの普及の流れが重なり、生活の多様な文脈で利用する新しいデバイスが研究提案されはじめています。

今、人々のインタラクションの中心は画面であり、そのためにインターフェースのデザインを行ってきましたが、IoTの時代のインタラクションの中心はモノになり、インターフェース設計の発想は広がっていきます。

例）
・ファッションコーディネート支援システムであればどのタイミングで服の写真を撮るのか
・クローゼットの中から特定の服を見つけるのをどのように支援するのかなど、
必ずしも画面ではない部分の表現、わかりやすい手順（ナビゲーション）を設計することが要求される  など

6.UIからUXへ　～これから求められること

これまで長い間、UIに求められる設計理念は「使いやすい」「見やすい」「誰にでも使える」という、いわゆる「効率」を目標としてきました。

しかし、近年ではさらに「気持ち良く使える、快適である、楽しい」といった、UX（：User eXperience/ユーザエクスペリエンス）の概念が強く求められるようになっています。

なぜなら、スマートフォンやタブレットなど” 従来の道具の域を超えた ” 高性能端末を持ち歩く時代が到来し、その操作は机の上に留まらず、生活の中に溶け込み、操作する時間も圧倒的に長くなっているからです。

そのため、「自分の身体の一部であるかのよう」「より人の感覚に沿った」「快適」「楽しい」UXが求められるのです。

例えば、Apple iPhoneの「Pinch：ピンチ-タッチパネルで2本の指により画面上の対象物を拡大縮小する操作」は、初めて使うユーザには未知の体験でした。
しかし、ユーザの行動や無意識をちゃんと把握して行動をデザインされていたため、ユーザは説明や勉強をしなくてもストレス無く、直感的に使うようになり、すぐに浸透しました。

また、写真を通じて友人と日常を共有するアプリである「Instagram」は、撮影した写真をユーザの気分・テイストに合わせてフィルタで加工し、その写真を友達と共有することでユーザは「かわいい写真になった。うれしい！」「この写真をみんなに見せよう！」「みんなの写真も見たい！」「たのしい！」等の感情を体験することで、あっという間に普及しました。

UXデザインとは
「ユーザがサービスの目的に共感して、ポジティブな体験・満足を得られるように
ユーザの感情・行動・態度をデザインすること」
と言えます。

◆インタラクションの図式が変わる

従来は「ブラウザを通じてWebの世界にアクセスする」という図式でした。
これからは、「Webが私たちの生活世界にアクセスしてくる（実世界がネットと融合して強化される）」という世界になります。

この世界では、エンジニアの領域のみではなくデザイナーも大きく関わってきます。
WebもHTML、CSS、JavaScriptといったコーディング領域と、レイアウトやアイコン、画像などデザイン領域の両方を行う人も増えて来ていますが、UX（体験）を重視するがゆえに、デザインもエンジニアリングも分けて考えられなくなりつつあるのです。

さいごに

UXデザインは直訳すると「ユーザ体験のデザイン」となり、一見「ストーリーデザイン（何を行うのか）」のことだけ、あるいはデバイス開発時の「プロダクトデザイン（工業デザイン）」だけ、のように思ってしまいがちです。

しかし、これからのUXデザインにおいては、

・「どこ」の「誰」に：ビジネスデザイン（Whom）
・「いつ」「なに」を：ストーリーデザイン（What）
・「どのように」提供するか：インターフェースデザイン（How）

をすべて考えることが必要です。

そうすることで、やっと初めてユーザにまつわる事象（＝体験）を包括的に考えられるようになります。

逆に言えばどれかひとつでも欠けてしまうと、UXデザインは成立できない事になってしまいます。

そうなると当然、
デザイナーだけで完結する業務ではなくなり、企画職（営業職）、エンジニア、デザイナーが協働して、相互に意見を交換し合いながら制作していくことが必要になります。

いま現在、UX開発がうまく進んでいる企業では、既にこの考え方を実践しているのです。

いかがでしょう。

駆け足ですが、パーソナルコンピュータの登場からスマートデバイス、IoTの今日までの
UI、UXの変化、進化からと、これから求められることを推察しました。

ICTがこれまで以上に日常生活に欠かせないものになるにつれて、
Webサイトやアプリ開発だけでなく、あらゆるビジネス分野において
「UI、UXがどうあるべきか？」
を考えることが、ますます重要になることは間違いありません。

そのためには、デザイナー以外のポジションにいる人たちとの協業が不可欠ですね。

「UI」「UX」とは？言葉の意味を分かりやすく知りたいならコチラ

＞BtoB 販促・マーケティングのコンテンツ制作なら＞
北斗社コンテンツマネジメントソリューション

<参考文献>

・後藤武，佐々木正人，深澤直人著　『デザインの生態学──新しいデザインの教科書』東京書籍，2004年
・佐々木正人著　『アフォーダンス入門──知性はどこに生まれるか』講談社，2008年
・Edward T. Hall著／日高敏隆，佐藤信行訳　『かくれた次元』みすず書房，1970年
・Don Norman著／野島久雄訳　『誰のためのデザイン？──認知科学者のデザイン原論』新曜社，1990年
・Don Norman著／佐伯胖監訳／岡本明，八木大彦，藤田克彦，嶋田敦夫訳
『人を賢くする道具──ソフト・テクノロジーの心理学』新曜社，1996年
・加藤浩，有元典文編著　『認知的道具のデザイン』金子書房，2001年
・James Jerome Gibson著／古崎敬，古崎愛子，辻敬一郎，村瀬旻訳　『生態学的視覚論』サイエンス社，1985年
・東山篤規，竹澤智美，村上嵩至訳　『視覚ワールドの知覚』新曜社，2011年
・佐々木正人，古山宣洋，三嶋博之 監訳　『生態学的知覚システム──感性をとらえなおす』東京大学出版会，2011年
・渡邊恵太著　『融けるデザイン──ハード×ソフト×ネット時代の新たな設計論』ビー・エヌ・エヌ新社，2015年