Vibe Coding

In-App Navigation

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

TL;DR

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

Vibe メニューを開く

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

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

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

Vibe メニューの概要

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

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

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

これらのテンプレートを 3 から Space に追加して、特定機能を使ったり、既存ロジックを拡張したり、自分用のカスタム動作の土台にしたりできます。

Edit 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 が提供する挙動に応じてパラメータが追加されます。

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

入力オプション	使うタイミング	“Vibe Coding” でのよくある表現
Input Field	短い 1 行入力（名前、タイトル、URL、数値など）	Text Input / Single-Line Input
Textarea	長めのテキスト内容（説明、メモなど）	Multiline Input
Toggle	ON/OFF やブール設定	Toggle / Switch
Upload Field	ユーザーがファイルをアップロードする場合（画像、mesh モデルなど）	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 Tabs 1
Vibe Tabs には、AI との現在のプロンプト／チャットセッションが表示されます。素早く切り替えられ、複数の Vibe コーディングを同時に実行できます。タブ名の横の点が緑なら、そのセッションで AI が処理中です。

Usage 2

ここでは使用量の割合を確認できます。100% から始まり 0% まで減少します。時間ごとの制限と週ごとのトークン制限を区別しています。

Prompt history 3
Prompt History には、AI との会話履歴が保存され、前回のメッセージを確認できます。

Prompt input field 4
入力欄に、AI に生成させたい機能内容を説明します。

Attach File 5

画像や 3D モデルの .glb を添付したい場合、たとえばボックスをアップロードしたモデルに置き換えるよう AI に指示する場合は、ここからアップロードできます。

= Resize 6
下部のバーを使って Vibe Prompt UI のサイズを調整できます。モバイルでも同様です。

ヒント

ブラウザウィンドウ内で Vibe Prompt UI を自由に移動したい場合、Vibe Tabs の横にある上部エリアをクリックしてドラッグしてください。

Send Message 8

このボタンを使ってプロンプトを送信するか、↲ Enter を押してください。

Vibes を管理する

Vibes を追加する

Vibe を追加するには、Vibe メニュー を開き、New Vibe 1 をクリックするか、既存のテンプレートを シングルクリック 3 します。コンテンツ一覧のエントリが自動的に開きます。Vibes は何度でも追加できます。Space 内で使用できる回数に制限はありません。

下側の領域 2 をクリックすると、Vibe の詳細 UI が開きます。ここには Vibe のプレビュー、作成者情報、いいね機能、説明、Vibe が使用されている公開 Space の一覧が表示されます。

Vibes を編集する

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

その後は、自然言語で Vibe を変更する（Vibe Prompt UI を参照）か、ソースコードを直接編集する（Edit Vibe UI を参照）ことができます。

Vibes を保存する

Vibes をテンプレート一覧で利用できるようにし、他の Space でも再利用できるようにするには、保存する必要があります。

アイコン 1 を使って Vibe を保存します。

保存前に、わかりやすいタイトルと説明を付けます 2。

次の保存オプションがあります。

• Save as New: 新しいテンプレートを作成します。既存のテンプレートを更新したくない場合に使います。Vibe を初めて保存するときの既定オプションです。
• Public: テンプレートを Your Vibes に保存し、Community セクションにも公開します。
• Update copies already placed: すでに Space に配置済みのこの Vibe の既存インスタンスを更新します。

Vibe を保存すると、現在の Space からスクリーンショットが自動的に取得され、追加されます。後で差し替えることもできます。

Vibe の詳細を編集する

Vibe の詳細は、ユーザーがどのように Vibe を使うべきかを理解するのに役立ち、機能についての関連情報を含めるとよいです。特に、パラメータ名だけでは目的が分かりにくい場合に役立ちます。

サイドパネル → Vibes を開き、Your Vibes に切り替えます。目的のエントリにマウスを置くと、右上に アイコンが表示され、サブメニューが開きます。 Edit Details 1 を選択して UI を開きます。

上部では、スクリーンショットを更新できます 2。カメラアイコンをクリックすると、Space 内の現在位置からスクリーンショットを取得できます。

3 でタイトルと説明を更新できます。

最後に、Public トグル 4 を有効にして、Vibe を Community テンプレートに追加できます。

Community へ公開する

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

Edit Details

Vibe の詳細 UI を開き、タイトル、説明、画像を更新できます。

Capture Screenshot

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

Upload Screenshot

自前のスクリーンショットを作成した場合は、それを使うこともできます。アップロード後も、好みの切り抜き範囲を設定できます。

Select

Select オプションを使うと、複数のテンプレートを一度に削除できます。選択後、チェックボックスが表示されます。

Delete

このオプションで、保存済みテンプレートからテンプレートを削除できます。削除後、自動的に Space 内に存在する場合はそのエンティティも同時に削除するオプションが表示されます。テンプレートが他の場所でも使われている場合、エンティティはそのまま残ります。

Publish to Community

このオプションでテンプレートを Community と共有できます。Vibe UI が開き、タイトルと説明を再度編集できます。その後、内容が確認され、禁止対象のものがなければ承認されます。

Best Practice

次のベストプラクティスは、リアルタイム 3D 環境の中で、きれいで再利用しやすいテンプレートと安定したシステムを作るためのものです。明確さ、柔軟性、パフォーマンスを重視し、プロジェクトが大きくなっても Vibes が適応しやすい構成を目指します。

再利用可能なパターン / コンポーネントとして考える
テンプレートやコンポーネントをモジュール化し、Vibes を拡張しやすい形にします。

例 (PlayCanvas / 3D):
複数のピラミッドを箱で作りたいとします。

1つの大きく固定された構造を作るのではなく、Pyramid コンポーネント を作ります。

入力として公開する内容:

• Boxes per level
• Box size
• Color / Material
• Rounded edges
• Spacing

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

こうすると:

• 3D 空間内の任意の場所に複数のピラミッドを配置できる
• 各ピラミッドに異なる素材や比率を与えられる
• 構造ロジックを一か所で改善すれば、すべてのピラミッドを自動的に更新できる

原則:
ジオメトリを何度も手作業で作らないでください。
設定可能な 3D ジェネレーターを作りましょう。

タスクを小さなステップに分ける
まずはシンプルに始めて、段階的に改善してください。

例 (PlayCanvas / 3D):
手続き的なタワーを作りたいとします。

アニメーション、マテリアル、ライト、物理演算を一度に入れた複雑なスクリプトを作る代わりに:

1. まず積み重ねた箱を生成する
2. 次に間隔の制御を追加する
3. 次にマテリアルのカスタマイズを追加する
4. 最後にアニメーションを追加する

各ステップは、次に進む前にそれぞれ独立して動作するようにしましょう。

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

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

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

代わりに次のものを公開してください:

• Radius
• Glow intensity
• Color
• Pulse on/off

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

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

例 (PlayCanvas / 3D):
50 個の岩を手作業で配置する代わりに、Rock Scatter System を作ります。

入力:

• Area size
• Rock density
• Random scale range
• Random rotation

このシステムは、3D 空間に岩を自動的に分散します。

原則:
手作業で 1 つずつメッシュを配置する代わりに、変化を自動生成するロジックを設計してください。