メインコンテンツまでスキップ

Vibe Coding

Vibe Coding は、自然言語プロンプトと既製テンプレートを使って、従来のコードを書かずにインタラクティブな機能やロジックを作成する方法です。

TL;DR​

  • アクションサブメニューまたはサイドパネルから Vibes を開きます。
  • テンプレート（Templates / Community / Yours）を選んで Space に追加します。
  • Vibe Prompt UI で作りたい内容を自然言語で説明し、挙動を生成します。
  • 生成されたパラメータを調整し、 で Save as New または Save to Parent を実行します。
  • 完成したテンプレートは Yours から Community に公開できます。

Vibe メニューを開く​

アクションボタンから Vibe を開く
サイドパネルから Vibe を開く

新しい Vibe UI を開く、または新しい Vibe を追加するには、次の 2 つの方法があります。

  1. アクションサブメニュー 1 → Vibe 2
  2. サイドパネル → Vibes 3

どちらの場合もサイドパネルが自動で開き、Vibe の作成や管理を行えます。

Vibe メニュー概要​

Vibe メニュー概要

パネル上部には検索バーがあります。現在アクティブなタブ内の Vibe を検索でき、タイトルで絞り込みます。1

Vibe テンプレートメニューは現在 3 つのカテゴリに分かれています 2:

  1. Templates
    Arrival.Space チームが作成した定義済み機能
  2. Community
    他のクリエイターが作成・共有した機能
  3. Yours
    自分で保存・カスタマイズした機能

これらのテンプレート 3 は Space に追加でき、特定機能の利用、既存ロジックの拡張、独自挙動の土台として使えます。

Vibe UI を編集​

Vibe UI を編集

Source Code 1
Source Code には Vibe の中核機能が含まれます。
編集 、ダウンロード 、置き換え が可能です。

ヒント

Source Code の直接編集は JavaScript に慣れている場合にのみ推奨します。そうでない場合、変更がエラーにつながりやすくなります。

Prompt Vibe > 2
Prompt Vibe UI では Vibe Prompt UI を開けます。ここで作成したい機能を自然言語で説明できます。 アイコンをクリックしても同じ画面が開きます。

アイコンで Vibe をテンプレートとして保存できます。

Parameters 3
各 Vibe のパラメータは機能によって異なります。提供する挙動に応じて追加されます。

Vibe Prompt UI で、どのパラメータを公開・置換・変更するかを明示的に指定できます。説明した機能に基づいて自動生成される場合もあります。

入力オプション使う場面「Vibe Coding」での一般的な呼び方
Input Field短い 1 行入力（例: 名前、タイトル、URL、数値）Text Input / Single-Line Input
Textarea長文入力（例: 説明、メモ）Multiline Input
Toggleオン/オフや真偽値設定Toggle / Switch
Upload Fieldファイルアップロードが必要な場合（例: 画像、メッシュモデル）File Upload / Media Upload
Drop-down Menu定義済み選択肢から選ぶ場合Select / Dropdown
Color Picker色を指定する場合（例: オブジェクトカラー）Color Picker
Slider (with Number Input)値の範囲調整（例: サイズ、強度、半径）Range Slider / Value Control

Vibe Prompt UI​

Vibe Prompt UI

Vibe Tabs 1
Vibe Tabs には AI との現在のプロンプト/チャットセッションが表示されます。すばやく切り替えられ、複数の Vibe Coding を同時に実行できます。タブ名の横の点が緑なら、そのセッションは AI が処理中です。

Usage 2

ここでは使用率を確認できます。100% から始まり 0% まで減少します。時間単位と週単位のトークン制限があります。

Prompt history 3
Prompt history には AI との会話履歴が保存され、過去メッセージを見返せます。

Prompt input field 4
入力欄に、AI に生成してほしい機能を記述します。

Attach File 5

画像や 3D モデル .glb を添付したい場合（例: ボックスをアップロードしたモデルに置き換える指示）はこちらからアップロードします。

= Resize 6
下部のバーで Vibe Prompt UI のサイズを変更できます。モバイルでも使用できます。

ヒント

Vibe Tabs の横にある上部エリアをドラッグすると、Vibe Prompt UI をブラウザ内で自由に移動できます。

Send Message 5

このボタンでプロンプトを送信するか、↲ Enter キーを押します。

Vibe を管理する​

Vibe を追加​

Vibe を追加

Vibe を追加するには Vibe メニュー を開き、New Vibe 1 をクリックするか、既存テンプレートを シングルクリック 2 します。Content List のエントリが自動で開きます。

Vibe は 複数回 追加できます。1 つの Space 内で使える数に制限はありません。1 度追加するとボタンは Add Another に変わり、Template を Entity として削除するための Remove ボタンも表示されます。

Vibe を編集​

追加済みの Vibe を編集するには、Space Edit UI を開き、フローティングボタンを使うか、Content タブに切り替えて対象エントリを開きます。

その後、自然言語（Vibe Prompt UI 参照）または Source Code の直接編集（Vibe UI を編集 参照）で Vibe を変更できます。

Vibe を保存​

保存サブメニュー
Vibe 保存 UI

Vibe をテンプレート一覧で使えるようにし、他の Space でも再利用するには保存が必要です。

アイコンを使用します。クリックするとサブメニュー 1 が開きます:

  • Save as New: 新しいテンプレートを作成して保存
  • Save to Parent: 既存テンプレートを更新

Save as New を選ぶと、右側に表示されている UI が開きます。ここでテンプレート名と説明を設定できます。現在プレビューでは 2 行のみ表示されます。

Community に公開​

Vibe をテンプレートとして保存すると、Vibe メニューの Yours タブに表示されます。テンプレートカード右上の ボタンを押すとサブメニューが開きます。

Vibe を Community に公開
Remove from Space

このオプションは Entity 内の Delete と同じ動作です。Vibe は Entity として削除されますが、テンプレートは一覧に残ります。

Capture Screenshot

テンプレート用スクリーンショットを作成できます。まずカメラ位置を調整し（Free Cam モード F 推奨）、このオプションをクリックします。スクリーンショットはいつでも更新できます。

Upload Screenshot

独自スクリーンショットがある場合はこちらを使用できます。アップロード後も、希望する切り抜き範囲を設定できます。

Select

Select では複数テンプレートを一括削除できます。選択後にチェックボックスが表示されます。

Delete

このオプションで保存済みテンプレートから削除できます。削除後、そのテンプレートが Space に存在する場合は Entity も削除するオプションが自動表示されます。別の場所で使用中の Entity は削除されません。

Publish to Community

このオプションでテンプレートを Community に共有できます。Vibe UI が開き、タイトルと説明を再編集できます。その後、禁止コンテンツがないか審査され、問題なければ承認されます。

ベストプラクティス​

以下のベストプラクティスは、リアルタイム 3D 環境でクリーンな構造、再利用可能なテンプレート、安定したシステムを作るのに役立ちます。明確さ・柔軟性・パフォーマンスを重視し、プロジェクトの拡大に合わせて Vibe を適応しやすくします。

再利用可能なパターン / コンポーネントで考える
Vibe が拡張・進化しやすいよう、テンプレートとコンポーネントをモジュール化して構築します。

例（PlayCanvas / 3D）:
箱で構成された複数のピラミッドを作りたいとします。

すべての箱を手動配置した大きな固定構造を作る代わりに、Pyramid コンポーネントを作成します。

公開する入力例:

  • 層ごとの箱数
  • 箱サイズ
  • 色 / マテリアル
  • 角の丸み
  • 間隔

各ピラミッドはこれらのプロパティに基づいて動的に生成されます。

これにより:

  • 3D 空間の任意の場所に複数ピラミッドを配置できる
  • 各ピラミッドに別々のマテリアルや比率を設定できる
  • 構造ロジックを 1 回改善すれば全ピラミッドに反映できる

原則:
ジオメトリを繰り返し手作業で組まない。
設定可能な 3D ジェネレーターコンポーネントを作る。

タスクを小さなステップに分割する
まずシンプルに始め、次に反復します。

例（PlayCanvas / 3D）:
プロシージャルなタワーを作りたいとします。

最初からアニメーション、マテリアル、ライト、物理を含む複雑なスクリプトを作るのではなく:

  1. まず箱を積み上げて生成する。
  2. 次に間隔コントロールを追加する。
  3. 次にマテリアル調整を追加する。
  4. 最後にアニメーションを追加する。

先へ進む前に、各ステップが独立して動作することを確認します。

原則:
不安定な複雑システムより、安定した小さなシステムのほうが拡張しやすい。

意味のある入力だけを公開する
すべての設定は明確な目的を持つべきです。

例（PlayCanvas / 3D）:
「Glowing Orb」コンポーネントを作る場合、ランダムな 15 個のパラメータを公開しないでください。

代わりに公開する例:

  • 半径
  • 発光強度
  • 色
  • パルス On/Off

内部シェーダーの複雑な値や不要なデバッグ値は公開しないでください。

オブジェクトではなくシステムで考える
静的シーンではなくジェネレーターを構築します。

例（PlayCanvas / 3D）:
岩を 50 個手動配置する代わりに、Rock Scatter System を作成します。

入力:

  • エリアサイズ
  • 岩の密度
  • ランダムスケール範囲
  • ランダム回転

このシステムは 3D 空間内に岩を自動配置します。

原則:
すべてのメッシュを手動配置するのではなく、変化を自動生成するロジックを設計する。