創世記のWebデザインから現在まで Webデザインの歴史
2021.12.20
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向きとは言えませんでした。
にゃんこ師匠ミツオカ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デザインの現在
2008年、iPhone3Gの登場でスマートフォンがWebデザインの対象になってきました。
通信速度があがったことと、端末の変化とともに「現代のトレンド」も一気に変化していきます。
スマートフォンの普及とスキューモーフィズム
スマートフォンの急増によって、Web開発も変化しました。
WebデザインをPCで見ることだけでなく、スマホで見ることも考慮しなくてはならなくなったのです。
当然ながら、ユーザーの幅も広がり、いかに関心を持たれるコンテンツを提供できるかが、Webデザインの大きな目的となってきました。
iPhone は説明書がありませんが、ユーザーにより直感的に使い方がわかるようにデザインしていたものが「スキューモーフィズム」です。
これは、「知らないものの見た目を、知っているものに変化させる」というデザインの方法で、当時は革新的でした。
やがてフラットデザインへ
スキューモーフィズムのほとんどが立体的であったのに対して、フラットデザインは平面的でシンプルなものです。
2013年に、Apple社が iOS7 で使ったことで、Webデザイン全体がフラットデザインへと移行しました。
Microsoftでも、新しいインターフェイスはフラットデザインを採用し、今や世界的なトレンドとなっています。
マテリアルデザインの登場
マテリアルデザインとは、2014年にGoogleが発表したデザイン指針です。
見た目はフラットデザインと似ているのですが、「考え方」が違っています。
ユーザーが感覚的に使えるように、視覚的な工夫をすることで、リアル世界をデザインに取り入れます。
にゃんこ師匠ミツオカさいごに
ミツオカにゃんこ師匠ミツオカこちらの記事もオススメ！
オススメのWebデザイン入門本
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
