• トップ
  • ブログ一覧
  • 創世記のWebデザインから現在まで Webデザインの歴史
  • 創世記のWebデザインから現在まで Webデザインの歴史

    メディアチームメディアチーム
    2020.06.02

    ITエンタメ

    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」によって、世界中で誰もが使えるものになっていったのです。

    featureImg2020.03.31WEBはWWW(World Wide Web)の発明から始まった!WEBの歴史はWWW(World Wide Web)の発明からにゃんこ師匠いや~、今日も元気にネットの波に乗ろうかの~...

    featureImg2019.06.05Webの生みの親「ティム・バーナーズ=リー博士」はセンス抜群の太っ腹おじさん!Webの創始者は一体誰?ミツオカおお!このCM!「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の歴史を知ることで、次のトレンドがおのずと見えてきたのではないでしょうか?

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

    featureImg2020.07.27IT・コンピューターの歴史特集IT・コンピューターの歴史をまとめていきたいと思います!弊社ブログにある記事のみで構成しているため、まだ「未完成状態」...
    featureImg2020.07.27IT偉人の誕生日特集現在のITがあるのは、「IT偉人」のおかげ!そこで今回は、IT偉人の誕生日をまとめていくことで、時代の流れを追えるよう...

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

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

     

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    メディアチーム
    メディアチーム
    Show more...

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background