「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年代後半になると一種の革命とも言える動きがありました。
・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の創業者の一人であるジョード・カリムが、2004年にジャネット・ジャクソンが起こした第38回スーパーボウルにおけるハプニング(ハーフタイム・ショーで胸がはだけてしまった)と、同年発生したスマトラ沖地震の2つの出来事をきっかけに思いついたのです。
カリムは2つの興味深い出来事の動画をインターネットで調べましたが、どちらも簡単には見つけることができませんでした。
これが元になって、動画共有サイトのアイデアが生まれたのです。
2010年前半のWebデザイン
【引用元:2012年のapple】
2010年代前半の大きな出来事としては、スマートフォンの普及が挙げられます。
スマートフォンでもパソコンのWebサイトが同じように見られるようにする、レスポンシブデザインというデザイン手法が現われました。
さらにツイッター、フェイスブック、インスタグラムなどのSNSの普及により、画像や動画を多用したWebデザインへの関心が高まったと言えます。
2010年後半のWebデザイン
【引用元:2017年のNETFLIX】
2010年代後半に入ると端末の通信速度が上がり、かつWebデザイン関連の技術が成熟してきたことにより、単に画像や動画を取り入れるだけではなく、質感も含めたデザイン性の追求に興味の対象が移っていきます。
そして、Webデザインを巡って様々なデザインスタイルが芽吹いてくることになったのですが、これについては次項で詳しく解説します。
Webデザインのトレンド
スキューモーフィズム
スキューモーフィズムは2000年代から2010年代初頭までの間主流になっていました。
このスタイルの熱烈な支持者はスティーブ・ジョブズでしたが、彼の死後急速に人気がなくなり、appleは2013年にスキューモーフィズムから正式に手を引くことを発表しています。
ドロップシャドウ、重なり、テクスチャ等の3D効果を適用して本物っぽく見せるようなデザインです。
フラットデザイン
フラットデザインというデザイン用語は1950年代ころからあり、Webの発祥前からの長い歴史があります。
そしてマイクロソフトが自社製品に取り入れたことがきっかけになり、Webデザインの世界でも2000年代に入ってから人気が出て来ました。
・2Dの要素を持っている
・シンプルなタイポグラフィの仕様
・長いシャドウ
・ミニマリズム
・大胆な色使い
フラットデザイン2.0
フラットデザイン2.0はフラットデザインの直系ですが、フラットデザインが愚直に3D的対応を避けていたのを改善し、わずかに3D表現を取り入れたところが改善点となっています。
フラットデザイン2.0はデスクトップやモバイルのUI(ユーザーインターフェイス)に現在多用されており、今後もその人気は継続されると予測されているのです。
なお、今後は基本的なフラットの美を保ちながらも、3D表現をいかに調和させていくかが期待されます。
マテリアルデザイン
マテリアルデザインはGoogleが2014年に発表し、2015年までに自社製品やサービスの大部分で展開しました。
マテリアルデザインは、フラットな要素に3Dタッチを微妙に適用しているので、相対的に優れたUXを実現しています。
つまりマテリアルデザインは、Googleによるフラットデザイン2.0の効果的な応用例と言えます。
ミニマリズム
ミニマリズムは2000年代の初めにもありましたが、当時はスキューモーフィズム全盛のためにあまり顧みられることがありませんでした。
ところがほぼ20年の時の試練に耐え抜いて、今日ではまた復活しつつあります。
・フラットなテクスチャ
・ホワイトスペースまたはネガティブスペースの使用
・色数の少ないカラーパレット
実際のWebデザインの変遷を見てみよう
それでは実際に使われてきた有名企業のWebデザインの変遷を見てみることにしましょう。
Lego 1997年~2020年
【引用元:Web Design Museum】
おもちゃのブロックで有名なLEGOは、1990年代の後半からすでに自社のWebサイトをインターネット上に公開していました。
この時期にWebデザインに早くも着目していたというのは、先見性があったと言えるでしょう。
当時のインターネット環境はまだ脆弱で通信速度も遅かったので、大量の情報を送信するのは困難でしたが、LEGOはいち早く自社製品を画像にて紹介しています。
Adobe 1996年~2019年
【引用元:Web Design Museum】
AdobeのWebサイトはさすがにWeb関係企業だけに早く、1996年には既に公開されています。
しかも当時のWebサイトとしてはかなり凝った造りのものを提供しています。
リッチクライアントの代表例であるAdobe Flash(アドビ・フラッシュ)で有名なAdobeですが、自社のWebサイトにも先進的な技術を導入してアピールしています。
AdobeのWebデザインの変遷を見てみれば、その当時のテクノロジーの到達点が追えるでしょう。
Coca-Cola 1996年~2017年
【引用元:Web Design Museum】
世界中に知れ渡っているビッグネームのCoca-Colaもマーケティング戦略の一つとしていち早く自社のWebサイトを1996年に立ち上げました。
初期のWebサイトには画像もいちおう掲載されていたものの、圧倒的に文字が多く占めていました。
それが時代が進むにつれて細かな説明文字は消えていき、現在は健康なイメージの画像のみとなっています。
Yahoo! 1994年~2017年
【引用元:Web Design Museum】
インターネット黎明期を華やかに駆け抜けたYahoo!ですが、設立当初の1994年には既にWebサイトを立ち上げています。
最初のWebデザインは上記画像のように、文字列が並んだものですが当時としては先進的なものでした。
一世を風靡したYahoo!でしたが、その後2000年代後半にGoogleやFacebookとの競争に敗れてしまいました。
検索エンジンやポータルサイトの主力事業の競争力が低下し、2017年6月13日にはベライゾン・コミュニケーションズに売却されたのです。
Nintendo 1996年~2018年
【引用元:Web Design Museum】
いまやNintendoと表記され、世界中で人気のあるゲームの任天堂ですが、英語版の1996年のWebサイトは同社のヒット商品のスーパーマリオをあしらった洗練されたものです。
このようにWebサイトを有効活用する会社方針があるために、Webデザインには趣向を凝らしているのが見て取れます。
日本企業としてWebデザインへの取り組みに積極的な例として参考になるでしょう。
まとめ
Webデザインは最初のWebサイトが1991年に、WWWを利用して文字だけで誕生したことから発祥しています。
当初は通信速度や技術的な制約から、送信できるコンテンツが制限されており、Webデザインといえるほどのものはありませんでした。
ところが1990年代後半から動画も扱えるようになり、さらに通信速度が飛躍的に加速化されるにつけて、Webデザインの自由度が増していったのです。
2000年代になってからはスキューモーフィズムの流行などの、デザインの質感に対する関心が高まりました。
2010年代になるとフラットデザインを基盤とした各種派生デザインが産まれ、さらに自由な表現が盛んになったのです。
これにはスマートフォンの普及も大きな影響を与えています。
2020年代に向けてさらに洗練されたWebデザインが産まれてくると期待が寄せられています。
コメント