> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ツールバー

> Canvas ツールバー（Interact、Pan、Chat、Draw、Edit、Generate）とボードジェスチャーのリファレンス。

Canvas ツールバーはボードの下部中央に固定されたフローティングバーです。ナビゲート、描画、編集、コンテンツの追加に使用するツールを提供します。ツールバーは Canvas モードで表示されます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-toolbar.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=023d6e63f6ddbd10d74908708ab53b67" alt="左側に Interact（選択中）と Pan のアイコンのみのボタン、右側に Chat、Draw、Edit、Generate のラベル付きボタンが表示された Canvas ツールバーのクローズアップ" width="454" height="50" data-path="images/replitai/canvas-toolbar.png" />
</Frame>

## ツール

ツールを選択するとアクティブになります。アクティブなツールは塗りつぶされた背景でハイライトされます。左端のクラスターはナビゲーション用（Interact、Pan）です。残りはコンテンツとマークアップのツールです。ツールは相互排他的で、1つを選択すると他のツールが無効になります。

### Interact

**Interact** はデフォルトのツールです。フレームを選択したり、ドラッグしたり、ライブアーティファクトをクリックして実際に動作するアプリとして使用したりします。Interact がアクティブな状態でフレームをクリックすると、フレームが選択されて [フレームごとのアクションバー](/references/design/frames#per-frame-action-bar) が表示されます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-interact.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=4d791ef05e8c21d6d89118ebfba4332c" alt="Interact ツールで選択されたウェブサイトアーティファクト — フレームがピンクの選択ハンドルでアウトライン表示され、フレームごとのアクションバー（Reimagine と Preview）が上に表示され、インラインの「Request changes or chat about frame…」入力が下に表示されている。Interact ツールがフローティングツールバーでハイライトされている。" width="3450" height="2000" data-path="images/replitai/canvas-interact.png" />
</Frame>

**キーボードショートカット：** `V`。**ゲート：** 常にオン。

### Pan

**Pan** はカーソルをグラブツールに切り替え、ボード自体をドラッグできます。Pan がアクティブな間は、クリック＆ドラッグでフレームを選択するのではなくビューポートが移動します。スペースバーを押しながらドラッグするか、ミドルクリック＆ドラッグすることで、他のツールからでもパンできます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-pan.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=2b095492975bc038b91fc9523d33dace" alt="Pan ツールがアクティブな Canvas — ウェブサイトアーティファクト（Velocity — Supercar Rental）とデザインモックアップ（Velocity — Home (Mockup)）がボード上に表示され、Pan（ハンドカーソル）ツールがフローティングツールバーでハイライトされている。" width="1725" height="1041" data-path="images/replitai/canvas-pan.png" />
</Frame>

**キーボードショートカット：** `H`。**ゲート：** 常にオン。

### Chat

**Chat** はボード上に小さなチャットコンポーザーを直接配置するので、Canvas を離れずに Agent にプロンプトを送れます。選択した要素とフレームは、サイドの Agent チャットパネルから送信する場合と同様に、スナップショットとしてメッセージに添付されます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-chat.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=377656bbc9a2149df4b9488c9ed94f20" alt="Chat モードの Canvas — ボードの残りが暗くなり、ウェブサイトアーティファクトにインラインチャットコンポーザーがオーバーレイされている。コンポーザーの「div」チップが選択された要素を示し、プロンプトに「suggest three alternatives to this image」と入力されている。Chat ツールがフローティングツールバーでハイライトされている。" width="3450" height="2000" data-path="images/replitai/canvas-chat.png" />
</Frame>

**ゲート：** Chat ツール（デスクトップのみ）。

### Draw

**Draw** はフリーハンド描画、矢印、付箋、シェイプなどのマークアップツールをアクティブにし、フレームの上に描画したりボードにアノテーションを付けたりできます。問題のある部分を丸で囲んだり、変更したい要素を指し示したり、フレームの隣に書面でメモを残したりするために使用します。

Draw がアクティブな間は、現在のマークアップツールの色、ストローク、塗りつぶしコントロールを持つ **Shape properties** バーがフローティングツールバーの上に表示されます。Interact または Pan に切り替えると自動的に非表示になります。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-draw.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=8259ca7d7f1833ccc39921b96b0ef2c2" alt="Draw ツールがアクティブな Canvas — 描画された「Widget」の矩形と紫の「Add a widget」付箋がフレームの隣に配置されている。Shape properties バー（鉛筆、テキスト、矩形、矢印、付箋ツールとカラースウォッチ、Aa テキストサイズコントロール）がフローティングツールバーの上に表示され、Draw がハイライトされている。" width="1725" height="1041" data-path="images/replitai/canvas-draw.png" />
</Frame>

**ゲート：** 常にオン。

### Edit

**Edit** は要素のビジュアルセレクターです。Edit がアクティブな状態でライブアーティファクト内をクリックすると、要素（ボタン、見出し、画像）をターゲットにできます。要素を選択すると **Visual Editor** が開きます — Agent にその部分だけを変更するよう依頼するインラインプロンプトと組み合わされたコントロール（Layout、Color、Border など）の右サイドパネルです。完全なフローは [Elements](/references/design/elements) と [Visual Editor](/learn/design/visual-editor) をご覧ください。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-edit.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d04a99a7f567c79c879a0168146b9f02" alt="Edit ツールがアクティブな Canvas — ウェブサイトアーティファクトの画像要素が選択（青くハイライトされ「img」チップラベルが付いている）され、Visual Editor パネルに Layout（Outer/Inner space）、Color（Opacity）、Border（色、幅、半径）コントロールと Discard および Save edits ボタンが表示されている。Edit ツールがフローティングツールバーでハイライトされている。" width="1725" height="1041" data-path="images/replitai/canvas-edit.png" />
</Frame>

**ゲート：** 常にオン（デスクトップ）。少なくとも1つのフレームが存在するまで無効で、ツールチップに *「Create an artifact or generate a design to edit.」* と表示されます。モバイルでは非表示。

### Generate

**Generate** は画像、動画、ベクターグラフィック用の **Generate media** ポップオーバーを開きます。種類を選択してプロンプトを入力すると、Agent が結果をボード上の新しいフレームとして配置します。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-add-menu.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=1e6b4fad33d8f8a77a77c63dd244e6c9" alt="4つのオプションが縦に並んだ Canvas の + Add メニュー：Design（「Mock up interfaces and visual concepts」）、Image（「Generate and edit images」）、Video（「Generate motion clips and animations」）、Vector Graphic（「Generate vector illustrations and SVGs」）。フローティングツールバーの Generate スロットが「+ Generate」と表示されている。" width="1102" height="702" data-path="images/replitai/canvas-add-menu.png" />
</Frame>

ポップオーバーの上部に4つのタブがあります：

* **Design**
  — **Image**
* **Video**
* **Vector Graphic**

一部のコントロールはすべての種類で共通です。その他は種類固有です。

**共通コントロール（すべての種類）：**

* **Model**: 使用する生成モデル。利用可能なモデルは種類によって異なります（下の表を参照）。
* **Prompt**: Agent に生成してほしいものを平易な言葉で説明します。
* **Generate**: リクエストを送信してカーソル位置にプレースホルダーフレームを確保します。アセットの準備ができるとプレースホルダーがライブフレームに移行します。生成が失敗すると、プレースホルダーが削除されてチャットパネルにエラーが表示されます。

**種類ごとのモデルとコントロール：**

| 種類          | 最適な用途                                     | 現在のモデル                                                       | 種類固有のコントロール                                                   |
| ----------- | ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------- |
| **Image**   | ラスター出力（PNG / JPG）；ムードボード画像、ヒーローショット、参考アート | Nano Banana、Nano Banana 2、Nano Banana Pro、ChatGPT Images 2.0 | アスペクト比（`1:1`、`16:9`、`9:16`、`4:3`、`3:4`） · サイズ（`1K`、`2K`、`4K`） |
| **Video**   | 短い動きのクリップとアニメーション                         | Veo 3.1、Seedance 2.0                                         | アスペクト比 · 解像度（例：`720p`） · 長さ（例：`4s`） · 音声トグル                   |
| **Graphic** | SVG ベクター出力；アイコン、ロゴ、ダイアグラム、スタイライズドイラスト     | Claude 4.6 Opus、Gemini 3.1 Pro Preview                       | アニメーショントグル                                                    |

<Note>
  モデルのラインナップは頻繁に変わります。この表は現在利用可能なものを反映しています。今日のアカウントで使用できるものは製品内のドロップダウンで確認してください。
</Note>

各フレームの種類とその作成後にできることについては、[Frames](/references/design/frames) をご覧ください。

#### ビジュアル参照を添付する

生成前に、ボード上にある既存のものをビジュアル参照として添付できます。Agent はこれらの参照を使って結果をガイドし、プロジェクトの見た目に合わせます。**Generate media** フォーム内の **+** メニューを開いてオプションを選択してください：

* **Upload file**: コンピューターから画像をアップロードして参照として使用します。
* **Select canvas elements**: ボードから既存のアイテムを選択します。フレームはスクリーンショットとしてキャプチャされ、テキストとノートのシェイプはテキストの要約として添付されます。

各参照はフォームにチップとして表示されます。必要なだけ追加し、プロンプトを入力してから **Generate** を選択します。参照を削除するには、チップを選択します。

<Frame caption="Upload file と Select canvas elements が表示された + メニューが開いた Generate media フォーム。">
  <img src="https://mintcdn.com/replit/77YMTrJyoo7tOA9T/images/replitai/canvas-generate-media-references.png?fit=max&auto=format&n=77YMTrJyoo7tOA9T&q=85&s=65012e52d8f54671b22e1f27cb153a13" alt="Canvas の Generate media フォーム。プラスメニューが開いて Upload file と Select canvas elements のオプションが表示され、モデルドロップダウンが Nano Banana Pro に設定されている" width="1134" height="662" data-path="images/replitai/canvas-generate-media-references.png" />
</Frame>

<Note>
  ChatGPT Images 2.0 は現在アップロードをサポートしていません。ビジュアル参照を添付するには、例えば Nano Banana Pro などに切り替えてください。
</Note>

**Add menu** が有効になると、Generate ボタンが **+** メニューに置き換えられ、ポップオーバーの種類に **Design**（ライブコードに触れないスタンドアロンのビジュアルモックアップ）が統合されます：

**ゲート：** Image generation。**Vector Graphic** には Vector graphic generation が必要です。**Video** には Video generation が必要です。**+** メニューには Add menu が必要です（Add menu 自体には Image generation が必要）。

## キーボードショートカット

| ショートカット                | アクション                 |
| ---------------------- | --------------------- |
| `V`                    | Interact ツールをアクティブにする |
| `H`                    | Pan ツールをアクティブにする      |
| `Space` を押しながらドラッグ     | どのツールからでもパンする         |
| `Cmd` / `Ctrl` + スクロール | ズーム                   |
| `Cmd` / `Ctrl` + `+`   | ズームイン                 |
| `Cmd` / `Ctrl` + `-`   | ズームアウト                |
| `Cmd` / `Ctrl` + `0`   | ズームをリセット              |
| `Shift` + クリック         | 現在の選択にフレームを追加する       |
| `Escape`               | 選択解除                  |

## ボードジェスチャー

注記がない限り、どのツールからでもパン、ズーム、選択が機能します。

**パン：**

* トラックパッド：2本指ドラッグ。
* マウス：ミドルクリック＆ドラッグ、またはスペースバーを押しながら左クリックドラッグ。
* Pan ツール：左マウスボタンでクリック＆ドラッグ。

**ズーム：**

* トラックパッド：ピンチ。
* マウス：`Ctrl`（macOS では `Cmd`）+ スクロールホイール。
* キーボード：`Cmd`/`Ctrl` + `+` でズームイン、`Cmd`/`Ctrl` + `-` でズームアウト、`Cmd`/`Ctrl` + `0` でズームリセット。

ズームはカーソルを中心に行われるため、カーソル下の位置は固定されたまま、ボードの残りがスケーリングされます。

**選択：**

* 単一フレーム：Interact ツールでクリックします。
* 複数選択：`Shift` を押しながら各フレームをクリックするか、ボード上でマーキー矩形をドラッグします。
* 選択解除：空の領域をクリックするか、`Escape` を押します。

1つ以上のフレームを選択すると [フレームごとのアクションバー](/references/design/frames#per-frame-action-bar) が表示され、それらのフレームが次の Agent メッセージにスナップショットとして添付されます。

## 関連ページ

* [Canvas](/references/design/canvas) — 概要と構成要素。
* [Frames](/references/design/frames) — フレームの種類、フレームごとのアクションバー、Reimagine、Refine、Annotate、Build。
* [Elements](/references/design/elements) — フレーム内の個々のパーツ。
* [Visual Editor](/learn/design/visual-editor) — Edit で移行する要素ターゲティングフロー。