ジオシティーズからブルータリズムへ 〜 ウェブデザインの潮流と源泉、トレンドの系譜

## TL;DR

1. **ドキュメントの集合**としてのウェブサイト・ウェブページが、WWWとして創始された。
2. 「ウェブページを作る（作れる）」ことの**楽しさ**が、多種多様な文化を産み、ガラパゴス的なムーブメントが起きた。
3. **鮮やかさや派手さ**が追求される一方、真剣に**アフォーダンスを最適化**する運動が始まった。
4. **Flash、スキューモフィズム**が終焉を迎え、**フラットデザイン**が市民権を得た。
5. ユーザ層が変わり、彼らのニーズが**「わかりやすさ」と「印象」**に移行した。
6. 原点回帰が始まった。**リッチなインタフェース、よりシンプルなフラットデザイン、ブルータリズム**の輻輳を迎えた。

## 1990 - 1991 : イントラネット、ドキュメント

**ウェブサイトとは、ドキュメントであった。**

紙資料が集中型で管理されていた前時代、特に軍や政府の情報アクセシビリティを高めることは特に各国が競ってインフラ整備に時間と費用を費やした。1989年3月、欧州原子核研究機構のティム・バーナーズ＝リーによりWWWが提唱され、**ドキュメントを各端末（コンピュータ）から参照**できることは、情報ネットワークの嚆矢として、**イントラネット**（組織内、チーム内で共有できる情報）の立ち上げに大きく貢献した。

> ![The World Wide Web project.png](https://qiita-image-store.s3.amazonaws.com/0/105252/ff78e09f-da40-0b3e-77ec-880d2d838d59.png)
*世界初のウェブページとして有名な "The World Wide Web project"*

当時は**ドキュメントとして情報を扱う**ことが目的だったので、**リッチなCSSエフェクトなど存在しないし、JavaScriptによるDOM操作などもちろん有り得なかった**。必要な情報に、シンプルかつ速やかにアクセスし、関連する情報にアンカーリンクで遷移できるということ、それ自体が**偉大な発明**であった。

## 1992 - 1994 : ワールドワイドウェブの到来、W3Cの創設、商業化

WWWの概念とシステムが拡く普及し、国家・行政・公共機関・法人・個人を問わず、**HTMLとCSSを使ってドキュメントを構築できる時代（Web 1.0）**が到来した。付随して、**（登録された）ウェブページを検索する**という行為が生まれ、**検索エンジン**なるものが産声をあげた。

> ![ALIWEB   The Web s Oldest Search Engine   Est. 1993.png](https://qiita-image-store.s3.amazonaws.com/0/105252/836886a3-613d-dbe2-803c-495bc3d958ac.png)
*Web1.0 黎明期以降の検索エンジンとして知る人ぞ知る、ALIWEB*

後期には、**HTML2**なるものが生まれ、情報をより高精細にマッピングしていくことの関心が高まった。さらに、**NetScape**というブラウザがシェアを広げ、デファクトスタンダードになりかけていた。

## 1995 - 1997 : できるだけ明るく、できるだけ醜く。派手であればあるほどよい

時を同じくして、**Internet Explorer**なるブラウザがMicrosoft社より誕生した。NetScapeが一斉を風靡していたため、この時点では**未来のマークアップエンジニアやフロントエンドエンジニアがいかにこのブラウザに苦しめられるか**など、誰も知る由も無かった。

> ![2.png](https://qiita-image-store.s3.amazonaws.com/0/105252/9d189ac0-f888-f7a4-970d-23cdc1ad5504.png)
*ジオシティーズという、誰でも簡単にウェブページが構築できるインフラが公開され始めたことにより、コンセプトやディレクションを一切携えずに「とにかく作ってみる」という情熱だけで、大量の謎ページが有志により生産された。*

**JavaScript**という、**Javaとは何も関係ないのにJavaという名が付いている言語**が普及し始めた。さらに、商業化・ガラパゴス化が進み、日本では「**Japanese Only**」というエスノセントリズムを髣髴とさせる言葉をなぜか**書かなければいけない**ことになったり、CGIによるアクセスカウンターで訪問数を公開し、**訪問数がキリの良い数字だったら、その数字に該当するユーザは掲示板に報告しなければいけない**という謎の文化が生まれ始めた。

## 1998 - 1999 : "情報設計" の登場によるアフォーダンスの考察

**スプラッシュ（「Welcome to our website!」「Enter」のようなメッセージが記述された単一ページ）**が登場し、ユーザは入り口のページで「Enter」的なボタンを押してから中に入るという文化が流行した。（ちなみに、いまの [Google Drive](https://www.google.com/intl/en_en/drive/) や [Google Spreadsheet](https://www.google.com/intl/en_en/sheets/about/) もこんな感じである。ログインしてるんだからさっさと先に行かせてほしい。）

一方では、**HTML3、HTML4**が続々と策定され、**構造化と適切なHTMLタグによるマークアップ**が重要視されるようにもなった。

> ![Screen Shot 2016-10-29 at 8.18.47 AM.png](https://qiita-image-store.s3.amazonaws.com/0/105252/bf712387-aff4-939d-a507-14a946d8ae32.png)
*「情報設計」の概念が確立されようとしていた。ユーザには適切なナビゲーションメニューと訴求で必要な情報にアクセスできるように導線が設計され、見た目の美しさとアフォーダンスのバランスを調整する時代だと考える運営者が登場し始めた。*

## 2000 - 2005 : ミーハーな技術者によるFlashアニメーションの台頭

1996年ごろから、一部のインターネットギークを中心に普及していた**Flash**の技術を採り入れることが最新のトレンドであった。**必要かどうかではなく、最新の技術をいかに使えるかが重視され、強制的にユーザに音楽を聴かせるラグジュアリーでリッチなサイト**を作ることが、各ウェブデザイナーの使命であった。

**Flashクリエイター**は商業デザイナーであるよりアーティストとして歓迎されたが、そう遠くない未来にAppleがFlashとの訣別を宣言するなどとは誰も想像していなかった。

> ![Screen Shot 2016-10-29 at 8.26.05 AM.png](https://qiita-image-store.s3.amazonaws.com/0/105252/4797da37-ad73-bfad-02fb-b7a57cdfc6fc.png)
_フィーチャーフォン（ガラケー）N705i の公式サイトは、当時のFlashの最新技術が豊富に採り入れられている。背景や商品の紹介にはアニメーションが適用され、アンビエントミュージックでユーザーを歓迎する。ナビゲーションのボタンをはじめ、それぞれのボタンに非常にこだわった**マイクロインタラクション**が見られるのも興味深い。_

## 2006 - 2008 : スキューモフィズムによるユーザの啓蒙

Flashにより**ウェブサイトはユーザを楽しませその世界に引き込むものである**という考えが普及し、**より「リアル」を追求すること**が正しいユーザビリティであると多くのウェブデザイナが信じていた。

まだ「インターネット」の普及率は低く、パソコンでネットサーフィンをすることはそれほど重要なライフワークではなかった。日本では、**「ホームページビルダー」というソフトウェアの~~せい~~おかげで、ウェブページやウェブサイトをなんでも「ホームページ」と呼ぶ文化**もできた。

**写真素材サイトやイラスト素材サイト**も競合するようになり、デザインにおいては**Skeuomorphism（スキューモフィズム）**により、できるだけ現実世界と同じ体験をさせることが、インターネットに慣れていないユーザの啓蒙活動として膾炙し始めた。

> ![wildbillssoda.jpg](https://qiita-image-store.s3.amazonaws.com/0/105252/27736870-3524-3d28-8288-78b50067f0dd.jpeg)
*何かを選択すること、ボタンを押すこと、スクロールすること。すべてをリアルにすることは、ウェブデザインだけではなくアプリケーション、ソフトウェアの定言的な使命であった。*

**Safari**や**Firefox**といった、Internet Explorer以外のブラウザを使うことがインターネットへの意識の高さを表明する時代となったのも、この頃である。ちなみに、意外なことかもしれないが、**「ブラウザへのドラッグアンドドロップ」**という概念が生まれたのも、この頃になってからである。

## 2009 - 2012 : フラットデザイン・レスポンシブデザインの台頭

数年前から少しずつ話題になっていた**「SVG」「Canvas」**などの最新手法が少しずつ採り上げられるようになった。**CSS3**の勧告に伴い、それまでJavaScriptに頼っていた画像の切り替えやアニメーションなどは、CSSによる簡素な実装で解決できるようになり、かつレンダリングエンジンのリソースを犠牲にすることはなくなってきていた。

また、デザインにおいてはスキューモフィズムから**フラットデザイン**への移行が顕著に見られるようになった。フラット化とは、すなわち**事物の抽象化**であり、**表現の一般化・他者化**である。高度に訓練された消費者たちにとっては、もはやウェブ上の（言語学的意味での）記号は共通言語となり、現実世界との相互関連性を指し示す必要がなくなった。

> ![Fitbit Official Site for Activity Trackers   More.png](https://qiita-image-store.s3.amazonaws.com/0/105252/c0d8c523-d98c-b6ad-c6e3-58cd0db9c9e4.png)
*ボタンをボタンであるとわざわざ指し示したり、クリックできる領域を誇張して表現することはもはや過去のものとなった。*

## 2013 - 2014 : パララックスデザイン・インフォグラフィクスの登場と衰退

__ユーザにとって大切なことは、自分が求めている情報を適切に得ることではなく、美しく綺麗に整理された情報群から選択肢を提供してもらうこと__へと変化した。そして、情報収集の方法はスマートフォンに代わり、限られた時間のなかで印象を最大化することがウェブデザイナの仕事となった。

> ![Pi s Epic Journey   LIFE OF PI on Digital HD   Watch Full Movie Online or Download Now.png](https://qiita-image-store.s3.amazonaws.com/0/105252/bacf6a84-01a8-8c11-fa6a-36e6c33d78fc.png)
*「画面をスクロールする」という行為のハードルが低くなり、パララックススクローリングをうまく活用したビジュアルストーリーテリングが普及した。ネットワークインフラの品質が向上し、高画質・高精細な画像、音声・動画、ウェブフォントなど、扱えるアセットのジャンルが急速に拡大した。*

しかし、このような風潮は**Flash全盛期と同様の、技術者のエゴの押し付け**であったり、**須らくユーザは極端に高性能なマシンを持っているとの誤解**である、さらには**多くのユーザは、膨大な情報を一度に吸収できるほど、実は賢くないということを知るべき**である、との批判を耳にすることもある時代だった。

デザイナたちは、大いに悩まされた。**Google Chrome**という素晴らしいウェブブラウザが市場を席巻し、IEがこの世から無くなったと思い込んでいた（かもしれない）彼らは、厳しい決断を迫られた。

## 2015 - 現在 : ポストモダンとしてのブルータリズム

世間では、**LPレコードの音質**や、**70年代ヨーロッパの近代ファッション**、**装飾性を排除したモノトーンの家具・家電、建築様式**などが再評価され始めていた。

> ![Instapaper.png](https://qiita-image-store.s3.amazonaws.com/0/105252/748703f1-7493-90ff-5851-36842c686350.png)
*Instapaper のウェブページには、必要最低限の情報しか存在しない。これはこのアプリケーションの性質にも依拠するが...*

メディアの喧伝する影響であるところのものが大きいが、機能主義に立ち返った前衛派を筆頭に、**素材そのものの良さをそのまま主張すること**を方法論として、**彫塑的な機能美がプロダクトの価値を高める**という運動が始まった。これを *brutal[冷酷な,粗野な,粗暴な]* という単語をもとに**ブルータリズム**と呼ぶ。

> ![Material Design.png](https://qiita-image-store.s3.amazonaws.com/0/105252/934ff77b-0c5d-7fe7-7788-5dc4dd032c9a.png)
*装飾は、「生まれたままの姿」に還元され始めた。フォントそのものの美しさ、ひとつひとつの文・文字の配置やカラーバリエーションに徹底的にこだわることが現代のデザイナの仕事になり始めた。*

華美な画像や高度なCSSスタイリングはもはや不要になった。NetScape時代の粗々しさをフラットデザインで培った情報設計とレイアウトの力で解消し、__新しい懐古主義__が生まれた。

大衆にとって、流行とは隠れた意思決定の指針である。大衆向けのウェブサイトにブルータリズムが本格的に採用される時代は、（消耗品としての）歴史的背景に鑑みると、ほぼ絶望的に思える。

> ![KOE THOM BROWNE..png](https://qiita-image-store.s3.amazonaws.com/0/105252/4446ee6e-cb8f-1ded-1f9b-e09139215042.png)
*少しずつ、商業的ウェブサイトにも、本来の目的である__「ドキュメントとしての情報群」__としての性質を取り戻そうとする姿勢が見られ始めた。アート的構図は、ジオシティーズ時代のレイアウトを想起させる、__大人のための遊び__なのかもしれない。*

しかし、**ブサかわいいとかキモかわいい**とかの訳のわからない表現が前触れもなく世を席巻する昨今で、膨大なCSSのコード群と、セマンティックなHTMLの構造化マークアップと日々格闘することは、そう遠くない未来には**過去にあったオペレーショナルな作業**として嘲笑される日が来るかもしれない。

*註：この記事は思いつきで書いており、特に権威ある文献を参照していない。少しばかりの誤植や内容の齟齬は、賢明な諸兄の脳内補完でなんとかしながら、コメント欄でご指摘を仰ぎたい。*