前編において、UI誕生以前のグラフィックデザインの変遷について記述した。後編では、PCの誕生以前から現在のUIデザインの流行への変遷までを追っていく。Computer)は1946年に発表されたため、2017年現在で70年が経つ。それから様々なコンピュータが開発されてきた。Kayによる「Dynabook」構想である。Ages”という論文を発表した。Interface)を兼ね備えたパソコンを考案した。論文は、大人と子供という二つの年代がダイナブックを使用するというシチュエーションを述べている。下図のイラストは論文に掲載されたものだが、二人の子供が家の近くの芝生に寝転びながら、ゲームをしたり、ゲームのプレイ中に考えた疑問を学校の図書館にネットワークをつなげる。そこから得た知識をゲームに反映させ、よりリアリティのあるゲームに内容を変更する。このように当時1972年の頃には現在のPCやタブレットと変わらない使用法が提示されている。kayが1973年にXerox社から試作機の「Alto」を製作した。これは現在のGUIに繋がるアイデアが数多く存在している。先述したように1946年に生まれた「ENIAC」がコンピュータの始まりとされているが、ENIACはDynabookのように一般的な使用を意図されたものではなく、限られた人が使うものであった。Computer社から発表されたAppleIIである。して、現在のPCのスタンダードとなっている画面・キーボードといったGUIが確立された。初期のUIは黒地に緑の文字というスタイルである。同時に日本では1977年にはソード社からM200シリーズが発表され、UIは同様のスタイルになっている。コンピュータ自体のスペックの向上、一般への普及に従い、UIが発展していくこととなる。Web1.0時代(1991~2003年)ここからは巻末付録の年表を参照しながら論を進めていく。Web”が公開された。各パラグラフではインデントを多めに空けており、可読性を高める工夫が見られる。MOSAICWWWがスタンダードになり、そこからWebは発展を遂げていく。大きな進化として、画像の表示が可能になったMOSAICがある。年表にもあるようにYAHOO!やAMAZONのウェブサイトなど画像を使うことで、伝えたいイメージが伝わりやすくなった。YAHOO!やAMAZONのサイトを見てわかるように、画像を使用しているものの、単一なフォントであり、単純なリスト構造になっており、まだわかりやすさには課題が残っている。余白を取ることで見やすいデザインに工夫されている。Windows95は1995年にマイクロソフトが発表したオペレーティングシステムである。これまでのGUIと異なり、シャドウやハイライトを用いることで立体的にアイコンやタブを見やすくする「3D効果」を使用している点が大きな特徴となっている。カラーや機能を表すアイコンを使用することで、そこをクリックすることで行われる機能を視覚的にわかりやすく表現している。当時のOSやウェブサイトではこうした「3D効果」を用いて、押しボタンや構造を視覚的にわかりやすくする試みが多く行われている。ロゴ・UIの変遷」を参照すると1996年のYAHOO!、1998年のGoogleではまずロゴがシャドウ・ハイライトを使用し、「3D効果」を使用することでイメージが伝わりやすくしている。検索の押しボタンもWindows95のように「3D効果」が使用されている。Googleのロゴは1999年から2010年の変化まで細字に「3D効果」を使用したものを継続して用いられている。1998年と異なり、ロゴのフォント自体の変化、ボタンの角が丸くなるなどの変化が見られる。Web1.0時代の特徴としてCGIがあげられる。1999年「2ちゃんねる」といった掲示板サイトやブログなどコミュニケーションをネット上で行うことができる仕組みがトレンドになった。掲示板のUIはシンプルに左詰めで送信日時、ID、内容といったシンプルな仕組みになっている。O’reilly)によって提唱される。IT用語辞典バイナリにおいて「Web2.0」は以下のように説明されている。2.0」という言葉や概念については、特に明確な定義づけがなされているわけではない。特定の規格や標準があるわけでもない。ロングテール的」などといった要素が指摘される場合が多い。2.0ではWebそのものがプラットフォームとなって諸々の機能やサービスを提供する、と解釈されることもある。』また、Web2.0はHTMLやCGIを利用してホームページを作成していたWeb1.0と異なり、AJAXやDynamicHTMLを用いて、ユーザーが使いやすく、かつ双方向性のあるサービスが可能になった仕組みである。Web2.0は2000年中頃から開始されているが、年表でのYoutubeのウェブサイトのようにログインし、動画を投稿したりお気に入りの動画をまとめるなど利用者が参加する仕組みができている。このWeb2.0の到来により、多様なサービスやUIの表現が可能になってくる。スキューモフィズム2007年、米Apple社より「iPhone」が発表された。「iPhone」はこれまでの携帯電話と異なるタッチスクリーンのみでほとんどの操作を完結する仕組み、斬新なデザインなどで話題を呼び、現在に至るまで大きな人気を持つ。「iPhone」のデザインにおいて、重要な考え方となったのが「スキューモフィズム」である。「スキューモフィズム」は既存のもののモチーフの見た目をデザインにそのまま取り込む手法のことを指す。「iPhone」のカメラアプリでは、カメラのレンズ部部分がリアリティのあるグラフィックでアイコンに描かれている。「Newsstand」では発行されている新聞や雑誌の表紙をそのままデザインに使用することでリアリティのある体験ができる。したスキューモフィズムの特徴として、立体感のあるリアリティのあるデザインによって、サービスの機能や世界観を伝えやすい。一方で既存のもののモチーフをデザインに持ち込むため、デザインにおいて不必要な要素までデザインに入れ込んでしまう傾向もあった。画像を多用するため、読み込みの遅さや通信量の増加などデメリットもあった。スキューモフィズムを活用した「iPhone」は2013年に発表されたiOS7までこうしたスキューモフィズムを活用したUIデザインになっている。スキューモフィズムはアプリのアイコンなどに適用されている。フラットデザイン(2010年~)2010年MicrosoftよりMetroUIが発表された。Metroがベースになったデザインになっている。MetroUIはシンプルな要素や図形から成り立っており、フラットデザインと呼ばれている。このMetroUIを皮切りに、多くのUIがフラットデザインを採用するようになる。フラットデザインの特徴として、シンプルな要素や図形、明るい色を使用し、わかりやすさを強調。シャドウやハイライトをあまり使わなく、平面的なデザイン。大きな文字の下に小さな文字という配置などフォントサイズ区別、細字のフォントの使用。全体的に透明感・清潔感のあるデザインになっている。デザインの変遷(UI誕生以前)」において述べたスイスデザインやミニマルデザインが基調になっていると言われている。このように情報量をなるべく取り除き、分かりやすいデザインにしたため、スキューモフィズムなどに比べ、画像が少ないため読み込みが早い。一方でこうした簡潔なデザインであるため、情報の差別化に困難性が生じている。スキューモフィズムはパッと見て、それが何を表しているかわかりやすいが、フラットデザインは極端なデザインがないため区別が難しいというデメリットも存在している。したトレンドから、Appleも2013年のiOS7からUIをフラットデザインがベースのデザインに変更した。2013年からGoogleのロゴが2016年頃からYoutubeのWebサイトが2014年頃からYahoo!JAPANのウェブサイトがフラットデザインをベースにしたようなデザインに変更している。その他にも年表のフラットデザインの説明の近くには数多くのサービスのロゴが掲載され、それぞれがフラットデザインの考えをベースにデザインされたものになっている。マテリアルデザイン/シンプルな3D(2015,6年~)フラットデザインが大きなトレンドになったが、一方でフラットデザインは影や奥行きなどを省略したため、ボタンや入力画面の識別において困難が生じた。装飾を省いたため、サービス間でデザインが類似的なものとなり、区別がしにくくなるなど問題点が生じた。したデメリットを埋め合わせるように、Googleが「マテリアルデザイン」を提唱した。「マテリアルデザイン」はx,y,z軸の三次元の概念をデザインに導入し、現実の物理法則をデザインに適用するフレームワークである。その特徴として、派手すぎないが他のデザインと区別しやすく、伝えたい内容を直感的に伝えることができる。シャドウもつき、一定程度の立体感も持つ。した「マテリアルデザイン」のフレームワークを提唱したGoogleはWebサイト6において「マテリアルデザイン」の3つの原則を提示している。)物質的なメタファーは合理化された空間と運動システムの統合化された理論としている。マテリアルの表面やエッジは現実的に根ざす視覚的な手がかりを提供する。使い慣れた触覚属性を使用することでユーザーはアフォーダンスをすばやく理解することができる。マテリアルの柔軟性は物理法則を破ることなく、物理的な世界のものに取って代わる新しいアフォーダンスを作り出す。光・表面・動きの基本はいかにオブジェクトが空間内で互いに関連して移動し、相互作用をし、存在するかを伝える鍵となる。)タイポグラフィ、グリッド、スペース、スケール、色、画像の使用などプリントベースのデザインの基本要素は視覚的な処理を導き、目をよろこばせるよりも優れた働きをする。意図的なカラー選択、エッジトゥエッジな画像、大規模なタイポグラフィ、また意図的な空白はユーザーの体験に浸していくような大胆でグラフィックなインターフェースを作り出す。)モーションは有意義で適切なもので注目を集中し、継続性を維持する役割を果たします。このように「マテリアルデザイン」は物理的な法則をデザインにも適用し、ユーザーが理解しやすいアフォーダンスを生成する考えにある。どんなプラットフォームやデバイスにおいても一貫的なデザインとなるような仕組みでもある。Tripsなどは「マテリアルデザイン」の概念を導入したデザインとなっている。した「マテリアルデザイン」の流れを受け継ぐように、多くのロゴにおいてシンプルで三次元のデザインが適用されている。付録における年表の一番右に4種類のロゴがある。“Netflix”、それぞれ物質が折り曲がって、それが影をなしているようなデザインになっている。このようなトレンドの特徴だがWordやNetflixのロゴのように、シンプルだが多次元のため区別がつきやすい分かりやすいデザインである。三次元で物理的な現象も網羅するこうしたデザインは「マテリアルデザイン」の概念を継承しているものだと考えられる。サービスなどに合わせ、そのデザインのトレンドを変化させていくだろう。第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が同時期に発表している「マテリアルデザイン」の特徴を捉えているようなデザインになっている。Sans」になり、字体が丸く太字になり、質量感を感じるような馴染みやすいロゴに変化している。図A図B図C図D図EGoogleにおけるロゴ・Webサイトの変遷は、Webサイトの変遷は特に特徴がないものの、ロゴにおいては、「3D効果」→「スキューモフィズム」→「フラットデザイン(スイスデザイン、ミニマルデザインを基調とする)」→「マテリアルデザイン」というUIデザインのトレンドの変遷を同じように適用していることがわかった。考察1876年、ウィリアム・モリスは植物を模倣した「るりはこべ」という壁紙をデザインした。当時はモリスの壁紙のように自然物を模倣したデザインが流行した。その後、1919年に設立されたバウハウスにおけるヨースト・シュミットらによる広告の授業では、幾何学的な造形手法を用いたデザインが指導されている。その後はシンプルでシャープな印象を持つ幾何学的な造形を用いたグラフィックデザインが数多く登場している。このように、20世紀のグラフィックデザインにおいて「自然物の模倣」から「幾何学的造形」という流れが存在したということを第2章にて指摘した。第3章において変遷を述べてきたUIデザインにおいてもこうした流れを指摘できるのではないかと考える。UIデザインの主な傾向として、メタファーを取り入れてデザインされている「スキューモフィズム」からメタファーをなくし幾何学的造形を取り入れてデザインされている「フラットデザイン」へという流れがある。「スキューモフィズム」は自然物ではないもののメタファーを取り入れ現実の物質をデザインに落とし込むという点において、「自然物の模倣」と類似している。「フラットデザイン」は規則性や幾何学的な配置を用いている点において「幾何学的造形」と類似している。このように、UIデザインにおいても20世紀のグラフィックデザインにおける「自然物の模倣」から「幾何学的造形」という流れを踏んでいると指摘できるのではないだろうか。バウハウスでは、大量生産が可能になった時代において、デザインは単純な装飾的意味合いだけではなく、使用者のことも考慮したシンプルでありバランスのとれた美しさ・使いやすさが存在するものという方向性に向かった。Experience)というユーザーが人工物の利用を通じて得られる経験を考慮したデザインが重要であるという認識が共通のものとなっているように、メタファーを取り入れた装飾的なデザインではなく、シンプルでユーザーが使いやすい合理的なデザインをする方向性に向かっている。した点においてもバウハウス時代のユーザーの観点に立ち、使いやすさ等を考えデザインすることは、現代のUIの流れにおいても同様な流れがあると指摘できる。まとめ本論文では前編における第2章においてグラフィックデザインを主な対象としてデザインの変遷を追った。第3章では、UIデザインの変遷を現在に至るまで追ってきた。そこで見えてきたものとして、「自然物の模倣」を中心としたデザインからユーザーを意識したシンプルな「幾何学的造形」を中心としたデザインへの移行という類似した流れを持つことである。19世紀後半から20世紀の前半まで芸術が大衆に解放されたように、デザインは一部のもので普段の生活ではあまり触れないものであることから現在では誰でも頻繁に使用するものとなった。その際、美しさのみではなく使いやすさもデザインには求められる。このように19世紀から20世紀にかけてのデザインの変遷を見ることで、UIデザインにおける変遷との共通点を指摘することができた。コメントをキャンセルメールアドレスが公開されることはありません。キーを押して検索します。