ホームページビルダーの名残を感じるコードの正体

1990年代後半から2000年代初頭にかけて、個人サイトを中心に爆発的に普及したホームページ作成ソフトが存在します。日本IBMが販売していた「ホームページビルダー」は、WYSIWYG感覚でWebページを作成できる手軽さから、多くのアマチュア制作者に愛用されました。マウス操作でテキストを配置し、表を挿入し、画像を貼り付けるだけで、それなりの見た目のページが完成する魔法のようなツールでした。

しかし、その便利さの裏側では、非効率で時代遅れのHTMLコードが大量に生成されていました。テーブルレイアウト、インラインスタイル、フォントタグ、フレーム構造といった要素が氾濫し、デザインを制御するために本来不要なマークアップが繰り返されていたのです。こうしたコードはインターネットアーカイブなどで現在も閲覧することが可能で、当時の熱気と泥臭さがそのまま保存されています。

ホームページビルダーが吐き出すコードには、他のツールとは異なる独特のパターンが存在します。たとえば、テーブルのセル内で繰り返しbgcolor属性が指定されていたり、スペーサーGIFが無意味に挿入されていたり、改行位置を揃えるための透明画像がいたるところに散らばっていたりと、デザイン志向の意図がそのままHTMLに変換されていました。これらの痕跡は、ソースを開いた瞬間に「あ、これはホームページビルダーで作られたな」とすぐに分かるほど特徴的でした。

インターネット上には、現在でもこうした名残を色濃く残すページが点在しています。古い個人サイトはもちろんのこと、企業や自治体のサイトの中にも、リニューアルされていない古いコンテンツが残っている場合があり、見た目はモダンでもソースを開いてみると90年代の香りが漂うことがあります。

当時のUI設計が生んだHTMLの癖

ホームページビルダーの特徴的な挙動の一つが、ユーザーがマウスで選択したテキストや要素に対して、最大限の再現性を確保しようとすることです。たとえば、画面上で文字色を赤に変更すると、コード上には<font color="#FF0000">というタグが直接書き込まれ、CSSではなく属性として表現されます。同様に、背景色を指定すれば<body bgcolor="#FFFFFF">のような属性が自動生成されました。

これらの属性はHTML 4.01 Transitional時代には完全に有効で、ブラウザも問題なくレンダリングしていました。しかし、現代のWeb標準から見ると望ましくないプラクティスとされています。CSSがすべてのスタイルを一元管理する手法が確立されて以降、要素に直接スタイルを記述するインラインスタイルやフォントタグは、保守性の低さから徐々に排除されるようになりました。

ホームページビルダーのコードを見ると、同じデザインのテーブルが大量にネストされていたり、余白を調整するための透明GIFが数十個単位で配置されていたりするのが分かります。これらは当時のブラウザ、特にInternet Explorerのレンダリングエンジンに合わせて最適化された結果であり、当時の制作者の意図がそのまま反映されているのです。

懐かしいコードを見てみたい方には、Internet Explorer 4.0時代特有のブラウザ表示仕様を解説したこちらのページがよく参考になります。当時のレンダリング思想を理解すると、なぜあのようなコードが必要とされたのかが見えてきます。

フレーム構造が当たり前の時代

ホームページビルダーには、フレームベースのサイトを簡単に構築できる機能が搭載されていました。<frameset>や<frame>タグを視覚的に配置でき、左にメニュー、中央に本文、右にバナーといった典型的な3分割レイアウトを、数クリックで完成させられました。当時の個人サイトや小規模な企業サイトでは、このフレーム構造が事実上の標準となっていました。

しかし、フレームには多くの問題があります。検索エンジンのクローラーがコンテンツを正しく読み取れない、ブックマークが正しく機能しない、URLがフレーム内のページを指せない、フレーム非対応のブラウザでは閲覧できないなど、現在では致命的な欠陥ばかりです。W3CもHTML 5でフレーム要素を完全に廃止し、代わりにCSSによるレイアウトやiframeを限定的に使用する方向へと舵を切りました。

それでも、ホームページビルダーで作られた古いサイトを覗くと、驚くほど多くのフレームページが現存しています。中には20年以上更新されていないものもあり、リンクを辿っていくうちにフレームの入れ子迷路に迷い込むという、独特の体験ができるのもまた一興です。フレームの境界線をドラッグしてリサイズする操作は、当時のユーザーにはなじみ深いものでした。

テーブルレイアウトの化石

ホームページビルダーが生み出した最も普遍的な名残が、テーブルレイアウトです。テーブルは本来、表形式のデータをマークアップするための要素ですが、ホームページビルダーではページ全体のレイアウトを <table> で構築するのが一般的でした。ヘッダー部分、サイドバー、本文、フッターといった各領域が <tr> や <td> の入れ子で表現され、セルを結合するために colspan や rowspan が多用されました。

このアプローチは当時のブラウザでは安定して動作し、制作者も直感的にレイアウトを理解できました。しかし、テーブルは本来の意味でのデータ構造を表現するものではないため、アクセシビリティの観点からも推奨されません。スクリーンリーダーはテーブルを「表」として読み上げようとするため、レイアウト用のテーブルはユーザー体験を著しく損ないます。HTMLの仕様がそう設計されている以上、そこにセマンティックではない意味を押し付けるのは筋の通らない話でしょう。

また、テーブルのネストが深くなりすぎると、レンダリングのパフォーマンスにも影響します。入れ子の段数が三段、四段と深くなるにつれて、ブラウザは描画のために多大な計算を強いられ、特に古いモバイル端末では顕著な遅延が発生しました。ホームページビルダーで作られたサイトをモバイル端末から閲覧すると、まるで自分が古いマシンにタイムスリップしたかのような、もっさりとした操作感を味わうことができます。テーブルのパースだけでもかなりの時間を要するため、ユーザー体験は確実に悪化します。

文字コードとエンコーディングの迷宮

ホームページビルダーで作成されたサイトを閲覧していると、文字化けに遭遇することが稀ではありません。これはいわゆる「Shift_JIS」と「EUC-JP」、「ISO-2022-JP」といった複数の日本語エンコーディングが混在していた時代に起因する問題です。当時のブラウザはエンコーディングを自動的に判別する機能が未熟で、制作者が <meta> タグで明示的に指定する必要がありました。

ホームページビルダーはデフォルトでShift_JISを採用していたため、特に個人のサイトではShift_JISのコードが多く見られます。しかし、Mac版のInternet Explorerは独自の解釈で文字を表示する場合があり、Windows版とは異なる見た目になることもありました。charsetを「EUC-JP」と書き間違えたまま放置されたページや、そもそもメタタグが欠落しているページも珍しくなく、現代のブラウザで開くと盛大に文字化けが発生するケースが後を絶ちません。

古いサイトを巡回していると、まるで暗号のような文字列の羅列がページ全体を覆っている光景に出会うことがあります。これは文字コードの不一致によって生じたアーティファクトであり、ホームページビルダーの時代を生きた証人でもあります。文字化けした文字の配列から、何が書かれていたのかを推測するのは、一種の考古学のような楽しみです。

さらに厄介なのは、ひらがなやカタカナと漢字が混在する日本語の特性上、一つのページ内で複数のエンコーディングが混在するケースも存在した点です。古いブラウザでは自動判別が不完全で、ユーザー自身が「表示」メニューから手動でエンコーディングを切り替える必要がありました。

DTD宣言とバージョンの痕跡

ホームページビルダーで生成されたHTMLファイルの冒頭には、必ずといっていいほど特有のDTD宣言が記載されています。「HTML 4.01 Transitional」がデフォルトの指定となっており、現在のWeb標準からすると旧式のアプローチです。Strict DTDが理想とされながらも、Transitional を選択する背景には、当時のブラウザ互換性を確保する必要があったことがうかがえます。

ホームページビルダーは、コードを生成するたびに、現在のHTML文書のバージョンを意識的に、あるいは無意識的に書き換えていました。バージョンアップのたびにDOCTYPEが変わったり、特定の属性が追加されたりする挙動が確認されており、同じソフトウェアで作成されたものでも、時期によって微妙にコードが異なるという面白さがあります。

古いコードを見ていくと、たとえば <html lang="ja"> の代わりに <html> とだけ書かれていたり、<meta name="Generator" content="IBM HomePage Builder ..."> というタグが存在していたりするのも、ホームページビルダー時代の大きな特徴となっています。Generatorメタタグは、使用されたソフトウェアを明示する仕組みであり、まさに「名残」をそのまま残した痕跡です。

また、バージョンによっては <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> のようなエンコーディング指定が自動的に付加されており、これが現在のブラウザでも不思議と正しく解釈され、文字化けを防いでいるケースもあります。古いコードが現代でも何とか動くのは、結果的にTransitionalの寛容さに救われている面があります。

レガシー属性とインラインイベント

ホームページビルダーのコードには、見た目を整えるためだけの属性が大量に含まれています。<table border="0" cellpadding="0" cellspacing="0"> といった組み合わせは、当時のテーブルレイアウトではお決まりのパターンであり、現在では CSS で border-collapse: collapse; padding: 0; のように簡潔に表現できます。

同様に、<img src="spacer.gif" width="1" height="1"> のような透明スペーサーGIFの使用も、ホームページビルダー時代の典型的な手法です。CSSがまだ実用的に普及していなかった時代には、ピクセル単位の余白調整を画像で実現するしかなく、これがサイト全体のファイルサイズを肥大化させる主要な原因の一つでもありました。ページ内のいたるところに置かれた透明GIFは、HTTPリクエストの回数を無駄に増やすだけでなく、データ転送量の観点からも最適な方法ではありません。

また、インラインのイベントハンドラも懐かしい要素の一つです。<a href="#" onMouseOver="..." onMouseOut="..."> のようなJavaScriptが直接属性として書き込まれており、これはCSSの :hover で代用できる処理ですが、当時の制作者はHTMLに直接記述していました。これらのコードは、現代のブラウザでは一応動作するものの、本来の用途から大きく逸脱した実装であることは否めません。

そうしたものの中には、renataの個人サイトのように、現在もあえて当時の空気感を残したページも存在しています。最新のWeb技術だけを追い求めるのではなく、過去の遺産として楽しんでみるのも、Webサイトの歴史を体感するひとつの方法でしょう。

「ホームページビルダー」は単なるソフトウェアではなく、日本のWeb黎明期における記憶の集合体です。あの独特なコードと格闘しながら何時間も費やした経験を持つ制作者は少なくないでしょう。古いソースを開いて、当時の記憶を追体験してみてください。