ビジュアルエディター

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

​

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

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

• 確定的な編集：シンプルな変更（テキスト、色、スペース）はAgentのループなしにソースコードに直接適用
• クレジットコストなし：直接編集はAIクレジットを消費しません — 複雑な変更のみAgentを通じます
• デュアルコンテキスト：デザインCanvasフレームとプレビューで同じように動作
• ソースコードの同期：すべての編集がすぐに基盤となるソースコードを更新

​

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

​

プレビューで編集する

実行中のアプリケーション内の任意の要素をクリックして編集を開始します。テキスト、色、スペース、または画像を変更すると、ライブで変更が適用されます。

​

Canvasで編集する

同じ編集体験がデザインCanvasフレームでも機能します。フレーム内の任意の要素をクリックして編集できます — Agentのループなしにモックアップのリサイズ、テキスト変更、色やスペースの調整ができます。

​

テキスト編集

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

​

色の調整

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

​

スタイルの変更

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

​

レイアウトコントロール

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

• 整列：コンテナ内の両軸に沿ってアイテムが配置される場所を示す3×3のドットピッカー。
• 方向：子要素を行または列に積み重ねる2つの矢印ボタン。
• ギャップ：アイテム間のスペースのピクセル値。ギャップ入力の横にあるアイコンは現在の方向に合わせて変わるので、水平または垂直スペースを調整しているかが常にわかります。その隣にある矢印アイコンはアイテム間にスペースを分配をトグルし、子要素をコンテナの両端に押し広げます。
• 外側スペース：要素の外側のスペースを各辺ごとに設定する入力欄（辺ごとに1つの入力欄、4辺すべてを一度にロックするリンクトグル付き）。
• 内側スペース：各軸に沿って要素の内側のスペースを設定する入力欄、両軸を一度にロックするリンクトグル付き。

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

​

画像の更新

画像を選択してURLを入れ替えるか、即時プレビューで独自ファイルをアップロードできます。

​

できること

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

​

よくある質問

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

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

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

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

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

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

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

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