デザインモードを使用したデザイン編集

1. デザインキャンバスへの切替方法

キャンバスは、アプリやデザインモックアップなどのアーティファクトをひとつのボード上に並べて、Agentと一緒に視覚的にデザインを進められる作業スペースです。
ワークスペース内のPreviewパネルから切り替えるか、チャットでAgentに依頼することで開くことができます。

1-1　Previewパネル上部の「Canvas」トグルから切り替える

1. Previewパネルを開く
ワークスペース上部のタブから「Preview」タブを選択します。

1-2　「Canvas」ボタンをクリックする

Previewパネル左上にある「Canvas」トグルをクリックします。表示がプレビューからキャンバスに切り替わり、現在のアーティファクトやこれまでに作成したフレームが並んだ状態で表示されます。

2. キャンバス画面の見方

キャンバスは画面の境界がない広いボードです。複数のフレームを並べて確認したり、特定のフレームを拡大して細部を確認したりするために、表示倍率の変更（ズーム）と表示位置の移動（パン）の操作が用意されています。

2-1　ツールバーの構成

キャンバス画面下部には、操作モードを切り替えるためのツールバーが表示されます。アイコンをクリックすると、選択中のツールが切り替わります。

常に表示されるメニュー

アイコン	名称	役割
矢印	Interact（インタラクト）	フレームや要素をクリックして選択・操作します。
手	Pan（パン）	キャンバス全体をドラッグで移動します。
ブラシ	Markup（マークアップ）	キャンバス上に手書き注釈や図形を追加するモードに切り替えます。
フレーム	Edit（エディット）	フレーム内の要素を直接編集するモードに切り替えます。

Mark Up（マークアップ）選択時に表示されるメニュー

アイコン	名称	役割
矢印	Interact（インタラクト）	フレームや要素をクリックして選択・操作します。
ブラシ	Blush（ブラシ）	フレームや要素をクリックして選択・操作します。
T	Text（テキスト）	フレーム内の要素を直接編集するモードに切り替えます。
四角形	Rectangle（四角形）	矩形などの矩形を配置します。
矢印	矢印	矢印を引きます。
付箋	Sticky（付箋）	付箋を配置します。
カラーパレット	黒・グレー・赤・青・緑	描画色を選択します。

2-2　ズームイン・ズームアウト

● ズームイン（拡大）：Ctrl キーを押しながらマウスのホイールを上にスクロールします。
● ズームアウト（縮小）：Ctrl キーを押しながらマウスのホイールを下にスクロールします。
● パン（画面の移動）：、キャンバスの空白部分をドラッグ（クリックしたまま動かす）します。

2-3　パン（画面の移動）

Pan（パン）を選択してフレーム（デザインの枠）以外の空白エリアをドラッグすると、キャンバス全体を移動できます。

1. 下部ツールバーで「Pan」（手のアイコン）を選択する
ツールバーの手のアイコンをクリックして、Panモードに切り替えます。

2. キャンバス上をドラッグする
キャンバス上をクリックしたままマウスを動かすと、表示位置が移動します。Interactモードのままでも、フレームの外側にある空白部分をドラッグすることで同じように画面を移動できます。

※誤って要素を動かしてしまった場合は、Ctrl + Z キーで元に戻すことができます。

3.　要素の選択とプロパティ編集

キャンバス上のフレーム内にあるテキスト・ボタン・画像などの要素を直接クリックして、画面右側に表示されるパネルから見た目を編集できます。

テキスト・色・余白などの単純な変更は、Replitの Visual Editor によってソースコードへ直接反映されるため、AIクレジットを消費せずに編集できます（※1）。

3-1　フレームを選択する

1. フレームをクリックする
キャンバス上の編集したいフレームをクリックします。選択されたフレームの周囲にピンク色の枠が表示されます。ダークモードの場合は紫色の枠が表示されます。

2. フレーム下に表示される入力欄を確認する
フレームを選択すると、フレーム下に「Request changes or chat about frame...」と表示された背景色がグレーの入力欄が表示されます。ここに指示を入力すると、選択中のフレームに対してAIエージェントに変更を依頼できます。

3-2　要素を選択してプロパティ編集パネルを開く

1. フレーム内の要素を直接クリックする
選択したフレームの中から、編集したい要素（テキスト・ボタン・カードなど）を直接クリックします。選択された要素の周囲に青い点線の枠が表示され、左上に要素名（例：motion.div）のラベルが付きます。

2. 右側のプロパティ編集パネルで値を変更する
要素を選択すると、画面右側にプロパティ編集パネルが表示されます。パネルでは以下の項目を変更できます。

区分	変更できる項目
Text（文字）	フォントサイズ、フォントウェイト、整列（左／中央／右／両端揃え）
Appearance（見た目）	テキスト色、背景色、不透明度、枠線色、枠線幅、角丸
Layout（レイアウト）	余白（マージン）

色は、入力欄に色名（例：purple）を入力するか、カラーピッカーで指定します。カラーピッカーには、画面上の色を抽出するスポイトツールも用意されています。

3. 「Save 〇〇 Edit」をクリックする
パネル下部の「Save 〇〇 Edit」ボタンをクリックすると、変更内容がソースコードに反映されます。変更を取り消したい場合は「Discard」ボタンをクリックします。複雑な変更が必要だと判断された場合、Visual EditorからAgentに自動で引き継がれます。
※Visual Editorの仕様や対応範囲については Visual Editor をご参照ください。

4　バリアント（複数デザイン案）の生成

「バリアント生成」とは、ひとつのフレームをもとに、別のレイアウトや配色などのバリエーションをAgentに作成してもらう機能です。フレーム右上の「Reimagine...」ボタンから生成するか、チャットでまとめて依頼することで操作できます。

4-1　フレーム右上の「Reimagine...」ボタンから生成する

1. フレームを選択する
ベースにしたいフレームをクリックして選択します。

2. フレーム右上の「Reimagine...」ボタンをクリックする
選択したフレームのタイトルバー右側にある「Reimagine...」ボタンをクリックすると、おすすめのプロンプトがドロップダウンで表示されます。

3. プロンプトを選択する、または自分で入力する
ドロップダウンから希望に近いプロンプトを選ぶか、「このデザインをシンプルなスタイルで作って」「モダンでカラフルな配色も見せて」等のように自由入力欄に内容を入力します。Agentがその内容に沿った新しいフレームをキャンバス上に並べて生成します。

プロンプト「Try different layout」を選択して実行した場合のイメージ

入力時イメージ

実行後イメージ

4-2　チャットで複数案をまとめて依頼する

最初の依頼の段階で、複数のバリエーションを同時に作るように指示します。

● 「このランディングページを5パターン作って」
● 「サインアップ・プロフィール設定・確認画面のオンボーディングフローを作って」
● 「ランディングページと料金ページを、ミニマルとボールドの2スタイルでそれぞれ作って」

入力内容を送信すると、Agentが指定された各案を作成し、キャンバス上に横や順番に並べて配置します。並んだフレームを比較しながら検討できます。

5. レスポンシブ表示（PC・タブレット・スマートフォン）の切替と上書き

同じデザインが、PC・タブレット・スマートフォンの各画面サイズでどのように見えるかを、キャンバス上で並べて確認できます。さらに、特定のデバイス向けにフレームを編集してアプリに反映させることで、デバイスごとの見た目を上書きする運用が行えます。

5-1　対応している画面サイズ

Agentが対応しているデバイスサイズは次の3種類です。

デバイス	画面サイズ（ピクセル）
Mobile（スマートフォン）	390 × 844
Tablet（タブレット）	768 × 1024
Desktop（PC）	1280 × 720

5-2　チャットでデバイス表示を切り替える

1. 対象のフレームをクリックして選択する
別のデバイスサイズで確認したいフレームをクリックして選択します。

2. チャットで表示したいデバイスを伝える
「このページのモバイル版を見せて」「タブレットサイズも作って」のように入力して送信すると、Agentが指定したサイズのフレームをキャンバスに追加します。元のフレームは消えず、新しく追加されたフレームと横に並べて比較できます。

5-3 デバイスごとの見た目を上書きする

各デバイスサイズで生成されたフレームは、それぞれ独立したフレームとしてキャンバス上に配置されます。デバイスごとに見た目を変えたい場合は、そのデバイスのフレームを直接編集してから、Agentに反映を依頼します。

1. 上書きしたいデバイスのフレームをクリックして選択する
たとえばスマートフォン表示だけ変更したい場合は、Mobile（390 × 844）のフレームをクリックして選択します。

2. そのフレーム内の要素を直接クリックして編集する
「3. 要素の選択とプロパティ編集」と同じ手順で、フレーム内の要素を直接クリックして青い点線の枠で選択し、右側のプロパティ編集パネルから値を変更して「Save changes」をクリックします。編集はそのフレーム内に閉じているため、他のデバイスのフレームには影響しません。

3. チャットでAgentに反映を依頼する
フレームを選択した状態で、チャット欄に「このモバイル版のデザインをアプリに反映して」のように入力して送信します。Agentがアプリのコードを更新し、Previewタブで結果を確認できます。

※ Canvasフレームからアプリへの反映は、デザインを参照してAgentがコードを生成する操作です。Canvasフレームとアプリの間には自動的な同期はないため、上書きしたい変更ごとにAgentへの反映を依頼してください。
詳しくはFrom Design to Appをご参照ください。

まとめ

このセッションで紹介した主な操作を表にまとめます。

操作	方法
ズームイン・ズームアウト	Ctrl + マウスホイールのスクロール（上：拡大 / 下：縮小）
画面の移動（パン）	下部ツールバーで「Pan」を選択してドラッグ、または空白部分をドラッグ
フレームの選択	フレームをクリック → 周囲にピンクの点線枠が表示される
要素のプロパティ編集	フレームをクリック → 周囲にピンクの点線枠が表示される
バリアント生成	フレーム右上の「Reimagine...」ボタン、またはチャットで複数案を依頼
レスポンシブ表示の切替	チャットで「モバイル版を見せて」などとAgentに依頼
デバイスごとの上書き	該当デバイスのフレームを編集 → チャットで「このデザインをアプリに反映して」と依頼