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

> Canvas でアプリデザインを視覚的に生成、再想像、構築しましょう。

## Canvas とは？

Canvas はプロジェクトエディタのデザインビューです。Agent がウェブサイト、デザイン、画像、ベクターグラフィック、動画を表すフレームを生成して、無限のボード上に配置します。フレームを移動・リサイズしたり、バリアントを生成したり、チャットで反復したりできます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-button.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=48a62a087c8cb6ede3aaaf4a469cf13f" alt="Canvas ボタンがハイライトされ、ツールチップ「Switch to Canvas mode — Canvas lets you design, annotate, and refine all your ideas in one place.」が開いた状態のプロジェクトエディタの Preview タブ" width="3450" height="2000" data-path="images/replitai/canvas-button.png" />
</Frame>

Preview タブの左上にある **Canvas** ボタンをクリックして、ペインを Canvas モードに切り替えます。ペインをライブアプリに戻すには、Canvas ボタンの隣のアーティファクトセレクターをクリックして、プレビューしたいアーティファクトを選択します。

## Canvas の機能

Canvas はツールバーまたはフレームごとのアクションバーから利用できる少数の機能を公開しています。

* **[生成](/references/design/toolbar#generate)**: ツールバーの Generate メニューまたはチャットプロンプトから新しいフレーム（デザイン、画像、ベクターグラフィック、動画）を作成します。
* **[改良](/references/design/frames#refine-inline-edits)**: インライン編集入力を通じてフレームにターゲットを絞った編集をその場で適用します。
* **[再想像](/references/design/frames#reimagine)**: プリセットの方向性またはフリーフォームのプロンプトを使って既存フレームの並べて表示できるバリアントを生成します。
* **[構築](/references/design/frames#build)**: フレームごとの **Build** メニューでデザインフレームをライブアーティファクトに昇格させます。

## Canvas の構成要素

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-anatomy.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=d80782f69b9cadb82f541aa20d71ef5a" alt="3つのリージョンにラベルが付いた Canvas：2つのフレーム（左にウェブサイトアーティファクト、右にデザインモックアップ）、ウェブサイトフレーム内でハイライトされた要素（ヒーローセクション）、フローティングツールバー（Chat、Draw、Edit、Generate）" width="3450" height="2000" data-path="images/replitai/canvas-anatomy.png" />
</Frame>

Canvas の用語：

* **Canvas**: すべてのフレーム、シェイプ、ノートを保持する無限にパン・ズームできるサーフェス。
* **フレーム**: Canvas 上のすべてのタイルはフレームです。主な2種類は **アーティファクト**（ライブのアプリに支えられたもの — フレームヘッダーに **Website**、**Slides** などと表示）と **デザイン**（ライブアプリに触れないモックアップ — フレームヘッダーに **Design** と表示）です。その他の種類には画像、動画、ベクターグラフィックが含まれます。
* **要素**: フレーム内の個々のパーツ（テキスト、ボタン、画像、その他のコンポーネント）。要素はビジュアルエディタで選択して調整するものです。
* **ツールバー**: Canvas ツールのフローティングバー。完全なカタログは [Toolbar](/references/design/toolbar) をご覧ください。

コンテキストに応じてさらに2つのコンポーネントが表示されます：

* **フレームごとのアクションバー**: フレームを選択したときに表示されます。Reimagine、Build…、Preview、Inspect が使えます — [Frames](/references/design/frames#per-frame-action-bar) をご覧ください。
* **チャットパネル**: Canvas の隣にドッキングされた Agent チャット。メッセージを送信する前にフレームを選択すると、Agent がビジュアルコンテキストを持てるようスナップショットとして添付されます。

<Note>
  デザインフレームから新しいアプリを構築するには Core または Pro が必要です。その他すべての Canvas 機能はすべてのプランで利用できます。プランの詳細は [Billing](/billing/ai-billing) をご覧ください。
</Note>

**リファレンス**

* [Toolbar](/references/design/toolbar) — 完全なツールカタログ、ジェスチャー、選択。
* [Frames](/references/design/frames) — フレームの種類、フレームごとのアクションバー、Reimagine、Refine、Annotate、Build。
* [Elements](/references/design/elements) — フレーム内の個々のパーツ。
* [Agent](/references/agent/overview) — Canvas でフレームを生成・編集する Agent。

**学ぶ**

* [Canvas ガイド](/learn/design/canvas) — チュートリアルウォークスルー。
* [Canvas でデザインする](/build/design-with-canvas) — 既存アプリのビジュアルバリアントを生成して適用したいものを選択しましょう。
* [Canvas vs Preview](/learn/design/canvas-vs-preview) — それぞれのサーフェスをいつ使うか。