ビジュアルエディター

​

ビジュアルエディターとは？

ビジュアルエディターを使うと、要素を直接クリックしてUIを手動で変更できます。Replit DesignのキャンバスとPreviewの両方で動作するため、モックアップと実行中のアプリケーションを同じ方法で編集できます。 テキストの変更、色の調整、スペースの微調整といったシンプルな編集は、AIクレジットを消費せずにソースコードを直接更新します。隠れた複雑さを伴う変更の場合、ビジュアルエディターは自動的にAgentに引き渡します。 主要な概念:

• 確定的な編集: シンプルな変更（テキスト、色、スペース）はAgentのループを介さずソースコードに直接適用されます
• クレジットコストなし: 直接編集はAIクレジットを消費しません — 複雑な変更のみAgentを通じます
• デュアルコンテキスト: キャンバス上のフレームとPreviewのどちらでも同じように動作します
• ソースコードの同期: すべての編集がその場で基盤となるソースコードを更新します

​

ビジュアルエディターの使い方

​

キャンバス上で編集する

ツールバーで Edit ツールを選択し、フレーム内の任意の要素をクリックします。要素にはその名前を示すチップ付きのハイライトが表示され、右側にビジュアルエディターパネルが開き、コンテンツ、レイアウト、色、ボーダーなど、その要素で編集できるプロパティが表示されます。値を調整したら、Save edits を選んで適用するか、Discard を選んで破棄します。 表示されるプロパティは選択した要素に応じて変わります。テキスト要素にはフォントのコントロールが、画像には画像ソースとアップロードが、コンテナにはレイアウトのコントロールが表示されます。

​

Previewで編集する

同じ編集体験が、実行中のアプリケーションでも機能します。

​

テキスト編集

任意のテキスト要素をクリックして、そのまま入力すると変更できます。テキストがソースコード内の文字列であれば、編集はすぐに適用されます。

​

色の調整

カラーピッカーを使ってテキストと背景色を調整します。入力欄に「purple」のような色の名前を入力するか、スポイトツールを使って画面上の任意の場所から色を選択できます。

​

スタイルの変更

直感的なコントロールを使って、要素全体のパディング、マージン、レイアウトを調整します。

​

レイアウトコントロール

ビジュアルエディターはすべてのコントロールをわかりやすいセクションにグループ化し、必要なものをより素早く見つけられるようにします: Text、Layout、Color、Border。（画像要素を選択した場合は Image セクションも表示されます。） Layout セクションは、Agentを介さずにコンテナ内の子要素の配置を調整する場所です。フレックスコンテナを選択してLayoutを展開すると、以下が表示されます。

• Alignment: コンテナ内の両軸に沿ってアイテムがどこに配置されるかを示す3×3のドットピッカー。
• Direction: 子要素を行または列に積み重ねる2つの矢印ボタン。
• Gap: アイテム間のスペースをピクセル値で指定します。Gap入力欄の隣のアイコンは現在の方向に合わせて変わるため、水平・垂直どちらのスペースを調整しているか常にわかります。その隣にある矢印アイコンは Distribute space between items を切り替え、子要素をコンテナの両端に押し広げます。
• Outer space: 要素の外側のスペースを辺ごとに設定する入力欄（辺ごとに1つの入力欄と、4辺すべてを一度にロックするリンクトグル）。
• Inner space: 各軸に沿って要素の内側のスペースを設定する入力欄で、両軸を一度にロックするリンクトグル付き。

Layoutセクションは、選択した要素に少なくとも1つのレイアウトコントロールが適用される場合にのみ表示されます。スペースやレイアウトのプロパティを持たないプレーンなテキストノードでは、このセクションが完全に非表示になり、エディターはコンパクトに保たれます。

​

画像の更新

画像を選択してURLを差し替えるか、即座にプレビューできる形で自分のファイルをアップロードします。

​

できること

• テキストのクイック修正: ソースファイルを開かずにコピー、ラベル、見出しを更新できます
• 色の探索: クリックして調整するだけでさまざまな配色を試せます — 適切なCSSを探す必要はありません
• レイアウトの微調整: ピクセル値を推測する代わりに、パディング、マージン、スペースをビジュアルで細かく調整できます
• 画像の入れ替え: クリックしてアップロードするだけで、プレースホルダー画像をリアルなアセットに置き換えられます
• デザインの反復: Agentとのやり取りを往復させずに、キャンバス上のフレームを素早く調整してビジュアルの方向性を比較できます

​

よくある質問

ビジュアルエディターの変更はAIクレジットを消費しますか？

シンプルで確定的な編集 — テキスト変更、色の選択、スペースの調整 — はAIクレジットを消費しません。ソースコードを直接更新するためです。ビジュアルエディターが隠れた複雑さを検出した場合、その変更はAgentを通じてルーティングされ、クレジットが使用されます。

複数の場所に表示される要素を編集できますか？

はい。ループでレンダリングされたり、複数のコンポーネントで再利用されたりする要素を選択すると、すべてのインスタンスが強調表示され、一度に更新されます。

一部の要素のテキストを編集できないのはなぜですか？

複数のサブ要素で構成される複合要素は、ビジュアルエディターで直接テキスト編集できません。代わりにチャットでAgentにその変更を依頼してください。

要素のソースコードを見つけるにはどうすればよいですか？

選択した要素の左上のラベルをクリックすると、ソースコード内のその場所にジャンプします。