Claude Codeに「会社」を作らせる——3D仮想オフィスの作り方【技術編】
※本記事にはプロモーションが含まれます。
先日、コードが書けない私がClaude Codeと「3D仮想オフィス」を作りきった話を書きました。今回はその姉妹編、「で、実際どう進めればいいの?」に答える技術編です。
といっても、コードの解説はほぼ出てきません。私自身がコードを書けないからです。この記事で解説するのは、「AIへの頼み方」と「進め方の設計」です。作り始めても途中で飽きて放り出すタイプの人間が、それでも完成まで行けたのは、頼み方と区切り方に仕組みがあったからでした。同じ手順をなぞれば、3Dオフィスに限らず「ちょっと大きめの作りたいもの」を完成まで運べるはずです。
📌 【公開前に対応】TODO: スクショ: 3Dオフィスの実画面
先に結論:進め方は5ステップ
- 雑な一言で始める(仕様書は書かない)
- まず「動く最小版」を出させる(完成度は問わない)
- 見て、日本語で文句を言う(これが開発の9割)
- 1回に頼むのは1機能だけ(大きく頼むと壊れる)
- 飽きる前に区切る(毎回「動く状態」で終える)
ポイントは、技術力ではなく「1回のセッションで完璧を目指さない」という設計思想です。順に見ていきます。
準備:必要なのはClaude Codeだけ
使うのはClaude Codeのみです。3D表示のライブラリ(私の場合はThree.jsが選ばれました)も、ローカルで動かすサーバーも、すべてClaude Codeが自分で選んで自分でセットアップします。人間側に3Dの知識は要りません。
Claude Codeのインストールがまだの方は、こちらの手順からどうぞ。10分程度で終わります。
利用にはAnthropicの有料プランが必要です。個人で試すならいちばん安いProプランで十分でした。
あとは作業用フォルダを作って起動するだけです。
mkdir my-office
cd my-office
claudeSTEP 1:最初の指示は「雑な一言」でいい
私が実際に投げた最初の指示は、これだけです。
3Dの仮想オフィスを作りたい。ブラウザで見られて、
オフィスの中にAI社員がいて働いている感じにしたい。仕様書もワイヤーフレームもありません。それでもClaude Codeは技術選定(3D表示の仕組み、サーバー構成)を勝手に決めて、動く第一版を作ってきました。
ここで大事なのは、最初に細かく決めようとしないことです。段取りを組むのが苦手な人ほど「ちゃんと計画してから」と考えて、計画の段階で力尽きます。でもAI相手の開発では、計画はあとから会話で修正できます。雑に始めることが、正しい始め方です。
最初の指示に入れるとよい要素
- 何を作りたいか(一文でOK)
- どこで動いてほしいか(「ブラウザで見られる」など)
- どんな雰囲気か(「〜な感じ」で十分)
逆に、使う技術・ファイル構成・デザインの詳細は書かなくて大丈夫です。分からないことを無理に書くと、かえって変な制約になります。
STEP 2:「動く最小版」をまず出させる
最初の指示のあと、私が意識していたのはひとつだけです。とにかく先に「ブラウザで開いたら何かが表示される」状態を作らせる。見た目がしょぼくても、社員が箱でも構いません。
もし最初の出力が大きくなりすぎそうなら、こう付け足します。
まずは最小限でいい。床と机がいくつかあって、
ブラウザで開けたら成功。細かい作り込みは後でやる。この「最小版ファースト」には、飽きっぽい人にとって決定的な意味があります。動くものが目の前にあると、次をやる気になるんです。完成予想図を眺めてもやる気は出ませんが、動く画面は触りたくなる。モチベーションを意志で作るのではなく、成果物に作らせる構造です。
STEP 3:開発の9割は「見る→文句を言う」
最小版が動いたら、あとはブラウザで見て、気になったところを日本語で言うだけです。私が実際に投げていたのは、この程度の言葉です。
- 机の配置が不自然。島型に並べて
- 社員がずっと止まってる。たまに歩き回るようにして
- 部署ごとに名前と役割を持たせたい専門用語はゼロ。「不自然」「〜な感じにして」で通じます。エラーで画面が真っ白になったら、表示された赤い文字をそのままコピペして「これ直して」。エラーの意味を理解する必要はありません。解決するのもAIの仕事です。
文句の言い方のコツ
- 1メッセージ1つの不満にする(まとめて言うと修正が雑になる)
- 「なぜ変か」を説明できなくても、「変」とだけ言えばいい(原因の特定はAIがやる)
- 直ったらすぐ次へ。感想を書く時間で次の指示を書く
STEP 4:1回に頼むのは1機能だけ
正直に書くと、順調な話ばかりではありません。一発では絶対に動かないし、エラーと修正の往復は普通に発生します。そして経験上、いちばん壊れやすいのは大きな機能を一度に頼んだときでした。
「社員に役割を持たせて、チャットで話しかけられて、仕事の成果物も出せるようにして」——こういう欲張った指示は、途中まで動いて途中から全部おかしくなる、という最悪の形で返ってきがちです。
対策はシンプルで、「動く小さい単位」に割って頼むこと。上の例なら「まず社員に名前を付ける」「次に部署の部屋を作る」「次にクリックしたら反応するようにする」と分けます。自分で分けられなければ、分けるところから頼めばいい。
この機能を追加したい: (やりたいこと)
一度に作ると壊れそうなので、動作確認できる小さいステップに
分けて、1つずつ進めて。各ステップが終わったら私が確認する。これは行き当たりばったりに見えて、実は段取りが苦手な人間の段取りをAIに外注しているということです。工程分解こそAIに任せるべき仕事です。
STEP 5:飽きる前に区切る——「動く状態」で終える
ここがこの記事でいちばん伝えたいところです。飽きて放り出した過去のプロジェクトを思い返すと、放り出したタイミングは決まって「中途半端に壊れている状態」でした。壊れたまま置いたものは、再開のハードルが高すぎて二度と触らなくなります。
だから3Dオフィスでは、ルールをひとつだけ決めていました。
「セッションを終えるときは、必ずブラウザで動く状態にしてから終える」
疲れてきたら、新機能に手を出さずにこう言って締めます。
今日はここまでにする。いま動いている状態を壊さないように
まとめて。次にやりたいことをメモとして残しておいて。こうしておくと、数日サボっても「開けば動くもの」と「次やることメモ」が待っています。再開が「壊れた原因の調査」ではなく「メモの一番上をやる」から始まる。継続できたのではなく、再開しやすい形で中断し続けた——完成までの実態はこちらでした。
形になると、「開発」が「経営」になる
この進め方でオフィスが形になってくると、面白い変化が起きます。欲しくなるものが機能ではなく「社員にさせる仕事」に変わるんです。
私の場合は「プレゼン資料を作る部署を作って」と頼んだところ、依頼を投げると発表資料のHTMLスライドを納品してくる部署ができました。この段階まで来ると、3Dオフィスは飾りではなくAIに仕事を振るためのインターフェースになります。ここから先の広げ方は自由です。作り方は同じ——雑に頼んで、動く最小版を出させて、文句を言って、小さく足す。この繰り返しです。
まとめ:完成させる技術は、頼み方と区切り方
- 最初の指示は雑な一言でいい。技術選定はAIの仕事
- まず動く最小版。動くものがやる気を作ってくれる
- 開発の9割は見て文句を言うこと。エラーはコピペで渡す
- 頼むのは1回1機能。工程分解もAIに外注する
- 飽きる前に、動く状態で区切る。継続ではなく「再開しやすい中断」を積む
「1回のセッションで完璧を目指さない」——これは開発テクニックであると同時に、続かない自分と付き合うための設計でもあります。意志で完成させるのではなく、完成に向かう構造を作る。Claude Codeは、その構造をいちばん安く試せる相棒です。
この3Dオフィスがどんな経緯で生まれたか、できなかったことも含めた実録はこちらです。
→ 飽き性でコードも書けない私が、Claude Codeと「3D仮想オフィス」を作りきれた話
まだClaude Codeを触ったことがない方は、セットアップから始めましょう。
【免責事項】当サイトは医療情報を提供するものではありません。診断・治療に関する判断は医療機関にご相談ください。また、当サイトはアフィリエイトプログラムを利用しており、記事内のリンク経由で商品・サービスに申し込みがあった場合、運営者が報酬を受け取ることがあります。掲載情報は執筆時点のものです。最新の情報は各公式サイトをご確認ください。
