こんにちわ、デザイナーのナコです。
WEBデザイントレンドはめまぐるしく変わり、構築する技術も日々進化しています。 最近はフラットなデザインでスマートフォンを意識したレスポンシブサイトが多いですが、 昔はどのような感じだったのか・・・気になりますね。
今回は過去のサイトデザインとソースがまるっと見れるInternet Archive Wayback Machineを使って WEBデザインの移り変わりと構築方法の変化を見てみたいと思います。
Appleのサイトで振り返るトレンドの変化
1997年〜1998年
横幅は598px、がっちがちのテーブルコーディングです。
右カラムがframeっぽいですがTDダグの左だけ赤背景にしているだけです。
メインメニューはmapタグで作ってあります。
CSSはまだ使っていません。
画像はすべてGIFで作成されています。
1999年
横幅は600px、これもがっちがちのテーブルコーディングです。
ニュース部分はアニメーションだったのでJS？と思ってみるとGIFアニメでした。
引き続きメインメニューはmapタグで作ってあります。
CSSもまだ使っていません。
画像にJPGが！
2000年〜2006年
横幅はメインメニューは100%指定になっていて環境によって伸び縮みする様に進化。
メインエリアは600pxになっています。
メニューのタブが画像ボタンに変わっていいます。
CSSも引き続き使っていません。
微妙にメインエリアの横幅が伸びたりマイナーチェンジしながらこのデザインは2007年まで続きます。
2007年〜2014年
劇的に変わっている時期です。
メインエリアは980pxになっています。
テーブルタグがほぼ排除されdivタグに置き換わっています。
またCSSも使われ初めました！
JSもリンクファイルにあるので何か動きがあったのかもしれません。
微妙にメニューの配色が変わったり、マイナーチェンジしながらこのデザインは2014年まで続きます。
2014年〜2015年
メニューはそのままでメインエリアがフラットになっています！
横幅は1440〜980pxまでの可変対応に。
スライダーでメインイメージがくるくるする様になっています。
sectionやarticleが登場してHTML5の臭がします。
2015年〜
2014年の流れからヘッダーなどもフラットに変化！
HTML上に画像パスがほぼ無くなりCSSやJSで管理されています。
レスポンシブ対応もされどのデバイスでも見れるようになっています。
ヘッダーのアルファーが100％になったり、フッターリンクが増えたりマイナーチェンジはありますが現行サイトも同じ形です。
最後に
いやぁ、結構変わっていますね！
最初は情報発信のためだけのサイトだったものが、訪れる人の環境にあわせて、またAppleのデザインに対するこだわりを表現するようになって、変化していっているのがよく解ります。 2000年頃は見た目の変化、2007年は構造の変化が大きいです。 2015年からのレスポンシブ対応もスマートフォンで簡潔する人の方が増えている為大切な部分です。
これ、今回はAppleでしたが、もっと他のサイトも見比べるのもトレンドの移り変わりをチェックするなら楽しそうだなぁ。 マイナーサイトはログが残ってないので自分の黒歴史サイトのキリ番絵を巡る！なんてのは出来無さそうなのが残念・・。
今回使ったツール、 Internet Archive Wayback Machineの紹介
使い方は簡単！サイトにアクセスして、URL入力フォームに見たいサイトのURLを入れるだけ！
ソースまで保存していてくれるのでサイトの過去ログをニヤニヤ眺める事ができます。
