企画書1枚と「BGMうるさいね？」の一言で。Claudeと作ったWeb業界の歴史ゲーム「Web屋一代記」を公開します

• Web制作会社を1980年代から2026年まで育てる放置系の経営ゲーム「Web屋一代記」を、Claude Codeと一緒に作った
• 本体はHTMLファイル1枚・約4,000行。絵は画像ファイルを使わずプログラムで描いている。登録不要、スマホでもそのまま遊べる
• 進め方は、企画書を1枚渡して「進めてください」。あとは遊んで気になったことを一言ずつ伝えて直してもらった

▶ Web屋一代記で遊ぶ（無料・登録不要）

どんなゲームか

フリーランスの制作者として、自宅のパソコン1台から始める。仕事をこなして売上を作り、コーダーやデザイナー、PHPエンジニアを雇っていくと、会社が自動で稼ぐようになる。いわゆる放置・クリッカーと呼ばれる種類のゲームだ。

このゲームの特徴は、売上が増えると年が進むこと。1980年のパソコン通信の時代から始まり、Windows 95、iモード、ブログ、スマホ、生成AIと、日本のWeb業界の歴史を順にたどる。できごとは35件あり、時代が変わるたびに大きな解説画面が出る。

オフィスも自宅の一室から小さな事務所、オフィス、3フロアの自社ビル、本社タワーへと広がる。床や机、パソコン、モニターに映っている画面まで、時代ごとに変わる。1980年代は黒地に緑の文字、90年代後半は虹色の文字とアクセスカウンター、2020年代はコードエディタとAIチャットだ。

遊び方

1. タイトルで「はじめから」を選び、社長の名前と会社名を決める
2. オフィスをタップすると仕事をして売上が入る。何もしなくても社長は自動で働く
3. 「施設」タブでスタッフや部署を雇うと、毎秒の売上が増える
4. 「年表」タブで、その時代のできごとを読んでクイズに挑戦できる。全問正解で生産がアップ
5. 売上が1兆円を超えたら、会社を売却して強くなって最初からやり直せる

セーブは遊んでいるブラウザの中に自動で保存される。サーバーには何も送らない。閉じている間も、少しだけ稼いでくれる。

作り方：企画書1枚と、一言ずつの感想

最初に、どんなゲームにするかを書いた企画書を1枚用意した。施設の種類、計算式の考え方、開発の段階（最小版から本格版まで5段階）を書いたものだ。それをClaude Codeに渡して「進めてください」と伝えたところから始まった。

1回目で、企画書の5段階をまとめて実装し、約2,760行の遊べる形ができた。そこから先は、遊んで気になったことを一言で伝え、その場で直してもらう繰り返しだった。

「BGMうるさいね？？？」は、仕様書としては一行にも満たない。それでも、遊んでいる本人の感覚がいちばん正しい。音量だけでなく、ピコピコした音を柔らかい音に変え、設定で選べるようにするところまで、この一言から広がった。

技術的に効いたこと

絵は画像ファイルにしない

• ドット絵は、文字で書いた小さな地図と色の表をJavaScriptの中に持たせ、それを描いている。職種ごとに髪や服の色、小物（ヘッドホン、ネクタイ、ヘルメット）を差し替えて量産した
• 制作中の効果音とBGMは、ブラウザのWeb Audio APIでその場で音を合成していた。音のファイルが読めないときは、今もこの合成音で鳴る
• 外から読み込むのは、3D表示のライブラリthree.jsとフォントだけだ

3Dなのにドット絵に見せる

斜めから見下ろすクォータービューは、遠近感のないカメラで決まった角度から映している。画面の半分の解像度で描いて拡大し、ドットがにじまないようにした。社員は2Dのドット絵のまま、いつもカメラのほうを向く板として3Dの部屋に置いている。

読み込めなくても遊べる保険

three.jsはネットから読み込むため、読み込めないときは元の2D表示に自動で切り替わる。読み込み先をわざと壊して、切り替わることも確かめてある。

途中で「ライブラリは使わない」という企画書の方針を変えて3Dにしたが、ゲームの中身と描画を最初から分けていたので、ゲームの計算には手を入れずに描画だけ差し替えられた。AIに作ってもらうときも、この分け方を最初に決めておくと後が楽になる。

画面を自動で操作して確かめる

確認は、ブラウザを自動で操作するツール（Playwright）で、実際の画面を開いてスクリーンショットを撮りながら行った。画面幅ごとの見た目、オフィスの5段階、3Dが読み込めないときの切り替わり、何もしない放置を3時間ぶんシミュレーションしたときの進み具合まで見ている。

見つかった不具合には、こんなものがあった。

• 初期名の「しゃちょう」に敬称を重ねて「しゃちょうしゃちょう、おかえりなさい！」になっていた
• モニターが机から少し浮いていた
• 幅1024pxでだけ、上のボタンが2段に崩れた

どれも、実際に画面を見ないと気づかない種類のものだ。AIに作ってもらうなら、AIにも画面を見せて確かめさせるのが効く。

公開にあたって足したこと

誰でも遊べるように公開するにあたり、次の点を足した。

• 題名を「納品マスター」から「Web屋一代記」に変えた。1980年から2026年まで、ひとりのWeb屋が会社を育てる話だと、題名だけで伝わるようにした
• 合成音のBGMと効果音が単調だったので、時代ごとに曲を割り当てた。1980年代はチップチューン、90年代前半はFM音源風、90年代後半は明るいエレクトロ、2000年代はチルアウト、2010年代はポップ、2020年代はローファイ。時代が変わると曲も切り替わる
• タイトル画面とメニューに「あそびかた」を追加
• タイトル画面の下に、この記事へのリンク
• SNSで共有したときに出る説明文と画像の設定

曲と効果音は、OpenGameArt.orgとKenneyで公開されているCC0（権利を放棄した素材）から選んだ。一つずつ配布ページでライセンスを確かめ、作者の名前はゲームの「あそびかた」に載せている。

また、公開前に歴史のできごと35件の年と内容を確かめ直した。ゲームでも、事実として書くものは確かなものだけにしている。

ふりかえり

• 企画書があると速い。最初の1回で、遊べる完成形まで一気に進んだ
• 素直な感想が、いちばんの仕様書。「うるさい」「面白くない」が、そのまま改善点になった
• 途中で方針を変えてもいい。中身と見た目を分けておけば、影響は小さい
• 学びはゲームの進行に溶かす。年表を別ページにせず、売上を時間の流れにしたことで、遊ぶほど歴史が進む

Web業界で長く働いてきた人には、ブラウン管や「工事中」の縞模様が懐かしいはずだ。若い人には、自分が使っている道具がどこから来たのかを知るきっかけになればうれしい。

▶ Web屋一代記で遊ぶ

仕組みの詳しい話は技術編にまとめた。

出典

• Claude Code ドキュメント「概要」（制作に使ったAIのコーディングツール）
• three.js ドキュメント（3D表示に使用。0.160.0）
• MDN「ウェブオーディオ API」（効果音とBGMの生成）
• MDN「Window: localStorage プロパティ」（セーブの保存先）
• OpenGameArt.org（BGM。Joth、Juhani Junkala、Spring Spring、Holizna、omfgdude、qubodupの各作品。いずれもCC0）
• Kenney「Interface Sounds」ほか（効果音。CC0）

本記事は制作者の作業記録に基づく。ゲームは無料で、セーブはお使いのブラウザにだけ保存される。ブラウザのデータを消すとセーブも消えるので、続けたいときは設定のエクスポートで控えを取っておくとよい。