ビルダー概要
プロンプトから公開サイトまで、3Dウェブサイトビルダーのパイプラインの仕組み。
ビルダーが生成するもの
3Dビルダーでの各生成は、1つのプロンプトから5つの成果物を生成します：
*.draftly.spaceのサブドメインに数秒で公開されますこれら5つはすべて1つのワークフローで作成されます。手動で何かを組み合わせる必要はありません。
5段階の生成パイプライン
Draftlyは、巨大なAIコールではなく、チャンク化されたパイプラインを使用します。これにより、品質と完全性が保証されます。
フェーズ0 — 計画（約5秒） AIがプロンプトを読み込み、サイトの設計図（ブランド名、タグライン、ヒーロー見出し、ヒーローCTA、カラーの雰囲気、フォントの雰囲気、3〜7セクション、3〜5つの具体的な差別化要因（一般的なコピーではなく、ビジネスに関する独自の事実））を出力します。
フェーズ1 — シェル（約20秒） ナビゲーションバー、ヒーローセクション、CSS変数、スクロールフレームエンジン、およびセクションとフッターのプレースホルダーアンカーを生成します。
フェーズ2 — セクション（並列、約30秒） 各セクション（機能、料金、お客様の声など）は、個別の並列AIコールで生成されます。6セクションのサイトも3セクションのサイトと同じ時間がかかります。
フェーズ3 — フッター（約10秒） フッターは常に表示されるように個別に生成されます。フッターはセクションの予算に含まれず、切り詰められることはありません。
フェーズ4 — 組み立て（約5秒） すべての要素が結合されます。SEOメタタグ、Open Graphタグ、JSON-LD構造化データ、H1保証、および正規URLが挿入されます。
ビルダーインターフェース
左パネル — チャットとコントロール - 下部のチャット入力: サイトの説明または編集のリクエスト - 上部のシステムログ: 各生成フェーズのタイミングとステータス - アクションボタン: 全画面プレビュー、テキスト編集、色変更、ライブ公開 - タブバー: ログ、画像、動画、フレーム、コード、履歴、Business OS
右パネル — ライブプレビュー - スクロールアニメーションが有効なiframeでレンダリングされた生成サイト - 任意のテキストをクリックしてインライン編集（無料、クレジット不要） - ツールバー: アスペクト比切り替え（16:9 / 9:16）、表示 / 編集 / 編集モード、全画面表示、再生成
ヘッダーバー - プロジェクト名 — クリックして名前を変更 - 保存ステータスピル — 保存済み / 保存中... / 作業中... をリアルタイムで表示 - クレジットトラッカー — 今請求サイクルの残りクレジット
自動保存と復元
Draftlyは、プロジェクトを2つのレイヤーで継続的に自動保存します。
ヘッダーの保存ステータスインジケーター: - 保存済み — すべての変更がクラウドに同期済み - 保存中... — クラウド同期が進行中 - 作業中... — 生成が進行中
生成中にタブを閉じても、プロジェクトを再度開くと自動再開バナーが表示されます。これをクリックすると、生成が中断した正確な場所から再開できます。あなたの作業が失われることはありません。
ビルダータブの説明
ログ — ライブ生成フィード。各パイプラインフェーズ、タイミング、警告がリアルタイムで表示されます。
画像 — ヒーローの静止画。元の画像をダウンロードするか、新しい画像を生成します。
動画 — モーション動画。MP4をダウンロードするか、異なる品質設定で再生成します。
フレーム — 動画から抽出された約200枚のスクロールフレーム。これらがパララックススクロール効果を可能にします。
コード — 生成されたサイトの生のHTML。コピー、ZIPとしてダウンロード、またはGitHubにプッシュできます。
履歴 — バージョンチェックポイント。再生成または主要な編集ごとに復元ポイントが作成されます。任意のバージョンをクリックしてロールバックできます（無料、クレジット不要）。
Business OS — ブランド向けのAIビジネスインテリジェンスダッシュボード（Pro+）。コンテンツの提案、分析コンテキストなどが含まれます。
新しいタブでのライブプレビュー
スタジオヘッダーのプレビューまたはプレビューツールバーの新しいタブをクリックすると、ビルダーのクロームなしで、公開品質のサイトを別のブラウザタブで開くことができます。スタジオでの編集は継続できます。
AI HTMLサイトは、スクロールフレームと動画が挿入されたインメモリプレビューURLから読み込まれます。
プリセットプロジェクトは、オープナーからフレームがpostMessageされた/presets/live/[projectId]を開きます。
ポップアップがブロックされた場合は、draftly.spaceのポップアップを許可して再試行してください。自動保存は元のタブで継続されます。
生成の進捗と推定時間
ヒーロー画像、動画、フレーム抽出、ウェブサイトUIの生成中、プレビューには1つの進捗カードが表示され、以下が含まれます。
一般的な合計時間：ヒーロー画像 約2〜3分、動画 約3〜4分、フレーム 約1〜2分、ウェブサイトUI 約2〜3分。
ジョブが推定時間を超えた場合、カードには「通常より時間がかかっています」と表示されます。APIコールは完了するまで継続されます。早期に停止するには生成をキャンセルを使用してください。
ビルダーチャット — 編集とヘルプ
スタジオチャットは、一般的なAIチャットではなく、あなたのウェブサイトとDraftlyビルダーに特化しています。
サイト編集（直接コマンド）：「ヒーローの見出しを…に変更」、「FAQセクションを追加」、「ゴールドのアクセントが付いたダークテーマ」。
ハウツー質問には即座に回答が得られます：「どうやって公開するのですか？」「スクロールモードはどのように機能しますか？」「4つの動画があるのにサイトが遅いのはなぜですか？」
トピック外のメッセージ（天気、宿題、無関係なコーディング）は、ガイドとドキュメントへのリンクでリダイレクトされます。
完全なウォークスルーについてはガイド（ヘッダー）を開くか、質問形式でチャットで尋ねてください。
モーションを減らす（アクセシビリティ）
プレビューツールバーのモーションを減らすをクリックすると、スタジオUIのアニメーションが最小限に抑えられます。同じ設定は設定 → 外観 → アニメーションを減らすに保存されます。
生成されたサイトにはprefers-reduced-motion CSSフォールバックが含まれており、OSのアクセシビリティ設定を持つ訪問者には、動きの多いエフェクトの代わりに静的な表示が提供されます。