はじめに
1994年〜2023年まで、8つの時代のWebデザインをそのまま再現したサイトを作った。
- 年代を切り替えると、レイアウト・フォント・色・インタラクションがまるごと変わる
- 1998年では右クリック禁止ポップアップが出る
- 2003年にはウェブ拍手ボタンが現れる
デモ： https://web-timemachine.vercel.app
フロントエンドは専門ではない。実装はほぼClaude Codeに任せた。
技術スタック
| 項目 | 内容 |
|---|---|
| HTML / CSS / JS | Vanilla（フレームワークなし） |
| ビルドツール | なし |
| ホスティング | Vercel |
フレームワークを使わなかった理由は一つ。各時代のCSSを完全にコントロールしたかった。 ReactやVueを挟むと、時代ごとのデザイン再現に制約が出る。
役割分担
| やったこと | 担当 |
|---|---|
| コンセプト・設計書の作成 | 自分 |
| 機能追加・コンテンツの判断 | 自分 |
| HTML / CSS / JSの実装 | Claude Code |
| 全8時代のデータ（48カード分） | Claude Code |
コードはほとんど書いていない。
ファイル構成
web-timemachine/
├── index.html
├── styles/
│ ├── base.css # タイムラインUI（固定）
│ ├── era-1994.css # 黎明期
│ ├── era-1998.css # 個人サイト全盛期
│ └── ...（8時代分）
├── scripts/
│ ├── timemachine.js # 状態管理・初期化
│ ├── era-controller.js
│ ├── era-data.js # 全時代のコンテンツデータ
│ └── interactions.js # 各時代のインタラクション
時代を切り替えると <link> タグの href を差し替えてCSSをロードし直す。各CSSは body[data-era="1994"] のようにスコープを切って他の時代と衝突しない設計になっている。
Claude Codeへの指示の出し方
まず設計書を作るところからClaude Codeと一緒にやった。「8時代のWebデザインが切り替わるサイトを作りたい」という概念だけ渡して、時代区分・CSS設計方針・ファイル構成を一緒に整理した。
設計書ができてからの指示はシンプルになった。
エンジニアタブにセキュリティ・監視・運用のセクションを追加して。
各時代2カード構成で。
これだけで、HTML・JS・8時代分のデータを全部書いてくれる。
2003年のウェブ拍手ボタンを実装して。
クリックするとカウントが増える動きで。
自分はできあがりを確認して、次の指示を出す繰り返しだった。
やってみてわかったこと
- 詰まる場面がほとんどなかった。 先に設計書を作ったことが大きい。何を作るかが明確だとClaude Codeへの指示が迷わない
- Claude Codeへの投資対効果は「指示の質」で決まる。 曖昧な指示より、具体的な仕様の方が一発で動くコードが返ってくる
- 実装を任せると、設計に集中できる。 「この機能は本当に必要か」という判断に頭を使えるようになった
フロントエンドが得意でなくても、設計さえ丁寧にやれば作れる。