1. HOME
  2. ブログ
  3. ITエンタメ
  4. 創世記のWebデザインから現在まで Webデザインの歴史

創世記のWebデザインから現在まで Webデザインの歴史

Webデザインにも歴史がある!?

ミツオカミツオカ
Webサイトのデザインは、流行り廃りもあるので難しいですね…!
にゃんこ師匠にゃんこ師匠
世界初のWebサイトは1991年じゃったかな。以来30年、Webデザインは今も進化し続けておる!
ミツオカミツオカ
30年も進化し続けているんですね!
にゃんこ師匠にゃんこ師匠
WEBデザインの歴史」を考えることで、デザインに「目的」を持たせることができるんじゃ
ミツオカミツオカ
Webデザインの「目的」ですか!なるほど!
にゃんこ師匠にゃんこ師匠
今回は、Webデザインの歴史から、時代のトレンドを読み取っていこうかの!

Webデザインの誕生〜初期

Webが誕生してから、初期の1990年代中頃までの歴史を見ていきましょう。

さて、早速ですが、一番最初にできたWEBサイトをご覧いただきましょう!

こちらです!

一番最初にできたWEBサイト

(参考:http://info.cern.ch/hypertext/WWW/TheProject.html)

イギリスの、ティム・バーナーズ=リー博士が、初めてWebを世に出した当時は、ほぼテキストのみのデザインでした。

彼が同時にオープンソースとして公開した「World Wide Web」によって、世界中で誰もが使えるものになっていったのです。

テキストのみからHTMLへ

ただ当時は、通信速度も遅く、当時は「サクサク」とはほど遠いものでした。

当時のインターネット接続は、ダイヤルアップモデムでしたから、Webデザインは「できなかった」と言った方が近いかもしれません。

しかし、HTML の登場によって、テキストに「タイトル」や「見出し」などのマークアップができるようになりました。

これで、一気にWebサイトがデザイン性を帯びるようになってきたのです。

ちなみに、HTMLは、現在でもウェブページを作る基本となっています。

Webデザイン初期から学ぶこと

劇的に通信速度が遅かった当時、グラフィックのデザインをそのままWebに移しても、重すぎて動かないということが起こっていました。

これは、通信速度が格段に進化した現代でも、注意すべきポイントです。

デザイナーの「できる」と、ユーザーの「利便性」は同じとは限りません。

にゃんこ師匠にゃんこ師匠
ユーザーの立場に立って、デザインを考えることが大事ということじゃな!
ミツオカミツオカ
今にも通じる考え方ですね!

Webデザインの中期

1990年の半ばにさしかかると、Webデザインの世界にも、さまざまな「機能」が出てきます。

グラフィックデザインの人気もあり、あるソフトの登場によりデザインの変化は一気に加速します。

Flash の登場でルネッサンス

現在の Adobe社である Macromedia社が、「Flash」というソフトを開発しました。

これによって、Webデザインに音やアニメーションを組み込むことができるようになり、まさにWebデザインのルネッサンス(再生)が起こったのです。

HTMLではできなかったことが可能となっただけでなく、当時のインターネット通信である、「ADSL」や「ISDN」でも動画を使えました。

また、WEB上で「ゲーム」が可能になったこと、人気に拍車がかかりました。

Flashは爆発的な人気となり、当時のWebサイトでは、Flashを使っていないものは見かけないほどでした。

Webデザイン中期から学ぶこと

ただし、Flashは検索エンジンと相性が悪く、SEO的に向いていません

Googleが、Flashのインデックスアルゴリズムを公開しましたが、それでもFlashで作られたWebサイトは、SEO向きとは言えませんでした。

にゃんこ師匠にゃんこ師匠
アニメーションや動画などのエンターテイメント性のおかげでWEBの楽しさが一般的に普及してきた時代じゃな!
ミツオカミツオカ
エンターテイメント性とSEOの重要性がより増してきたのですね!

Flashの今

Flashは2020年末に完全終了するということを、開発元とAdobeは発表しました。

ただ、現在はオープンな標準技術が進化したことで、以前はFlashで実現していたような機能も標準技術で実現できるようになってきています。

そのため、Flashで作ったページはほぼ皆無で、ロストテクノロジーと化しています。

Webデザインの革命期

2000年代に入り、Webデザインは飛躍的に進化します。

コンテンツとデザインが分離できるようになったことで、何が起こったのでしょうか?

CSSによってデザインとコンテンツが分離

CSSとは、「スタイルシート」とも呼ばれるテキストをデザインし、見映えをよくするものです。

格段に文章が読みやすくなっただけでなく、「デザイン」と「コンテンツ」を分けることができるようになりました。

つまり、Webデザイナーがデザインから開発をしたり、コンテンツからデザインしたり、といったことが自由にできるようになったのです。

これによって、「データは軽く」「メンテナンスが楽」になり、ユーザーも使いやすくなりました。

アイコンにリンクが付けられるようになったのも、この頃です。

Web2.0 の登場で技術革命

Web2.0 の登場によって、Web を端末や OS、アプリケーションの制約を受けずに結びつけられるようになりました。

これにより、「YouTube」や「Facebook」「Twitter」などのサービスが世界中に広がったのです。

世界中に情報を発信できると同時に、相手からレスポンスを受け取ることが個人レベルででき、SNSが浸透していきました。

このことは、Webデザインの在り方にも大きな影響を与えています。

Webデザイン革命期から学ぶこと

多くの人々がコンテンツを検索するようになり、SEOはWebデザインを決定する重要な要素となりました。

Webデザインはコンテンツを重視し、キーワードやタグ付けといったものが、デザインされていったのです。

にゃんこ師匠にゃんこ師匠
「デザイン」と「コンテンツ」を分けたことで、一気にWEBデザインの可能性が広がったのじゃ!あと、現在でもSEOは、Webデザインをする上で中心となるものじゃな
ミツオカミツオカ
今も存在している「有名WEBサービス」もこの頃にどんどん生まれたんですね!WEBでより出来ることが多くなったおかげで、ますますWEBデザインは進化したことを学びました!

Webデザインの現在

2008年、iPhone3Gの登場でスマートフォンがWebデザインの対象になってきました。

通信速度があがったことと、端末の変化とともに「現代のトレンド」も一気に変化していきます。

スマートフォンの普及とスキューモーフィズム

スマートフォンの急増によって、Web開発も変化しました。

WebデザインをPCで見ることだけでなく、スマホで見ることも考慮しなくてはならなくなったのです。

当然ながら、ユーザーの幅も広がり、いかに関心を持たれるコンテンツを提供できるかが、Webデザインの大きな目的となってきました。

iPhone は説明書がありませんが、ユーザーにより直感的に使い方がわかるようにデザインしていたものが「スキューモーフィズム」です。

これは、「知らないものの見た目を、知っているものに変化させる」というデザインの方法で、当時は革新的でした。

やがてフラットデザインへ

スキューモーフィズムのほとんどが立体的であったのに対して、フラットデザインは平面的でシンプルなものです。

2013年に、Apple社が iOS7 で使ったことで、Webデザイン全体がフラットデザインへと移行しました。

Microsoftでも、新しいインターフェイスはフラットデザインを採用し、今や世界的なトレンドとなっています。

マテリアルデザインの登場

マテリアルデザインとは、2014年にGoogleが発表したデザイン指針です。

見た目はフラットデザインと似ているのですが、「考え方」が違っています

ユーザーが感覚的に使えるように、視覚的な工夫をすることで、リアル世界をデザインに取り入れます。

にゃんこ師匠にゃんこ師匠
これによって「ボタンの意味」や、「クリックできる・できない」の違いを、誰がみてもわかるようにしよう!というものなのじゃ
ミツオカミツオカ
多様化する「デバイスの違い」にも対応できるようにするためですね!PCだけではなく、スマホやタブレットなどで見ても、ユーザーが分かりやすく使いやすいデザインを作ることが重要視されるようになってきたのですね!

さいごに

ミツオカミツオカ
文字だけだったWebデザインが、登場してから30年でここまで進化したのですね~
にゃんこ師匠にゃんこ師匠
初期のWebとは想像もできないほど進歩したWebの世界じゃが、今でも刻々と進化しておる!時代のトレンドを読み続けることが大切なのじゃ!
ミツオカミツオカ
みなさんもWebの歴史を知ることで、次のトレンドがおのずと見えてきたのではないでしょうか?

こちらの記事もオススメ!


オススメのWebデザイン入門本

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア