ツールバー

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

​

ツール

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

​

Interact

Interact はデフォルトのツールです。フレームを選択したり、ドラッグしたり、ライブアーティファクトをクリックして実際に動作するアプリとして使用したりします。Interact がアクティブな状態でフレームをクリックすると、フレームが選択されて フレームごとのアクションバー が表示されます。 キーボードショートカット： V。ゲート： 常にオン。

​

Pan

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

​

Chat

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

​

Draw

Draw はフリーハンド描画、矢印、付箋、シェイプなどのマークアップツールをアクティブにし、フレームの上に描画したりボードにアノテーションを付けたりできます。問題のある部分を丸で囲んだり、変更したい要素を指し示したり、フレームの隣に書面でメモを残したりするために使用します。 Draw がアクティブな間は、現在のマークアップツールの色、ストローク、塗りつぶしコントロールを持つ Shape properties バーがフローティングツールバーの上に表示されます。Interact または Pan に切り替えると自動的に非表示になります。 ゲート： 常にオン。

​

Edit

Edit は要素のビジュアルセレクターです。Edit がアクティブな状態でライブアーティファクト内をクリックすると、要素（ボタン、見出し、画像）をターゲットにできます。要素を選択すると Visual Editor が開きます — Agent にその部分だけを変更するよう依頼するインラインプロンプトと組み合わされたコントロール（Layout、Color、Border など）の右サイドパネルです。完全なフローは Elements と Visual Editor をご覧ください。 ゲート： 常にオン（デスクトップ）。少なくとも1つのフレームが存在するまで無効で、ツールチップに 「Create an artifact or generate a design to edit.」 と表示されます。モバイルでは非表示。

​

Generate

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

• Design — Image
• Video
• Vector Graphic

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

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

種類ごとのモデルとコントロール： 各フレームの種類とその作成後にできることについては、Frames をご覧ください。

​

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

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

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

各参照はフォームにチップとして表示されます。必要なだけ追加し、プロンプトを入力してから Generate を選択します。参照を削除するには、チップを選択します。 Add menu が有効になると、Generate ボタンが + メニューに置き換えられ、ポップオーバーの種類に Design（ライブコードに触れないスタンドアロンのビジュアルモックアップ）が統合されます： ゲート： Image generation。Vector Graphic には Vector graphic generation が必要です。Video には Video generation が必要です。+ メニューには Add menu が必要です（Add menu 自体には Image generation が必要）。

​

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

​

ボードジェスチャー

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

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

ズーム：

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

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

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

1つ以上のフレームを選択すると フレームごとのアクションバー が表示され、それらのフレームが次の Agent メッセージにスナップショットとして添付されます。

​

関連ページ

• Canvas — 概要と構成要素。
• Frames — フレームの種類、フレームごとのアクションバー、Reimagine、Refine、Annotate、Build。
• Elements — フレーム内の個々のパーツ。
• Visual Editor — Edit で移行する要素ターゲティングフロー。