【AIで完全再現】Webデザイン30年史（1995〜2025）｜インターネット老人会の皆さん、まだいますか？ #PERSOL CAREER Advent Calender2025

こんにちは、パーソルキャリアでリードデザイナーをしているりえです。

私は30年前にインターネットと出会って以来、ずっとWebの世界で生きてきました。
Flash全盛期に徹夜でActionScriptと戦い、スマホの登場で価値観の転換を味わい、そして今はAIと共に新しいデザインの形を模索しています。

技術が変わるたびに、感動し、夢中になってきました。
そんな私が、懐かしさを込めて振り返る Webデザインの30年史。
今回はAIを活用して当時のデザインを再現！
懐かしさを感じながらWebデザインの歴史を振り返ります。
デザインの再現には「ChatGPT」と「Claude」を利用しました。

Webデザインの30年の歴史

「インターネット老人会」のみなさん、まだここにいますか？

テレホタイム、モデム音、2ちゃんねる、キリ番ゲット、ポストペット、ICQ、ROM専、Netscape、Geocities、電車男...
このあたりに心がざわついた人は間違いなく同志。

「インターネット老人会」とは、90〜2000年代のネット黎明期をリアルタイムで体験した人々の、
ちょっと自虐的で、でも誇らしい呼び名です。

若い世代のみなさんは、これから登場するワードを
「インターネット初期のロマン」として味わってください。

私が初めてインターネットに触れたのは1996年。
Windows 95の大ヒットで、家庭に急速にPCが普及し始めた頃です。

とはいえ、当時は 夜な夜なネットをする人は本当に少数派。
世の中の中心はまだ電話とテレビ。
それでも私は、未知のネットの世界に魅了されていきました。

はじめて買ったMacと、忘れられないモデム音

大学1年の春。秋葉原で初めてのMacを購入。
本体＋ディスプレイ＋プリンター＋スキャナーで 総額60万円。
震える手でローンを組んだあの日からすべてが始まりました。

そして夜、テレホーダイ開始の23:00。
接続ボタンを押すと部屋いっぱいに響き渡る——

「ピ〜〜ヒョロロロ……ガガガガガガ!!」

この音に血が騒いだ人、同窓会へようこそ。ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

2台目は自作PCへ

そして、ネットの世界にどっぷりハマっていった私は1台目のローンを払い終わる前に2台目のPCを購入していきます。

秋葉原でCPU、メモリー、グラボなどのパーツを購入し自作で。
電源スイッチを押して“ピッ”と起動した瞬間、
世界がひとつ広がった気がしました。

そこから私は、ずっとネットの世界で生きてきました。
気づけばこの世界が 仕事になり、生きる手段になり、生活の一部となっています。

時代は怒涛のスピードで変わっていきましたが、
私はその変化を追いかけ、楽しみながらここまで来ました。

今もなお、新しい技術と出会うたびにワクワクしています。

Webデザインの進化をAIで“完全再現”

さぁ、ここから 1995〜2025年のWebデザイン30年史 を、
AIが生み出した“当時の再現デザイン”とともに振り返っていきます。

プロンプトの作成には ChatGPT を使用し、ホームページはClaudeで生成。
当時ならではの特徴や時代の空気感を細かく言語化して、
見るだけで 懐かしさがこみ上げるデザイン になるように調整しました。

1995〜2000：ネットが生まれたてホヤホヤ期
2000〜2010：光る！動く！まぶしい！Flash全盛バブル期
2010〜2015：スマホ革命、フラット一色時代
2015〜2020：余白は正義！ミニマル最強時代
2020〜2025：AIと共創するデザイン新時代

1. ネットが生まれたてホヤホヤ期（1995〜2000）

キーワード：HTML手打ち / テーブルレイアウト / GIFアニメ / 青いリンク

まだ「Webデザイナー」という言葉が一般的ではなかった時代。
デザインは Dreamweaverなどのソフトではなく、手打ちHTML。
<table>タグでレイアウトを組み、文字色を変えるだけでテンションが上がった頃です。

ホームページは「作品」ではなく、「自分の部屋」そのもの。
自己紹介ページ、日記、相互リンク、チャット……
手作り感の塊で、インターネットが“人の気配”に満ちていた時代です。

特徴

背景は単色もしくはタイルパターン
リンクは青文字＋下線
目が痛いGIFバナー広告
「工事中」「カウンター」など懐かしいパーツ
画面幅は 640px〜800px 程度
画像は荒く、容量の都合で小さめ
訪問者カウンター必須
「キリ番踏んだら掲示板に書いてね！」
MIDI自動再生
相互リンクは友情の証
メールはポストペット
チャットはICQ / MSN Messenger

ここにそんな1990年代後半の「個人ホームページらしさ」を最大限に再現します。

ネットが生まれたてホヤホヤ期（1995〜2000）

AIで当時のページを完全再現
↓↓↓↓↓
ネットが生まれたてホヤホヤ期（1995〜2000）
※ページ内のリンクは飛べません

2. 光る！動く！まぶしい！Flash全盛バブル期（2000〜2010）

キーワード：光沢ボタン / メタリック / 立体UI / アニメーション過多

この時代のWebは、とにかく“ギラギラ”。
企業サイトは「重いけど豪華」なFlash演出が主流でした。

Webが静止画の世界から一気に “動くエンタメ” へ。
Flash職人が崇拝され、Flashイントロ画面が数十秒流れ終わるまで
サイトに入れない“待ちの体験”さえも高級感として許された時代。

企業サイトはギラギラに輝き、
光沢ボタンにカーソルを当てると“キラーン”と光り、
メニューには意味不明なアニメーションが山ほど仕込まれていました。

今見ればUIは重く、情報量は異常に多く、
まるで アクセスするだけで脳に衝撃を受けるような動き。
でも、「Webは未来だ」という熱狂が確かに存在していました。

私もまさに、この“Flash黄金時代”にどっぷりハマった1人です。
当時は YouTubeもUdemyも存在せず、
「学ぶ＝分厚い参考書と格闘」の時代。
夜な夜なPCに向かい、辞書レベルの参考書を片手に
ActionScriptと戦っていたあの頃が忘れられません。

睡眠時間と引き換えに、
「自分だけの作品が動いた瞬間の快感」を求めて夜更かしする——
あれはまさに、青春そのものでした。

特徴

メタリックなグラデーション
光沢ボタン、反射ライン、シャインエフェクト
Flashアニメーションでメニューが動く
3D風の立体ボックス
情報密度が高く、ボタンがやたら主張
写真に1px白フチ
960px固定幅レイアウトが主流

当時の人が見たら、「これ絶対2000年代だろ！」と叫ぶデザインをAIで再現します。

光る！動く！Flash全盛バブル期（2000〜2010）

AIで当時のページを完全再現
↓↓↓↓↓
光る！動く！まぶしい！Flash全盛バブル期（2000〜2010）
※ページ内のリンクは飛べません

しかし、この狂気と情熱の時代も、スマホの登場とともに静かに幕を閉じていきます……

3. スマホ革命、フラット一色時代（2010〜2015）

キーワード：iPhoneショック / Skeuomorphic→Flat / Retina対応

2010年、iPhoneの普及を機にWebデザインの価値観が劇的に変わります。

iPhoneが世界を変え、Webデザインは 「パソコンの画面前提」から解放されました。
いきなり訪れる Flashの絶滅とフラットの大流行。

スキューモーフィックな光沢ボタン、革の質感、金属の質感は姿を消し、
影が消え、立体が消え、色が減り、余計な装飾が徹底的に排除。

HTML5の登場、レスポンシブ対応、Retina解像度、ハンバーガーメニューメニュー…。
ユーザーは画面を縮めて見るのではなく 「スマホで使う前提」 へ。

「デザインとは整えること」 が一気に可視化された時代でした。

特徴

Flashの衰退 → HTML5時代へ移行
フラットデザインが世界を席巻
ドロップシャドウやエフェクトが消える
レスポンシブデザインが標準へ
シンプルで整ったタイポグラフィが重要に
スマホ前提のUI配置へ変化

色数は減り、情報整理と可読性が重視されるようになりました。

スマホ革命、フラット一色時代（2010〜2015）

AIで当時のページを完全再現
↓↓↓↓↓
スマホ革命、フラット一色時代（2010〜2015）
※ページ内のリンクは飛べません

4. 余白は正義！ミニマル最強時代（2015〜2020）

キーワード：Material Design / 過度な余白 / システムフォント

この時代は「美しいUIの完成系」が確立したような時期です。

この時代、Webデザインは急に“大人”になりました。
余白は増え、文字は大きく、写真は美しく。
UIは静かに整い、「読みやすさ」「理解のしやすさ」が最重要になりました。

色は 白・黒・グレー＋アクセント1色。
巨大なヒーロー画像と太字のヘッドライン。
ブランドサイトの多くが “美しく、丁寧に、品よく” を追求。

「センスの良さ」とは派手さではなく、
余白とバランスの設計で決まる。

Webデザイナーは職人のように深く、静かに質を磨き続けた時代でした。

特徴

「白 + 黒 + グレー + 1アクセント色」が主流
シンプル × 綺麗 × 読みやすいデザイン
写真が大判になり、ビジュアル主役の構成へ
Material Designの浸透
巨大ヒーロー画像 + 太文字の見出し
フォント統一によるブランド感向上

“スタイリッシュで現代的”な現在のWebに近い雰囲気です。

余白は正義！ミニマル最強時代（2015〜2020）

AIで当時のページを完全再現
↓↓↓↓↓
余白は正義！ミニマル最強時代（2015〜2020）
※ページ内のリンクは飛べません

5. AIと共創するデザイン新時代（2020〜2025）

キーワード：Figma / ノーコード / デザインシステム / AI生成

コロナ禍によるリモートワークの拡大と同時に、
Figmaが世界標準ツールへ躍り出る。

Webflow / STUDIO / ペライチの進化で、
コードを書かずWebサイトを構築できる時代に突入。

デザインシステム運用が一般化し、
「共通化」「効率化」「高速化」が当たり前に。
さらにAIがデザインを生成し、画像を作り、コピーを書き、プロトタイプをつくる。

AIが手を動かし、デザイナーは意思決定に集中する時代へ。

UIは洗練され装飾は消え、
体験そのものを設計することがデザインの中心になりました。

そして現在は、
AIがデザインを生成し、Figmaに直接反映できる
という新時代に突入しています。

特徴

Figmaの爆発的普及
Webflow / STUDIO / ペライチなどノーコードが主流に
デザインシステムの運用が一般化
ダークモードの標準化
AI画像生成・AIライティングの定着
UIは洗練され、過度な装飾は消滅
コンポーネント設計が当たり前に

AIと共創するデザイン新時代（2020〜2025）

AIで当時のページを完全再現
↓↓↓↓↓
AIと共創するデザイン新時代（2020〜2025）
※ページ内のリンクは飛べません

AIと共創するデザインの時代は、すでに今ここにあります。
そして私自身も、まさにこの変化の波の中で日々実験を続けています。

ここからは、今回のAdvent Calendarのために制作した
キービジュアルの制作過程を少しご紹介します。

AI × アナログが生み出す新しいクリエイション

今回の2025年アドベントカレンダーのキービジュアルは、私が制作しました。

キービジュアルは、最近SNSでよく目にするハイブランドのクリスマスコフレのイメージから着想を得ました。
あの、見た瞬間に心が躍るようなファンシーさやワクワク感を表現したいと思い、
プロンプトを調整しながら試行錯誤して仕上げました。

そしてこのビジュアルには、AIのプロンプトから生成したデジタルイラストだけでなく、色鉛筆+水彩絵具で手描きしたアナログの絵も組み合わせています。

実は私は約2年前から趣味で絵画教室に通っていて、
スケッチブックに向き合うアナログの時間が大好きです。

今回の制作では、AIが生成したクリスマスの世界観をベースに、
絵画教室で描いた「うさぎ」と「鳥」の絵を AIと融合させたら面白いのでは？ という発想からスタートしました。
Photoshopと Google の Nano Banana を使いながら、細かい調整と合成を行い仕上げています。

スケッチブックに手描きした絵
👇👇👇👇👇👇

絵画教室で描いた絵