サイトの編集

Draftlyには3つの異なる編集モードがあります。

デザインの変更にはチャット編集を、コピーの微調整にはインライン編集を、チャットで対応できない構造的な変更にはコードエディターを使用してください。

チャット編集は主要なイテレーションツールです。生成後にチャットで入力すると、AIは以下を実行します。 1. リクエストを分析します 2. 最小限のHTML/CSSパッチ（0～8操作）を生成します 3. プレビューにリアルタイムで適用します 4. 0.5クレジットを消費します

チャット編集でできること: - 任意のCSSの色、グラデーション、変数を変更 - 任意のテキスト（見出し、本文、ボタンラベル）を書き換え - セクションの再構築（グリッド列、リストとカードの切り替えなど） - セクション内の要素の追加または削除 - フォント、間隔、パディング、ボーダースタイルの変更 - ページ末尾に新しいセクションを挿入

完全な再生成がトリガーされるケース: - 完全な構造的再設計（レイアウトアーキテクチャの変更） - 画像またはビデオパイプラインの再実行が必要なリクエスト - ターゲットパッチとして表現するには広範囲すぎる変更

完全な再生成の前には明確な警告が表示されます。クレジットコストを確認し、キャンセルできます。

サイトプレビュー内の表示されているテキストをクリックして編集します。編集可能なオーバーレイが表示されます。新しいテキストを入力し、Enterキーを押すか、他の場所をクリックして確定します。

インライン編集できるもの: - ヒーロー見出しとサブライン - ナビゲーションリンクのラベル - セクションの見出しと本文 - ボタンラベル - フッターのタグラインと連絡先情報

インライン編集はプロジェクトに自動的に保存されます。再公開するとライブサイトに適用されます。

インライン編集は完全に無料です — クレジットは消費されません。

デザインプリセットは、コンテンツに触れることなくサイト全体の視覚的特性を変更するワンクリックのスタイル変換です。

ビルダーの左パネルにあるブラシアイコンからプリセットパネルを開きます。

プリセットカテゴリ: - 業界 — レストラン、SaaS、ポートフォリオ、代理店、ヘルスケア、フィットネス、不動産、美容 - カラーパレット — ダーク、ライト、ムーディー、バイブラント、ミニマル、ラグジュアリー、エンバー、オーシャン、フォレスト - タイポグラフィセット — モダンサンセリフ、クラシックセリフ、ジオメトリック、モノスペース、エディトリアル - レイアウト密度 — エアリー（ゆったりとした余白）、標準、コンパクト

プリセットの適用: 任意のプリセットをクリックすると、プレビューがリアルタイムで更新されます。別のプリセットをクリックして比較します。適用をクリックして確定します。

プリセットはCSS変数とフォントの選択を変更するもので、HTML構造は変更しません。これらは完全に無料で、クレジットは消費されません。

サイトの色は、<style>ブロック内のCSS変数として保存されています。

色を変更する3つの方法: - チャット: 「プライマリアクセントを#FF6B35に変更」または「背景をディープネイビーにする」 - デザインプリセット: 調整されたカラーパレットを選択 — すべての変数を一度に変更 - コードエディター: コードタブで:root CSS変数を直接編集

チャットでの色変更は0.5クレジットを消費します。プリセットとコードでの変更は無料です。

完全な再生成と主要な編集ごとに、履歴タブにバージョンチェックポイントが保存されます。

ロールバックするには: 1. ビルダーで履歴タブを開きます 2. 以前のバージョンをクリックして右ペインでプレビューします 3. 復元をクリックして現在のバージョンにします

ロールバックは無料です — クレジットを消費せずに保存されたHTMLを復元します。

履歴チェックポイントはFirestoreに保存され、ブラウザのリフレッシュ、デバイスの切り替え、セッションのログアウト後も維持されます。