Canvas

​

Canvas とは？

Canvas はプロジェクトエディタのデザインビューです。Agent がウェブサイト、デザイン、画像、ベクターグラフィック、動画を表すフレームを生成して、無限のボード上に配置します。フレームを移動・リサイズしたり、バリアントを生成したり、チャットで反復したりできます。 Preview タブの左上にある Canvas ボタンをクリックして、ペインを Canvas モードに切り替えます。ペインをライブアプリに戻すには、Canvas ボタンの隣のアーティファクトセレクターをクリックして、プレビューしたいアーティファクトを選択します。

​

Canvas の機能

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

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

​

Canvas の構成要素

Canvas の用語：

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

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

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

リファレンス

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

学ぶ

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