> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# チャットまたはキャンバスでFlowstepデザインを編集して反復する
> Flowstepで生成された画面を手動で視覚的に編集するか、チャットベースのプロンプトを使用して改善し、デザインが完璧になるまで何度でも反復できます。
Flowstepデザインは生成後、完全に編集可能です。AIが最初に生成したデザインに固定されることはありません。エディタで視覚的に直接調整するか、チャットで平文で変更内容を説明するか、Flowstepに変更や新しい画面の生成を依頼できます。必要な変更に応じて最適な方法を選択してください。
## 2つの編集方法
キャンバス上の要素を選択して変更することで、直接変更を加えます。この方法は精密な調整に最適です。コンポーネントの移動、色の変更、ラベルの更新、余白の調整などに向いています。
デザイン内のコンポーネントまたはレイヤーをクリックして選択します。
エディタコントロールを使用して、色、サイズ、位置、またはテキストコンテンツなどのプロパティを調整します。
変更はキャンバス上にすぐに反映されます。引き続き編集するか、次の画面に進みます。
平文で変更内容を説明し、Flowstepがデザインを更新します。この方法はレイアウトの調整やセクションの再検討、スタイル方向の適用など、広範な変更や構造的な変更に高速です。
編集したい画面を選択し、チャット入力を開きます。
Flowstepで更新してほしいことを入力します。何が変わるべきか、そしてなぜかについて具体的に説明すると、より正確な結果が得られます。
Flowstepが変更を適用し、結果を表示します。完全に希望通りでない場合は、フォローアップメッセージを送信してさらに改善できます。
編集と再生成は新しい画面を追加するのではなく、選択した画面を**その場で**更新します。Flowstepが変更をストリーミングしている間、現在作業中の要素は緑色の点線の枠線で強調表示されます。画面を選択せずに生成すると、代わりに新しい画面が追加されます。
## 画面の一部のみを編集
画面全体を編集する必要はありません。カード、ボタン、テキストラベルなどのサブ要素を選択すると、チャットプロンプトはそれだけに適用され、画面の残りの部分は変わりません。
* **Direct selection**モードに**Shift+V**で切り替えます（またはSelectツールバーボタンのドロップダウンから選択）。これにより、クリック下の最も深い要素を選択できます。通常の選択は**V**を押すか、**Cmd**（Mac）/**Ctrl**（Windows）を押し続けてDirect selectionを一時的に使用します。**Escape**でDirect selectionを終了します。
* **Cmd+Shift**で複数の画面間のサブ要素を選択します。単一のプロンプトでメッセージごとに最大6つの画面を編集できます。
画像要素が選択されている場合（ワイヤーフレームモード外）、プロパティパネルに**Image**パネルが表示されます。画像をプレビューしたり、新しい画像ファイルをプレビューにドラッグするか**Pick image**をクリックして交換したり、**Download image**で保存したりできます。
## 前のバージョンを復元
チャット履歴の各AI生成は、元の結果を保持します。画面が生成後に編集または削除されている場合、そのチャットメッセージに**Restore**ボタンが表示されます。編集を取り消すには**Restore original**を、削除された画面を戻すには**Restore**または**Restore all**を使用します。編集が間違った方向に進んだ場合、これを使用して既知の良い状態に戻すことができます。
## ワンクリックアクション
直接編集の他に、Flowstepに代替案を検討するよう依頼できます。
* **Try again from scratch** — Flowstepに異なるレイアウトまたは視覚的方向で、現在の画面の新しいバージョンを生成するよう依頼します。
* **Show the next screen** — Flowstepに、ユーザーフロー内で論理的に次に来るものを生成するよう依頼します。
* **Make it pretty** — デザイン全体の余白、配置、色を調整します。レイアウトは変わりません。
これらのオプションにより、毎回プロンプトを作成する必要なく、迅速に反復できます。
## 反復して改善する
デザインは最初の試みで完璧に仕上がることはめったにありません。フィードバックの各ラウンドでチャットベースの編集を使用してください。何が機能していて何が機能していないかを説明すると、Flowstepがそこから調整します。画面を反復編集できる回数に制限はありません。
チャット経由で反復する際、名前や位置で具体的な要素を参照すると、より正確な結果が得られます。たとえば、「call-to-actionボタンを画面の下部に移動して、全幅にする」は「ボタンを修正して」より効果的です。