ゆうなんとかさんの雑記帳的な。

Twitterで踊ったり音ゲーしたりしてるあの名前がよくわからない人が書いてるらしいよ。

Webサイトデザインの歴史を振り返る

公開時点で間違えてスクショ貼ってました。ごめんなさい。今は修正してあります。
今回はひとつのWebサイトを例にとって、デザインや構造がどのように変化してきたのか追っかけようと思います。

追いかけるWebサイト

今回は、日本航空サイトを昔のものから追っかけていきます。

1996年11月

f:id:yuu_xxxx:20130110210523p:plain
インターネットアーカイブで見ることのできる一番古い日本航空のページです。
トップに大き目のCIロゴ、その下にサイト案内の画像、続けてコンテンツが表示されるシングルカラムデザインです。CSSなんてものは当然使われておらず、センタリングはcenterタグでされています。メニュー画像も1枚絵で、今はまず見かけないmapタグによってエリア分けされています。何より特徴的なのがコンテンツのリスト。なんと、ulタグではなくtableタグで組まれています。

<table border="0" width="465" cellpadding="5">
<tr valign="top">
<td width="20">
<a href="/web/19961107212001/http://www.jal.co.jp/jalnews/info.html">
<img src="/web/19961107212001im_/http://www.jal.co.jp/images/botan.gif" border="0"></a>
</td><td width="445"><a href="/web/19961107212001/http://www.jal.co.jp/jalnews/info.html">
会社概要・株主優待</a>のご案内
</td></tr>
...

↑みたいな感じ
どうやらビュレットを画像に変えるため「だけに」やっているようです。今はCSSのプロパティでやってしまうところですが、ない時代はこうするしかなかったようですね。
あとこのころからもうすでにインターネットで飛行機の予約ができたのかと思うとがんばってるなって思います。

1997年4月

f:id:yuu_xxxx:20130110225541p:plain
ここで2カラムレイアウトになります。Web2.0がはやり言葉になったころにすたれた、tableタグによるマルチカラムレイアウトです。左カラムのメニューと「RESERVATION SERVICES」のメニューはやはり1枚絵をmapたぐでエリア分けしています。1996年のスクリーンショットでも上が少し空いていますが、これはbrタグによるマージンです。予約などでJavaアプレットを使用した仕掛けがあったようですが、今となってはどのような感じだったのか知るすべはありません。1998年にはモバイルサービスが、1999年にはメールサービスが始まったようです。

2000年3月

f:id:yuu_xxxx:20130110225543p:plain
3年ほど変わり映えしなかったレイアウトがここで大きく変わります。横幅も少し大きくなり、背景画像が追加されました。なるべくスクロールしなくてもすべてのコンテンツが見えるようにするためか、中段で2カラムをそれぞれ2分割したリストになっています。もっとも大きな変化はmapタグの消失です。リストタイプのメニューに変わったのに伴い、項目ひとつひとつが個別の画像になりました。ただし、ふんだんに画像を使用しているせいか、読み込み中に時間がかかりましたし、その間がちゃがちゃとレイアウト再計算されてが変わっていきました。

2000年7月

f:id:yuu_xxxx:20130110225542p:plain
早々とレイアウトが大幅に変わります。試行錯誤の時期だったのでしょうか…内容が大幅に増え、コーポレートカラーである赤以外の色が増えたのもあって、少しごちゃごちゃした印象を受けます。
ここで初めて3カラムレイアウトとタブ型メニューが採用されます。また、今までセンタリングされていたコンテンツが初めて左詰めになりました。構成はコンテンツ全体をtableタグで囲い、中身はヘッダー、タブメニュー、メインコンテンツの3行構成、メインコンテンツはさらに3列構成で…と結構複雑です。それから、半年前に消失したmapタグがまた復活します。右カラムのJALスクエアのメニューが1枚絵をmapで分割、という感じになっています。

2001年7月

f:id:yuu_xxxx:20130110225544p:plain
日本航空50周年の記念すべきこの年、サイトがリニューアルし、ぐっと洗練されたデザインになりました。無彩色を主体にした配色にコーポレートカラーでもあるアクセントカラーの赤が映えます。
実はサイト自体の構造にも大変化が起きます。なんと、JavaScriptCSSが登場します!これにより、当時は革新的だったであろうプルダウンメニューが実装されています。しかし…どちらも使い方があれでした。
CSSは確かに使われるには使われていたのですが、個別のタグごとにstyle属性で個別指定。今までのようにタグに属性をつけてスタイリングするノリでやったのでしょうね…また、JavaScriptでメニューを開いたり閉じたりしているのですが、やり方が少々豪快でした。

<!--
function LoadMenus() {
  if (window.pd0) return;
window.pd0 = new Menu("root",170,17,"Osaka, MS UI Gothic",12,"#595959","#ffffff","#F1F1F1","#333333");
pd0.add("▼ About JAL TOP","window.open('jalnews/info.html', '_blank');");
pd0.add(" ・安全情報","window.open('safety/', '_blank');");
pd0.add(" ・運航情報","window.open('operate/', '_blank');");
pd0.add(" ・プレスリリース","window.open('http://www.news.jal.co.jp/JAL_NEWS.ns4/3f0c671aa08aadb8492564180033e126?OpenView', '_blank');");
pd0.add(" ・日本航空の主張","window.open('keynote/', '_blank');");
pd0.add(" ・会社概要・業績","window.open('jalnews/gaiyo/', '_blank');");
pd0.add(" ・株主通信","window.open('jalnews/kabu/', '_blank');");
pd0.add(" ・株主優待のご案内","window.open('jalnews/kabu/kabu.html', '_blank');");
pd0.add(" ・環境問題への取り組み","window.open('environment/', '_blank');");
pd0.add(" ・社会貢献とメセナ","window.open('society/', '_blank');");
pd0.add(" ・調達情報","window.open('procure/', '_blank');");
pd0.add(" ・採用情報","window.open('saiyo/', '_blank');");
pd0.add(" ・日航財団のご案内","window.open('http://www.jal-foundation.or.jp/', '_blank');");
pd0.add(" ・JAL50周年記念","window.open('50th/openning.html', '_blank');");
pd0.add(" ・定期航空協会のご案内","window.open('http://www.teikokyo.gr.jp/', '_blank');");
/*中略*/
} // LoadMenus()
//-->

お、おう…クラスを付け替えて見せたり隠したりするという手法はまだ確立されていなかったようです。
divタグやspanタグが見られるようになりましたが、まだテーブルレイアウトを卒業するには至っていません。mapタグも引き続き使われています。

2002年8月

f:id:yuu_xxxx:20130110225542p:plain
またサイトがリニューアルします。このとき、ついにCSSファイルが外部から読み込まれて使われます。その証拠に、style属性で直にスタイリングしているタグが減っています。右カラムにリストがありますが、まだビュレットをCSSで指定してモノではありません。ただし、class属性が使われるようになっており、少しずつ今のWebに近づいているのがわかります。ただ、fontタグで囲ったspanタグでfont-sizeがクラスセレクタのでの定義によって設定されているところがあるなど、少々不思議なところもありました。

2005年3月

f:id:yuu_xxxx:20130110225547p:plain
日本航空のCIロゴが変わってから初めてのリニューアルです。のはこの少しあとです。立体感のあるメニューバーやエレメント、トップに表示される航路検索フォームなど、だいぶ今のサイトに近くなってきました。また、コンテンツ全体を囲むtableタグがなくなり、ヘッダー、メニュー、メインコンテンツがそれぞれbodyタグ直下に置かれるようになり、テーブルレイアウトからの脱却が始まっています。ただ、やはりまだCSSのみでマルチカラムを実現する手法が確立されていないのか、メインコンテンツはテーブルレイアウトです。

2009年1月

f:id:yuu_xxxx:20130110233110p:plain
ついにメインコンテンツのマルチカラムレイアウトがCSSで実現されます。また、iOSのアプリのアイコンに見られるような光の照り具合がメニューのタブやボタンにつけられます。各タグ個別につけていたstyle属性もほとんど取り払われ、すっきりとしたHTMLになっています。

現在のサイト

f:id:yuu_xxxx:20130110225548p:plain
今から数か月ほど前にリニューアルされて現在に至ります。
コンテンツ全体が再び、今度はCSSによってセンタリングされます。さらに、航空会社らしく、雲の上から撮影した空の写真を大胆にも背景に使っています。CIロゴの赤との対比が美しいですね。それから、ここで再び2カラムレイアウトになります。おそらくタブレットPCなどから操作されることを意識してか、コンテンツにゆとりができ、エレメントも大きめになっています。JSを使ったカルーセルやミニマルなパターンなど、トレンドに沿ったデザインとなっています。

まとめというか感想

tableタグを使うことでマルチカラムにするという手法は結構最近まで残っていたんだなと思いました。私の感覚ではもう少し前に駆逐されていたと思っていたのですが…また、「Welcome to...」の文句が消えたのが今世紀に入る前くらい、推奨ブラウザの表示が消えたのはだいたい2003年くらい。エレメントの配置も、2000年ごろにごちゃごちゃしていたのがだいぶシンプルになってきているなーって感じです。あと、久々にだいぶ長い記事を描いたのでしんどくなってきました。手首がしんどい…