> ## 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におけるBuildとFocusの動作について。
Canvas上のすべてのタイルは**フレーム**です。フレームは選択、ドラッグ、操作の対象です。このページでは、フレームの種類、選択時に現れるフレームごとのアクションバー、そこから実行できるBuildとFocusの機能について説明します。
## フレームの種類
主な2つの種類は**アーティファクト**（ライブでアプリに裏付けられた画面）と**デザイン**（モックアップ）です。フレームの左上のヘッダーに、その種類が表示されます。
| 種類 | ヘッダーのラベル | 裏付けとなるもの | ライブなアプリのように操作できる？ | 実際のアプリに変換できる？ |
| ------------ | ------------------------ | ----------------- | ----------------- | ---------------------------------------------------- |
| アーティファクト | **Website**、**Slides**など | 実行中のアーティファクト | はい | すでにアプリです。 |
| モバイルアーティファクト | **Mobile app** | 実行中のアーティファクト | はい（シミュレーター内） | すでにアプリです。 |
| デザイン | **Design** | 静的またはインタラクティブなモック | インタラクティブフレームのみ | はい — フレームごとの\*\*Build…\*\*メニューから。[Build](#build)を参照。 |
| 画像 | **Image** | 生成されたPNG / JPG | いいえ | いいえ — 参照用として使用。 |
| 動画 | **Video** | 生成された動画 | いいえ | いいえ。 |
| ベクターグラフィック | **Graphic** | 生成されたSVG | いいえ | いいえ — 実際のアプリに埋め込みます。 |
Designフレームが静止画像として振る舞うか、インタラクティブなプロトタイプとして振る舞うかは、**Interactive frames**機能に依存します。有効な場合、Designフレームはクリックやフォーム入力に対して実際のページのように応答します。無効な場合は、反復操作はできてもクリックスルーはできないスナップショットとしてレンダリングされます。
## さまざまなデバイスでプレビューする
デザインが異なる画面サイズでどう見えるかを確認できます。Agentにモバイル、タブレット、デスクトップ版を見せてほしいと頼みましょう（例: 「このページのモバイル版を見せて」）。すると、そのサイズでフレームがレンダリングされます:
* **モバイル**: 390 × 844
* **タブレット**: 768 × 1024
* **デスクトップ**: 1280 × 720
## フレームごとのアクションバー
フレームを選択すると、アクションバーが表示されます。アクションはフレームの種類によって異なります。
### アーティファクトとデザインのフレーム
アーティファクト（Website、Slidesなど）とデザインのフレームでは、アクションバーがフレームの上部を横断して表示されます。
アクションのまとまりは幅が狭いとアイコンに圧縮され、フレームが広くなるにつれてラベルが表示されます。全体のセットは左から右の順に次のとおりです:
| アクション | 動作 |
| ------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Export | フレームをPNGとしてダウンロードします。[フレームをPNGとしてエクスポートする](/ja/design/canvas#export-a-frame-as-png)を参照。 |
| Build… | プロジェクト内のすべてのアーティファクトを一覧表示するメニューを開きます。1つを選んでデザインをそれに適用するか、**Build this design**を選んで新しいアーティファクトを作成します。デザインフレームのみ。[Build](#build)を参照。 |
| Focus | フォーカスモードに入り、フレームをメインビューとして拡大します。 |
| More（…） | その他のフレームアクション。コピー、複製、並べ替え、エクスポートはボードの[右クリックメニュー](/ja/design/canvas#right-click-menu)からも利用できます。 |
アプリのフレーム（Website、Slides、Mobile app）にはFocusとその他のオプションが表示され、デザインフレームにはその前にBuild…が加わります。選択したフレームから新しい方向性を分岐するには、その[提案](/ja/design/explore-suggestions)に従いましょう。
フレームを選択すると、それが次のAgentチャットメッセージにスナップショットとして添付されます。[Canvas上にあるもの](/ja/design/canvas#what-lives-on-the-canvas)を参照してください。
アクションバーは**Read-onlyモード**を尊重します。Canvasがバックグラウンドタスクのコンテキスト内でロックされている場合、反復操作用のアクションは非表示になり、Focusのみが残ります。
### メディアフレーム
Image、Video、Vector graphicの各フレームには、フレームの上に小さなフローティングアクションバーが表示されます。3種類すべてに共通するもの:
* **Replace media**: 新しいファイルをアップロードしてフレーム内のメディアを差し替えます。Canvas上の位置とサイズはそのまま保たれます。
* **Download**: メディアファイルをコンピューターに保存します。
* **Alt text**: アクセシビリティのため、またフレームが参照されたときにAgentがより多くの文脈を得られるように、代替テキストを追加します。
Imageフレームには、さらに2つのコントロールが加わります:
* **Crop**: Canvas上で画像を直接トリミングします。
* **Generate video**: 画像から動画クリップを生成します。
## 新しい方向性を探索する
フレームを選択すると、その横に[提案](/ja/design/explore-suggestions)が表示されます。異なるレイアウトや新しい雰囲気、デザインが暗示するページなど、今見ているものに基づいたワンクリックの方向性です。それぞれが元のフレームの隣に新しいフレームとして生成されるので、元のフレームはそのまま保たれ、比較ができます。
## Build
選択したDesignフレームの\*\*Build…\*\*メニューは、デザインをライブで動作するアプリに昇格させます。同じメニューから、すでに存在するアーティファクトへのデザインの適用も行えます。
### Build this design
メニューの**Build this design**を選ぶと、選択したDesignフレームから新しいアーティファクトが開始されます。新しいアーティファクトはプロジェクトのアーティファクトリストに追加され、ライブで動作するアプリになります。Buildの利用にはCoreまたはProが必要です。
### 既存のアーティファクトに適用する
Build…メニューにはプロジェクト内のすべてのアーティファクトが一覧表示されます。1つを選ぶと、選択したデザインの変更がそのアーティファクトに適用されます。Agentがデザインに合わせてアーティファクトのコードを書き直し、参照用としてDesignフレームはCanvas上に残ります。
## Focus
Focusは選択したフレームをズームインしてビュー全体を埋め、ボードの他の部分を気にせずに近くで作業できるようにします。アクションバーで**Focus**を選択して入り、ボード上部の**Exit focus**でCanvasに戻ります。
## 関連ページ
* [Canvas](/ja/design/canvas) — 概要と構成要素。
* [ツールバー](/ja/design/toolbar) — フローティングツールバー。Generateで新しいフレームを作成します。
* [要素](/ja/design/elements) — フレーム内の個々のパーツ。
* [Visual Editor](/ja/design/visual-editor) — フォーカスしたフレーム内での要素レベルの編集。