Froont（サンフランシスコに拠点を置く、Webデザイナー向けツールを制作する会社）は、9つのGIF形式のアニメーションで、Webデザインがこの25年間で歩んできた発展の歴史を表現しました。なぜCSSがそれほど重要なのか、なぜFlashが徐々に淘汰されていったのかを知りたいなら、これらのアニメーション画像を眺めてみれば、その一端を垣間見ることができるかもしれません。

Webデザインのモノクロ時代、およそ1989年。Lynxや、その他のUnixベースのWebブラウザを思い浮かべてください。これらのブラウザは、ネットワークを通じてこの端末から別の端末へと、一語ずつ文字を表示するだけでした。グラフィカルユーザーインターフェースはなく、あるのは文字の列と点滅するカーソルだけでした。

近代化の始まり、およそ1995年。Mosaicなどの最初のブラウザは、デザイナーがウェブサイト上に画像を表示することを可能にしました。しかし、その唯一の方法は、これらのWeb要素を不格好なテーブルレイアウトに配置することでした。正確な配置が非常に難しかったため、デザイナーは、コンテンツを正しく表示するために、テーブルの中にテーブルを入れ、さらにその中にテーブルを入れるといったコードを、どう書けばよいかを明確に見極める必要がありました。

幸いなことに、JavaScriptが登場し、デザイナーに大きな利便性をもたらしました。Flashは、動的なウェブサイトのデザインをより簡便にしてくれました。例えば、ポップアップウィンドウや、ページ上のコンテンツの順序を動的に変更するようなものです。しかし、ネイティブのHTMLと比較すると、JavaScriptは動作が遅いものでした。

Flashもかつて一世を風靡しましたが、現在ではほぼHTML5に駆逐されてしまいました。しかし1996年当時、FlashはWebデザインの新たな高みを象徴していました。デザイナーが自分たちのやり方でページを生き生きと動かすことを可能にしたからです。これはまた、FroontのGIFで見られるような、ページから飛び出すアニメーションやオープニングアニメーションなどの黄金時代でもありました。しかし、Flashはコンピュータの処理リソースを大量に消費するため、特にノートパソコンやスマートフォンといったモバイルデバイスにとっては、非常に不親切な技術となってしまいました。

CSSは1998年に初めてリリースされ、初期のWebデザインの問題の多くを解決しました。ウェブサイトの見た目をWebコンテンツから分離したことで、デザイナーはついに、自分のアイデアに従って、あるいはクライアントのためにWebページを制作・カスタマイズできるようになりました。最初のCSSバージョンはそれほど柔軟なものではありませんでしたが、現在のCSSは、デザイナーが習得すべき最も重要なWebテクノロジーとなっています。

2007年のiPhoneの登場は、デザイナーにまったく新しい難題をもたらしました。それは、スマートフォンというさらに小さな画面上で、どのようにWebページをデザインするかという問題です。当初、デザイナーが思い付いたのは、デバイスの画面サイズに応じてWebページを複数の列に分割できるグリッドシステムを使用することでした。

2010年、モバイルデバイスでWebページを表示する方法という問題に対して、Ethan Marcotteは別の解決策を考え出しました。それがレスポンシブデザインです。

レスポンシブデザインの後には、華やかな効果をそぎ落とし、コンテンツを重視するフラットデザインも登場しました。このデザインは視覚的な要素を簡素化し、美しいタイポグラフィを際立たせることでWeb体験を生み出し、どのようなデバイスでも素晴らしい表示効果を発揮します。

では、未来はどうなるのでしょうか？Froontは、より良いWebデザインはまだ研究開発中であると述べています。将来的には、デザイナーはブラウザの互換性の問題を心配する必要がなくなり、あらゆるデバイスに対応するさまざまなツールも手軽に手に入るようになるでしょう。将来のテクノロジーはもはやデザインの制限にはならず、デザイナーはトラブルシューティングに時間を浪費する代わりに、UIやUXの問題の解決に集中できるようになります。

原文出处：The History Of Web Design Explained In 9 GIFs
译文出处：http://www.codeceo.com/article/9-gif-web-design-history.html
翻译作者：码农网– 小峰