メインコンテンツへスキップ
キャンバスでは、すべてのアプリページを一度に表示して作業できます。各ページは、配置、注釈、チームとの共同構築が可能な無限ボード上のライブプレビューフレームとして表示されます。作業中にすべてが自動的に保存されます。
The canvas showing multiple app page frames on an infinite board
キャンバスを使用して、アプリのレイアウトを計画したり、自分やチームのためのメモやフィードバックを残したり、図でアイデアをスケッチしたり、実装のために AI チャットに直接指示を送ったりできます。
通常のエディタと同じように、キャンバスで Edit モードを使用できます。トップバーの Edit をクリックして、任意のページフレームの要素を選択してスタイルを設定します。

キャンバスにアクセスする

キャンバスにアクセスするには、アプリエディタを開き、トップバーのキャンバスアイコン をクリックします。
Accessing Canvas
初めてキャンバスを開くと、すべてのアプリページがビューに収まります。その後、ズームレベルと位置はデバイスごとに保存されるため、キャンバスは離れたところから再開されます。

キャンバスでの共同作業

複数の人が同時にキャンバスで作業できます。各共同作業者のカーソルは、移動するときに名前付きポインターとして表示されます。色付きのアウトラインは、各人が選択した要素を示します。
Multiple collaborators working on the canvas with named cursors
エディタの上部からアプリに共同作業者を追加できます。共同作業者について詳しく学ぶ

ページフレームの管理

アプリのすべてのページは、そのページのライブプレビューを示すフレームとしてキャンバスに表示されます。
Resizing Page
ページフレームでいくつかのアクションを実行できます。
まずフレームをクリックして選択し、次にフレームをクリックしてドラッグして、キャンバス上の任意の場所に移動します。
各フレームには、ヘッダーの右上にビューポートのドロップダウンがあります。それをクリックして DesktopTabletPhone を切り替えて、ページがさまざまな画面サイズでどのように見えるかを確認します。
Canvas Responsive
フレームをクリックして選択します。リサイズハンドルが端に表示されます。任意のハンドルをドラッグして、フレームの幅と高さを調整します。
フレームを右クリックして Refresh を選択し、ページプレビューを再ロードします。
Refresh Frame Canvas
キャンバスからページを削除することはできません。ページを削除するには、AI チャットに削除を依頼してください。

キャンバスツールバーの使用

キャンバスの右側にあるツールバーから、主なツールにアクセスできます。
The canvas toolbar showing Select, Hand, Draw, Sticky note, and Image tools
ツールバーでできることを見てみましょう:
ツールショートカット機能
SelectV要素を選択、移動、リサイズします
HandH何も選択せずにキャンバス内をパンします
DrawDフリーハンドでの描画
Sticky noteN付箋を追加します
ImageI画像を追加します
いつでも Escape を押して Select ツールに戻ります。

付箋

付箋は、キャンバス上にアイデア、フィードバック、指示を直接残す主な方法です。
A sticky note on the canvas with status, color, and formatting options
付箋について詳しく学びましょう:
付箋を追加するには:
  1. ツールバーの Sticky note ツール をクリックするか、N を押します。
  2. キャンバスの任意の場所をクリックして、付箋を配置します。
  3. 付箋をダブルクリックして入力を開始します。
付箋を作成した人のアバターが左下に表示されます。
付箋が選択されていると、その下にフォーマットオプションを含むツールバーが表示されます:
  • Color: 付箋の背景色を選択します。
  • Aa Font family: デフォルト、手書き、モノ、セリフの 4 つのスタイルから選択します。
  • S Font size: Small、Medium、Large、Extra large。
  • B Bold: テキストを太字にします。
  • Bullet list: 付箋を箇条書きリストとしてフォーマットします。
各付箋の上部には Status ドロップダウンがあります。クリックしてステータスを設定します:
  • To do (オレンジ)
  • In progress (青)
  • Done (緑)
付箋をページフレームに接続して、関連するページを示します。付箋をページに接続するには:
  1. 付箋にカーソルを合わせて、端に接続ハンドルを表示します。
  2. ハンドルから接続したいページフレームにドラッグします。
付箋を作成したら、その内容を AI チャットに送信して実装できます。付箋にカーソルを合わせるか選択し、付箋の右下にある Send to chat をクリックします。
  • 付箋がページフレームに接続されている場合、AI はその特定のページに変更を適用します。
  • 付箋がページに接続されていない場合、AI は付箋の内容に基づいてどのページを更新するかを決定します。

描画ツールを使用すると、キャンバスの任意の場所にフリーハンドでスケッチできます。
Freehand drawings on the canvas with stroke color and weight controls
キャンバスでの描画について詳しく学びましょう:
キャンバスで描画するには:
  1. ツールバーの Draw ツール をクリックするか、D を押します。
  2. キャンバス上でクリックしてドラッグして描画します。
描画ツールがアクティブな場合、カスタマイズできます:
  • Stroke color : 描画をクリックしてカラーピッカーを開き、描画色を選択するか、16 進値を直接入力します。
  • Stroke weight : 描画をクリックしてスライダーをドラッグし、ストロークの太さを調整します。
  • Flip: 描画を右クリックして Flip horizontal または Flip vertical を選択するか、⇧H および ⇧V ショートカットを使用します。

画像

複数のソースからキャンバスに画像を追加できます。画像は現在のビューの中央に配置されます。
An image on the canvas showing the Replace image, Crop, and Border toolbar
キャンバスへの画像の追加について詳しく学びましょう:
画像を追加するには:
  1. ツールバーの Image ツールをクリックするか、I を押します。
  2. 画像の取得元を選択します:
    • Upload from computer: デバイスからファイルを選択します。
    • Import from Drive: 接続された Google Drive からファイルを選択します。
    • Add from file library: アプリの既存のアセットから選択します。
画像を選択して、下のツールバーにアクセスします:
  • Replace image: 画像を別のものに交換します。
  • Crop: 画像をトリミングします。
  • Border: 画像の周りにボーダーを追加または調整します。
  • Flip: 右クリックして画像を水平または垂直に反転します。

右クリックアクション

任意の付箋、図、または画像を右クリックして、コンテキストメニューを開きます。次のアクションが利用可能です:
アクションキーボードショートカット
Cut⌘X
Copy⌘C
Paste⌘V
Paste to replace⇧⌘R
Duplicate⌘D
DeleteDelete または Backspace
Bring to front]
Send to back[
Flip horizontal (図と画像)⇧H
Flip vertical (図と画像)⇧V
Lock / Unlock⇧⌘L

矢印の追加

キャンバス上の任意の 2 つの要素を矢印で接続して関係を示すことができます。例えば、付箋を参照しているページに接続するなどです。
An arrow drawn from a sticky note to a page frame on the canvas
矢印を作成するには:
  1. 要素にカーソルを合わせて、端に接続ハンドルを表示します。
  2. ハンドルから別の要素にドラッグします。
矢印を削除するには、選択してキーボードの Delete を押します。

要素のロック

要素をロックすると、ロック解除されるまで誰もそれを移動、リサイズ、編集できなくなります。これにより、複数の人が同じキャンバスで作業しているときの競合を回避できます。付箋、図、画像をロックできます。
Right-click menu showing the Lock option on a sticky note
要素をロックまたはロック解除するには:
  • 要素を右クリックして Lock または Unlock を選択します。
  • または要素を選択して ⇧⌘L を押します。

変更の元に戻すとやり直し

キーボードショートカットまたは履歴がある場合にツールバーに表示される元に戻す/やり直すボタンを使用して、最近のキャンバス編集を元に戻したりやり直したりできます。 元に戻すとやり直すは、ほとんどのキャンバスアクション(作成、移動、リサイズ、編集、削除、ロック、要素の接続)をカバーします。
アクションMacWindows
元に戻す⌘ZCtrl+Z
やり直す⇧⌘ZCtrl+Shift+Z または Ctrl+Y
元に戻すとやり直すは個人別です。履歴は共同作業者とは別なので、変更を元に戻すと自分の編集のみが取り消され、他の人の編集は影響を受けません。キャンバスは最大 50 ステップの履歴を保持します。

ズームとナビゲーション

ズームバーはキャンバスの右下にあります。
コントロールショートカットアクション
Zoom to fit⌘1キャンバス全体をビューに収める
⌘-1 ステップ縮小
パーセンテージクリックしてプリセットズームレベルのドロップダウンを開く
+⌘+ または ⌘=1 ステップ拡大
⌘0100% にリセット
このページは AI を使用して翻訳されました。最も正確で最新の情報については、英語版 を参照してください。