ビジュアルエディター

要素をクリックしてテキスト、色、スペーシング、フォントなどを編集できます。小さな調整に最適で、大きな変更にはチャットを使用してください。

ビジュアルエディターを使うと、要素をクリックしてプロパティを直接編集することでアプリのUIを変更できます。ビルダーのツールバーで Visual モードに切り替えると有効になります。

仕組み

1. Visual モードに切り替える — ツールバーの Preview のサブモードです（ツールバーの2つのセグメントは Preview と Admin です）
2. プレビュー内の要素にカーソルを合わせると、オーバーレイでハイライト表示されます
3. 要素をクリックして選択する
4. サイドバーパネルでプロパティを編集する: テキスト、色、スペーシング、フォント、ボーダー、画像、エフェクト

変更はプレビューに即座に反映され、ソースファイルに書き込まれます。サイドバーの Reset last edit ボタンを使うと、最後のプロパティ変更を元に戻せます。

編集できる内容

• テキスト — コピーを直接編集
• フォントサイズ — xs、sm、base、lg、xl など
• フォントウェイト — thin、light、normal、medium、semibold、bold、extrabold
• フォントファミリー — Geist、Inter、Montserrat、Noto Serif、Geist Mono、Fira Code、JetBrains Mono
• フォントスタイル — イタリック切り替え
• テキスト揃え — left、center、right、justify
• テキストカラー — 任意の Tailwind カラー
• 背景色 — 任意の Tailwind カラー
• スペーシング — 全辺のパディングとマージン
• ボーダー — 幅、色、角丸（テキストコンテンツを持たないコンテナ要素で使用可能）
• 画像 — ストック写真の検索で置き換えるか、自分の画像をアップロード（img 要素と背景画像に適用）
• エフェクト — シャドウと不透明度

元に戻す / やり直し

変更を元に戻すには Cmd+Z（Mac）または Ctrl+Z（Windows）を使用します。やり直しは Cmd+Shift+Z / Ctrl+Shift+Z です。

ページパレット

ビジュアルエディターはページを検査し、すでに使用されているすべての Tailwind カラーと CSS カスタムプロパティを抽出して表示します。選択した要素のカラーピッカーを開くと、このページパレットから選択できるため、hex コードを推測することなく既存のデザインシステムとの一貫性を保てます。

選択した要素について AI に質問する

プロパティエディターでは表現できない調整については、サイドバー下部の Ask AI 入力欄に短いプロンプトを入力してください。選択された要素がコンテキストとして渡されるため、「このカードをよりコンパクトにして」 や 「微妙な浮き上がりのあるホバー状態を追加して」 のようなプロンプトを、対象の要素を説明することなく使用できます。

静的要素と動的要素

ビジュアルエディターは、JSX 内で className とテキストコンテンツが文字列リテラルである静的要素で最もよく機能します。動的要素（計算された className、条件付きレンダリング、式）の場合、エディターは自動的に構造化されたプロンプトを使った AI チャットにフォールバックします。

ビジュアルエディターはいつ使うべきか？

ビジュアルエディターは小さくて素早い調整に最適です:

• タイポの修正
• スペーシングの調整
• 色の変更
• ボタンテキストの更新

大きな変更（新しいセクション、レイアウトの再構成、新機能）には、代わりに AI チャットを使用してください。

変更を保存するには？

プロパティを編集すると変更は自動的に保存されます。ファイルはランタイムに書き込まれ、次のビルダーターンでコミットされる際にバージョン履歴に記録されます。

よくある質問

ビジュアル編集を元に戻せますか？

はい。Cmd+Z / Ctrl+Z で元に戻せます。ビジュアルエディターは独自の元に戻す/やり直しのスタックを持っています。

一部の要素だけ編集できるのはなぜですか？

静的なテキストと className 属性は直接編集できます。動的または計算された値（テンプレートリテラル、三項演算子、関数呼び出し）は自動的に AI チャットにフォールバックします。

AI チャットではなくビジュアルエディターを使うべきタイミングは？

ツール	最適な用途
Visual Editor	クリックによるプロパティの素早い変更（テキスト、色、スペーシング）
AI Chat	複雑な変更、新機能の追加、デバッグ

アプリを変更する方法はこの2つだけです — コードエディターはありません。詳しくはコードの編集とアクセスをご覧ください。