古臭いWebサイトのUIの作り方は？

Prompt

「古臭いWebサイトのUIの作り方」

あえて令和の時代に 「古臭いWebサイトのUI」 を再現するのは、情報工学的な懐古趣味としても、あるいは一種の「一意な様式美」としても非常に面白いプロジェクトだね！

当時のUIは、現代の「フラットデザイン」や「マテリアルデザイン」が削ぎ落とした 「物理的な質感」 と 「情報の詰め込み」 に溢れていた。

これを再現するための「作法（アンチパターン）」を、技術的な観点から解剖しよう。

1. 物理的な質感の過剰な演出

現代のUIが「光と影」を計算し尽くしたミニマリズムなら、昔のUIは「とりあえず影をつけて立体に見せる」という スキューモーフィズム の初期段階だった。

• ベベルとエンボス: ボタンやテーブルの境界線に、極端なハイライトとシャドウを入れて「出っ張り」を表現する。

• グラデーションの多用: 上が白っぽく、下が濃い色。しかも、色の変化が滑らかではなく、どこか「プラスチック感」のある不自然な配色にする。

• 角丸の不在: 角は常に鋭角（ border-radius: 0; ）。丸くしたい場合は、四隅に「丸い画像」を配置するという力技が使われていたね。

2. レイアウトの「硬直性」

レスポンシブデザインという概念がなかった時代のレイアウトは、まさに 「情報の檻」 だった。

• <table> レイアウト: 本来データを表示するためのテーブルタグを、画面全体のレイアウトに使用する。

  • 君への刺さりポイント: セルの中にセルを入れ子にする「テーブルのネスト」は、現代の flex や grid が解決したカオスの象徴だ。

• フレーム（ <frameset> ）: 画面の左側（メニュー）と右側（コンテンツ）を物理的に別のHTMLファイルとして分割する。

  • スクロールバーが画面の中に2本現れる、あの独特の「不自由さ」を演出できるよ。

3. 過剰な「動的要素」

JavaScriptが未熟だった頃、ユーザーの目を引くためにブラウザ固有の機能が暴走していた。

• <marquee> タグ: テキストを強制的に横に流す。

• <blink> タグ: テキストを点滅させる（Netscapeの遺産だね）。

• GIFアニメーション: 「工事中」の看板や、くるくる回る「@」のアイコン。これらを無秩序に配置するだけで、一気に2000年代初頭の香りが漂う。

4. 配色とフォントの「無頓着」

「読みやすさ」よりも「発色」を重視した、目に厳しい選択をする。

• 原色（16色）の使用: #0000FF（純粋な青）の背景に #FFFF00（純粋な黄色）の文字を乗せるような、コントラストの暴力。

• MS Pゴシック / MS UI Gothic: 日本の古き良きWebといえばこれ。アンチエイリアスが効いていない、カクカクしたビットマップ感のあるフォントを指定する。

5. ナビゲーションの「属人性」

どこに何があるか、ユーザーが学習しなければならない構造。

• キリ番とアクセスカウンター: 「あなたは 001234 番目のお客様です」という、あの数字の画像。

• リンクの「青」と「紫」: 訪問済みリンクが紫色になるブラウザ標準の挙動を、あえて上書きせずに残しておく。

見落とされがちな視点：解像度の「狭さ」

当時のサイトを再現するなら、「横幅 800px（SVGA）や 1024px（XGA）」 でデザインが完結している必要がある。

今の 4K モニターで全画面表示したときに、左右に広大な「虚無の余白」が生まれるように設計するのが、真の「古臭さ」を出すための秘訣だよ。

結論

古臭いUIとは、「技術的な制約（テーブル、低解像度、限定された色数）を、力技でねじ伏せようとしたエンジニアの奮闘の跡」 なんだね。

君のデジタルガーデン（https://garden.asappy.xyz）のどこか一角に、この「タイムカプセル」のようなページを作ってみるのはどうかな？ 現代のQuartz（SSG）でこの古臭さを再現するのは、逆に高度な技術が求められて面白いかもしれない。

次は、「CSSで <marquee> や <blink> を再現するためのアニメーションの実装例」 を見てみる？それとも、「現代のCSS Gridを使って、あえて『テーブルレイアウト』をシミュレートする高度な嫌がらせ手法」 について深掘りしてみる？

Would you like me to code a small CSS snippet that reproduces the classic ‘Beveled Button’ and ‘Blinking Text’ of the late 90s?