こんなに変わった!平成のWebデザイン

HTMLの概念が初めて提案されたのが1989年(平成元年)。世界初のWebサイトが誕生したのが1991年(平成3年)。平成最後の年越しを前に、平成の時代とともに目まぐるしく進化を遂げていったWebデザインの変遷を振り返ってみたいと思います!

インターネット年表

インターネットを取り巻く歴史を、ざっくりまとめました。Webサイト制作に大きく影響を与えたであろう出来事を中心にピックアップしています。新しいデバイスの普及や新サービスの台頭など、ここ30年で劇的な変化を遂げていますね!

  • 1989年(平成元年):HTMLの概念が初めて提案される
  • 1990年(平成2年):World Wide Web 誕生
  • 1991 年(平成3年):世界初のWebサイト誕生
  • 1995年(平成7年): Windows 95発売
  • 1996年(平成8年):Yahoo!がYahoo! JAPANサービスを開始
  • 2000年(平成12年):Googleが日本語版サービスを開始
  • 2007年(平成19年):初代iPhone発売
  • 2011年(平成23年):LINEサービス開始
  • 2015年(平成27年):Apple Watch発売
  • 2016年(平成28年):VR元年
  • 2017年(平成29年):スマートスピーカーの本格普及、Amazon Echo・Google Homeが大きな話題に
  • 2018年(平成30年):電子決済が本格普及、paypayが大きな話題に

かつてのWebサイト(ホームページ)はパソコンのブラウザで見るものでしたが、今ではスマートフォンやタブレットも広く普及し、Webサイトに求められる役割やデザインも大きく変化しました。
また近年では、SNS、IoT(スマートスピーカー、スマートテレビなど)、電子決済など、IT・Webのテクノロジーが様々な形で生活に溶け込み、大きく影響を与える存在となっています。
本記事では特に90年代のWebデザインに注目して、その変化を考察したいと思います!

Webデザイン今昔

1.アクセスカウンター

かつて個人サイトが隆盛を極めた90年代、アクセスカウンターを設置したサイトを多く見かけました。
アクセスカウンターを設置すると、そのサイトへのアクセス数がカウントされていきます。キリ番(=キリの良いアクセスカウンターの数字)を踏んだら管理人に報告する、というサイトもありました。
一般家庭にインターネットが普及し始めた当時、まだパソコンは一家に一台の時代でした。おまけにインターネットの通信速度も今とは比べ物にならないほど遅く、通信費用も高額でした。
つまり、サイトにアクセスすることそのもののハードルが現在よりも高く、特別なことだったのです。
そういった背景もあり、アクセス数というのは(今でも重要ですが、おそらく今以上に)大変重要な数字でした。
そして当時はGoogle Analyticsも無かったので、アクセス数を確認したいと思ったときに手軽に取り入れられたのがアクセスカウンターでした。

一度自分のサイトに設置してみたい、そう思った方はこちらのサイトを利用してみてはいかがでしょうか?

【無料アクセスカウンター】
http://www.rays-counter.com/

最近の傾向

アクセスカウンターは最近ではめっきり見かけることも少なくなりましたが、かわりにSNSのシェアボタンがついたサイトをよく見かけます。
「ツイート」「いいね!」などのボタンです。

インターネット回線も高速・定額になり、サイトへアクセスすることそのもののハードルが下がった現在では、サイトへのアクセス数からもう一歩踏み込んで、訪問者のリアクションを計測することに重きを置いているからではないかな、と思います。

 

2.MIDI(音楽)が流れる

アクセスすると自動で音楽が流れ始めるサイトも多く見かけました。
キャンペーン系のサイトなど、今でも音楽が流れるサイトもありますが、かなり少なくなった印象です。
その多くがMIDI形式でしたが、その理由としては圧倒的なファイルサイズの小ささが挙げられます。
「1.アクセスカウンター」の項でも触れていますが当時のインターネット環境を考えると、ファイルサイズは非常にクリティカルで重要なポイントのひとつでした。

参考にさせていただいたサイト
【nerve (雑音空間)】
http://k2works.com/nerve/l0_1.html

こちらのサイトではクラシックを中心としたMIDIを配布されています
【MIDI クラシック音楽データ集 by Windy】
http://windy.vis.ne.jp/art/

最近の傾向

パソコンスペックや通信速度の飛躍的な向上もあいまって、動画を埋め込んでいるサイトも多く見かけるようになりました。
メインビジュアルが動画になっていたり、YouTubeの動画が再生できるようになっていたりします。
TikTokやInstagramのストーリーズ(Stories)のようにコミュニケーション手段のひとつとして動画を共有することも、スタンダードになりました。

メインビジュアルが動画になっているサイト
【ネットで年賀状】
https://net-nengajo.jp/

 

3.聖杯レイアウト

聖杯レイアウトとは、ヘッダー・フッター・両サイドのカラム・メインカラムの5つの大きなパーツから成り立つレイアウトのことです。

情報量の多いサイトなどでは今でも見かけるレイアウトですが、実装方法として、かつてはインラインフレームの利用も目立ちました。
しかしSEOやユーザビリティの観点から、近年ではインラインフレームを利用したレイアウトはめっきり減りました。

こちらのサイトの解説がわかりやすかったです
【HTMLタグボード】
http://www.dspt.net/seo/002/index.html

最近の傾向

3カラムから2カラムになり、最近では1カラムが主流となっています。そこにはスマートフォンの登場も大きく影響しています。
画面幅の小さいスマートフォンで複数カラムのサイトを表示すると、見づらくなってしまいます。
そこでパソコンで表示されるサイトとスマートフォンで表示されるサイトを分けて制作する(それぞれ別のファイルを用意する)手法や、表示デバイスの画面幅にあわせてレイアウトを可変させる手法(レスポンシブ)がとられてきました。
実装や運用の工数から、1つのソースファイルで完結するレスポンシブで対応するケースが多いようです。
また、個人がインターネットを利用するデバイスとしてスマートフォンがPCを上回ったこともあり、「スマホファースト」が叫ばれて久しくなりました。

参考:個人のネット利用、スマホがPCを上回る 総務省が調査
【ITmedia NEWS 】
http://www.itmedia.co.jp/news/articles/1805/25/news124.html

 

4.電光掲示板のように流れるテキスト

流れるテキスト、点滅するテキストなど、テキストに動きをつけるのが流行っていましたね。HTMLで表現できる様々な演出がこらされていました。
CSSが誕生したのは1996年(平成8年)ですが、当初はブラウザもサポートしておらず、まだまだマイナーな存在でした。
その後のCSSの発展とともに、HTMLはWebサイトの構造や骨組み部分を担い、CSSはWebサイトの装飾やレイアウトを指定する、という今のスタイルが定着しました。さらにJavaScriptの登場によって、Web表現はよりリッチなものとなっていきます。

参考にさせていただいたサイト
【Y氏は暇人】
http://y-ta.net/homepage90/
※記事内に記載のサンプルサイト:http://y-ta.net/90homepage/

最近の傾向

なつかしいデザインはかえって新鮮に見えたり、装いを変えてリバイバルしていたりします。電光掲示板のように流れるテキストもその一例です。
こちらのサイトはテキストのジャンプ率を極端に大きくし、大胆に配置しています。
モノトーンをベースにした色合いで、落ち着いたオシャレさと力強さを兼ね備えたデザインになっています。

【Yokohama DeNA Running Club】
https://running.dena.com/

 

まとめ

平成から次の時代にうつりかわり、今後もWebをふくめたデジタル技術はますます進化していくことと思います。
次はどんな概念や技術が誕生するのか、とても楽しみです!

また、今回の記事を書くにあたり、下記のサイトも参考にさせていただきました。
ぜひこちらもご覧いただければと思います。

https://www.nic.ad.jp/timeline/
https://life-alright.com/entry/homepage_kurorekishi
https://miz2403.com/nineties/
https://www.daj.jp/20th/history/

Webデザインの学習をしている方に向けて無料のデザイン課題をKROWLサイトで公開中!
AdobeのIllustratorやPhotoshop、XDの操作を学びながら難易度別に用意してあるデザイン課題に取り組もう!

関連記事