お手軽チュートリアル:AI に世界をまるごと作ってもらう
前のチュートリアルでは、各項目を自分の手で埋めました。今回は同じ作業を AIアシスタントに任せます。
作るのは同じゲーム、「The Imposters」 です。終末ホラーサバイバルで、ドアの向こうが人間か怪物かを見極め、14 夜を生き延びます。今回は AIアシスタントが組み立てます。
AIアシスタントとは?
AIアシスタント は、キャンバスに組み込まれた AI です。カードを直接編集します。「生命の変数を追加して」と普通の言葉で頼めば、その変数がキャンバスに現れます。
流れはこうです。
- 欲しいものを説明する
- アシスタントが変更を加え、その様子がキャンバスにそのまま映る
- 1 回分の作業が終わるたびに、キャンバスの下に アシスタントの直前のターン というバーが出て、追加・変更・削除がいくつあったかが表示される
- 気に入らなければ このターンを取り消す でその回をまとめて取り消すか、直してほしいところを伝える
カードを変える前にはチェックポイントも保存されるので、⋮ → 変更履歴 から元に戻せます ∠( ᐛ 」∠)_
ステップ 1:世界を作って、アシスタントを開く
ここはまだ自分で操作します。
- 左の 作成 を押す
- 空のプロジェクト を選び、キャンバス を選ぶ
- 左上の名前欄に名前を入れる:
The Imposters - 上部バーの 2 段目、右側にある AIアシスタント を押す
右側にアシスタントとのチャットが開きます。ここから先は、ここがおもな作業場所です。
ステップ 2:AI に欲しいものを伝える
新しい会話は 構想 から始まり、カードを変更せずに相談できます。提案された範囲を確認して 制作を始める で実行するか、構想を続ける で相談を続けます。このチュートリアルでは、入力欄の下で 制作 に切り替え、すぐにカードを編集することもできます。
ゲームの構想を一度にまとめて送りましょう。詳しく書くほど、出来上がりも良くなります。
まずはこれをコピーして貼り付けてください。
《No, I'm not a Human》に似た終末ホラーサバイバルゲームを作って。
設定:終末が始まった。街は「訪問者」—— 人間そっくりの存在 —— に
埋め尽くされている。プレイヤーは家に一人、毎晩誰かがノックしに来る。
プレイヤーは来訪者が人間か怪物かを判断し、ドアを開けるか決める。
ゲームルール:
- ゲームは14日間(14夜)続く
- 夜:毎晩2〜3人の訪問者、プレイヤーはのぞき穴観察とドア越しの会話で判断
- 昼:部屋を自由に探索し、道具を使う
- 訪問者の特徴:不自然に均一な歯、異常な瞳孔、奇妙な肌の質感
- 人間の特徴:正常な欠点 —— 虫歯、くま、傷跡
必要な変数:
- player_hp(生命、0–5、デフォルト3):訪問者に攻撃されたら -1;蒼白の見知らぬ者が入ったらゼロに
- energy_current(体力、0–8、デフォルト3):身体検査と発砲は各1ポイント消費;のぞき穴観察と会話は無料;昼間に上限まで回復
- game_day(日数、1–14):昼夜サイクルが1つ完了するごとに1増やす
- game_phase(フェーズ):"Night" または "Day"
- player_has_gun(武装しているか、デフォルト true):発砲は体力を1消費
システム設定エントリ、開始メッセージ、そしてキーワードトリガーのロアブックエントリ
(ノックイベント、のぞき穴観察、部屋探索)を書いて。
さらに、外側の `<Chat renderBubble={(msg) => ...} />` シェルを保ったまま
バブルをカスタマイズする CRT モニター風のルートコンポーネント(`index.tsx`)も作って:
- 昼夜フェーズ見出し(AI の返信から「🌑 **第 X 夜**」または「☀️ **第 X 日**」を抽出し、CRT の
緑の発光 / 琥珀色の見出しに走査線エフェクト付きで描画)
- ノックアニメーション(***三つのアスタリスクの文字*** を抽出し、赤い揺れる大文字で描画)
- クリック可能な選択肢ボタン(「選択肢:」の後の A/B/C/D/E を抽出、クリックで自動送信)
- 下部 HUD ステータスバー(等幅フォント、体力/生命/武装状態を表示)
- 全体は黒緑の終末美学ステップ 3:作業を見守る
アシスタントが作業を始めます。何をしているかはチャットに表示され、書いた設定、変数、ビヘイビアは、できたそばからキャンバスに現れます。
大きな作業のときは、まずおおよその所要時間と費用を伝えて、あなたが始めるのを待ちます。アシスタントを使うとマッシーを消費します。
裏でも作業を続けます
依頼を送ったら、エディターを離れても、別のカードを作業していてもかまいません。終わったとき、あなたの判断が必要なとき、止まったときには、アプリにお知らせが出ます。クリックすると戻れます。
気に入らないときは?
おかしなところがあれば(変数の初期値が違うなど)、何を直すかアシスタントに伝えます。「health の初期値は 50 じゃなくて 100 にして」。1 回分の作業をまるごと捨てたいときは このターンを取り消す を押してください。
ステップ 4:確認して微調整する
アシスタントが終わったら、キャンバスで出来上がったものを見てみましょう。
- キャラクターと世界 と キーワードロア:設定は合っているか、キーワードのエントリは足りているか
- 変数:型、初期値、範囲、ビヘイビアルールは妥当か
- オープニング:オープニングの雰囲気は合っているか
- プレイヤー画面(上部バーの中央):インターフェースは思い描いたとおりか
パネル → 全ページのリスト を開くと、設定、変数、ビヘイビアが 1 ページに表で並びます。たくさんまとめて確認するときはこちらが早いです。
直したいところがあれば、方法はふたつです。
- 会話を続ける:アシスタントに「オープニングを短くして」「ヘルスバーの色を暗い赤に」と伝える
- 直接編集する:キャンバスの行をクリックして自分で書き換える。手動のチュートリアルと同じです
一部だけを直したいときは、先にキャンバスでその部分を選んでから(Ctrl + クリックで複数選べます)アシスタントに話しかけます。選んだものに絞って作業してくれます。
最後に、キャンバス右側の カバーと紹介 を押し、カードの設定 でカバー、説明、言語を入れます。
ステップ 5:テストして公開する
上部バー右の プレイ を押します。チェックリストは手動のチュートリアルと同じです。
| 確認項目 | 確かめ方 |
|---|---|
| オープニングが出る | 入ったときに最初のメッセージが自動で出る |
| ステータスパネル | 体力、生命、武装状態の HUD が見える |
| 値が変わる | 操作のあと変数が変わる。理由は このターン → それぞれの数値 に出る |
| キーワードロアが発動する | 「のぞき穴」と言うと AI がそのルールに従う |
テスト中に問題を見つけたら、アシスタントに伝えます。「テストしたら生命がまったく減らなかった。health 変数のビヘイビアルールを確認してくれる?」アシスタントは自分でプレイテストして、何が起きたかを読むこともできます。
テストが通ったら、右上の 未公開 を押してチェックリストを確認し、公開する を押します。ダイアログでタグを付け、コンテンツモード(制限あり か 無制限)と公開範囲を設定して公開します。
アシスタントとうまく作業するコツ
1. 最初のメッセージはできるだけ詳しく
アシスタントに伝わっている情報が多いほど、直す回数は減ります。最初のメッセージには、できればこんなことを入れましょう。
- ゲームのジャンルと中心になる遊び方
- 必要な変数と、それぞれの意味
- スタイルと雰囲気
- どんな UI が欲しいか
2. 一度で仕上げようとせず、少しずつ進める
世界が複雑なら、全部を 1 つのメッセージに詰め込まず、分けて頼みましょう。
ラウンド1:「ホラーサバイバルゲームを作って —— まずシステム設定、変数、開始メッセージから」
→ 確認
ラウンド2:「次にロアブックエントリを追加:ノックイベント、のぞき穴観察、部屋探索」
→ 確認
ラウンド3:「最後に、ダークホラー風でルートコンポーネントの UI を書き直し、生命と日数を表示」
→ 確認3. 具体的に伝える
❌ 「UI がいまいち」:AI にはどこが悪いのか分かりません ✅ 「ヘルスバーが細すぎるから高さを倍に。背景が明るすぎるから真っ黒 #000 に」:何を直せばいいかがはっきり分かります
4. こまめにインターフェースを確認する
アシスタントが index.tsx を変えたら、上部バー中央の プレイヤー画面 を押して結果を見ます。違っていたら会話を続けましょう。
5. 付箋を貼っておく
一度に説明しきれないほどアイデアがあるときは、キャンバスに付箋として貼っておき、アシスタントに「付箋のとおりに全部やって」と頼みます。アシスタントは付箋をすべて読み、それぞれが何に貼られているかも分かっています。
手動とアシスタントの比較
| 手動チュートリアル | アシスタントのチュートリアル | |
|---|---|---|
| 所要時間 | 30〜60 分 | 5〜15 分 |
| 身につくこと | 各項目の意味と使い方 | AI とうまく作業する方法 |
| 向いている人 | エンジンを深く理解したい人 | 早く仕上げたい人 |
| 自分で決められる範囲 | 細部まですべて | 大半は AI が作り、あなたが微調整 |
おすすめの進め方
まず手動のチュートリアルを一度やって、エンジンの中心になる考え方をつかみましょう。そのあとでアシスタントを使うと、何をしているかが分かるぶん、指示も出しやすく、間違いにも気づきやすくなります。
次のステップ
- 特定の機能を深く知りたいなら、優れたエントリの書き方、ゲーム状態の設計、ビヘイビアと自動化 から始めてください
- 機能を組み合わせた例を見たいなら、レシピのページ に実例があります
- 世界の見た目を良くしたいなら、カスタムUIガイド を見てください
- 自分の Claude、ChatGPT、Cursor を使いたいなら、自分の AI をつなぐ を見てください
