ドキュメント編集と公開カスタマイズガイド

カスタマイズガイド

コードに触れることなく、Draftlyサイトを編集、スタイル設定、拡張する方法を学びます。

カスタマイズの仕組み

Draftlyでは、生成後にサイトをカスタマイズする3つの方法があります。

1. クリック編集（インライン編集） — プレビューツールバーでEditを切り替え、任意のテキストまたは要素をクリックします。インスペクターには、タイポグラフィ、間隔、色、アニメーションのコントロールが表示されます。変更はリアルタイムで適用されます。

2. チャットで変更 — メッセージごとに1つの具体的な指示を入力します（例：「ヒーローの背景をダークネイビーに変更」、「料金セクションを追加」）。Draftlyは関連する部分のみを修正します — 通常、編集ごとに0.5クレジットです。

3. ウェブサイトUIの再生成 — ↺ Regenerate Website をクリックすると、ビデオ、画像、スクロールフレームを保持したまま、AIによる新しいデザインパスを実行します。

オプション: テンプレートピッカーからプリセットテンプレートに切り替えると、レイアウトをより速く変更できます。

推奨されるカスタマイズワークフロー

最もスムーズな体験のために、以下の順序に従ってください。

1.新しいタブでプレビュー — ビルダーのクロームなしでスクロールモーションとレイアウトを確認します
2.インライン編集 — 要素をクリックして、正確なコピー、ボタンラベル、色を修正します
3.チャット — セクション、テーマの変更、または書き換えについては、メッセージごとに1つの変更を行います
4.統合（Shipタブ） — GA4、お問い合わせフォーム、カスタムヘッドスクリプト
5.編集後に再公開して、ライブURLがプレビューと一致するようにします

避けるべきこと: 「もっと良くして」のような曖昧なリクエスト — 変更内容を具体的に指定してください。Guide（ヘッダー）を使用するか、チャットで「テキストをカスタマイズするにはどうすればいいですか？」と質問してください。

テキストと色の編集

任意の要素をインラインで編集するには：

1.ビルダーのPreviewタブにいることを確認します。
2.プレビュー内の任意のテキスト、見出し、または色付きブロックをクリックします。
3.右側にInline Editオーバーレイが開き、以下が表示されます。
• - Text — コンテンツを直接編集
• - Color — 16進数入力またはカラーピッカー
• - Font Family — 26種類の書体を含むドロップダウン
• - Font Size — レンジスライダー
• - Font Weight — ThinからBlackまでの8つのオプション
4.Save をクリックして適用するか、Cancel をクリックして元に戻します。

AI Rewrite をクリックして、Draftlyに選択したテキストをより良いトーンで書き換えさせることも、Replace Image をクリックして背景画像や製品画像を入れ替えることもできます。

デザインプリセットの使用

デザインプリセットを使用すると、ワンクリックでサイト全体のビジュアルスタイルを変更できます。

1.ビルダーツールバーのStylesボタンをクリックします。
2.プリセットパネルが開き、3つのタブが表示されます。
• - Vertical — 25種類の業界プリセット（レストラン、SaaS、不動産、ファッションなど） — それぞれに厳選されたカラーパレット、フォントペアリング、レイアウトスタイルが適用されます。
• - Colors — 12種類の色見本 + カスタム16進数入力で主要なアクセントカラーを変更します。
• - Style — 5種類のナビゲーションスタイル、5種類のヒーローレイアウト、5種類のアニメーションプリセット。
3.任意のプリセットをクリックしてプレビューし、Apply をクリックして新しいスタイルでサイトを再生成します。

プリセットはコンテンツと組み合わされます — テキスト、セクション、ブランド名は変更されず、ビジュアルシステムのみが変更されます。

チャットで変更

チャットで修正は、サイト全体を再生成することなく構造的な変更を行う最速の方法です。

仕組み: サイトが読み込まれた状態で、チャットバーに指示を入力します。例： - *「ヒーローの見出しをもっと魅力的なものに変更してください」* - *「料金と連絡先の間にFAQセクションを追加してください」* - *「配色をより暗く、プロフェッショナルなものにしてください」* - *「概要セクションをより個人的な内容に書き直してください」* - *「ヒーローのCTAボタンのテキストを「無料見積もりを依頼」に置き換えてください」*

Draftlyは、サイトのHTMLの関連セクションのみをAIに送信します（ページ全体ではありません）。そのため、編集は迅速で、サイト全体の再生成コストではなく、0.5クレジットで済みます。

ヒント： - 具体的に：「ナビゲーションの背景を黒に変更」は「もっと暗くする」よりも効果的です。 - セクション名を指定：「サービスセクション」、「フッター」など。 - 編集を連結できます。各チャットメッセージは新しいターゲットパッチです。

アナリティクスとトラッキングの追加

Google Analytics、Google Tag Manager、Facebook Pixel、または任意のカスタムトラッキングスクリプトをコード不要でサイトに接続できます。

1.ビルダーツールバーの連携ボタン（プラグアイコン）をクリックします。
2.連携パネルが開き、以下のフィールドが表示されます。
• - Google Analytics 4 — 測定ID（形式: G-XXXXXXXXXX）を貼り付けます。GA4 → 管理 → データストリームで確認できます。
• - Google Tag Manager — コンテナID（形式: GTM-XXXXXXX）を貼り付けます。GTM → 管理 → コンテナIDで確認できます。
• - Facebook Pixel — 15桁のピクセルIDを貼り付けます。Metaイベントマネージャーで確認できます。
• - カスタムヘッドスクリプト — <head>に挿入する任意の<script>ブロックを貼り付けます（HTTPSソースのみ）。
3.連携を保存をクリックします。
4.次回サイトを生成または再生成する際に、トラッキングスクリプトが自動的に挿入されます。

すべてのスクリプトは、公開されたサイトのHTMLの<head>に挿入されます。GTMは、必要な<noscript> iframeも<body>の後に挿入します。

お問い合わせフォームの追加

すべてのDraftlyサイトには、送信内容をDraftlyの受信トレイに直接送信し、通知メールを送信する機能的なお問い合わせフォームを含めることができます。

1.ビルダーツールバーの連携ボタンをクリックします。
2.お問い合わせフォームを有効にするをオンに切り替えます（新規サイトではデフォルトで有効）。
3.連携を保存をクリックします。
4.サイトを生成または再生成すると、お問い合わせフォームが自動的にサイトに追加されます。

仕組み： - 生成されたサイトにすでに<form>要素がある場合（お問い合わせセクションのあるサイトで一般的）、DraftlyはそれをDraftlyバックエンドに送信するようにパッチを適用します。 - フォームが存在しない場合、Draftlyはフッターの前にスタイル付きのフォームセクションを挿入します。 - 送信内容は、サイトの送信タブの下にあるDraftlyアカウントに保存されます。 - 新しい送信ごとに、訪問者の名前、メールアドレス、メッセージを含むメール通知が届きます。

すべてのデータはDraftly内に留まります。サードパーティのフォームサービスは不要です。

前へサイトの編集次へSEOのベストプラクティス