ビジュアルエディター
要素をクリックしてテキスト、カラー、スペーシング、フォントなどを編集できます。小さな調整に最適で、大きな変更はチャットをご利用ください。
ビジュアルエディターを使うと、要素をクリックしてプロパティを直接編集することでアプリのUIを変更できます。builderのツールバーで Visual モードに切り替えると有効になります。
- ツールバーで Visual モードに切り替える（Preview、Code、Dashboard と並んでいます）
- プレビュー内の要素にホバーすると、オーバーレイでハイライト表示される
- 要素をクリックして選択する
- サイドバーパネルでプロパティを編集する：テキスト、カラー、スペーシング、フォント、ボーダー、画像、エフェクト
変更はプレビューに即座に反映され、ソースファイルにも書き込まれます。サイドバーの Reset last edit ボタンを使うと、最後に変更したプロパティを元に戻せます。
編集できる内容
Section titled “編集できる内容”- テキスト — コピーを直接編集
- フォントサイズ — 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 要素と背景画像に適用）
- エフェクト — シャドウと不透明度
元に戻す / やり直し
Section titled “元に戻す / やり直し”変更を元に戻すには Cmd+Z（Mac）または Ctrl+Z（Windows）を使用してください。やり直しは Cmd+Shift+Z / Ctrl+Shift+Z です。
ページパレット
Section titled “ページパレット”ビジュアルエディターはページを解析し、すでに使用されているすべての Tailwind カラーと CSS カスタムプロパティを抽出します。選択した要素のカラーピッカーを開くと、このページパレットから選択できるため、hex コードを推測することなく既存のデザインシステムと一貫性を保てます。
選択した要素について AI に質問する
Section titled “選択した要素について AI に質問する”プロパティエディターで表現できない調整については、サイドバー下部の Ask AI 入力欄に短いプロンプトを入力してください。選択中の要素がコンテキストとして渡されるため、「このカードをよりコンパクトにして」 や 「ホバー時に軽く浮き上がるような hover state を追加して」 といったプロンプトを、どの要素か説明しなくても使用できます。
静的要素と動的要素
Section titled “静的要素と動的要素”ビジュアルエディターは、className とテキストコンテンツが JSX 内の文字列リテラルである静的要素に最も適しています。動的要素（計算された className、条件付きレンダリング、式）については、エディターが自動的に構造化されたプロンプトを使って AI チャットにフォールバックします。
ビジュアルエディターはいつ使うべきですか？
Section titled “ビジュアルエディターはいつ使うべきですか？”ビジュアルエディターは小さくて素早い調整に最適です：
- タイポの修正
- スペーシングの調整
- カラーの変更
- ボタンテキストの更新
大きな変更（新しいセクションの追加、レイアウトの再構築、新機能の追加）には、代わりに AI チャットを使用してください。
変更はどのように保存されますか？
Section titled “変更はどのように保存されますか？”プロパティを編集すると変更は自動的に保存されます。ファイルはランタイムに書き込まれ、AI またはあなたがコミットを作成したときにコミットされます。
ビジュアル編集を元に戻せますか？
はい。Cmd+Z / Ctrl+Z で元に戻せます。ビジュアルエディターは独自の undo/redo スタックを管理しています。
編集できる要素とできない要素があるのはなぜですか？
静的なテキストと className 属性は直接編集できます。動的または計算された値（テンプレートリテラル、三項演算子、関数呼び出し）は自動的に AI チャットにフォールバックします。
ビジュアルエディターとコードエディターの違いは何ですか？
| ツール | 最適な用途 |
|---|---|
| Visual Editor | クリックによるプロパティの素早い変更（テキスト、カラー、スペーシング） |
| Code Editor | VS Code によるソースコードの完全な編集 |
| AI Chat | 複雑な変更、新機能の追加、デバッグ |