https://main--cc--adobecom.aem.live/cc-shared/assets/img/firefly.svg|AdobeFirefly Adobe Firefly
AI webサイトビルダーのFirefly Builderでインタラクティブなデザインを作成
Firefly Builderなら、プロンプトと参考資料を、キャンバス上で直接プレビュー、編集できるレスポンシブデザインに変換し、webサイト、アプリなどを簡単にビジュアル化できます。
デザインシステムとキャンバス上の編集機能で、一貫性とコントロールを実現
プロンプトを入力するか、ブランドガイドラインをアップロードするだけで、バージョンが変わってもルック＆フィールの一貫性を保つデザインシステムを生成できます。プロパティパネルでデザインを編集するか、検査ツールで任意の要素を選択し、変更したい内容をプロンプトで入力できます。
デザインを簡単にプレビュー、共有
Firefly Builderでは、デザインをクリック操作できるプロトタイプとして形にし、キャンバス上で直接テストできます。ステークホルダー、クライアント、共同作業者にリンクを送信してフィードバックを受け取り、開発を始める前に修正、調整できます。
AI webサイトビルダーからエクスペリエンスを書き出し
クリーンなHTMLコードバンドルを開発者に引き渡すか、webコーディングツールに読み込んで、デザインをデプロイまで進めることができます。
Firefly Builderでインタラクティブなデザインを作成する方法
ステップ1
承認待ちリストに登録する
ステップ2
Firefly Builderを開く
ステップ3
プロジェクトの生成を開始する
ステップ4
プロジェクトをプレビューする
ステップ5
結果をさらに調整する
ステップ6
オプション：別のプロジェクトを生成する
新しいプロジェクトを作成するには、アプリフレームの選択を解除してズームアウトします。下部のツールバーにあるフレームツールを使って、キャンバス上の任意の場所に新しいフレームを描画します。次に、そのフレームを選択して新しいプロンプトを入力し、フレーム内に新しいデザインを生成します。
キャンバス上でプロジェクトを選択するか、チャットパネル左上のドロップダウンメニューから選択して、プロジェクトを切り替えます。
Firefly Builderでインタラクティブなエクスペリエンスを作成する方法
Firefly Builderでインタラクティブなエクスペリエンスを作成する手順
PT5M
firefly
クリエイティブなコントロール
デザインシステムを生成し、デザインの細部までキャンバス上で直接編集できるFirefly Builderによって、バイブコーディングをこれまで以上に精密にコントロールできます。
コード不要のインタラクティブデザイン
説明を入力し、ビジュアルの参考資料を追加して、ブランドガイドラインをアップロードするだけで、AI webサイトビルダーがイメージに合ったインタラクティブなデザインをすばやく生成します。
簡単に共有
デザインが仕上がったら、共有可能なリンクを取得し、共同作業者、ステークホルダーに送信してレビューを依頼できます。ファイルの書き出しや引き渡しは必要ありません。
実制作に対応した出力
Firefly Builderなら、web開発ツールでさらに拡張できるクリーンなコードバンドルをすばやく生成できます。
