Webデザインの変遷とは誕生後の30年間にどのようだったか?

webデザイン

「Webデザインっていつ頃からあるの?」

「Webデザインがどのように進化していったのかを知りたい!」

「Webデザインの作成技法の変遷はどうなっているのか?」

この記事を読まれているあなたはこんなふうに思われているかも知れません。

 

そこで今回は、Webデザインが誕生してから現在までの変遷について、徹底解説いたしましたのでぜひ参考にしてみてください。

 

Webデザインの変遷について

今ではすっかり生活の中に溶け込んでいるWebデザインですが、最初に登場したのはそんなに昔ではありません。

Webデザインの誕生から現在までの流れを追ってみましょう。

 

最初のWebデザイン

一番最初の記念すべきWebサイトは、「World Wide Web」という名前のWebページです。

これは1991年8月6日のことで、作成および公開したのは英国の計算機科学者のティム・バーナーズ=リー博士です。

彼はロバート・カイリューと共にWorld Wide Web(WWW)を発明しました。

 

                                         【引用元:World Wide Web】   

今日の画像や動画にあふれたWebサイトからすれば、文字列だけが並んでいて地味で味気ないものですがまさにこれが画期的なWebサイトの第1号なのです。

 

もし可能ならば当時も画像を乗せて送りたかったでしょうが、通信速度が非常に遅いので文字を送るので精一杯だったのです。

    

1990年代前期のWebデザイン

              【引用元:1995年のSLAC

WWWの世界では、Webサイトの作成者から閲覧者へ向けて一方通行に情報が送信されるだけでした。

ところが1993年にCGIが発明されたことによって、送信された情報を見た閲覧者つまりクライアントが新たな要求を出したら、それに反応できるようになったのです。

 

それまでのウェブサーバープログラムは、あらかじめ用意された情報をクライアントに送って終わりでした。
ところがCGI(Common Gateway Interface コモン・ゲートウェイ・インターフェイス)の登場で、クライアントの要求に反応して他のプログラムを呼び出して、処理結果をクライアントに送信できるようになりました。

 

つまり、Webサイトを閲覧していてクリックをするとその答えが返ってくるようなWebデザインが作成可能になったのです。

 

さらに接続速度も上がってきて以前のダイアルアップ接続から、ADSLやFTTHなどのブロードバンドが普及してからは、ファイルサイズを気にしないで画像や動画を使用できるようになりました。

 

1990年代後期のWebデザイン

                    【引用元:1998年のBBC NEWS

1990年代後半になると一種の革命とも言える動きがありました。

 

・FlashやSilverlightなどのRIA(rich internet applicationリッチインターネットアプリケーション)が登場することによって、動きがより上質に表現されるようになったのです。
・1996年以降になると、今日のWebデザインの基礎となっているCSSやHTMLが登場し、さらにJavaScriptの中核的仕様も標準化され、基礎的な技術が確立しました。
・この頃からDreamweaverやホームページ・ビルダーといったウェブページ作成ソフトが発売されました。

 

このように1990年代の後半は技術の進歩に支えられて、一気にWebデザインも進化を遂げたのです。

2000年代のWebデザイン

                 【引用元:2007年のYouTube

2000年代に入るとパソコンの性能が一段と向上したために、Webデザインの表現方法も急速に多様化していきました。

Googleは2005年にJavaScriptのAjax技術を使ったGoogle Mapを発表しました。

従来のWebアプリケーションではサーバーにリクエストを送信後にレスポンスを受けた時に、新たなウェブページとして受け取るので画像遷移が発生していました。

つまり、ページが飛んでいたのですが、Ajaxを導入することで画像遷移を伴わない動的なWebアプリケーションが実現したのです。

このメリットの具体例としては、Web検索が挙げられます。

従来は入力確定後に行っていた検索処理について、クライアントが検索のキー入力をする間にバックグラウンドで既に検索が開始されていて、入力が終わった時には検索結果を表示できるようにしているのです。

この他にも大きな出来事がありました、2005年には動画配信のYouTubeやGYAO!が公開され始めました。

 

【YouTubeが生まれたきっかけ】
YouTubeの創業者の一人であるジョード・カリムが、2004年にジャネット・ジャクソンが起こした第38回スーパーボウルにおけるハプニング(ハーフタイム・ショーで胸がはだけてしまった)と、同年発生したスマトラ沖地震の2つの出来事をきっかけに思いついたのです。
カリムは2つの興味深い出来事の動画をインターネットで調べましたが、どちらも簡単には見つけることができませんでした。
これが元になって、動画共有サイトのアイデアが生まれたのです。

2010年前半のWebデザイン

               【引用元:2012年のapple

2010年代前半の大きな出来事としては、スマートフォンの普及が挙げられます。

スマートフォンでもパソコンのWebサイトが同じように見られるようにする、レスポンシブデザインというデザイン手法が現われました。

さらにツイッター、フェイスブック、インスタグラムなどのSNSの普及により、画像や動画を多用したWebデザインへの関心が高まったと言えます。

 

2010年後半のWebデザイン

                 【引用元:2017年のNETFLIX

2010年代後半に入ると端末の通信速度が上がり、かつWebデザイン関連の技術が成熟してきたことにより、単に画像や動画を取り入れるだけではなく、質感も含めたデザイン性の追求に興味の対象が移っていきます。

 

ようやくこの段階になってから、Webデザインを考案するに当たって技術的制約から解き放たれた状態になってきました。

 

そして、Webデザインを巡って様々なデザインスタイルが芽吹いてくることになったのですが、これについては次項で詳しく解説します。

Webデザインのトレンド

スキューモーフィズム

スキューモーフィズムは2000年代から2010年代初頭までの間主流になっていました。

このスタイルの熱烈な支持者はスティーブ・ジョブズでしたが、彼の死後急速に人気がなくなり、appleは2013年にスキューモーフィズムから正式に手を引くことを発表しています。

 

スキューモーフィズムとは、デザインの要素(アイコンやボタン等)を実物に似せるスタイルです。
ドロップシャドウ、重なり、テクスチャ等の3D効果を適用して本物っぽく見せるようなデザインです。

フラットデザイン

フラットデザインというデザイン用語は1950年代ころからあり、Webの発祥前からの長い歴史があります。

そしてマイクロソフトが自社製品に取り入れたことがきっかけになり、Webデザインの世界でも2000年代に入ってから人気が出て来ました。

 

フラットデザインとは次のような特長を持つデザインです。
・2Dの要素を持っている
・シンプルなタイポグラフィの仕様
・長いシャドウ
・ミニマリズム
・大胆な色使い
フラットデザインはこれからも派生的なデザインを多数産みだして発展していくと見られています。
フラットデザインからはフラットデザイン2.0やマテリアルデザインなどが産まれており、今後も多様な派生デザインが発生すると予測されています。

フラットデザイン2.0

フラットデザイン2.0はフラットデザインの直系ですが、フラットデザインが愚直に3D的対応を避けていたのを改善し、わずかに3D表現を取り入れたところが改善点となっています。

 

フラットデザイン2.0は2014年に登場しましたが、フラットデザインの不十分な点だったUXデザインのいくつかの点を改善しています。

 

フラットデザイン2.0はデスクトップやモバイルのUI(ユーザーインターフェイス)に現在多用されており、今後もその人気は継続されると予測されているのです。

なお、今後は基本的なフラットの美を保ちながらも、3D表現をいかに調和させていくかが期待されます。

 

マテリアルデザイン

マテリアルデザインはGoogleが2014年に発表し、2015年までに自社製品やサービスの大部分で展開しました。

マテリアルデザインは、フラットな要素に3Dタッチを微妙に適用しているので、相対的に優れたUXを実現しています。

つまりマテリアルデザインは、Googleによるフラットデザイン2.0の効果的な応用例と言えます。

 

Googleは2017年にデスクトップ用YouTubeをマテリアルデザイン言語で再作成してしまいました。
これからもGoogle主導でマテリアルデザインは広がっていくものと予測されています。

ミニマリズム

ミニマリズムは2000年代の初めにもありましたが、当時はスキューモーフィズム全盛のためにあまり顧みられることがありませんでした。

ところがほぼ20年の時の試練に耐え抜いて、今日ではまた復活しつつあります。

 

ミニマリズムとは次のような特長を持つデザインです。
・フラットなテクスチャ
・ホワイトスペースまたはネガティブスペースの使用
・色数の少ないカラーパレット
ミニマリズムは今日のWebデザインでは人気があり多用されるようになっています。
今後は動画やAR(拡張現実)のような分野でも積極的に使用されていくと予測されています。

実際のWebデザインの変遷を見てみよう

それでは実際に使われてきた有名企業のWebデザインの変遷を見てみることにしましょう。

Lego 1997年~2020年

                                                              【引用元:Web Design Museum

 

おもちゃのブロックで有名なLEGOは、1990年代の後半からすでに自社のWebサイトをインターネット上に公開していました。

この時期にWebデザインに早くも着目していたというのは、先見性があったと言えるでしょう。

当時のインターネット環境はまだ脆弱で通信速度も遅かったので、大量の情報を送信するのは困難でしたが、LEGOはいち早く自社製品を画像にて紹介しています。

 

LEGOはデンマークの玩具会社で、1934年に「よく遊べ」を意味するデンマーク語の「leg godt」をもとにして社名を「LEGO」としました。
創業当初は木製玩具を製造していましたが、1949年からはプラスチック製玩具の製造を開始しました。

 

1997年~2020年のLEGOのWebサイト

 

Adobe 1996年~2019年

                                                                         【引用元:Web Design Museum

 

AdobeのWebサイトはさすがにWeb関係企業だけに早く、1996年には既に公開されています。

しかも当時のWebサイトとしてはかなり凝った造りのものを提供しています。

リッチクライアントの代表例であるAdobe Flash(アドビ・フラッシュ)で有名なAdobeですが、自社のWebサイトにも先進的な技術を導入してアピールしています。

AdobeのWebデザインの変遷を見てみれば、その当時のテクノロジーの到達点が追えるでしょう。

 

Adobeはアメリカ合衆国カリフォルニア州サンノゼ市に本社を置くコンピューター・ソフトウェァ会社です。
製品としてはAcrobatが有名ですが、その他にも多数のソフトウェア製品があります。

Coca-Cola 1996年~2017年

                                                                  【引用元:Web Design Museum

 

世界中に知れ渡っているビッグネームのCoca-Colaもマーケティング戦略の一つとしていち早く自社のWebサイトを1996年に立ち上げました。

初期のWebサイトには画像もいちおう掲載されていたものの、圧倒的に文字が多く占めていました。

それが時代が進むにつれて細かな説明文字は消えていき、現在は健康なイメージの画像のみとなっています。

 

Coca-Colaは1886年に世界初のコーラ飲料としてアメリカ合衆国のジョージア州アトランタで発明されました。Coca-Colaの本社は現在もアトランタにあり、「World of Coca-Cola博物館」には多くの観光客が訪れています。

1996年~2017年のCoca-ColaのWebサイト

 

Yahoo! 1994年~2017年

                                                                 【引用元:Web Design Museum

 

インターネット黎明期を華やかに駆け抜けたYahoo!ですが、設立当初の1994年には既にWebサイトを立ち上げています。

最初のWebデザインは上記画像のように、文字列が並んだものですが当時としては先進的なものでした。

 

一世を風靡したYahoo!でしたが、その後2000年代後半にGoogleやFacebookとの競争に敗れてしまいました。

検索エンジンやポータルサイトの主力事業の競争力が低下し、2017年6月13日にはベライゾン・コミュニケーションズに売却されたのです。

 

Yahoo!はスタンフォード大学の学生だったファイロと楊が創り出したWebサイトがもとで、1995年3月1日にアメリカ合衆国カリフォルニア州に設立されました。
学生ベンチャー企業のはしりでしたが、その後2008年頃から経営が悪化してしまいました。

 

Nintendo 1996年~2018年

                                                              【引用元:Web Design Museum

 

いまやNintendoと表記され、世界中で人気のあるゲームの任天堂ですが、英語版の1996年のWebサイトは同社のヒット商品のスーパーマリオをあしらった洗練されたものです。

 

任天堂はインターネットを通じてゲームの最新情報を発信するプレゼンテーションをNintendo Direct(ニンテンドーダイレクト)と称して2011年10月21日から実施しています。

 

このようにWebサイトを有効活用する会社方針があるために、Webデザインには趣向を凝らしているのが見て取れます。

日本企業としてWebデザインへの取り組みに積極的な例として参考になるでしょう。

 

1996年~2018年のNintendoのWebサイト

 

まとめ

 

Webデザインは最初のWebサイトが1991年に、WWWを利用して文字だけで誕生したことから発祥しています。

当初は通信速度や技術的な制約から、送信できるコンテンツが制限されており、Webデザインといえるほどのものはありませんでした。

 

ところが1990年代後半から動画も扱えるようになり、さらに通信速度が飛躍的に加速化されるにつけて、Webデザインの自由度が増していったのです。

 

2000年代になってからはスキューモーフィズムの流行などの、デザインの質感に対する関心が高まりました。

2010年代になるとフラットデザインを基盤とした各種派生デザインが産まれ、さらに自由な表現が盛んになったのです。

 

これにはスマートフォンの普及も大きな影響を与えています。

2020年代に向けてさらに洗練されたWebデザインが産まれてくると期待が寄せられています。

コメント

タイトルとURLをコピーしました