結婚式の招待状が、10部屋のブラウザゲームになった
海外の開発者コミュニティに、少し変わった投稿があった。自分たちの結婚式のWebサイトを作ろうとした人が、楽しいものにしたいと思っているうちに、気づけば10部屋を歩き回るブラウザゲームを作り上げてしまった、という話だ。作品の名前はLoft Day。パーティーの場面があり、ロードトリップ（車での旅行）の場面があり、そこら中に小さなゲームや仕掛けが隠されている。ポイント&クリックゲームというジャンルで、画面の中の物をクリックして探索し、少しずつ話が進んでいく形式のものだ。
普通なら、結婚式の招待ページは日時と会場と地図を載せて終わる。テンプレートを買ってきて写真を差し替えれば1日で終わる仕事でもある。ところがこの人は、招待状という日常的な用件を、訪れた人が思わず時間を忘れる体験へ作り替えた。しかも本業のプロダクトとしてではなく、私生活の1回きりのイベントのために。
私がこの話に注目したのは、作品の派手さではない。個人が私的な用事のために、かつては制作会社に数百万円を払わなければ実現できなかった規模のものを、1ヶ月で作り切ってしまったという事実のほうだ。これは趣味人の武勇伝ではなく、仕事の作り方が変わったことを示す一例として読める。中小企業の販促物、士業の説明資料、店舗の採用ページ、そういった日々の制作物すべてに関わる変化だ。この記事では、その中身を非エンジニアの目線で分解していく。
8.8MBのHTMLファイル1枚、という作り方
技術的な中身を、専門用語を外して説明する。この作品のほとんどは、8.8MBのHTMLファイル1つに収まっている。HTMLとは、Webページの中身を書くための最も基本的な文書形式のことだ。行数にすると約13万8千行。フレームワークもビルド作業も使っていない、と作者は書いている。フレームワークとは、Webアプリを効率よく作るための土台となる道具一式のことで、ReactやNext.jsといった名前で呼ばれるものだ。ビルド作業とは、書いたコードをブラウザが読める形に変換して配置する下ごしらえの工程を指す。
つまり、開発の世界で普通は必須とされる準備工程を、まるごと省いている。ファイルをダブルクリックすればブラウザで開き、それがそのまま完成品として動く。中にはPyodide（ブラウザの中でPythonという言語を動かす仕組み）や、v86（ブラウザの中で簡易的なLinuxを動かす仕組み）まで組み込まれていて、ゲームの中でさらに別のコンピューターが動いているような構造になっている。
ここで大事なのは、この作り方が正統派かどうかではない。実際、開発者の間でも8.8MBのHTMLファイルというのは常識外れで、表示速度や保守のしやすさでは推奨される作り方ではない。それでも成立している理由は明快で、目的が結婚式という1回きりのイベントであり、長期保守も大人数の分業も必要なかったからだ。目的に対して最短で動くものを選んだ結果、業界の標準的な手順を丸ごと飛ばせた。これは非エンジニアが仕事で何かを作るときの状況と、実はよく似ている。
1ヶ月で5,700回。作り方そのものが変わっている
作者はこう書いている。約1ヶ月、5,700回のコミットで開発した。ClaudeやCodexと一緒に作業しながら、自分は方向を指示し、動作を確かめ、何度も考えを変えた、と。コミットとは、変更を記録として保存する操作のことで、開発の一区切りを意味する単位だ。
数字を割ってみると、1ヶ月で5,700回は、1日あたり190回だ。仮に1日10時間作業したとして、1時間に19回。3分に1回、何かを直して保存している計算になる。従来の人力の開発では、この密度はまず出ない。コードを1行書くのに考える時間があり、動かして確かめる時間があり、うまくいかなければ調べる時間がある。3分に1回の変更が成立するのは、書く作業をAIに任せ、人間が判断と確認に専念しているからだ。
ここに、今の作り方の本質がある。作者の役割は、コードを書く人ではなく、方向を決める人、動作を試す人、そして何度も考えを変える人だった。最後の何度も考えを変えたという一言が特に重要だと私は思う。従来の制作では、途中で考えを変えることは罪だった。仕様変更は費用と工期に跳ね返り、制作会社との関係を悪くし、だからこそ最初に完璧な要件定義をしろと言われ続けてきた。ところがAIを相棒にすると、考えを変えるコストが劇的に下がる。試して違うと感じたら、その場で言い直せばいい。
要件を固めてから作るのではなく、作りながら要件を見つける進め方が、現実的な選択肢になった。これは非エンジニアにとって朗報だ。なぜなら非エンジニアが最も苦手とするのは、作る前に完璧な仕様書を書くことだからだ。頭の中にある漠然としたイメージを、実物を見ながら少しずつ形にしていく。この進め方が許されるなら、専門知識がなくても参加できる。
非エンジニアにとって、この話の何が重要か
ここまで読んで、うちは結婚式のゲームなんて作らない、と思われたかもしれない。当然だ。だからこの話から抜き出すべきは、作られた物ではなく、成立した条件のほうだ。
条件は3つある。1つ目は、目的が明確で小さかったこと。結婚式に来る人に楽しんでもらう、それだけだ。2つ目は、作者が完成形を最初から知らなかったこと。招待ページのつもりが、作っているうちにゲームになった。3つ目は、判断する人と作る人が同一だったこと。間に見積もりも承認も打ち合わせも入っていない。
この3つが揃うと、制作のスピードは桁違いになる。そして中小企業や個人事業の現場は、実はこの3条件を最も満たしやすい場所だ。従業員10人の会社なら、社長が思いついたことを社長が判断して社長が試せる。大企業のように、企画書を書いて上長の承認を取り、情報システム部門と調整し、外注先に発注する必要がない。
一方で、これまでは3つ目の条件だけが決定的に欠けていた。判断する人が作れなかったからだ。社長にアイデアがあっても、実物にするには誰かに頼むしかなく、頼んだ瞬間に見積もりと納期と伝言ゲームが発生した。AIが作る作業を引き受けたことで、非エンジニアの経営者や担当者が、判断と制作を1人の中で完結できるようになった。これがこの話の一番の意味だ。技術が身近になった、という話ではない。意思決定者が自分の手で試作できるようになった、という組織の話なのだ。
業種別に考える、明日からの使いどころ
抽象論で終わらせないために、具体的な場面を3つ挙げる。いずれも、1つのHTMLファイルとして作り、メールに添付したりUSBに入れて渡したりできるものだ。サーバーもドメインも契約せずに済むのが、この形式の最大の利点になる。
不動産会社の内見前オンライン案内
従業員15人の地域密着型の不動産会社を想像してほしい。物件の内見は移動時間が長く、案内した5件のうち成約するのは1件という日も珍しくない。ここで、事前に候補物件を体験できる1ファイルのページを作る。間取り図をクリックすると各部屋の写真と説明が出て、駅からの道のりを写真で辿れて、周辺のスーパーや小学校までの徒歩時間が表示される。凝ったシステムではなく、写真と説明文をクリックで切り替えるだけの仕組みでいい。これを内見予約の確認メールに添付して送る。お客様は空き時間に眺め、当日は本当に見たい2件に絞って来てくれる。営業担当の移動時間が減り、成約率は上がる。作るのに必要なのは、すでに持っている物件写真と、営業担当が毎回口頭で説明している内容の文字起こしだけだ。
社会保険労務士事務所の就業規則説明ツール
所長を含めて4人の社労士事務所を想像する。顧問先に就業規則の改定を説明するとき、毎回30ページの資料をめくりながら1時間話している。この説明を、質問に答えていくと自社に関係する箇所だけが表示される1ファイルの資料に作り替える。従業員数を選び、業種を選び、パートタイムの有無を選ぶと、その会社が対応すべき改定点だけが順番に出てくる。各項目には、対応しなかった場合に何が起きるかを2行で添えておく。顧問先に事前に渡しておけば、面談では相手が引っかかった箇所から話を始められる。説明の時間は半分になり、しかも顧問先の理解度は上がる。士業にとって、説明の質を落とさずに時間を減らせる道具は、そのまま単価の改善になる。
飲食チェーンの新人向け作業手順書
10店舗を展開する飲食チェーンの本部を想像する。アルバイトの入れ替わりが激しく、新人教育は各店の店長の負担になっている。紙のマニュアルは分厚くて誰も読まないし、動画は撮影と編集の手間が重い。そこで、開店準備、ランチ営業、閉店作業といった時間帯ごとに、やることをクリックで辿れる1ファイルの手順書を作る。各作業には写真1枚と、やってはいけないことを1行だけ添える。冷蔵庫の温度確認のように毎日必要な項目にはチェックを付けられるようにし、その日の分が終わったかどうかを画面で確認できるようにする。タブレットに入れて店に置けば、通信環境も社内システムも不要だ。店長が同じ説明を何度も繰り返す時間が消え、教育の質が店舗ごとにばらつく問題も減る。
共通しているのは、どれも新しい事業ではなく、すでに毎日やっている説明や案内を、渡せる形に置き換えているだけという点だ。ゼロから何かを発明する必要はない。
今日から試せる進め方
実際の手順を書く。特別な環境構築は要らない。Claudeのチャット画面かClaude Codeがあれば足りる。
まず、題材を1つ選ぶ。選ぶ基準は、自分が今月3回以上同じ説明をしたかどうかだ。3回説明したなら、それは仕組みにする価値がある。逆に年1回しか使わないものは、今回は選ばない。
次に、目的を1行で書く。誰が、いつ見て、その後どう行動してほしいのか。たとえば、内見予約をした見込み客が、来店前日に見て、当日見たい物件を2件に絞ってくれる状態、といった具合だ。この1行が曖昧なままだと、AIに何を作らせても的外れなものが出てくる。逆にここさえ決まっていれば、多少雑な指示でも実用的なものが出てくる。
その上で、次のように依頼する。
1つのHTMLファイルだけで完結する資料を作ってください。
外部のライブラリやCDNは使わず、ファイルを開くだけで動くようにしてください。
用途: 内見予約をしたお客様が前日に見て、当日見たい物件を絞れるようにする
中身: 物件3件を切り替えて、間取り・写真・駅からの徒歩時間を見られるようにする
スマートフォンでも読みやすいレイアウトにしてください。
出てきたファイルを保存し、ダブルクリックしてブラウザで開く。ここからが本番だ。実物を見ると必ず違和感が出る。文字が小さい、写真の順番が違う、この情報は要らない。それを一つずつ言葉にして直させる。作者が5,700回やったことを、規模を小さくして再現するわけだ。10回か20回直せば、社内で見せられる水準になる。
最後に、関係者3人に見せる。作った本人には見えない欠陥が必ずある。特に、想定した相手に近い人に触ってもらうと、こちらが説明なしでは伝わらないと思っていた箇所が案外伝わっていたり、当然分かるはずと思っていた操作で手が止まったりする。完璧に仕上げてから見せるのではなく、7割の段階で人に触らせるほうが、結果的に早く良いものになる。
注意点とよくある誤解
期待だけを書くのは不誠実なので、限界も明記する。
第一に、8.8MBのHTMLファイルという作り方は、一般的な業務システムには向かない。今回の作品が成立したのは、1回きりのイベント用で、他の人が引き継いで保守する必要がなく、顧客情報を扱わないからだ。売上データや顧客名簿を扱うもの、複数人が同時に書き換えるもの、何年も使い続けるものは、きちんとした設計と作りが要る。試作を自分で作ることと、基幹業務を自分で作ることはまったく別の話だ。
第二に、個人情報や機密情報の扱いには線を引く。HTMLファイルの中に顧客リストを埋め込むと、そのファイルを受け取った人は中身をすべて見られる。ブラウザでソースを表示すれば全部読めるからだ。だから、社外に配るファイルには、公開してよい情報だけを入れる。逆に社内のタブレットに置くだけなら、その心配は小さくなる。この線引きさえ守れば、日常の説明資料や販促物の大半は安全に作れる。
第三に、1ヶ月で作ったという数字を、自分も1ヶ月でできると読まないでほしい。作者は元々ソフトウェアの世界で長く仕事をしてきた人だ。AIが書いたコードのどこがおかしいか、瞬時に判断できる。非エンジニアが同じことをやると、判断できないぶん時間がかかるし、そもそも同じ規模のものは作れない。ただ、規模を10分の1にすれば話は別だ。10部屋のゲームではなく、3画面の説明資料。13万行ではなく、数百行。それなら非エンジニアでも週末2日で形になる。
第四に、AIが作ったから中身を確認しなくていい、という誤解が一番危ない。特に、金額の計算、法令に関する記述、日付の処理は、AIが自信満々に間違える領域だ。士業の説明ツールを作るなら、表示される内容が現行の法令と合っているかを人間が必ず突き合わせる。この確認工程を省いた瞬間、便利な道具が信用を失う原因に変わる。AIに任せるのは手を動かす部分だけで、正しいかどうかの責任は最後まで人間が持つ。この原則は、どれだけAIが賢くなっても変わらない。
まとめ
結婚式の招待状がブラウザゲームになった。8.8MBのHTMLファイル1枚に、13万8千行が詰め込まれ、1ヶ月と5,700回の修正で完成した。作者がやったのは、方向を示し、動作を確かめ、何度も考えを変えることだった。
この話が示しているのは、作る技術の希少性が下がり、何を作るか決める力と、違和感を言語化して直し続ける力の価値が上がったということだ。そしてその2つは、非エンジニアの経営者や現場担当者がもともと持っている力でもある。毎日どんな説明を繰り返しているか、どこでお客様がつまずくか、何が現場の負担になっているか。それを知っているのは、外部の制作会社ではなく、現場にいる人のほうだ。
だから最初の一歩は、技術を学ぶことではない。今月3回以上説明したことを1つ思い出して、それを渡せる形にしてみることだ。うまくいかなければ捨てればいい。失うのは週末の数時間で、うまくいけば、その後の何百時間かが返ってくる。
Claude Worksでは、非エンジニアの方が自社の業務でClaudeをどう使えるかを一緒に整理する無料30分相談を行っています。何から手をつければいいか分からない段階でも構いません。お気軽にご相談ください。
