Skip to main content
Canvas上のすべてのタイルはフレームです。フレームは選択、ドラッグ、操作の対象です。このページでは、フレームの種類、選択時に現れるフレームごとのアクションバー、そこから実行できるBuildとFocusの機能について説明します。
ボード上に3つのフレームが並んだCanvas: Website（Scroll Hero）、APEX X1 Design System、APEX X1スーパーカーのDesignモックアップ。下部にはフローティングツールバー（Chat、Draw、Edit、Generate）がある

​
フレームの種類

主な2つの種類はアーティファクト（ライブでアプリに裏付けられた画面）とデザイン（モックアップ）です。フレームの左上のヘッダーに、その種類が表示されます。
Designフレームが静止画像として振る舞うか、インタラクティブなプロトタイプとして振る舞うかは、Interactive frames機能に依存します。有効な場合、Designフレームはクリックやフォーム入力に対して実際のページのように応答します。無効な場合は、反復操作はできてもクリックスルーはできないスナップショットとしてレンダリングされます。

​
さまざまなデバイスでプレビューする

デザインが異なる画面サイズでどう見えるかを確認できます。Agentにモバイル、タブレット、デスクトップ版を見せてほしいと頼みましょう（例: 「このページのモバイル版を見せて」）。すると、そのサイズでフレームがレンダリングされます:
  • モバイル: 390 × 844
  • タブレット: 768 × 1024
  • デスクトップ: 1280 × 720

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

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

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

アーティファクト（Website、Slidesなど）とデザインのフレームでは、アクションバーがフレームの上部を横断して表示されます。
選択されたAPEX X1 DesignフレームのあるCanvas。上部にフレームごとのアクションバーが表示され、種類のラベルとBuild、Focus、その他のオプションのアクションがある。フレームはチャットのプロンプトボックスにチップとして添付されている

Designフレームのアクションバー: Build…、Focus、その他のオプション。

アクションのまとまりは幅が狭いとアイコンに圧縮され、フレームが広くなるにつれてラベルが表示されます。全体のセットは左から右の順に次のとおりです: アプリのフレーム（Website、Slides、Mobile app）にはFocusとその他のオプションが表示され、デザインフレームにはその前にBuild…が加わります。選択したフレームから新しい方向性を分岐するには、その提案に従いましょう。 フレームを選択すると、それが次のAgentチャットメッセージにスナップショットとして添付されます。Canvas上にあるものを参照してください。
アクションバーはRead-onlyモードを尊重します。Canvasがバックグラウンドタスクのコンテキスト内でロックされている場合、反復操作用のアクションは非表示になり、Focusのみが残ります。

​
メディアフレーム

Image、Video、Vector graphicの各フレームには、フレームの上に小さなフローティングアクションバーが表示されます。3種類すべてに共通するもの:
  • Replace media: 新しいファイルをアップロードしてフレーム内のメディアを差し替えます。Canvas上の位置とサイズはそのまま保たれます。
  • Download: メディアファイルをコンピューターに保存します。
  • Alt text: アクセシビリティのため、またフレームが参照されたときにAgentがより多くの文脈を得られるように、代替テキストを追加します。
Canvas上で選択された青いスーパーカーの動画フレーム。上部にフローティングアクションバーが表示され、Replace media、Download（「Download original」というツールチップ付き）、Alt textのコントロールがある

動画フレームのアクションバー: Replace media、Download、Alt text。

Imageフレームには、さらに2つのコントロールが加わります:
  • Crop: Canvas上で画像を直接トリミングします。
  • Generate video: 画像から動画クリップを生成します。
Canvas上で選択された黄色いスーパーカーの画像フレーム。上部にフローティングアクションバーが表示され、Replace media、Crop、Download、Alt text、Generate videoのコントロールがある

画像フレームのアクションバーにはCropとGenerate videoが加わる。

​
新しい方向性を探索する

フレームを選択すると、その横に提案が表示されます。異なるレイアウトや新しい雰囲気、デザインが暗示するページなど、今見ているものに基づいたワンクリックの方向性です。それぞれが元のフレームの隣に新しいフレームとして生成されるので、元のフレームはそのまま保たれ、比較ができます。
APEX X1スーパーカーのヒーローを表示する選択済みのWebsiteフレーム。横にはSuggested next stepsパネルがあり、Explore different approaches、Try different layouts、Explore different vibes、Surprise meなどの提案チップが表示されている

​
Build

選択したDesignフレームの**Build…**メニューは、デザインをライブで動作するアプリに昇格させます。同じメニューから、すでに存在するアーティファクトへのデザインの適用も行えます。
選択済みのDesignフレーム（APEX X1 Exact Replica）で開いたBuildメニュー。見出しは「Build or apply your designs」で、新しいアーティファクトを作成する「Build this design」と、プロジェクトのAPEX X1 Design SystemおよびScroll HeroウェブサイトをリストするApply to an existing creationが表示されている

​
Build this design

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

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

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

​
Focus

Focusは選択したフレームをズームインしてビュー全体を埋め、ボードの他の部分を気にせずに近くで作業できるようにします。アクションバーでFocusを選択して入り、ボード上部のExit focusでCanvasに戻ります。
Velocityスーパーカーレンタルのホームページがフォーカスモードでビュー全体を埋めているWebsiteフレーム。ボード上部にExit focusボタンがある

​
関連ページ

  • Canvas — 概要と構成要素。
  • ツールバー — フローティングツールバー。Generateで新しいフレームを作成します。
  • 要素 — フレーム内の個々のパーツ。
  • Visual Editor — フォーカスしたフレーム内での要素レベルの編集。