> ## 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 上のすべてのタイルは**フレーム**です。フレームは選択、ドラッグ、操作するものです。このページでは、フレームの種類、選択時に表示されるフレームごとのアクションバー、そこからトリガーできる機能（Reimagine、Refine、Build）について説明します。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-frames.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=60ca4e13659fc1747dc7c2e18ea485bc" alt="Canvas 上に配置された2つのフレーム：左にウェブサイトアーティファクト（Velocity — Supercar Rental）、右にデザインモックアップ（Velocity — Home (Mockup)）。" width="1725" height="1082" data-path="images/replitai/canvas-frames.png" />
</Frame>

## フレームの種類

主な2種類は**アーティファクト**（ライブのアプリに支えられたサーフェス）と**デザイン**（モックアップ）です。フレームの左上ヘッダーにどの種類かが表示されます。

| 種類           | ヘッダーラベル                   | 支えられているもの        | ライブアプリとして操作できるか？ | 実際のアプリに変換できるか？                                      |
| ------------ | ------------------------- | ---------------- | ---------------- | --------------------------------------------------- |
| アーティファクト     | **Website**、**Slides** など | 実行中のアーティファクト     | はい               | すでにアプリです。                                           |
| モバイルアーティファクト | **Mobile app**            | 実行中のアーティファクト     | はい（シミュレーターで）     | すでにアプリです。                                           |
| デザイン         | **Design**                | 静的 / インタラクティブモック | インタラクティブフレームのみ   | はい — フレームごとの **Build…** メニューから。[Build](#build) を参照。 |
| 画像           | **Image**                 | 生成された PNG / JPG  | いいえ              | いいえ — 参照として使用します。                                   |
| 動画           | **Video**                 | 生成された動画          | いいえ              | いいえ。                                                |
| ベクターグラフィック   | **Graphic**               | 生成された SVG        | いいえ              | いいえ — 実際のアプリに埋め込みます。                                |

<Note>
  デザインフレームが静的画像として動作するかインタラクティブなプロトタイプとして動作するかは、**Interactive frames** 機能によって異なります。有効な場合、デザインフレームは実際のページのようにクリックやフォーム入力に反応します。無効な場合は、反復できるスナップショットとしてレンダリングされますが、クリックスルーはできません。
</Note>

## フレームごとのアクションバー

フレームを選択するとアクションバーが表示されます。アクションはフレームの種類によって異なります。

### アーティファクトとデザインフレーム

アーティファクト（Website、Slides など）とデザインフレームの場合、アクションバーはフレームの上部に表示されます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-frame-action-bar.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=196e6d8a4bf056254870f229ccb1d8ef" alt="Velocity ウェブサイトフレームが選択された Canvas。フレームの上部に種類ラベルと Preview ボタンがあるフレームごとのアクションバーが表示され、その下に Reimagine で生成された3つのデザインバリアントが並んでいる。" width="1440" height="900" data-path="images/replitai/canvas-frame-action-bar.png" />
</Frame>

アクションクラスターは幅が狭いとアイコンに圧縮され、フレームが広くなるにつれてラベルが表示されます。左から右の順に表示されるフルセット：

| アクション     | 機能                                                                                                                                  |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Reimagine | 現在のフレームのバリアントを生成する Reimagine メニューを開きます。                                                                                             |
| Build…    | プロジェクト内のすべてのアーティファクトを一覧表示するメニューを開きます — 1つを選んでデザインを適用するか、**Build this design** を選んで新しいアーティファクトを作成します。デザインフレームのみ。[Build](#build) を参照。 |
| Preview   | フレームのフォーカスモードに入り、メインプレビューペインとしてロックします。フォーカス中は **Back to Canvas** に切り替わります。                                                          |
| Inspect   | フレーム内の要素をターゲットにした [Visual Editor](/learn/design/visual-editor) を開きます。フレームがフォーカスモードで選択可能な要素を含む場合のみ表示されます。                            |

フレームを選択すると、次の Agent チャットメッセージにスナップショットとして添付されます — [Canvas の概要](/references/design/canvas#anatomy-of-the-canvas) をご覧ください。

<Note>
  アクションバーは**読み取り専用モード**を考慮します。Canvas がバックグラウンドタスクのコンテキスト内でロックされている場合、反復アクションが非表示になり、Preview のみが残ります。
</Note>

### メディアフレーム

画像、動画、ベクターグラフィックフレームには、フレームの上に3つのコントロールを持つ小さなフローティングアクションバーが表示されます：

* **Replace media**: 新しいファイルをアップロードしてフレームと入れ替えます。Canvas 上の位置とサイズは保持されます。
* **Download**: メディアファイルをコンピューターに保存します。
* **Alt text**: アクセシビリティのための代替テキストと、フレームが参照されるときに Agent がコンテキストを持てるようにする説明を追加します。

## Reimagine

Reimagine は既存フレームの複数の代替バージョンを生成して、デザインの方向性を並べて比較できます。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-reimagine-menu.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=ebf9e605b480402084d649302bcad185" alt="選択した Velocity ウェブサイトフレームに開いた Reimagine メニュー。ヘッダーに「Reimagine your design」と表示され、7つの推奨プロンプトが一覧表示されている：Explore different approaches、Try different layouts、Explore different vibes、More like this but better、Optimize for usability、Show me the opposite of this、Surprise me — 下部にフリーフォームの「Something else…」入力。" width="1725" height="1082" data-path="images/replitai/canvas-reimagine-menu.png" />
</Frame>

### 推奨プロンプト

Reimagine を選択すると、フレームに固定されたポップオーバーが開き、7つのプリセット方向性が表示されます。各プリセットは調整されたプロンプトとバリアント数とペアになっています。

| プリセット                        | バリアント数 | 最適な用途                               |
| ---------------------------- | ------ | ----------------------------------- |
| Explore different approaches | 4      | 根本的に異なるコンセプト — IA とインタラクションモデルを変える。 |
| Try different layouts        | 3      | 同じコンテンツ、異なる空間構成と階層。                 |
| Explore different vibes      | 3      | 同じレイアウト、異なる美的・トーン的方向性。              |
| More like this, but better   | 2      | デザインの意見を変えずに現在の方向性を磨く。              |
| Optimize for usability       | 3      | 各バリエーションが異なるユーザビリティのトレードオフを優先する。    |
| Show me the opposite of this | 2      | 支配的なデザインの選択を反転させて隠れた仮定を浮き彫りにする。     |
| Surprise me                  | 3      | Agent が最も未探索の軸を選んでバリエーションを生成する。     |

選択されたバリアントは、ソースの隣に新しいデザインフレームとして Canvas 上に配置されます。ソースは比較できるよう変更されません。

### カスタムプロンプト

プリセットリストの下にある **Something else…** 入力でフリーフォームのプロンプトを入力できます。特定の方向性がある場合に使用します — 例えば、「エンタープライズ向けに信頼性と信用を強調した3つのバージョンを生成してください。」カスタムプロンプトはデフォルトで3つのバリアントを生成します。

## Refine（インライン編集）

Refine は1つのフレームに対するインライン編集ループです。フレームを選択して、その下に表示されるメッセージ入力に変更を入力します。Agent がフレームを書き直してその場で置き換えます。「Refine」というラベルのボタンはありません — インライン入力がそのサーフェスです。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-refine.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=757ea7833fe97d3fb290a8c365ae9a4c" alt="Canvas 上の選択されたデザインフレーム（Velocity — Home (Mockup)）。上部にフレームごとのアクションバー（Reimagine、Build…、Preview）が表示され、フレームの下にインラインの Refine 入力に「Add Ask AI icon next to the search bar」というプロンプトが入力されている。" width="3442" height="2164" data-path="images/replitai/canvas-refine.png" />
</Frame>

Refine は何を変えたいかがわかっていて複数の代替案を見る必要がない場合に使用します。プロンプト例：

* 「ヒーロー画像を全幅にして下に CTA を追加してください」
* 「ナビゲーションをサイドバーレイアウトに切り替えてください」
* 「より柔らかいカラーパレットにしてください — 黒を減らして温かみのあるグレーをもっと使ってください」

Reimagine と異なり、Refine はバリアントを生成するのではなく選択したフレームを直接修正します。オリジナルを保持したい場合は、先にフレームを複製してください（右クリック → **Duplicate**）。

## Build

選択したデザインフレームの **Build…** メニューはデザインをライブで動作するアプリに昇格させます。同じメニューは既存のアーティファクトへのデザイン適用もカバーします。

<Frame>
  <img src="https://mintcdn.com/replit/8nA9pobd3EzHbJmy/images/replitai/canvas-build-menu.png?fit=max&auto=format&n=8nA9pobd3EzHbJmy&q=85&s=953d97ad873eb9e0d792bb8a3163fb52" alt="選択したデザインフレームに開いた Build… メニュー。ヘッダーに「Build or apply your designs」と表示され、2つのセクションが表示されている：「Create something new…」に「Build this design — A new artifact will be created」オプション、「Apply to an existing creation…」にプロジェクトのウェブサイトアーティファクト（Velocity — Supercar Rental）が一覧表示されている。" width="3442" height="2164" data-path="images/replitai/canvas-build-menu.png" />
</Frame>

### Build this design

メニューで **Build this design** を選択すると、選択したデザインフレームから新しいアーティファクトが作成されます。新しいアーティファクトはプロジェクトのアーティファクトリストに追加され、ライブで動作するアプリになります。Build には Core または Pro が必要です。

### 既存のアーティファクトに適用する

Build… メニューにはプロジェクト内のすべてのアーティファクトが一覧表示されます。1つを選択すると、選択したデザインの変更がそのアーティファクトに適用されます — Agent がアーティファクトのコードをデザインに合わせて書き直し、デザインフレームは参照として Canvas 上に残ります。

## 関連ページ

* [Canvas](/references/design/canvas) — 概要と構成要素。
* [Toolbar](/references/design/toolbar) — フローティングツールバー。Generate が新しいフレームを作成します。
* [Elements](/references/design/elements) — フレーム内の個々のパーツ。
* [Visual Editor](/learn/design/visual-editor) — フォーカスされたフレーム内での要素レベルの編集。