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

# キャンバスの使用

> すべてのアプリページを一度に表示し、作業します。メモ、図、画像を追加し、チームとリアルタイムで共同作業し、アイデアを AI チャットに直接送信できます。

キャンバスでは、すべてのアプリページを一度に表示して作業できます。各ページは、配置、注釈、チームとの共同構築が可能な無限ボード上のライブプレビューフレームとして表示されます。作業中にすべてが自動的に保存されます。

<Frame caption="アプリページフレームを含むキャンバスの概要">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-overview.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=2a18935f7466536853d4a827d2a62a39" alt="The canvas showing multiple app page frames on an infinite board" width="1907" height="1074" data-path="images/canvas-overview.png" />
</Frame>

キャンバスを使用して、アプリのレイアウトを計画したり、自分やチームのためのメモやフィードバックを残したり、図でアイデアをスケッチしたり、実装のために AI チャットに直接指示を送ったりできます。

<Tip>
  通常のエディタと同じように、キャンバスで **Edit** モードを使用できます。トップバーの **Edit** をクリックして、任意のページフレームの要素を選択してスタイルを設定します。
</Tip>

***

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

キャンバスにアクセスするには、アプリエディタを開き、トップバーのキャンバスアイコン <Icon icon="grid-2" /> をクリックします。

<Frame caption="キャンバスへのアクセス">
  <img src="https://mintcdn.com/base44/HMQ1t8hb_ML8CWxo/images/accessing-canvas.png?fit=max&auto=format&n=HMQ1t8hb_ML8CWxo&q=85&s=0df6b5c332b4c8c2021a0a999e9023ea" alt="Accessing Canvas" width="1912" height="1074" data-path="images/accessing-canvas.png" />
</Frame>

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

***

## キャンバスでの共同作業

複数の人が同時にキャンバスで作業できます。各共同作業者のカーソルは、移動するときに名前付きポインターとして表示されます。色付きのアウトラインは、各人が選択した要素を示します。

<Frame caption="キャンバスでのリアルタイム共同作業">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-collaboration.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=eeae76cc4f076b4817a1d6d63c7e589c" alt="Multiple collaborators working on the canvas with named cursors" width="949" height="857" data-path="images/canvas-collaboration.png" />
</Frame>

<Tip>
  エディタの上部からアプリに共同作業者を追加できます。[共同作業者について詳しく学ぶ](/Setting-up-your-app/Managing-access#inviting-collaborators-to-your-app)
</Tip>

***

## ページフレームの管理

アプリのすべてのページは、そのページのライブプレビューを示すフレームとしてキャンバスに表示されます。

<Frame caption="キャンバスでページフレームをリサイズする">
  <img src="https://mintcdn.com/base44/lRfN14qvv8YdMpqq/images/resizing-page.gif?s=0d1148c87511c87b983b8841a0b72b5a" alt="Resizing Page" width="926" height="728" data-path="images/resizing-page.gif" />
</Frame>

ページフレームでいくつかのアクションを実行できます。

<AccordionGroup>
  <Accordion title="キャンバス上でページを移動する">
    まずフレームをクリックして選択し、次にフレームをクリックしてドラッグして、キャンバス上の任意の場所に移動します。
  </Accordion>

  <Accordion title="ビューの変更 (デスクトップ、タブレット、スマートフォン)">
    各フレームには、ヘッダーの右上にビューポートのドロップダウンがあります。それをクリックして **Desktop**、**Tablet**、**Phone** を切り替えて、ページがさまざまな画面サイズでどのように見えるかを確認します。

    <Frame>
      <img src="https://mintcdn.com/base44/GnNLayktD_WvyVoh/images/canvas-responsive.png?fit=max&auto=format&n=GnNLayktD_WvyVoh&q=85&s=768f9d43e6c3c83bd52b56a08b6e69a7" alt="Canvas Responsive" width="913" height="712" data-path="images/canvas-responsive.png" />
    </Frame>
  </Accordion>

  <Accordion title="ページフレームのリサイズ">
    フレームをクリックして選択します。リサイズハンドルが端に表示されます。任意のハンドルをドラッグして、フレームの幅と高さを調整します。
  </Accordion>

  <Accordion title="ページの更新">
    フレームを右クリックして **Refresh** を選択し、ページプレビューを再ロードします。

    <Frame>
      <img src="https://mintcdn.com/base44/GnNLayktD_WvyVoh/images/refresh-frame-canvas.png?fit=max&auto=format&n=GnNLayktD_WvyVoh&q=85&s=4aedac164bd2f2b1a683de3a48d2d740" alt="Refresh Frame Canvas" width="904" height="709" data-path="images/refresh-frame-canvas.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

<Note>
  キャンバスからページを削除することはできません。ページを削除するには、AI チャットに削除を依頼してください。
</Note>

***

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

キャンバスの右側にあるツールバーから、主なツールにアクセスできます。

<Frame caption="キャンバスツールバー">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-toolbar.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4938faaebfd77c49540758fcd7521659" alt="The canvas toolbar showing Select, Hand, Draw, Sticky note, and Image tools" width="1912" height="1078" data-path="images/canvas-toolbar.png" />
</Frame>

ツールバーでできることを見てみましょう:

|                               | **ツール**         | **ショートカット** | **機能**              |
| ----------------------------- | --------------- | ----------- | ------------------- |
| <Icon icon="arrow-pointer" /> | **Select**      | V           | 要素を選択、移動、リサイズします    |
| <Icon icon="hand" />          | **Hand**        | H           | 何も選択せずにキャンバス内をパンします |
| <Icon icon="pencil" />        | **Draw**        | D           | フリーハンドでの描画          |
| <Icon icon="note-sticky" />   | **Sticky note** | N           | 付箋を追加します            |
| <Icon icon="image" />         | **Image**       | I           | 画像を追加します            |

<Tip>
  いつでも **Escape** を押して **Select** ツールに戻ります。
</Tip>

***

### 付箋

付箋は、キャンバス上にアイデア、フィードバック、指示を直接残す主な方法です。

<Frame caption="キャンバス上の付箋">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-sticky-note.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=235d16fecb8241650611c663eb52c4d5" alt="A sticky note on the canvas with status, color, and formatting options" width="1273" height="999" data-path="images/canvas-sticky-note.png" />
</Frame>

付箋について詳しく学びましょう:

<AccordionGroup>
  <Accordion title="付箋の追加">
    **付箋を追加するには:**

    1. ツールバーの **Sticky note** ツール <Icon icon="note-sticky" /> をクリックするか、**N** を押します。
    2. キャンバスの任意の場所をクリックして、付箋を配置します。
    3. 付箋をダブルクリックして入力を開始します。

    付箋を作成した人のアバターが左下に表示されます。
  </Accordion>

  <Accordion title="付箋のカスタマイズ">
    付箋が選択されていると、その下にフォーマットオプションを含むツールバーが表示されます:

    * <Icon icon="circle" /> **Color**: 付箋の背景色を選択します。
    * **Aa** **Font family**: デフォルト、手書き、モノ、セリフの 4 つのスタイルから選択します。
    * **S** **Font size**: Small、Medium、Large、Extra large。
    * **B** **Bold**: テキストを太字にします。
    * <Icon icon="list" /> **Bullet list**: 付箋を箇条書きリストとしてフォーマットします。
  </Accordion>

  <Accordion title="付箋のステータスの変更">
    各付箋の上部には **Status** ドロップダウンがあります。クリックしてステータスを設定します:

    * To do (オレンジ)
    * In progress (青)
    * Done (緑)
  </Accordion>

  <Accordion title="付箋をページに接続する">
    付箋をページフレームに接続して、関連するページを示します。

    **付箋をページに接続するには:**

    1. 付箋にカーソルを合わせて、端に接続ハンドルを表示します。
    2. ハンドルから接続したいページフレームにドラッグします。
  </Accordion>

  <Accordion title="付箋を AI チャットに送信する">
    付箋を作成したら、その内容を AI チャットに送信して実装できます。付箋にカーソルを合わせるか選択し、付箋の右下にある **Send to chat** をクリックします。

    * 付箋がページフレームに接続されている場合、AI はその特定のページに変更を適用します。
    * 付箋がページに接続されていない場合、AI は付箋の内容に基づいてどのページを更新するかを決定します。
  </Accordion>
</AccordionGroup>

***

### 図

描画ツールを使用すると、キャンバスの任意の場所にフリーハンドでスケッチできます。

<Frame caption="キャンバスでのフリーハンド描画">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-drawings.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=52c7305fa90a1cc74f4aea7a1c7739d2" alt="Freehand drawings on the canvas with stroke color and weight controls" width="1138" height="982" data-path="images/canvas-drawings.png" />
</Frame>

キャンバスでの描画について詳しく学びましょう:

<AccordionGroup>
  <Accordion title="キャンバスで描画する">
    **キャンバスで描画するには:**

    1. ツールバーの **Draw** ツール <Icon icon="pencil" /> をクリックするか、**D** を押します。
    2. キャンバス上でクリックしてドラッグして描画します。
  </Accordion>

  <Accordion title="描画のカスタマイズ">
    描画ツールがアクティブな場合、カスタマイズできます:

    * **Stroke color** <Icon icon="circle" />: 描画をクリックしてカラーピッカーを開き、描画色を選択するか、16 進値を直接入力します。
    * **Stroke weight** <Icon icon="bars" />: 描画をクリックしてスライダーをドラッグし、ストロークの太さを調整します。
    * **Flip**: 描画を右クリックして **Flip horizontal** または **Flip vertical** を選択するか、**⇧H** および **⇧V** ショートカットを使用します。
  </Accordion>
</AccordionGroup>

***

### 画像

複数のソースからキャンバスに画像を追加できます。画像は現在のビューの中央に配置されます。

<Frame caption="ツールバーオプション付きのキャンバス上の画像">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-images.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=a322bd1e27b52238b653448608849408" alt="An image on the canvas showing the Replace image, Crop, and Border toolbar" width="779" height="805" data-path="images/canvas-images.png" />
</Frame>

キャンバスへの画像の追加について詳しく学びましょう:

<AccordionGroup>
  <Accordion title="画像の追加">
    **画像を追加するには:**

    1. ツールバーの **Image** ツールをクリックするか、**I** を押します。
    2. 画像の取得元を選択します:
       * **Upload from computer**: デバイスからファイルを選択します。
       * **Import from Drive**: 接続された Google Drive からファイルを選択します。
       * **Add from file library**: アプリの既存のアセットから選択します。
  </Accordion>

  <Accordion title="画像のカスタマイズ">
    画像を選択して、下のツールバーにアクセスします:

    * **Replace image:** 画像を別のものに交換します。
    * **Crop:** 画像をトリミングします。
    * **Border:** 画像の周りにボーダーを追加または調整します。
    * **Flip:** 右クリックして画像を水平または垂直に反転します。
  </Accordion>
</AccordionGroup>

***

### 右クリックアクション

任意の付箋、図、または画像を右クリックして、コンテキストメニューを開きます。次のアクションが利用可能です:

| アクション                  | キーボードショートカット         |
| ---------------------- | -------------------- |
| Cut                    | ⌘X                   |
| Copy                   | ⌘C                   |
| Paste                  | ⌘V                   |
| Paste to replace       | ⇧⌘R                  |
| Duplicate              | ⌘D                   |
| Delete                 | Delete または Backspace |
| Bring to front         | ]                    |
| Send to back           | \[                   |
| Flip horizontal (図と画像) | ⇧H                   |
| Flip vertical (図と画像)   | ⇧V                   |
| Lock / Unlock          | ⇧⌘L                  |

***

## 矢印の追加

キャンバス上の任意の 2 つの要素を矢印で接続して関係を示すことができます。例えば、付箋を参照しているページに接続するなどです。

<Frame caption="付箋をページフレームに接続する矢印">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-arrows.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=768c18d1d9c5592e3133519ff4f75180" alt="An arrow drawn from a sticky note to a page frame on the canvas" width="909" height="770" data-path="images/canvas-arrows.png" />
</Frame>

**矢印を作成するには:**

1. 要素にカーソルを合わせて、端に接続ハンドルを表示します。
2. ハンドルから別の要素にドラッグします。

<Tip>
  矢印を削除するには、選択してキーボードの **Delete** を押します。
</Tip>

***

## 要素のロック

要素をロックすると、ロック解除されるまで誰もそれを移動、リサイズ、編集できなくなります。これにより、複数の人が同じキャンバスで作業しているときの競合を回避できます。付箋、図、画像をロックできます。

<Frame caption="キャンバス上の要素をロックする">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-locking.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4ec7808f626b74b50f3eb4492be2b046" alt="Right-click menu showing the Lock option on a sticky note" width="889" height="755" data-path="images/canvas-locking.png" />
</Frame>

**要素をロックまたはロック解除するには:**

* 要素を右クリックして **Lock** または **Unlock** を選択します。
* または要素を選択して **⇧⌘L** を押します。

***

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

キーボードショートカットまたは履歴がある場合にツールバーに表示される元に戻す/やり直すボタンを使用して、最近のキャンバス編集を元に戻したりやり直したりできます。

元に戻すとやり直すは、ほとんどのキャンバスアクション(作成、移動、リサイズ、編集、削除、ロック、要素の接続)をカバーします。

| アクション | Mac | Windows                 |
| ----- | --- | ----------------------- |
| 元に戻す  | ⌘Z  | Ctrl+Z                  |
| やり直す  | ⇧⌘Z | Ctrl+Shift+Z または Ctrl+Y |

<Note>
  元に戻すとやり直すは個人別です。履歴は共同作業者とは別なので、変更を元に戻すと自分の編集のみが取り消され、他の人の編集は影響を受けません。キャンバスは最大 50 ステップの履歴を保持します。
</Note>

***

## ズームとナビゲーション

ズームバーはキャンバスの右下にあります。

| コントロール          | ショートカット   | アクション                        |
| --------------- | --------- | ---------------------------- |
| **Zoom to fit** | ⌘1        | キャンバス全体をビューに収める              |
| **−**           | ⌘-        | 1 ステップ縮小                     |
| パーセンテージ         |           | クリックしてプリセットズームレベルのドロップダウンを開く |
| **+**           | ⌘+ または ⌘= | 1 ステップ拡大                     |
|                 | ⌘0        | 100% にリセット                   |

<Note>このページは AI を使用して翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。 </Note>
