Cross Talk

「SiR」の変遷を回顧する

本日で、当サイトは公開開始以来10年の区切りの日を迎えることができました。

思い返してみれば、色々とありました。褒められて有頂天になったり、叩かれて凹んだり。途中、休止なんかもありましたけど、よくもまぁ続けてきたものです。これも、読者の皆様あってのこと。今後とも、ご愛顧下されば幸いです。

そんな訳で、10周年記念企画、この10年のデザインの変遷を回顧する、スタートです!

テーブルレイアウトの時代

現在、私のHDDの中に収まっている、一番古いリソースのスクリーンショット。この前に、動作確認用の暫定バージョンを作ってはいたのですが、本格的なコンテンツを盛り込んのは、これが初めてです。1999年の1月18日に公開。3月までこのデザインで運営されました。

「SiR」最初期のエントランスページ(スクリーンショット)

うわ〜、見返すのが恥ずかしい!

もちろん、この頃はまだCSSって何それ? という時代でありましたので、まだ何の疑問も持たずにテーブルレイアウトで作っていた頃です。

背景の六角形のタイルパターンは、モロにエヴァの影響(発令所のスクリーンの警報)であります。ちなみに、透過GIFでして、コンテンツのセクションに応じて背景色だけ切り替えて、画像そのものは使いまわすようになっていました。

まだこの頃はISDNが高速回線(!)だった頃ですし、定額接続なんてのも夢のような話で(テレホタイムなんて単語が言われていた頃ですよ)。ちょっとでもデータの転送量を減らそうと、色々と工夫をしておりました…。

「SiR」第二期のトップページ(スクリーンショット)

んでもって、あんまりゴテゴテした背景もイヤだなと思って、3月に早くも全面改装。飽きっぽいのは相変わらずです。

部分的にCSSを使ってはいますが、LINK要素の色を変えたりしている程度で、まだまだテーブルレイアウト。

Since 1999/01/08なんて書いてありますが、更新履歴を見てみると、先に書いた動作確認用の暫定バージョンをアップしたのが8日、公開状態に移行したのが18日だったようです。暫定バージョンなんかを込みにしているんでType 3ということになっているらしい…。

それにしても、書いている内容がいちいち痛い。今なら、間違いなく中二病とか言われるよなぁ、コレ。

内容を見ていくと、何の疑問もなく「推奨環境はウィンドウ幅800pixel以上」なんて書いてあるあたり、今なら考えられません…。

CSS導入

CSS導入当初の「SiR」(スクリーンショット)

1999年7月8日から公開したサイトの、トップページです。

この年の春先に、偶然にもすみけんたろう氏の名著「スタイルシートWebデザイン」を入手しまして。とにかく衝撃を受けました。

ここ数ヶ月で一生懸命に詰め込んだ知識が、すっかり色あせたものになってしまい、「とにかく、CSSを使ってみなければ」と思ったのを覚えています。

同時期に伝説のWebサイト「TokiMeki Network」(ネット上からリソースが消えて、名実共に伝説となってしまったのは、返す返すも残念)に出会ったことも大きかったですね。

この頃のCSSってのは「とにかく不自由なもの」という印象ばかりが先行していたのが世間の認識だったと思うのですが、そこに素晴らしくスタイリッシュなサイトを構築した人がいた訳ですから。

とにかく、必死になって「TokiMeki Network」のソース解析をやって、CSSを研究しました。

まだブラウザ戦争なんて言われており、Internet ExplorerとNetscape Navigatorが激しいシェア争いをしていた時代です。Netscape Navigatorのバージョン4のCSS対応が極めて杜撰だったこともあって、CSSを使ったサイトはNetscape Navigatorを排斥している!などと言われたものです(まだプロのWebデザイナーでも「構造と見栄えの分離」という概念を理解していない人が多かったんですよ)。

@importを使ったり、link要素のmedia属性にscreen以外を指定することでNetscape Navigator4.XへのCSS読み込みをキャンセルさせるのが常套手段でありましたね。…うわぁ、懐かしいワザだ…。

  • CSSを本格導入後の「SiR」トップページ(スクリーンショット)
  • CSSを本格導入後の「SiR」エントランスページ(スクリーンショット)

色々と研究と試行錯誤の後、2000年の2月にまたもや全面再更新を行いました。付け焼き刃的にCSSを取り入れた前回のデザインの教訓から、HTMLの根本的な構造から再構築を行い、スタイルシートファイルも積極的にモジュール化(この辺は「TokiMeki Network」の影響ですね)しました。

outsider reflex」や「娘娘飯店しるきぃうぇぶ」といった素晴らしいサイトと出会って大いに刺激を受け、世間のCSSへの不理解を覆すには、「実際にスタイリッシュなサイトを構築可能という実例を見せるしかない」という思いもありまして、明るく見栄えのするデザインにしようと考えたのを覚えています。

このバージョンでは、画像を各要素に組み込むことを意識して行いました。

画面左端の縦長の画像はbody要素の背景画像で、fixed指定することで位置を固定していました。

右端の2列のブロックパターンは、アニメGIFでそれぞれ上下にうにうにと動きます。アニメ「宇宙戦艦ヤマト」の、波動エンジンのフライホイールの動きから着想を得たのですが、環境によってはスクロールがかなり緩慢になったようで、あまり評判は良くありませんでした(苦笑)。

HTMLは文章構造を記述することに徹して、画面の装飾の為にはCSSを積極的に用いようと主張する人たちが、いつのまにかCSSコミュニティとか某方面とかストリクターとか呼ばれたのもこの頃でしょうか?

野嵜さんの「kotobaseek」や、いまは亡き「さとみかん」アンテナで取り上げられることがステータスっぽく言われたり、「迷惑だ」と言われたり。あちこちで論争めいた意見の交換も行われ、思えば熱い時代でした…。

XHTMLへの移行

XHTML移行に向けて、暫定運用中だった頃の「SiR」トップページ(スクリーンショット)

2001年の春。W3CからXHTML 1.0が勧告され、XHTML 1.1の勧告も間近に近づいたこの頃、積極的なWebマスターが次々にHTML 4.01 StrictからXHTMLに乗り替えていきました。

そういった状況で、幾らか焦りもあったんでしょうね。デザイン的な不満点もあって、またもやサイトの更新を画策してはいたのですが、この頃はやたらと会社が忙しかったりして果たせず。ここからしばらくは縮小運用を行うことになります。

日記も長期更新しなかったりして、2004年の夏までサイトは停滞状態。CSSでイケてるサイトこと「カスイケ」のリンク集やらスレッドから来た人には申し訳ないような状態がしばらく続きます。

一方で、コンパクトデジタルカメラを導入したのがこの頃。

近くの港に入港した護衛艦「たかつき」を見学してかつての艦船オタクの血が再び騒ぎ出したり。再開後の方向性に、少なからぬ影響を与えたと言えそうです。

  • 再開後の「SiR」Navyスタイル(スクリーンショット)
  • 再開後の「SiR」Solidスタイル(スクリーンショット)

2004年の8月に全面更新を完了。ようやくWebへの復帰を果たしました。

DTDはXHTML 1.0 Strict。CSS切替スクリプトで複数のシートの中から好みのスタイル(あるいは、スタイルを適応しない)を選択できるようにしました。

流石にこのあたりになってくると、スタイルシートの記述も現行のものに近くなってきます。

コンテンツの内容の方も「ロケットまつり」に行くようになったり、デジタル一眼レフを導入したりで現在に繋がっている訳です。

こうして振り返ってみると、やっぱり10年ってのは長いものですね。ちょっと体調を崩したり、地震があったりと、決して平穏無事とはいきませんでしたが、とにかく大きな怪我や病気などもなく、それなりに健康にすごせたのは幸い。

また10年先に、「あの頃は景気が悪かったねぇ」などと苦笑しながら振り返れるようになりたいものです。