グラフィックデザインの変遷から遡るUIデザインの歴史[後編]

前編において、UI誕生以前のグラフィックデザインの変遷について記述した。後編では、PCの誕生以前から現在のUIデザインの流行への変遷までを追っていく。

3. UIデザインの変遷

 3-1 UI誕生まで(1940~1990年)

 最初のコンピュータとされているENIAC(Electronic Numerical Integrator and Computer)は1946年に発表されたため、2017年現在で70年が経つ。それから様々なコンピュータが開発されてきた。

 その中でパーソナルコンピュータの原点となるものが、Alan Kayによる「Dynabook」構想である。Alan Kayは1972年に “A Personal Computer for Children of All Ages”という論文を発表した。この中でAlan kayは老若男女が簡単に、持ち運びも出来るGUI(Graphical User Interface)を兼ね備えたパソコンを考案した。

 論文は、大人と子供という二つの年代がダイナブックを使用するというシチュエーションを述べている。下図のイラストは論文に掲載されたものだが、二人の子供が家の近くの芝生に寝転びながら、ゲームをしたり、ゲームのプレイ中に考えた疑問を学校の図書館にネットワークをつなげる。そして、そこから得た知識をゲームに反映させ、よりリアリティのあるゲームに内容を変更する。

 このように当時1972年の頃には現在のPCやタブレットと変わらない使用法が提示されている。Alan kayが1973年にXerox社から試作機の「Alto」を製作した。これは現在のGUIに繋がるアイデアが数多く存在している。

 先述したように1946年に生まれた「ENIAC」がコンピュータの始まりとされているが、ENIACはDynabookのように一般的な使用を意図されたものではなく、限られた人が使うものであった。

 その後、個人で活用するパーソナルコンピュータは1975年のMITS社によるAltair8800キットが始めとされているが、個人向けとして活用出来る完成品のパーソナルコンピュータは年表左上の1977年にApple Computer社から発表されたAppleⅡである。こうして、現在のPCのスタンダードとなっている画面・キーボードといったGUIが確立された。初期のUIは黒地に緑の文字というスタイルである。同時に日本では1977年にはソード社からM200シリーズが発表され、UIは同様のスタイルになっている。

そして、コンピュータ自体のスペックの向上、一般への普及に従い、UIが発展していくこととなる。

 3-2 Web1.0時代(1991~2003年)

 ここからは巻末付録の年表を参照しながら論を進めていく。

  3-2-1 World Wide Web(1991)  1991年、ティムバーナーズ=リー博士による最初のウェブサイトである”World Wide Web”が公開された。UIの特徴は左詰めであり、押すことが可能のなボタンは青色、押したボタンは紫色という現在のウェブにも通ず る区別を行っている。各パラグラフではインデントを多めに空けており、可読性を高める工夫が見られる。

 3-2-2 MOSAIC

 WWWがスタンダードになり、そこからWebは発展を遂げていく。まず大きな進化として、画像の表示が可能になったMOSAICがある。年表にもあるようにYAHOO!やAMAZONのウェブサイトなど画像を使うことで、伝えたいイメージが伝わりやすくなった。

 しかし、YAHOO!やAMAZONのサイトを見てわかるように、画像を使用しているものの、単一なフォントであり、単純なリスト構造になっており、まだわかりやすさには課題が残っている。しかし、余白を取ることで見やすいデザインに工夫されている。

  3-3-3 Windows95(1995) 

 Windows95は1995年にマイクロソフトが発表したオペレーティングシステムである。これまでのGUIと異なり、シャドウやハイライトを用いることで立体的にアイコンやタブを見やすくする「3D効果」を使用している点が大きな特徴となっている。また、カラーや機能を表すアイコンを使用することで、そこをクリックすることで行われる機能を視覚的にわかりやすく表現している。

 当時のOSやウェブサイトではこうした「3D効果」を用いて、押しボタンや構造を視覚的にわかりやすくする試みが多く行われている。付録の「Google・Yahoo・Youtube ロゴ・UIの変遷」を参照すると1996年のYAHOO!、1998年のGoogleではまずロゴがシャドウ・ハイライトを使用し、「3D効果」を使用することでイメージが伝わりやすくしている。検索の押しボタンもWindows95のように「3D効果」が使用されている。

 Googleのロゴは1999年から2010年の変化まで細字に「3D効果」を使用したものを継続して用いられている。しかし、1998年と異なり、ロゴのフォント自体の変化、ボタンの角が丸くなるなどの変化が見られる。

  3-3-4 CGI 

 Web1.0時代の特徴としてCGIがあげられる。1999年「2ちゃんねる」といった掲示板サイトやブログなどコミュニケーションをネット上で行うことができる仕組みがトレンドになった。掲示板のUIはシンプルに左詰めで送信日時、ID、内容といったシンプルな仕組みになっている。

 3-3 Web2.0 / スキューモフィズム

  3-3-1 Web2.0

 Web2.0はティム・オライリー(Tim O’reilly)によって提唱される。IT用語辞典バイナリにおいて「Web2.0」は以下のように説明されている。

「Web 2.0」という言葉や概念については、特に明確な定義づけがなされているわけではない。また、特定の規格や標準があるわけでもない。端的な説明としては、おおむね「動的・双方向的」であるとか、「ユーザー参加・集合知」、「ロングテール的」などといった要素が指摘される場合が多い。あるいは、従来のWeb 1.0ではPCをプラットフォームとしてWebに接続していたが、Web 2.0ではWebそのものがプラットフォームとなって諸々の機能やサービスを提供する、と解釈されることもある。

 また、Web2.0はHTMLやCGIを利用してホームページを作成していたWeb1.0と異なり、AJAXやDynamicHTMLを用いて、ユーザーが使いやすく、かつ双方向性のあるサービスが可能になった仕組みである。

 Web2.0は2000年中頃から開始されているが、年表でのYoutubeのウェブサイトのようにログインし、動画を投稿したりお気に入りの動画をまとめるなど利用者が参加する仕組みができている。

 このWeb2.0の到来により、多様なサービスやUIの表現が可能になってくる。

  3-3-2  スキューモフィズム

 2007年、米Apple社より「iPhone」が発表された。「iPhone」はこれまでの携帯電話と異なるタッチスクリーンのみでほとんどの操作を完結する仕組み、斬新なデザインなどで話題を呼び、現在に至るまで大きな人気を持つ。

 「iPhone」のデザインにおいて、重要な考え方となったのが「スキューモフィズム」である。「スキューモフィズム」は既存のもののモチーフの見た目をデザインにそのまま取り込む手法のことを指す。例えば、「iPhone」のカメラアプリでは、カメラのレンズ部部分がリアリティのあるグラフィックでアイコンに描かれている。「Newsstand」では発行されている新聞や雑誌の表紙をそのままデザインに使用することでリアリティのある体験ができる。

 こうしたスキューモフィズムの特徴として、立体感のあるリアリティのあるデザインによって、サービスの機能や世界観を伝えやすい。また、一方で既存のもののモチーフをデザインに持ち込むため、デザインにおいて不必要な要素までデザインに入れ込んでしまう傾向もあった。また、画像を多用するため、読み込みの遅さや通信量の増加などデメリットもあった。

 スキューモフィズムを活用した「iPhone」は2013年に発表されたiOS7までこうしたスキューモフィズムを活用したUIデザインになっている。スキューモフィズムはアプリのアイコンなどに適用されている。

  3-4 フラットデザイン(2010年~)

 2010年MicrosoftよりMetroUIが発表された。MetroUIはスイスデザインやロンドンのKing County Metroがベースになったデザインになっている。MetroUIはシンプルな要素や図形から成り立っており、フラットデザインと呼ばれている。このMetroUIを皮切りに、多くのUIがフラットデザインを採用するようになる。

 フラットデザインの特徴として、シンプルな要素や図形、明るい色を使用し、わかりやすさを強調。シャドウやハイライトをあまり使わなく、平面的なデザイン。大きな文字の下に小さな文字という配置などフォントサイズ区別、細字のフォントの使用。全体的に透明感・清潔感のあるデザインになっている。「2. デザインの変遷(UI誕生以前)」において述べたスイスデザインやミニマルデザインが基調になっていると言われている。

 このように情報量をなるべく取り除き、分かりやすいデザインにしたため、スキューモフィズムなどに比べ、画像が少ないため読み込みが早い。しかし、一方でこうした簡潔なデザインであるため、情報の差別化に困難性が生じている。スキューモフィズムはパッと見て、それが何を表しているかわかりやすいが、フラットデザインは極端なデザインがないため区別が難しいというデメリットも存在している。

 こうしたトレンドから、Appleも2013年のiOS7からUIをフラットデザインがベースのデザインに変更した。2013年からGoogleのロゴが2016年頃からYoutubeのWebサイトが2014年頃からYahoo!JAPANのウェブサイトがフラットデザインをベースにしたようなデザインに変更している。

 その他にも年表のフラットデザインの説明の近くには数多くのサービスのロゴが掲載され、それぞれがフラットデザインの考えをベースにデザインされたものになっている。

  3-5 マテリアルデザイン/シンプルな3D(2015,6年~)

 フラットデザインが大きなトレンドになったが、一方でフラットデザインは影や奥行きなどを省略したため、ボタンや入力画面の識別において困難が生じた。また、装飾を省いたため、サービス間でデザインが類似的なものとなり、区別がしにくくなるなど問題点が生じた。こうしたデメリットを埋め合わせるように、Googleが「マテリアルデザイン」を提唱した。

「マテリアルデザイン」はx,y,z軸の三次元の概念をデザインに導入し、現実の物理法則をデザインに適用するフレームワークである。その特徴として、派手すぎないが他のデザインと区別しやすく、伝えたい内容を直感的に伝えることができる。シャドウもつき、一定程度の立体感も持つ。

 こうした「マテリアルデザイン」のフレームワークを提唱したGoogleはWebサイト6において「マテリアルデザイン」の3つの原則を提示している。

  • Material is the metaphor ( マテリアルはメタファーである )

物質的なメタファーは合理化された空間と運動システムの統合化された理論としている。マテリアルの表面やエッジは現実的に根ざす視覚的な手がかりを提供する。使い慣れた触覚属性を使用することでユーザーはアフォーダンスをすばやく理解することができる。しかしマテリアルの柔軟性は物理法則を破ることなく、物理的な世界のものに取って代わる新しいアフォーダンスを作り出す。光・表面・動きの基本はいかにオブジェクトが空間内で互いに関連して移動し、相互作用をし、存在するかを伝える鍵となる。

  • Bold , Graphic , intentional ( 太字・グラフィック・意図的 )

タイポグラフィ、グリッド、スペース、スケール、色、画像の使用などプリントベースのデザインの基本要素は視覚的な処理を導き、目をよろこばせるよりも優れた働きをする。意図的なカラー選択、エッジトゥエッジな画像、大規模なタイポグラフィ、また意図的な空白はユーザーの体験に浸していくような大胆でグラフィックなインターフェースを作り出す。

  • Motion provides meaning ( 動きは意味を提供する )

モーションは有意義で適切なもので注目を集中し、継続性を維持する役割を果たします。

 このように「マテリアルデザイン」は物理的な法則をデザインにも適用し、ユーザーが理解しやすいアフォーダンスを生成する考えにある。どんなプラットフォームやデバイスにおいても一貫的なデザインとなるような仕組みでもある。年表におけるGoogle Tripsなどは「マテリアルデザイン」の概念を導入したデザインとなっている。

 こうした「マテリアルデザイン」の流れを受け継ぐように、多くのロゴにおいてシンプルで三次元のデザインが適用されている。付録における年表の一番右に4種類のロゴがある。”AndroidN” ,”Google Translate” , “Word” , “Netflix”、それぞれ物質が折り曲がって、それが影をなしているようなデザインになっている。このようなトレンドの特徴だがWordやNetflixのロゴのように、シンプルだが多次元のため区別がつきやすい分かりやすいデザインである。三次元で物理的な現象も網羅するこうしたデザインは「マテリアルデザイン」の概念を継承しているものだと考えられる。

 このように現在トレンドとなっている「マテリアルデザイン」だが、マテリアルデザインの概念を引き継ぎつつ、あらゆるデザイナーが簡単に使うことができる「マテリアルデザインライト(MDL)」などと呼ばれる概念も登場し、今後、時代・技術・サービスなどに合わせ、そのデザインのトレンドを変化させていくだろう。

4. GoogleトップページのUIを用いた考察

 第3章ではコンピュータ誕生以前からUIの変遷を追ってきた。UIのトレンドの変遷として、「3D効果」→「スキューモフィズム」→「フラットデザイン(スイスデザイン、ミニマルデザインを基調とする)」→「マテリアルデザイン」という流れを持っていたことが把握することができた。

 本章ではWebサービスにおいて代表的な存在であるGoogleを例に挙げ、そのサービスの開始時からロゴやサイトのUIの変遷を追い、第3章を通し把握することができたUIの変遷に沿うものか考察する。付録には本節をまとめたものを掲載している。

 Googleは米Google社による検索エンジンのWebサイトであり、昨今では数多くの人が日常的に使うサービスである。Google社は1998年に設立され、2000年には世界最大の検索エンジンサイトになる。

 下に掲載する図AはGoogleの初期のサイト(1998)であり、大きめのロゴがシャドウ・ハイライトを使用し「3D効果」をもたらしている。1995年のwindows95のUIやMosaicを使用したロゴなど同時期のUI・ロゴのデザインは「3D効果」が数多く使用されている。

 図Bは1999年のGoogleトップページのUIであるが、Catullフォントを使用し、減色であり、こちらも「3D効果」を使用している。検索ボタンなどは白地のデザインで角が丸く変化している。フォントは2010年まで基本的に変化しない。

 図Cは2010年のトップページであるが、この年はロゴが約10年ぶりに改正された。ロゴの特徴として、これまであったロゴ周りのシャドウが取り除かれ、明るい印象になっている。(ロゴの字体上のシャドウはまだ存在している)一方で検索のボタンなどはグレーの暗めの色が下地となっている。こうしたロゴが発表された2010年はフラットデザインのトレンドの始まりとして取り上げられるMicrosoftによるMetroUIが発表された時期であり、少なからず影響を受けているように感じる。

 図Dにおける2013年にもロゴは変化した。多くのUIやロゴがフラットデザインを使用する影響もあってか、ロゴにおいて全てのシャドウがなくなり、平面的なフラットデザインの特徴をそのまま取り入れている。

 そして図Eにおける2016年のロゴはGoogleが同時期に発表している「マテリアルデザイン」の特徴を捉えているようなデザインになっている。フォントがサンセリフ書体の「Product Sans」になり、字体が丸く太字になり、質量感を感じるような馴染みやすいロゴに変化している。

 Googleにおけるロゴ・Webサイトの変遷は、Webサイトの変遷は特に特徴がないものの、ロゴにおいては、「3D効果」→「スキューモフィズム」→「フラットデザイン(スイスデザイン、ミニマルデザインを基調とする)」→「マテリアルデザイン」というUIデザインのトレンドの変遷を同じように適用していることがわかった。

5. 考察

 1876年、ウィリアム・モリスは植物を模倣した「るりはこべ」という壁紙をデザインした。当時はモリスの壁紙のように自然物を模倣したデザインが流行した。その後、1919年に設立されたバウハウスにおけるヨースト・シュミットらによる広告の授業では、幾何学的な造形手法を用いたデザインが指導されている。その後はシンプルでシャープな印象を持つ幾何学的な造形を用いたグラフィックデザインが数多く登場している。このように、20世紀のグラフィックデザインにおいて「自然物の模倣」から「幾何学的造形」という流れが存在したということを第2章にて指摘した。

 そして、第3章において変遷を述べてきたUIデザインにおいてもこうした流れを指摘できるのではないかと考える。UIデザインの主な傾向として、メタファーを取り入れてデザインされている「スキューモフィズム」からメタファーをなくし幾何学的造形を取り入れてデザインされている「フラットデザイン」へという流れがある。「スキューモフィズム」は自然物ではないもののメタファーを取り入れ現実の物質をデザインに落とし込むという点において、「自然物の模倣」と類似している。そして、「フラットデザイン」は規則性や幾何学的な配置を用いている点において「幾何学的造形」と類似している。このように、UIデザインにおいても20世紀のグラフィックデザインにおける「自然物の模倣」から「幾何学的造形」という流れを踏んでいると指摘できるのではないだろうか。

 バウハウスでは、大量生産が可能になった時代において、デザインは単純な装飾的意味合いだけではなく、使用者のことも考慮したシンプルでありバランスのとれた美しさ・使いやすさが存在するものという方向性に向かった。UIデザインにおいても昨今ではUX(User Experience)というユーザーが人工物の利用を通じて得られる経験を考慮したデザインが重要であるという認識が共通のものとなっているように、メタファーを取り入れた装飾的なデザインではなく、シンプルでユーザーが使いやすい合理的なデザインをする方向性に向かっている。こうした点においてもバウハウス時代のユーザーの観点に立ち、使いやすさ等を考えデザインすることは、現代のUIの流れにおいても同様な流れがあると指摘できる。

6. まとめ

 本論文では前編における第2章においてグラフィックデザインを主な対象としてデザインの変遷を追った。そして第3章では、UIデザインの変遷を現在に至るまで追ってきた。そこで見えてきたものとして、「自然物の模倣」を中心としたデザインからユーザーを意識したシンプルな「幾何学的造形」を中心としたデザインへの移行という類似した流れを持つことである。19世紀後半から20世紀の前半まで芸術が大衆に解放されたように、デザインは一部のもので普段の生活ではあまり触れないものであることから現在では誰でも頻繁に使用するものとなった。その際、美しさのみではなく使いやすさもデザインには求められる。このように19世紀から20世紀にかけてのデザインの変遷を見ることで、UIデザインにおける変遷との共通点を指摘することができた。

参考文献

1)  ポスター共同研究会・多摩美術大学「構成的ポスターの研究 –バウハウスからスイス派の巨匠へ–」,2001,p49

2)  DESIGN IS HISTORY | “SWISS DESIGN” , 

http://www.designishistory.com/home/swiss/, (参照:2017/12/13)

3) 日経テクノロジーOnline,”【電子産業史】1984年:GUIとパソコン”,            http://techon.nikkeibp.co.jp/article/COLUMN/20080807/156205/?rt=nocnt ,(参照:2017/12/10)

4)  Alan kay , ” A Personal Computer for Children of All Ages ”, 1946 ,

https://www.mprove.de/diplom/gui/Kay72a.pdf ,(参照:2017/12/10)

5)  Alan kay , ” A Personal Computer for Children of All Ages ”, 1946 ,

https://www.mprove.de/diplom/gui/Kay72a.pdf ,(参照:2017/12/10)

6)  Google , MATERIAL DESIGN ,

“https://material.io/guidelines/#introduction-principles”, (参照:2017/12/13)

7)  Google, https://www.google.co.jp

8)  Youtube, https://www.youtube.com

9)  Yahoo!JAPAN , https://www.yahoo.co.jp

10) 佐藤好彦. デザインの授業 目で見て学ぶデザインの構成術, 東京, 廣済堂,2011

11) 籔亭. デザイン史—その歴史、理論、批評, 東京, 作品社, 2016

12)  PCWOrLD , Windows 95 running on a Nintendo 3DS will take you back in time,https://www.pcworld.com/article/3018759/gadgets/windows-95-running-on-a-nintendo-3ds-will-take-you-back-in-time.html

13) THE OBSOLETE TECHNOLOGY WEBSITE |Apple2,http://oldcomputers.net/appleii.html , (参照:2017/12/13)

14)  2ちゃんねる, http://2ch.sc ,(参照:2017/12/13)

15)Showroom,https://www.showroom-live.com , (参照:2017/12/13)

16)  AbemaTV, https://abema.tv , (参照:2017/12/13)

17)merceri, https://www.mercari.com/jp/, (参照:2017/12/13)

18)mixi , https://mixi.jp ,(参照:2017/12/13)

19)INTERNET ARCHIVE waybackmachine , https://web.archive.org

コメントを残す

メールアドレスが公開されることはありません。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る