> ## 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を手動で変更できます。Replit Designの[キャンバス](/ja/design/canvas)とPreviewの両方で動作するため、モックアップと実行中のアプリケーションを同じ方法で編集できます。 テキストの変更、色の調整、スペースの微調整といったシンプルな編集は、AIクレジットを消費せずにソースコードを直接更新します。隠れた複雑さを伴う変更の場合、ビジュアルエディターは自動的にAgentに引き渡します。 主要な概念: * **確定的な編集**: シンプルな変更（テキスト、色、スペース）はAgentのループを介さずソースコードに直接適用されます * **クレジットコストなし**: 直接編集はAIクレジットを消費しません — 複雑な変更のみAgentを通じます * **デュアルコンテキスト**: キャンバス上のフレームとPreviewのどちらでも同じように動作します * **ソースコードの同期**: すべての編集がその場で基盤となるソースコードを更新します ビジュアルエディターは現在**ウェブブラウザ**でのみ利用可能です。モバイルアプリとデスクトップアプリではサポートされていません。 ## ビジュアルエディターの使い方 ### キャンバス上で編集する ツールバーで **Edit** ツールを選択し、フレーム内の任意の要素をクリックします。要素にはその名前を示すチップ付きのハイライトが表示され、右側にビジュアルエディターパネルが開き、コンテンツ、レイアウト、色、ボーダーなど、その要素で編集できるプロパティが表示されます。値を調整したら、**Save edits** を選んで適用するか、**Discard** を選んで破棄します。 スーパーカーのコンフィギュレーターフレームでEditツールが有効になり要素が選択されている。右側にはビジュアルエディターパネルが表示され、Layout（Outer spaceとInner space）、Color（Text、Background、Opacity）、Border（色、太さ、角丸）のセクションと、DiscardおよびSave editsボタンが並んでいる 表示されるプロパティは選択した要素に応じて変わります。テキスト要素にはフォントのコントロールが、画像には画像ソースとアップロードが、コンテナにはレイアウトのコントロールが表示されます。 ### Previewで編集する 同じ編集体験が、実行中のアプリケーションでも機能します。 Preview内の任意の要素をクリックして編集を開始します。 テキストをインラインで編集したり、カラーピッカーで色を調整したり、スタイルコントロールでスペースを変更したり、画像を入れ替えたりします。 保存を選択してソースコードを更新します。シンプルな変更はAIクレジットを消費せずに直接適用されます。編集に複雑さが伴う場合、ビジュアルエディターはターゲットのメタデータをAgentに送信してサポートを求めます。 ### テキスト編集 任意のテキスト要素をクリックして、そのまま入力すると変更できます。テキストがソースコード内の文字列であれば、編集はすぐに適用されます。 ### 色の調整 カラーピッカーを使ってテキストと背景色を調整します。入力欄に「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クレジットを消費しません。ソースコードを直接更新するためです。ビジュアルエディターが隠れた複雑さを検出した場合、その変更はAgentを通じてルーティングされ、クレジットが使用されます。 はい。ループでレンダリングされたり、複数のコンポーネントで再利用されたりする要素を選択すると、すべてのインスタンスが強調表示され、一度に更新されます。 複数のサブ要素で構成される複合要素は、ビジュアルエディターで直接テキスト編集できません。代わりにチャットでAgentにその変更を依頼してください。 選択した要素の左上のラベルをクリックすると、ソースコード内のその場所にジャンプします。