Canvas 上のすべてのタイルはフレームです。フレームは選択、ドラッグ、操作するものです。このページでは、フレームの種類、選択時に表示されるフレームごとのアクションバー、そこからトリガーできる機能（Reimagine、Refine、Build）について説明します。
フレームの種類
主な2種類はアーティファクト（ライブのアプリに支えられたサーフェス）とデザイン（モックアップ）です。フレームの左上ヘッダーにどの種類かが表示されます。
| 種類 | ヘッダーラベル | 支えられているもの | ライブアプリとして操作できるか？ | 実際のアプリに変換できるか？ |
|---|
| アーティファクト | Website、Slides など | 実行中のアーティファクト | はい | すでにアプリです。 |
| モバイルアーティファクト | Mobile app | 実行中のアーティファクト | はい（シミュレーターで） | すでにアプリです。 |
| デザイン | Design | 静的 / インタラクティブモック | インタラクティブフレームのみ | はい — フレームごとの Build… メニューから。Build を参照。 |
| 画像 | Image | 生成された PNG / JPG | いいえ | いいえ — 参照として使用します。 |
| 動画 | Video | 生成された動画 | いいえ | いいえ。 |
| ベクターグラフィック | Graphic | 生成された SVG | いいえ | いいえ — 実際のアプリに埋め込みます。 |
デザインフレームが静的画像として動作するかインタラクティブなプロトタイプとして動作するかは、Interactive frames 機能によって異なります。有効な場合、デザインフレームは実際のページのようにクリックやフォーム入力に反応します。無効な場合は、反復できるスナップショットとしてレンダリングされますが、クリックスルーはできません。
フレームごとのアクションバー
フレームを選択するとアクションバーが表示されます。アクションはフレームの種類によって異なります。
アーティファクトとデザインフレーム
アーティファクト（Website、Slides など）とデザインフレームの場合、アクションバーはフレームの上部に表示されます。
アクションクラスターは幅が狭いとアイコンに圧縮され、フレームが広くなるにつれてラベルが表示されます。左から右の順に表示されるフルセット：
| アクション | 機能 |
|---|
| Reimagine | 現在のフレームのバリアントを生成する Reimagine メニューを開きます。 |
| Build… | プロジェクト内のすべてのアーティファクトを一覧表示するメニューを開きます — 1つを選んでデザインを適用するか、Build this design を選んで新しいアーティファクトを作成します。デザインフレームのみ。Build を参照。 |
| Preview | フレームのフォーカスモードに入り、メインプレビューペインとしてロックします。フォーカス中は Back to Canvas に切り替わります。 |
| Inspect | フレーム内の要素をターゲットにした Visual Editor を開きます。フレームがフォーカスモードで選択可能な要素を含む場合のみ表示されます。 |
アクションバーは読み取り専用モードを考慮します。Canvas がバックグラウンドタスクのコンテキスト内でロックされている場合、反復アクションが非表示になり、Preview のみが残ります。
メディアフレーム
画像、動画、ベクターグラフィックフレームには、フレームの上に3つのコントロールを持つ小さなフローティングアクションバーが表示されます：
- Replace media: 新しいファイルをアップロードしてフレームと入れ替えます。Canvas 上の位置とサイズは保持されます。
- Download: メディアファイルをコンピューターに保存します。
- Alt text: アクセシビリティのための代替テキストと、フレームが参照されるときに Agent がコンテキストを持てるようにする説明を追加します。
Reimagine
Reimagine は既存フレームの複数の代替バージョンを生成して、デザインの方向性を並べて比較できます。
推奨プロンプト
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 が最も未探索の軸を選んでバリエーションを生成する。 |
カスタムプロンプト
プリセットリストの下にある Something else… 入力でフリーフォームのプロンプトを入力できます。特定の方向性がある場合に使用します — 例えば、「エンタープライズ向けに信頼性と信用を強調した3つのバージョンを生成してください。」カスタムプロンプトはデフォルトで3つのバリアントを生成します。
Refine（インライン編集）
Refine は1つのフレームに対するインライン編集ループです。フレームを選択して、その下に表示されるメッセージ入力に変更を入力します。Agent がフレームを書き直してその場で置き換えます。「Refine」というラベルのボタンはありません — インライン入力がそのサーフェスです。
Refine は何を変えたいかがわかっていて複数の代替案を見る必要がない場合に使用します。プロンプト例：
- 「ヒーロー画像を全幅にして下に CTA を追加してください」
- 「ナビゲーションをサイドバーレイアウトに切り替えてください」
- 「より柔らかいカラーパレットにしてください — 黒を減らして温かみのあるグレーをもっと使ってください」
Reimagine と異なり、Refine はバリアントを生成するのではなく選択したフレームを直接修正します。オリジナルを保持したい場合は、先にフレームを複製してください（右クリック → Duplicate）。
Build
選択したデザインフレームの Build… メニューはデザインをライブで動作するアプリに昇格させます。同じメニューは既存のアーティファクトへのデザイン適用もカバーします。
Build this design
メニューで Build this design を選択すると、選択したデザインフレームから新しいアーティファクトが作成されます。新しいアーティファクトはプロジェクトのアーティファクトリストに追加され、ライブで動作するアプリになります。Build には Core または Pro が必要です。
既存のアーティファクトに適用する
Build… メニューにはプロジェクト内のすべてのアーティファクトが一覧表示されます。1つを選択すると、選択したデザインの変更がそのアーティファクトに適用されます — Agent がアーティファクトのコードをデザインに合わせて書き直し、デザインフレームは参照として Canvas 上に残ります。
関連ページ
