これでわかる！Webサイトの歴史～黎明期から現在まで～後編 | 名古屋のホームページ制作ならＷＷＧ

BLOG
ブログ

公開日:2020.6.4

これでわかる！Webサイトの歴史　～黎明期から現在まで～　後編

良かったらハートを押してね！

インターネット

ホームページ制作

前回、これでわかる！Webサイトの歴史　～黎明期から現在まで～前編では、 Webサイト（＝以下、ホームページと記載）の誕生からそのデザインが見た目重視の３Dやアニメーションを多用したデザインへと変わっていった1990年代後半までの状況をご紹介しました。

さて、そのホームページ全体に対しての考え方、価値観は2000年代に入り、さらに目まぐるしく変化しました。

今回は2000年代初期から2000年代後期、さらには現在に至るまでのホームページの歴史をご紹介します。前回の記事と合わせて参考になれば幸いです。

2000年代初期　CSSの普及とユーザビリティ優先のデザインへ変化
 ①CSSの普及
 ②ユーザービリティ優先のデザイン
2000年代中期　Webに対する考え方の変化
 ①Web2.0という概念
 ②インタラクションデザイン
 ③SEO対策もコンテンツ重視へ変化
2000代後期～現在　3つの変化とWeb活用への期待
 ①HTML5への改定
 ②レスポンシブデザイン
 ③5Gの実用化とWeb活用への期待
まとめ

1.2000年代初期　CSSの普及とユーザビリティ優先のデザインへ変化

①CSSの普及

もともとCSSは1994年に提唱された概念でしたが、それを積極的に採用するようになったのは2000年代初期～中期でした。

CSSを採用することで、レイアウト関係のコードが外部ファイルとして分離し、サイト全体のレイアウトをCSSファイルで一括して管理できるようになりました。

その恩恵として、本来のタグの要素とは無関係の装飾情報などが混在していたHTMLコードを非常にシンプルにすることができ、メンテナンス性も非常に向上しました。

②ユーザービリティ優先のデザイン

これでわかる！Webサイトの歴史　～黎明期から現在まで～　前編でもご紹介した通り、1990年代後期は派手な3Dやカラーの使用が好まれていました。

しかし、2000年代初期では、コンテンツをどのように配置したらユーザーが快適にページを閲覧することができるだろうかというユーザービリティ（ユーザーの利便性）が非常に重視されるようになりました。

2.2000年代中期　Webに対する考え方の変化

①Web2.0という概念

Web2.0は2005年に発祥した、新しいインターネットの利用法を意味する概念です。

従来は情報の送り手と受け手が固定されていたのに対し、送り手と受け手が流動的に変化し、誰もがインターネットを通して情報を発信できるように変化したことを表します。

例として、ソーシャルネットワーキングサービス、ウィキ（Wikipediaなどに代表される、不特定多数のユーザーが共同してコンテンツを編集するサイト）、ブログなど、今では当たり前になった情報の「送り手」、「受け手」を明確に区別しないタイプのサービスなどが挙げられます。

②インタラクションデザイン

Web2.0の流行に伴い、インタラクションデザインが重視されるようになりました。

もともとインタラクションとは日本語で「相互作用」を意味し、ホームページデザインにおいては「ユーザーが特定の操作を行ったときにシステム側でその操作に応じた適切な反応を返すこと」を意味します。

インタラクションデザインの例として、Twitterの「いいね」と呼ばれているハートのアイコンを押すと、花火が四方に開くようなアニメーションが表示され、ピンクのハートアイコンに変わるという演出が挙げられます。

ユーザーがどうしたら「直観的にこれがいいなと思った時に使う機能だとわかるか」ということを考えハートボタンのデザインにし、「そのボタンを押すというアクションに対してアニメーションを施すことでユーザーが楽しさを感じるように工夫されているという点」からインタラクションデザインをよく考慮した設計になっていると言えそうです。

Twitterの例のように、ホームページデザインに留まらずこのインタラクションデザインは、デザイン構成自体の重要な考え方として浸透していきました。

③SEO対策もコンテンツ重視へ変化

ユーザビリティやインタラクションを重要視する動きは、検索エンジンにおいて、ウェブサイトを上位に表示するようサイト構成を調整する、いわゆるSEO（検索エンジン最適化）に対しても大きく影響を与えました。

ユーザーのページ閲覧のしやすさを考えることは、SEO対策についても有力だと考えられ、さらにそのSEOの要となるのはサイト内のコンテンツであるという考え方が広まりました。

その結果、ホームページのデザインもユーザー重視のSEO対策を意識したコンテンツを大切にする考えへシフトし、製品やサービスを売り込むようなデザインは影を潜めていきました。

3.2000代後期～現在　3つの変化とWeb活用への期待

2000年代後期から現在にかけてのWebの変化として、大きな3つの要素が挙げられます。

①HTML5への改定

１つ目はHTML5への改定です。

「CSSの普及」でも一部ご紹介しましたが、ホームページのマークアップの分野では、2000年代に入りCSSが積極的に利用されるようになり、それに伴い「HTMLは本来のタグの役割を遵守しマークアップすべき」という考えが広まりました。

それを受け、当時使用されていたHTML4のタグだけではそのようなマークアップは困難であると考えられ、2000年代後半から新たなタグを含むHTML5へ仕様変更が進みました。

それにより、動画や音声、さらにはグラフィックの描画、位置情報の取得、フォーム周辺の機能の強化など、より機能性に優れたサイトをHTMLでマークアップできるようになりました。

②レスポンシブデザイン

２つ目はスマートフォンの普及です。

2007年、Apple社によりiPhoneが発表され、従来の携帯電話とは大きく異なったタッチパネルを使った非常に革新的な操作性と、外観の美しさに注目が集まりました。

その後GoogleがAndroid OSを発表したことにより、各メーカーの携帯電話は今で言うところのガラケーからスマートフォンへ次々と変化を遂げていきました。

さらにスマートフォンやタブレットからホームページを閲覧する割合が、PCからホームページを閲覧する割合をも凌ぐように急速に変化しました。

そして、スマホやタブレットなどを使ったユーザーに適したデザインに、ページを自動で切り替える仕組みをもった「レスポンシブデザイン」が重要視されるように変化しました。

③5Gの実用化とWeb活用への期待

最後は5Gの実用化です。

上記のような、マークアップ面での変化、デザイン面での変化など多方面での変化を経て、現在ホームページ制作のトピックとして非常に注目が高まっているのが5Gの実用化です。

5Gは4Gとどう違う？そのメリットとデメリットでも一部ご紹介しましたが、5Gが実用化されることで、画像を最大解像度で用いたり、動画をメインのコンテンツとしてホームページを構成したりと、ホームページのコンテンツについてより大きなスケールでの制作が可能になると考えられそうです。

また、デザイン面でもWebフォント（コンテンツ側から提供されるフォントデータに従い、Webブラウザなどのクライアントが文字表示を行うフォント）の使用、特に日本語Webフォントを使っても5G環境下ではデータ転送速度が速いため、ページの表示速度が遅くならないなど、大きな恩恵を受ける事ができると考えられそうです。

4.まとめ

今回は2000年代初期～現代ついてWeb全体の変化を詳しく調べてみました。

まとめると、派手さを一つのトレンドとした90年代に比べ、2000年代ではユーザビリティ、特にスマホやタブレットなどのモバイル端末での利用のしやすさに注目が集まったと言えそうです。

そして、現在では通信インフラとしての大きな変化である5Gの実用化に伴うARやVR技術の進歩、それを導入したホームページ、Webサービスの変化が期待されています。一体どんな革新的なサービスやデザインの変化が起こるのか、今から非常に楽しみですね！

・これでわかる！Webサイトの歴史　～黎明期から現在まで～　前編

・2020年のWebデザインのトレンド傾向を予測

・ARとは？　～ARで広がる世界～

・VRとは？　～さまざまな分野でのVR活用～

ライター：井上

＜ホームページ制作だけでなく、＋αでＷＷＧがお手伝い＞
ＷＷＧでは、今回ご紹介したWebトレンドの変化に伴うトレンドサポートも可能です。また、5Gの実用化に伴うAR、VR技術についてさまざまなWeb活用もご提案も可能です。
些細な事からでも大丈夫です。下記へお気軽にご連絡ください。

愛知県内から名古屋を中心にホームページ制作を行っている会社
株式会社WWG（ダブルダブルジー）
愛知県名古屋市中村区名駅5-16-17　花車ビル南館5F
TEL： 052-485-6846
※ ホームページ制作や活用サポートのお問い合わせはコチラから

良かったらハートを押してね！

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT

オンラインでのお打ち合わせも可能

ホームページを作りたい	ホームページを作った後	こんなことも
新しく作りたい	更新代行してほしい	写真撮影をしてほしい	多言語対応したい
スマホ対応したい	保守管理してほしい	動画をつくりたい	ライティングをしてほしい
リニューアルしたい	SEO対策をしたい	印刷物をつくりたい	イラストを描いてほしい
プチリニューアルしたい	WEB広告を出したい	ロゴをつくりたい	自社で簡単に更新したい
採用に特化したい			HP制作・運営サポートサービス
全部任せたい			採用特設HP「ウェブサイ」