> ## 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

> Replit DesignがフレームをCanvas上に表示する、無限のサーフェスであるCanvasを開き、移動し、追加する方法を学びます。

Canvasは、Replit Designがフレームを表示する、パンとズームが自由にできる無限のサーフェスです。デザインするものはすべてここにあります：フレームを生成し、動かし、細部にズームインし、正しくなるまで反復できます。

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-overview.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=5cd2330c89bbdedfb249151ee582f070" alt="ボード上に配置された3つのフレーム — Webサイト（Scroll Hero）、APEX X1 Design System、APEX X1スーパーカーのDesignモックアップ — と、下部のフローティングツールバー（Chat、Draw、Edit、Generate）を表示するCanvas" width="2000" height="1255" data-path="images/replitai/canvas-overview.png" />
</Frame>

## Canvasを開く

Canvasは、Replit Designで最初に目にするものです。プロジェクト内でヘッダーの**Design**を選ぶとペインいっぱいにCanvasが表示され、**Build**を選ぶと実行中のアプリに戻ります。

<Frame>
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-design-button.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=08c21763270694a8ecd5d2d62e83f8a9" alt="DesignとBuildのトグルがあるプロジェクトヘッダーのクローズアップ。Designが選択され、その下にCanvas上のフレームが表示されている" width="987" height="619" data-path="images/replitai/canvas-design-button.png" />
</Frame>

[replit.com/design](https://replit.com/design)で新規に始めると、新しいデザインを作成するよう促され、Canvasが開きます。どちらのサーフェスをいつ使うかは[DesignとBuildの違い](/ja/design/design-vs-build)を参照してください。

## Canvas上にあるもの

* **フレーム**：ボード上のすべてのタイル。フレームはデザインモックアップ、Webアプリ、モバイルアプリ、スライド、画像、動画、ベクターグラフィックのいずれかです。チャットのプロンプト、ツールバーの[Generateメニュー](/ja/design/toolbar#generate)、[ライブラリパネル](/ja/design/library-panel)から生成できます。フレームに対して行うことはすべて — Build、Focus、提案など — フレーム自体を通じて行われます。詳しくは[フレーム](/ja/design/frames)を参照してください。
* **描画とメモ**：[Drawツール](/ja/design/toolbar#draw)で追加するマークアップで、スケッチ、矢印、図形、付箋などです。Agentはあなたのマークアップを読み取るので、問題の箇所を丸で囲んで変更を依頼できます。
* **チャットパネル**：Canvasの隣にドッキングされたAgentチャット。メッセージを送る前にフレームを選択すると、スナップショットとして添付されるので、Agentがビジュアルなコンテキストを持てます。

各コンポーネントが何であり、どう組み合わさるかについては[コンポーネント概要](/ja/design/core-components)を参照してください。

## ボードを移動する

パン、ズーム、選択は、特に断りがない限りどのツールからでも行えます。

**パン：**

* トラックパッド：2本指ドラッグ。
* マウス：中クリックドラッグ、またはスペースキーを押しながら左クリックドラッグ。
* [Panツール](/ja/design/toolbar#pan)：左マウスボタンでクリックしてドラッグ。

**ズーム：**

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

ズームはカーソル位置を基準にするので、ボードの他の部分がその周りで拡大縮小する間も、カーソルの下の位置は動きません。

**選択：**

* 単一フレーム：[Interactツール](/ja/design/toolbar#interact)でクリックします。
* 複数選択：`Shift`を押しながら各フレームをクリックするか、ボード上でマーキー（範囲選択）をドラッグします。
* 選択解除：空いている領域をクリックするか、`Escape`を押します。

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

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

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

## 右クリックメニュー

ボード上の任意の場所を右クリックすると、コンテキストメニューが開きます。このメニューはコンテキストに応じて変化し、カーソルの下にあるものに合わせてアクションが変わります：フレームの上ではフレーム用のアクションが、空のCanvas上ではボードレベルのアクションが表示され、アプリのフレームでは**Refresh artifact**が追加されます。

選択したフレームの上では、メニューに以下が含まれます：

| アクション                          | ショートカット                    | 内容                                             |
| ------------------------------ | -------------------------- | ---------------------------------------------- |
| Edit                           |                            | Editツールに切り替えて、フレーム内の要素を選択します。                  |
| Chat                           |                            | フレームについてAgentとチャットします。                         |
| Focus                          |                            | フレームで[フォーカスモード](/ja/design/frames#focus)に入ります。 |
| Cursor chat                    | `/`                        | カーソル位置でクイックチャットを開始します。                         |
| Reorder                        |                            | フレームを重なり順の前面または背面に移動します。                       |
| Copy, Paste, Duplicate, Delete | `⌘C`、`⌘V`、`⌘D`、`Backspace` | 標準的なクリップボードとフレームの操作です。                         |
| Export as…                     |                            | フレームをファイルとしてエクスポートします。                         |
| Select all                     | `⌘A`                       | ボード上のすべてのフレームを選択します。                           |

<Frame caption="選択したフレーム上の右クリックメニュー。">
  <img src="https://mintcdn.com/replit/OIImiKPshhawqFXK/images/replitai/canvas-right-click-menu.png?fit=max&auto=format&n=OIImiKPshhawqFXK&q=85&s=7c57a64a352438ea80d992ad6803278c" alt="グレーのApex X1スーパーカーを表示する選択済みのDesignフレーム上で開いた右クリックメニュー。Edit、Chat、Focus、Cursor chat、Reorder、Copy、Paste、Export as…、Duplicate、Delete、Select allのアクションが表示されている" width="2000" height="1252" data-path="images/replitai/canvas-right-click-menu.png" />
</Frame>

### フレームをPNGとしてエクスポートする

任意のアーティファクトまたはデザインフレームをPNG画像として保存できます。ドキュメントやチャットでプレビューを共有したり、さらに反復する前のスナップショットを取ったり、チームメイトにスクリーンショットを送ったりするのに便利です。

<Steps>
  <Step title="フレームを選択する">
    エクスポートするアーティファクトまたはデザインフレームを選択し、読み込みが完了するまで待ちます。
  </Step>

  <Step title="Exportを選ぶ">
    フレームのアクションバーで**Export**を選びます。フレームを右クリックして**Export as…** > **PNG**を選ぶこともできます。フレームの名前を元にしたファイル名で画像がコンピューターにダウンロードされます。
  </Step>
</Steps>

選択したフレームをダウンロードせずにPNGとしてコピーするには、`Cmd+Shift+C`（Windows、Linuxでは`Ctrl+Shift+C`）を押します。

<Note>エクスポートされたPNGは、Canvas上でフレームが現在表示しているものと一致します。アプリやデザインがまだ読み込み中の場合は、エクスポートする前に完全にレンダリングされるまで待ってください。</Note>

## Canvasと実行中のアプリ

Canvasと実行中のアプリのプレビューは同じペインを共有しており、いくつかのモードが両者を橋渡しします：

* **フォーカスモード**：選択したフレームの**Focus**アクションで、そのフレームをビュー全体に拡大表示します。ボード上部の**Exit focus**を選ぶとCanvasに戻ります。
* **読み取り専用モード**：Canvasがバックグラウンドタスクのコンテキスト内でロックされている場合、反復操作は非表示になり、Focusのみが残ります。

<Note>
  Designフレームから新しいアプリをビルドするにはCoreまたはProプランが必要です。その他のCanvas機能はすべてのプランで利用できます。プランの詳細は[請求](/ja/billing/ai-billing)を参照してください。
</Note>

**リファレンス**

* [コンポーネント概要](/ja/design/core-components)：構成要素とその組み合わさり方。
* [フレーム](/ja/design/frames)：フレームの種類、フレームごとのアクションバー、BuildとFocus。
* [要素](/ja/design/elements)：フレーム内の個々のパーツ。
* [ツールバー](/ja/design/toolbar)：ツールの全カタログ。

**学ぶ**

* [提案を探索する](/ja/design/explore-suggestions)：選択したフレームから新しい方向性を派生させ、勝ち残ったものをアプリに適用します。
* [DesignとBuildの違い](/ja/design/design-vs-build)：どちらのサーフェスをいつ使うか。