投稿日
最新AIでイニシエのWebサイトを作ってもらった 〜2000年の君へ〜
AntigravityというAIツールをご存じですか？ 指示（プロンプト）を与えるだけで、いろんなWebサイトがサクッと作れてしまうのが面白くて、最近いろいろといじり倒しています。そこでふと、逆に古い技術のサイトも作れるの？と疑問が湧いたので、実験してみました。
Antigravityとは？
Antigravity（アンチグラビティ）は、Gemini 3 を搭載したAIエディター。自然言語で指示を出すだけで、WebサイトやWebアプリなどのデザインからコーディングまでを一括で行ってくれます。実際にいくつか試しに作ってもらいましたが、だいたい5分くらいで土台は完成します。今では既存サイトの簡単な修正なんかもお任せしています。
ほうほう。指定してないデザインもなんかいい感じにしてくれるのね。 pic.twitter.com/RKC0QfHJKh
— Mana (@chibimana) December 20, 2025
ReactやTailwind CSSなんかを使っていい感じに作ってくれるんですが、今回はあえて「2000年の技術で」とオーダーしてみることにしました。
ちなみに2000年のときの私は、Webサイトを見たことがあるなーという程度で、制作は一切したことのないお年頃でした。
カフェのWebサイトを2000年の技術で制作
なんの指定もなしに作るのは時間がかかるかもしれないと思い、拙著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』のサンプルとして私が制作したカフェサイトのGitHubのリポジトリーを指定して、2000年の技術で再現してもらうことに。
最初の画面でリポジトリーを指定してクローンして始められます。
以下のAntigravityに指示する内容もGeminiに生成してもらいました。AIへの指示をAIに書かせる現代っ子です。
あなたは今、西暦2000年のベテランWebマスターです。タイムスリップしたと思ってください。
あなたの使命は、現代のWebサイト「WCB Cafe」を、**2000年当時の技術と常識だけで完全に作り変えること**です。
現代のWeb標準技術（HTML5, CSS3, Flexbox, Gridなど）は一切存在しません。ターゲットブラウザは「Internet Explorer 5.0」と「Netscape Navigator 4.7」です。
以下の厳格な制約に従って、HTMLと（最低限の）CSSコードを生成してください。
## 開発環境・技術制約（西暦2000年厳守）
**1. レイアウトの絶対原則：**
* **CSSによるレイアウトは禁止です。** Flexbox, CSS Grid, floatは存在しません。
* すべてのレイアウトは**テーブルレイアウト（`<table>`タグの入れ子構造）**で実現してください。ヘッダー、メインコンテンツ、サイドバー、フッター、画像の横並び、すべてテーブルです。
* 空白や微調整が必要な場合は、透明な1x1ピクセルのGIF画像（`spacer.gif`と呼ぶ）を配置し、`width`と`height`属性でスペースを確保してください。
**2. HTMLの仕様：**
* HTML 4.01 Transitional、あるいはそれ以前の仕様に基づきます。
* **HTML5のセマンティックタグは使用禁止。** (`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`などは存在しません。すべて `<table>` か `<div>` か `<span>` です)
* スタイルの指定は、可能な限りHTMLの属性を使用してください。（例：`<table width="760" align="center" bgcolor="#ffffff">`, `<td valign="top">`）
**3. 装飾とテキスト：**
* 文字の装飾には、CSSではなく**`<font>`タグ**を多用してください。（例：`<font face="ＭＳ ゴシック" size="3" color="#ff0000">`）
* 文字を中央寄せにする場合は `<center>` タグを使用してください。
**4. CSSの制限（もし使うなら）：**
* CSSは外部ファイル化せず、HTML内の `<style>` タグ、または各要素の `style="..."` 属性（インラインスタイル）に記述することを推奨します（Netscape対策）。
* 使えるプロパティは CSS1 レベルまで。（フォントサイズ、色、背景色、単純なボーダー程度）。
**5. 画像とリンク：**
* 画像には必ず `border="0"` 属性をつけてください。そうしないとリンク時に青い枠線が出てしまいます。
* ロールオーバー効果（マウスを乗せたら画像が変わるなど）を実装する場合は、単純なJavaScript (`onMouseOver`, `onMouseOut`) を `<img>` タグに直接書いてください。
## 目標サイトの再現指示
元のサイトの要素を、2000年風に解釈して実装してください。
1. **全体の構造:**
* 画面幅は可変ではなく、**固定幅（推奨：760px）**で作成し、画面中央に寄せてください（`<center>`タグまたは巨大な親テーブルで囲む）。背景色も設定してください。
2. **ヘッダー:**
* ロゴとナビゲーションメニューは、1行2列のテーブルで作成してください。
3. **メインビジュアル:**
* 大きな画像は、そのまま配置するか、テーブルのセルに入れてください。
4. **Concept, Menu セクション:**
* 画像とテキストの横並びや、グリッド状のメニュー一覧は、複雑な**入れ子構造のテーブル**で再現してください。CSS Gridは使えません。
5. **2000年らしい追加要素（ボーナスポイント）：**
* フッターまたはサイドバーに「あなたは〇〇人目のお客様です」というアクセスカウンターの画像（ダミーでOK）を設置してください。
* 「Best Viewed with Internet Explorer 5.0 (800x600)」というバナー画像またはテキストを追加してください。
## 出力形式
* `index.html` の完全なコード。
* （もし必要なら）最低限の `style.css` コード。
さあ、2000年のインターネットへようこそ！最後の一文はなんかよくわかりませんでしたが、そのままコピペ。
3分後… カフェサイト 2000年 ver. 完成！
出来上がったサイトを見てみると… おお、見た目はそこまで破綻していないように思えます。でもどこか懐かしい、古き良きインターネットの香りがします。以下、生成されたHTMLの抜粋です：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
<title>WCB Cafe - Welcome</title>
<style type="text/css">
<!--
body {
background-color: #f7f0e6;
margin: 0px;
padding: 0px;
}
a:link { color: #5a4632; text-decoration: none; }
a:visited { color: #5a4632; text-decoration: none; }
a:hover { color: #ff9900; text-decoration: underline; }
a:active { color: #ff0000; text-decoration: underline; }
-->
</style>
</head>
<body bgcolor="#f7f0e6" text="#443322" link="#5a4632" vlink="#5a4632" alink="#ff0000">
<center>
<table width="760" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center">
<!-- HEADER START -->
<table width="740" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="200" valign="middle">
<a href="index.html"><img src="images/logo.svg" width="150" height="auto" border="0" alt="WCB Cafe Logo"></a>
<!-- Note: SVG might not work in real IE5, but we keep the file ref. Width/Height added for stability. -->
</td>
<td align="right" valign="bottom">
<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<b>
<a href="news.html">[ NEWS ]</a>
<a href="menu.html">[ MENU ]</a>
<a href="contact.html">[ CONTACT ]</a>
</b>
</font>
</td>
</tr>
</table>
<!-- HEADER END -->
<br>
<!-- MAIN VISUAL START -->
<table width="740" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td align="center">
<img src="images/cover-home-l.webp" width="740" border="0" alt="We'll Make Your Day">
</td>
</tr>
<tr>
<td height="5"><img src="images/spacer.gif" width="1" height="5"></td>
</tr>
<tr>
<td align="center" bgcolor="#4a3b2a">
<font color="#ffffff" face="Georgia, Times New Roman, Times, serif" size="5"><i>We'll Make Your Day</i></font>
</td>
</tr>
</table>
<!-- MAIN VISUAL END -->
<br><br>
<!-- CONCEPT SECTION START -->
<table width="700" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="center">
<hr size="1" color="#888888" width="50%">
<font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="#5a4632"><b>About Cafe</b></font>
<hr size="1" color="#888888" width="50%">
</td>
</tr>
<tr>
<td align="center">
<font face="MS PMincho, Mincho, serif" size="3">
WCB CAFEは無添加の厳選食材とおしゃれな店内が魅力のカフェです。<br>
心と体に優しい、それでいて飽きのこない空間をご用意しています。<br>
素材の本来の美味しさを引き出したメニューを楽しみながら、癒しの時間をお過ごしください。
</font>
<br><br>
<a href="menu.html">
<font size="3"><b>>> メニューを見る</b></font>
</a>
</td>
</tr>
</table>
<!-- CONCEPT SECTION END -->
<br><br>
<!-- MENU GRID START -->
<!-- コード省略 -->
<!-- FOOTER START -->
<table width="760" border="0" cellpadding="10" cellspacing="0" bgcolor="#5a4632">
<tr>
<td align="center" valign="top">
<font color="#ffffff" face="Verdana, Arial, Helvetica, sans-serif" size="4"><b>Information</b></font>
<br><br>
<table border="0" cellpadding="3" cellspacing="1" bgcolor="#ffffff">
<tr>
<td bgcolor="#dddddd" align="center"><font size="2">住所</font></td>
<td bgcolor="#ffffff"><font size="2">東京都港区六本木 0-0 ◯◯◯</font></td>
</tr>
<!-- コード省略 -->
</table>
<br>
<font color="#cccccc" size="1" face="Arial">
© 2000 WCB Cafe. All Rights Reserved.
</font>
</td>
</tr>
</table>
<!-- FOOTER END -->
</td>
</tr>
</table>
<br>
<!-- RETRO BADGES & COUNTER -->
<table width="760" border="0">
<tr>
<td align="center">
<font size="2" color="#555555">
あなたは <font color="red">012345</font> 人目のお客様です。<br>
Last Update: 2000/01/01
</font>
<br><br>
<table border="1" cellpadding="2" cellspacing="0" bordercolor="#0000ff" bgcolor="#ffff00">
<tr>
<td align="center">
<font size="1" face="Arial" color="black"><b>Best Viewed with</b></font><br>
<font size="2" face="Arial Black" color="blue">Internet Explorer 5.0</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>そういえば、元サイトの画像ファイルはSVGやWebP形式ばかりだったはず。2000年のブラウザーでは表示できないよな？と思いつつコードを確認すると、
<!-- Note: SVG, WebP might not work in real IE5, but we keep the file ref. -->
という説明文がちゃんと入ってましたw
タイル型レイアウトは書き方が大きく変化
それではコードをじっくり味わってみましょう。今の書き方だと display: grid; や display: flex; を使えるので、HTMLコードはかなりすっきりします。しかし、2000年版はテーブルレイアウトが前提です。
<table width="700" border="0" cellpadding="0" cellspacing="0">
<!-- コード省略 -->
<!-- Row 1 -->
<tr>
<td width="233" align="center">
<table width="220" border="1" cellpadding="2" cellspacing="0" bordercolor="#e0e0e0">
<tr><td align="center"><img src="images/menu1.webp" width="210" border="0"></td></tr>
<tr><td align="center" bgcolor="#f9f9f9"><font size="2">アボカドトースト</font></td></tr>
</table>
</td>
<!-- コード省略 -->
</tr>
<!-- Spacer Row -->
<tr><td colspan="3" height="10"><img src="images/spacer.gif" width="1" height="10"></td></tr>
<!-- Row 2 -->
<tr>
<td width="233" align="center">
<table width="220" border="1" cellpadding="2" cellspacing="0" bordercolor="#e0e0e0">
<tr><td align="center"><img src="images/menu4.webp" width="210" border="0"></td></tr>
<tr><td align="center" bgcolor="#f9f9f9"><font size="2">ムール貝のワイン蒸し</font></td></tr>
</table>
</td>
<!-- コード省略 -->
</tr>
<!-- Spacer Row -->
<tr><td colspan="3" height="10"><img src="images/spacer.gif" width="1" height="10"></td></tr>
<!-- Row 3 -->
<tr>
<td width="233" align="center">
<table width="220" border="1" cellpadding="2" cellspacing="0" bordercolor="#e0e0e0">
<tr><td align="center"><img src="images/menu7.webp" width="210" border="0"></td></tr>
<tr><td align="center" bgcolor="#f9f9f9"><font size="2">ラザニア</font></td></tr>
</table>
</td>
<!-- コード省略 -->
</tr>
</table>特に元のサイトでは grid を使っている、上記のおすすめメニューのエリアを見てみると、table タグの中に tr、その中に td、さらにその中に table… という具合で、ネストがすごい！項目をひとつ追加するのも勇気が必要ですね。
今では非推奨のタグもたくさん
br タグ連発したり、 center 、 font 、 b など、今は非推奨のタグも復活。
<font face="MS PMincho, Mincho, serif" ...> という書き方は初めて見ました。fontタグのface属性？さすがに間違いだろーって調べたら本当にあったみたい。
そう思うと2000年の古い書き方を、最新のChromeが完璧に解釈して表示しているのってもしかしてすごいことなのでは…？Webというプラットフォームの懐の深さと、それを維持しているブラウザベンダーの血の滲むような努力に敬礼。
コメントアウトされたCSSコード
head 内に style タグでCSSコードが記述されているんですが、HTMLの <!-- と --> で囲まれて、コメントアウト扱いされているんですよね。
<style type="text/css">
<!--
body {
background-color: #f7f0e6;
margin: 0px;
padding: 0px;
}
a:link { color: #5a4632; text-decoration: none; }
a:visited { color: #5a4632; text-decoration: none; }
a:hover { color: #ff9900; text-decoration: underline; }
a:active { color: #ff0000; text-decoration: underline; }
-->
</style>そういえば古いWebサイトの修正作業で見かけたことがあるような。これはなんだろうと聞いてみたところ、これはCSSを知らない大昔のブラウザーが、CSSのコードを『本文』として画面に表示してしまうのを防ぐためのテクニックだそうです。Netscape Navigator 1.xなどの古いブラウザーは、 style というタグを知らないようで、「知らないタグは無視するが、中身は表示する」というルールがあるので、コメントアウトで表示させないようにしているとか。
spacer.gifってなんぞ？
Geminiが考えてくれたプロンプトにも何食わぬ顔で急に登場した「spacer.gif」という存在。「空白を作るために必要だった」と聞いたことがあったのですが、改めてGeminiに聞いてみました。
まず、spacer.gif は 1px × 1px の透明な画像のこと。テーブルレイアウトではブラウザの仕様で、中身が空っぽのセルが勝手に押しつぶされてレイアウトが崩れたらしく、それを防ぐため、透明な画像を入れて幅や高さを物理的に確保していたそうです。
<td>
<img src="spacer.gif" width="200" height="10">
</td>
こんな感じで使っていたらしい。
「人類がCSSという正しい道具を手に入れる前に、画像でなんとか文明を築こうとした痕跡」とも説明されました。れ、歴史的遺物…？
モバイルサイズで見てみると
最後に、この2000年仕様のサイトをスマホサイズ（幅375px程度）で見てみました。わかりやすいようにモックアップ画像で紹介。
結果は… もちろん可変しません。固定幅（760px）で作らせているし、ビューポートなんてものもないので、スマホで見ると字が豆粒みたいになっています。レスポンシブデザインという発明がいかに偉大か、身にしみて分かりますね。今はメディアクエリ（ @media ）一つで可変対応できるなんて、本当に良い時代になりました。
まとめ：温故知新のWebサイト制作
私がWebサイト制作の世界に足を踏み入れたときには、すでにエディタのタグ補完機能だったり、Emmet記法（省略記法）、テンプレートなんかも多々あったので効率化はできていたと思います。
しかし、2000年の人はこの複雑なテーブルレイアウトを、メモ帳のようなエディターで手打ちでやっていたのかと思うと…感慨深いどころか、畏怖の念すら抱きます。
AIがいれば、またいつか『IE5対応必須』案件が来ても戦えるかもしれませんね！（いや、ない）
初心者Webデザイナーの皆さんへ
今回の実験で一番伝えたかったのは、今は便利なツールがあるけれど、裏側の仕組みを知っておくと強いということです。
「なぜ div を使うのか？」「なぜ CSS Grid が便利なのか？」 それは、過去の不便さを解消するために生まれた技術だったりします。歴史を知ることで、新しい技術を選ぶ根拠が自分の中に生まれます。
これから勉強する皆さんは、あえて古い技術を覚える必要はありませんが、「昔は大変だったんだな〜、CSSありがとう！」という感謝の気持ちを持ってコーディングすると、ちょっとだけ楽しくなるかもしれませんよ！
今回紹介したカフェサイトの（最近風の）作り方は、拙著『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』で紹介しているので、ぜひ読んでみてください〜！