【90年代】時代を先取りしたWebデザインの概念3選

かつての時代からは想像もできないほど、現代のWebサイトは技術的にも、デザイン的にも進化しています。

しかし、90年代のWebサイトを振り返ると、当時も時代を先取りしたようなWebデザインがあることに気付かされます。こうしたWebサイトがなければ、現代のデザインはうまれていなかったかもしれません。

そこで今回は、90年代に時代を先取りしていたWebデザインの概念を紹介します。

1. HTMLフレーム

W3Cは、HTMLフレームについて以下のように説明しています。

「HTMLフレームを使用すると、ドキュメントを複数のビュー（独立したウィンドウやサブウィンドウ）で表示できます。複数のビューは、デザイナーが特定の情報を表示したまま他のビューをスクロールさせたり、置き換えたりする方法を提供しています」

フレームを使うことで複数のHTMLドキュメントを同時に表示できるようになり、ユニークな作品が生まれました。こうした作品のなかには、実用的なものもあります。

その代表例がナビゲーションです。たとえば、画面横のフレーム内に縦長のナビゲーションUIを配置し、アイテムをクリックすると中央のフレームにコンテンツが読み込まれる、という仕組みもこれにあたります。

また、ユーザーがメインコンテンツをスクロールしているあいだ、ヘッダーが固定表示される仕組みも便利ですよね。ページビューごとに画像を読み込むのではなく、静的フレームで1セッションにつき1回に制限することで、パフォーマンスを向上させられる可能性もありました。キャッシュが一般的になる前の時代には、革新的だったのです。

こうした取り組みは、ユーザーがWebサイトをより快適に使えるようにするためのものでした。

振り返って考えると、フレームは、スクロールしても一定の位置に要素がとどまる固定表示のベースになっています。かつてはHTMLでしたが、現代ではCSSを使って固定表示をするのが一般的です。

▲ナビゲーションフレームを使った、1997年のディズニーのWebサイト（出典：Web Design Museum）

2. Flashアニメーション

Adobe Flashは、初期のWeb業界において、もっとも賛否の分かれた技術のひとつでした。デザイナーがさまざまなメディアを使ったコンテンツを制作できるいっぽう、欠点も指摘されていたのです。

たとえば、Webサイト全体をFlashで構築した場合、アクセシビリティの問題が多々発生しました。たとえば、インターネット接続が遅いユーザーの読み込み時間が遅くなったり、Webブラウザがクラッシュするなどです。

また、モバイルデバイスとの互換性にも問題がありました。初期のiOSデバイスはFlashをサポートしておらず、2020年末にFlashのサポートは打ち切られてしまったのです。

しかし、Flashがアニメーションやインタラクティブなメディアに対するユーザーの欲求を満たしたことも否定できません。技術的に発展途上な面もありましたが、FlashのおかげでCSSアニメーション等が登場したといっても過言ではないでしょう。Flashは、未来のWebサイトの可能性を示してくれたのです。

▲Flashを使用した作品を集めているWebサイト（出典：Web Design Museum）

3. Java & JavaScript

Java

Javaと、フレームワークやライブラリを使わない、いわゆる「Vanilla JS」は、黎明期のWebサイトに革新的な機能をもたらしました。

Javaは、複数のデバイスで動作するように設計されています。データベースやコンテンツ管理システム（CMS）がWebサイトの一般的な構成要素になる以前から、アプリケーションのような機能を提供してきました。

たとえば、スポーツの実況中継やニュースの速報を思い浮かべてみましょう。Javaを使えば、こうした情報を必要に応じて自動的に更新できます。ブラウザの更新ボタンを押さなくても、最新の情報を閲覧できるのです。

当時のJavaは読み込みが非常に遅かったものの、パフォーマンスのオーバーヘッドなしに同様のタスクを実行できる、AJAXのような技術への道を開く存在でした。

JavaもVanilla JSも、動的なWebの可能性をユーザーに示し、そしていまも現役で活躍しています。

JavaScript

いっぽう、1995年に登場したJavaScriptは、フォームの検証やアラートの表示など、基本的なタスクに対応していました。いまでは広く活用されている、ホバーエフェクトの土台になっているのが、このJavaScriptです。

画像にカーソルをあわせると別の画像に置き換えることができる機能は、当時画像ベースのナビゲーションUIで活用されていました。WYSIWYGエディターのDreamweaverにも、このスクリプトがあらかじめ入っていました。

やがてCSS3が同様の視覚効果を提供するようになり、いまではjQueryからReactまで、爆発的に普及したJavaScriptフレームワークがWeb開発の定番です。

▲JavaScript 1.0は、Netscapeとサン・マイクロシステムズの共同プロジェクトだった（出典：Web Design Museum）

おわりに

静的なメディアとしてスタートしたWebは、よりよいUXを目指すWebデザイナーたちによって発展し、進化してきました。

かつてうまれた技術やアイデアは、現代の最新技術の「種」のような存在です。技術に改良や工夫を重ねることで、いまも次世代の技術がうみだされています。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：少年B　提供：speckyboy）