黎明時代のWebサイトの表現と移り変わりについて

Advent Calendar Web表現研究ゼミ 2021 20日目の記事になります。

お題として「Webサイト表現に関することで、幅広い観点で、所感や考察を記載」というところから、「黎明時代のWebサイトの表現と移り変わり」をテーマに書きます。

はじめに

私がWebサイトの制作を学んだのは1998年頃でした。
検索エンジンのGoogleができた頃、まだまだ検索はYahooのカテゴリ検索が主流で、Webサイトを探すのも苦労する時代です。

通信回線も現在よりもかなり遅く、できることが限られる時代で、少しずつ世に浸透し始める直前でした。何かを調べるにしてもネットよりも、書籍を探して、書店や図書館に行っていたことを考えると便利な時代になったと感じます。

その頃から、Webサイトの表現がどのように変わっていったのかを私なりの目線で書いていければと思います。

インターネットアーカイブについて

 https://archive.org

過去のWebサイトの表現を確認する上で、インターネットアーカイブを利用していきます。
こちらのサービスはウェイバックマシン (Wayback Machine)とあるように、Webサイトのアドレスを入力することで、そのWebサイトの過去のWebアーカイブ(Webページのコピー)を閲覧できます。
さながら、Webサイトを過去を見に行けるタイムマシーンのような感じです。

1996年頃

私が講師をしているデジタルハリウッド大学のWebサイトを例にしようかとも思いましたが大学は2005年開校ですので、この頃はWebサイトがありません。
大学の運営会社であるデジタルハリウッド株式会社の初期の頃のサイトを参考にあげたいと思います。

1996年頃のwww.dhw.co.jpのサイト

1996年頃のデジタルハリウッド株式会社のWebサイトのトップページです。

この時代、デジタルハリウッドに限らず、多くのページは、横幅が狭いのが特徴なのかもしれません。
閲覧者はパソコンで見ることを想定され、その当時のパソコンのモニタの解像度で表示できるサイズを意識されています。

回線速度も速くないため、表示するのに時間がかかることを考慮する必要がある時代で主にはテキストが主体になります。
画像も表示はできますが、画像の画角や容量、使用枚数を抑えて作成されています。

この頃の表現として、トップページが「扉」ページとなり、詳細は2ページ目以降の構成をするWebサイトが普通だったように思います。
動きをつける表現としても、Gifアニメーションや、現在では廃止されているHTMLのマーキー要素のようなものしか使えません。

現在のWebサイト制作を勉強している人には意外に思うかもしれませんが、この頃は、CSSが使えるようになっていたものの、ブラウザ毎に使えるものに差があり、多くは活用しにくく、現在では推奨されないHTMLの要素でのレイアウトを行っていました。

2000年頃

2000年頃のwww.dhw.co.jp/school/のサイト

この頃のサイトは少し横幅が広くなります。上記例では640ピクセルの幅になります。
まだまだ、閲覧者のモニタの解像度は今と比べると狭いですね。ただ、当時のモニタでは閲覧しやすいサイズだったといえると思います。

表現に目を向けると、容量は抑えているとは思いますが、画像の使用が多くなります。タイトルやメニューのテキストの多くが画像です。

今でも、画像でタイトルを作ることはありますが、スマートフォンの高解像度化が進んでいる昨今では、画像の文字が滲んで悪目立ちすることもあります。そういったサイトが私は古臭く感じてしまうのは、この時代の常識がまだ残っているWebサイトがそう思わせるのかもしれません。

Flashが使われる時代

2001年頃のwww.dhw.co.jpのトップページ

上記のスクリーンショットは、インターネットアーカイブに保持ができていないものですので、当時壊れたWebサイトを表示してわけではありません。

この頃、Webサイトに動きを与える表現として、Flashという技術が台頭します。
ブラウザの「プラグイン」という拡張プログラムをユーザーにダウンロードして初めて使えるもので、多くの「プラグイン」は一般的ではなかったのですが、ブラウザの普及のタイミングで多くプリインストールされたFlashはWebサイトに多く使用されるようになりました。

Flashコンテンツは、Macromedia社のFlash(現在のAdobe animate)というソフトウェアを使用して作成されていました。
私も多く仕事で関わり、一種Webサイト制作業界での専門的な仕事にも一時期なりました。

ダイナミックなアニメーションや、ActionScriptというスクリプトを使用して豊かな表現ができました。
また、制作ソフトウェアは導入しやすく、また簡易的なバナーの作成から、高度な表現もできることもあり、普及しました。

スマートフォンの台頭や、色々な情勢によって2010年頃くらいから、下火になり、2020年一杯でブラウザでの閲覧はできなくなりました。大好きな表現手法であり、色々な可能性を持っていた技術(文化でもあった)でしたので非常に残念です。(なくなった理由や有用な理由を書くととめどなく書けて
やめます)

訴求力の強いサイトから情報を伝えるサイトへ

上記のペースで書いていくと終わらない予感がしてきましたので、時代の移り変わりと表現のポイントを自分なりにまとめます。

2000年代前半は、検索のアルゴリズムからか、検索の効果を上げるのは、多く検索されていることや、バックリンクされていることが重要だったように思います。
そのため、サイトを育てるための広告が多く打たれるようになり、印象を強く与えるような訴求力の強いサイトが多く求められていたように感じました。当時はそういったお仕事を多くもらったように思います。
そういったところからFlashやJavaScriptを使った動きのあるサイトが増えた時代と感じます。

2004年頃のwww.dhw.co.jp/のサイト

2000年代中盤から、Webサイト数の増加、ECサイトの台頭などもあり、検索エンジンへの最適化が求められていきます。
情報はセマンティックであるように求められる動きも増えていきます。
ユーザーの閲覧するパソコンモニタサイズも大きくなり、回線速度も上がっていきます。少しずつですが、大きなビジュアルの画像が使われる表現が増えていきます。

2008年頃のwww.dhw.co.jpのサイト

2000年代後半、中盤頃からCSSが標準的に使われるようになり、Webサイトのデザイン性がより上がっていきます。
情報を伝える上でのテキストが読みやすくなっていきます。

2011年頃のwww.dhw.co.jpのサイト

2010年代前半、回線速度の向上もあり、大きいビジュアルを大胆に使われるようになります。この辺りから、現在に近い形を感じますね。
(この頃のデザインのまま止まっているサイトもそんなに珍しくないとも取れるかもしれません)

2010年代は、スマートフォンの台頭による、複数デバイス対応が求められていきます。
また、回線速度の向上により、表現としての動画もWebサイトに少しずつ使われていくようになります。

こうして、振り返って、現在のWebサイトを閲覧すると、できなかったことができる幅が増えてきているのがわかります。また、Webサイトのデザイン性や体験に目を向けるような文化が育っているように個人的には思います。

最後は駆け足的記載してしまい、最近のWeb表現については細かく書けませんでしたが、また機会を作って感じるところを書ければと思います。
(拙い文章をここまで読んでいただきありがとうございます。)

この記事が気に入ったらサポートをしてみませんか?