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デザイン入門講座

 

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事