> ## 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モードで表示されます。 Canvasツールバーの拡大表示。左側にアイコンのみのInteract（選択中）とPanボタン、右側にラベル付きのChat、Draw、Edit、Generateボタンが並んでいる ## ツール ツールを選択すると、それが有効になります。有効なツールは塗りつぶされた背景でハイライトされます。左端のクラスターはナビゲーション（Interact、Pan）です。残りはコンテンツとマークアップのツールです。ツールは排他的に選択されるため、1つを選ぶと他は無効になります。 ### Interact **Interact** はデフォルトのツールです。フレームを選択したり、ドラッグして動かしたり、実際に動作しているアーティファクトの中をクリックして実際に動くアプリとして操作したりするために使います。Interactが有効な状態でフレームをクリックするとそのフレームが選択され、[フレームごとのアクションバー](/ja/design/frames#per-frame-action-bar)が表示されます。 InteractツールでWebsiteアーティファクトが選択されたCanvas。フレームには選択ハンドル付きの枠線が表示され、その上にフレームごとのアクションバーが表示されている。下部のフローティングツールバーではInteractツールがハイライトされている **キーボードショートカット:** `V`。**ゲート:** 常時有効。 ### Pan **Pan** はカーソルをグラブツールに切り替え、ボード自体をドラッグできるようにします。Panが有効な間はクリック＆ドラッグでフレームを選択する代わりにビューポートを移動します。他のツールが有効な状態でも、スペースキーを押しながらドラッグするか、中クリックでドラッグすることでパンできます。 Panツールが有効なCanvas。ボード上にWebsiteアーティファクト（Velocity — Supercar Rental）とDesignのモックアップ（Velocity — Home (Mockup)）が表示されており、下部のフローティングツールバーでPan（手のひらカーソル）ツールがハイライトされている **キーボードショートカット:** `H`。**ゲート:** 常時有効。 ### Chat **Chat** はボードの上に小さなチャット入力欄を直接配置し、Canvasから離れずにAgentにプロンプトを送れるようにします。選択した要素やフレームは、サイドのAgentチャットパネルから送信するときと同じように、スナップショットとしてメッセージに添付されます。 ChatモードのCanvas。ボードの他の部分は暗くなり、インラインのチャット入力欄がWebsiteアーティファクトの上に重ねて表示されている。入力欄内の「div」チップは選択中の要素を示し、プロンプトには「suggest three alternatives to this image」と書かれている。下部のフローティングツールバーでChatツールがハイライトされている **ゲート:** Chatツール（デスクトップのみ）。 ### Draw **Draw** はフリーハンド描画、矢印、付箋、図形などのマークアップツールを有効にし、フレームの上にスケッチしたりボードに注釈を付けたりできるようにします。問題のある箇所を丸で囲んだり、変更したい要素を指し示したり、フレームの隣に書き込みメモを残したりするのに使います。 Drawが有効なとき、フローティングツールバーの上に **Shape properties** バーが表示され、現在のマークアップツール用の色、線、塗りのコントロールが並びます。InteractまたはPanに切り替えると自動的に非表示になります。 Drawツールが有効なCanvas。フレームの隣に描画された「Widget」の四角形と、紫色の「Add a widget」という付箋が配置されている。フローティングツールバーの上にはShape propertiesバー（鉛筆、テキスト、四角形、矢印、付箋のツールに加え、カラースウォッチとAaテキストサイズコントロール）が表示され、Drawがハイライトされている **ゲート:** 常時有効。 ### Edit **Edit** は要素のためのビジュアルセレクターです。Editが有効な状態で、実際に動作しているアーティファクトの内側をクリックすると要素（ボタン、見出し、画像など）を対象にできます。要素を選択すると **ビジュアルエディター** が開きます — Layout、Color、Borderなどのコントロールが並ぶ右側のパネルで、その部分だけを変更するようAgentに依頼できるインラインプロンプトも備えています。完全な流れについては [要素](/ja/design/elements) と [ビジュアルエディター](/ja/design/visual-editor) を参照してください。 スーパーカーレンタルのウェブサイトでEditツールが有効になり、div要素が選択されている。ビジュアルエディターパネルにはText、Layout、Color、Borderのコントロールと、DiscardおよびSave editsボタンが表示されている **ゲート:** 常時有効（デスクトップ）。フレームが1つも存在しない間は無効で、ツールチップには *「Create an artifact or generate a design to edit.」* と表示されます。モバイルでは非表示です。 ### Generate **Generate** は画像、動画、ベクターグラフィック用の **Generate media** ポップオーバーを開きます。種類を選び、プロンプトを書くと、Agentが結果をボード上に新しいフレームとして配置します。 Canvasの + Addメニューが開き、4つのオプションが縦に並んでいる: 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」と表示されている ポップオーバーの上部には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 | アニメーショントグル | モデルのラインナップは頻繁に変わります。表は現時点で利用可能な内容を反映していますが、実際に使えるモデルはアプリ内のドロップダウンで確認してください。 各フレーム種類の詳細と、作成後にできることについては [フレーム](/ja/design/frames) を参照してください。 #### ビジュアルリファレンスを添付する 生成の前に、すでにボード上にあるものをビジュアルリファレンスとして添付できます。Agentはこれらのリファレンスを使って結果をプロジェクトの見た目に合わせます。**Generate media** フォーム内の **+** メニューを開き、オプションを選びます。 * **Upload file**: コンピューターから画像をアップロードしてリファレンスとして使います。 * **Select canvas elements**: ボード上の既存のアイテムを選びます。フレームはスクリーンショットとして取り込まれ、テキストや付箋の図形はテキストの要約として添付されます。 各リファレンスはフォーム内にチップとして表示されます。必要なだけ追加し、プロンプトを書いてから **Generate** を選択します。リファレンスを削除するには、そのチップを選択します。 CanvasのGenerate mediaフォームで + メニューが開き、Upload fileとSelect canvas elementsのオプションが表示されている。モデルのドロップダウンはNano Banana Proに設定されている ChatGPT Images 2.0は現時点でアップロードに対応していません。ビジュアルリファレンスを添付するには、Nano Banana Proなどの別のモデルに切り替えてください。 **Add menu** が有効な場合、Generateボタンは **+** メニューに置き換わり、ポップオーバーの各種類に **Design**（実際のコードには触れない独立したビジュアルモックアップ）を加えたものが1つにまとまります。 **ゲート:** Image generation。**Vector Graphic** にはVector graphic generationが必要です。**Video** にはVideo generationが必要です。**+** メニューにはAdd menuが必要です（それ自体Image generationを必要とします）。 ## ボードのナビゲーション パン、ズーム、選択のジェスチャーとそのキーボードショートカットは、ツールバーのツールではなくボードレベルの挙動です。Canvasページの[ボードをナビゲートする](/ja/design/canvas#navigate-the-board)を参照してください。 ## 関連ページ * [Canvas](/ja/design/canvas) — ボードそのもの: 開き方、ナビゲート方法、そこに何があるか。 * [フレーム](/ja/design/frames) — フレームの種類、フレームごとのアクションバー、BuildとFocus。 * [要素](/ja/design/elements) — フレーム内の個々のパーツ。 * [ビジュアルエディター](/ja/design/visual-editor) — Editが導く要素ターゲティングのフロー。