チャットまたはキャンバスでFlowstepデザインを編集して反復する

Flowstepのデザインは生成後、完全に編集可能です。AIが最初に生成したものに固定されることはありません。エディタで視覚的に直接調整したり、チャットで平文で変更内容を説明したり、Flowstepに変更や新しい画面の生成を依頼したりできます。必要な変更に応じて最適な方法を選択してください。

​

2つの編集方法

​

画面の一部のみを編集

画面全体を編集する必要はありません。カード、ボタン、テキストラベルなどのサブ要素を選択すると、チャットプロンプトはそれだけに適用され、画面の残りの部分は変わりません。

• Direct selection モードに Shift+V で切り替えます（または Select ツールバーボタンのドロップダウンから選択）。これにより、クリック下の最も深い要素を選択できます。通常の選択は V を押すか、Cmd（Mac）/Ctrl（Windows）を押し続けて Direct selection を一時的に使用します。Escape で Direct selection を終了します。
• Cmd+Shift で複数の画面間のサブ要素を選択します。単一のプロンプトでメッセージごとに最大6つの画面を編集できます。

画像要素が選択されている場合（ワイヤーフレームモード外）、プロパティパネルに Image パネルが表示されます。画像をプレビューしたり、新しい画像ファイルをプレビューにドラッグするか Pick image をクリックして交換したり、Download image で保存したりできます。

​

要素のコピーと貼り付け

選択範囲をコピーして、必要な場所に貼り付けられます。同じファイル内、別のファイル、または別のブラウザータブでも使えます。コピーはシステムのクリップボードに保存されるためです。

• Cmd+C（Mac）/ Ctrl+C（Windows）でコピー、Cmd+X / Ctrl+X で切り取り、Cmd+V / Ctrl+V で貼り付けを行います。
• 選択範囲をその場で複製するには、Cmd+D / Ctrl+D を使います。
• 貼り付けた要素は、元の要素を覆わないように、少しずれた位置に配置されます。

これらのショートカットは選択中の要素に作用します。テキストを編集している間は、通常のテキストのコピーと貼り付けとして動作します。

​

キャンバス上で画面に名前を付ける

キャンバス上のすべての画面には、画面の上のラベルに名前が表示されます。まだ名前を付けていない画面には、Screen と表示されます。

• ラベルをダブルクリックして画面の名前を変更し、Enter を押して保存します。ラベル以外をクリックしても保存されます。名前は最大100文字まで入力できます。
• ラベルを一度クリックして画面を選択し、ドラッグしてキャンバス上で移動します。

​

不透明度、ブレンドモード、角の丸みを調整

要素を選択すると、プロパティパネルで外観を細かく調整できます。

• Opacity（不透明度） — 要素の透明度を0から100%の範囲で設定します。同じパネルには、要素と背後にあるものの混ざり方を制御するブレンドモード（Normal、Multiply、Screen、Overlay など）もあります。
• Corners（角の丸み） — 要素の角を丸くします。Corner radius を1つ設定して4つの角すべてに適用するか、Per corner をオンにして左上、右上、右下、左下の角それぞれに個別の半径を設定します。各値は、テーマの Token（トークン）または Custom の値を指定できます。

​

ピクセル単位でズームする

キャンバスを25,600%まで拡大して、余白と配置を細かく確認できます。200%を超えると、ピクセルに揃ったグリッド線が表示されます。拡大するほどグリッド線は見やすくなり、要素を正確に揃えられます。

​

前のバージョンを復元

チャット履歴の各AI生成は、元の結果を保持します。画面が生成後に編集または削除されている場合、そのチャットメッセージに Restore ボタンが表示されます。編集を取り消すには Restore original を、削除された画面を戻すには Restore または Restore all を使用します。編集が間違った方向に進んだ場合、これを使用して既知の良い状態に戻すことができます。 チャットパネル内のメッセージにマウスを乗せると、いつ送信されたかが表示されます。最近のメッセージは時刻を表示します。古いメッセージは経過時間を表示します（例：「1日前」）。ツールチップには完全な日時が表示されます。

​

ワンクリックアクション

直接編集の他に、Flowstepに代替案を検討するよう依頼できます。

• Try again from scratch — Flowstepに異なるレイアウトまたは視覚的方向で、現在の画面の新しいバージョンを生成するよう依頼します。
• Show the next screen — Flowstepに、ユーザーフロー内で論理的に次に来るものを生成するよう依頼します。
• Make it pretty — デザイン全体の余白、配置、色を調整します。レイアウトは変わりません。

これらのオプションにより、毎回プロンプトを作成する必要なく、迅速に反復できます。

​

反復して改善する

デザインは最初の試みで完璧に仕上がることはめったにありません。フィードバックの各ラウンドでチャットベースの編集を使用してください。何が機能していて何が機能していないかを説明すると、Flowstepがそこから調整します。画面を反復編集できる回数に制限はありません。