🚀 ChatGPT × n8n でWEB制作提案書を全自動生成！営業効率3倍アップの秘訣 ✨

こんにちは😊
[株式会社プロドウガ](https://qiita.com/organizations/prodouga-com)の@YushiYamamotoです！
[らくらくサイト](https://rakuraku-site.prodouga.com/)の開発・運営を担当しながら、AI活用した業務自動化サポートのフリーランスエンジニアとしても活動しています❗️

## 💡 WEB制作営業の「時間泥棒」を撃退したい！

WEB制作フリーランスの皆さん、こんな悩みありませんか？

- 📝 提案書作成に毎回3-4時間もかかってしまう
- 😅 同じような内容なのに毎回ゼロから作り直している  
- 💸 提案書作成の時間が長すぎて案件数を増やせない
- 🤯 技術的な説明をクライアントに分かりやすく伝えるのが大変

私も以前は同じ悩みを抱えていました。でも、**n8n + ChatGPT**の組み合わせで、この問題を一気に解決できたんです！

今回は、実際に私が営業効率を3倍にアップさせた自動化システムの作り方を、包み隠さず全部お教えします🎉

## 🎯 なぜn8n × ChatGPTが最強なのか？

### n8nとChatGPTの役割分担

```mermaid
graph TD
    A[クライアント情報入力] --> B[n8n Webhook受信]
    B --> C[ChatGPT API呼び出し]
    C --> D[提案書自動生成]
    D --> E[Google Docs出力]
    E --> F[Slack通知]
    F --> G[クライアントへメール送信]
    
    style B fill:#ff9999
    style C fill:#99ff99
    style D fill:#9999ff
```

**n8n**は「業務の流れ」を管理する指揮者🎼で、**ChatGPT**は「文章を考える」ライター✍️の役割です。

この組み合わせなら：
- ⚡ **スピード**：30分で提案書完成
- 🎨 **クオリティ**：AIが高品質な文章を生成  
- 🔄 **再現性**：同じ品質を何度でも再現
- 💰 **コスト削減**：作業時間を大幅短縮

## 📖 私の成功ストーリー：月10件→30件への道のり

### Before：提案書地獄の日々 😭

2024年の秋頃、私は深刻な問題を抱えていました。

**毎月の案件獲得数：10件**
**提案書作成時間：1件あたり4時間**
**月間提案書作成時間：40時間**

つまり、月の稼働時間の **25%** を提案書作成に費やしていたんです！これでは本来の開発業務に集中できません。

「何とかしなければ...」と思っていた時、n8nとChatGPTの組み合わせに出会いました。

### 転機：自動化システムの構築 🛠️

「よし、エンジニアなんだから技術で解決しよう！」

そう決意して、2週間かけて提案書自動生成システムを構築しました。最初は試行錯誤の連続でしたが、完成した時の感動は今でも忘れられません✨

### After：自動化の威力 🚀

**毎月の案件獲得数：30件（3倍！）**
**提案書作成時間：1件あたり30分**
**月間提案書作成時間：15時間**

なんと**25時間も節約**できました！この時間を新規開発や技術研究に充てることで、より高単価な案件も獲得できるようになったんです[2]。

## 🛠️ 実装手順：ゼロから始める自動化システム

### Step 1: n8nの環境構築

まずはn8nをセットアップしましょう。Cloud版なら簡単です！

```bash
# セルフホストする場合（Docker）
docker run -it --rm \
  --name n8n \
  -p 5678:5678 \
  -v ~/.n8n:/home/node/.n8n \
  n8nio/n8n
```

:::note info
初心者の方はn8n Cloud版から始めることをオススメします。アカウント登録だけで、すぐに使い始められます！
:::

### Step 2: Webhookの設定

n8nで新しいワークフローを作成し、Webhookノードを配置します[6]。

```json
{
  "webhook_url": "https://your-n8n-instance.com/webhook/proposal-generator",
  "method": "POST",
  "content_type": "application/json"
}
```

### Step 3: ChatGPT APIとの連携

OpenAI APIキーを取得して、n8nのHTTPリクエストノードで呼び出します。

ChatGPT API呼び出しコード

```javascript
// n8n JavaScript Code Node
const clientInfo = $input.json;

const prompt = `
あなたはWEB制作のプロフェッショナルです。
以下のクライアント情報を基に、魅力的な提案書を作成してください。

【クライアント情報】
会社名: ${clientInfo.company_name}
業界: ${clientInfo.industry}
予算: ${clientInfo.budget}
希望機能: ${clientInfo.features}
納期: ${clientInfo.deadline}

【提案書の構成】
1. 会社概要とご挨拶
2. プロジェクト概要
3. 技術提案（React.js/Next.js使用）
4. 開発スケジュール
5. 見積もり詳細
6. 弊社の強み

markdown形式で、プロフェッショナルかつ親しみやすい文章で作成してください。
`;

const apiKey = $env.OPENAI_API_KEY;

const response = await fetch('https://api.openai.com/v1/chat/completions', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    model: 'gpt-4',
    messages: [{
      role: 'user', 
      content: prompt
    }],
    max_tokens: 2000,
    temperature: 0.7
  })
});

const result = await response.json();
const proposalContent = result.choices[0].message.content;

return {
  proposal_content: proposalContent,
  client_name: clientInfo.company_name,
  generated_at: new Date().toISOString()
};
```



### Step 4: Google Docs連携

生成された提案書をGoogle Docsに自動保存します。

```javascript
// Google Docs API連携
const docsResponse = await fetch(`https://docs.googleapis.com/v1/documents`, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${$env.GOOGLE_ACCESS_TOKEN}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: `${clientInfo.company_name}_提案書_${new Date().toISOString().split('T')[0]}`
  })
});
```

### Step 5: ワークフロー全体図

完成したワークフローはこんな感じです：

```mermaid
sequenceDiagram
    participant Client as クライアント
    participant Form as 入力フォーム
    participant N8N as n8n
    participant ChatGPT as ChatGPT API
    participant Docs as Google Docs
    participant Slack as Slack
    
    Client->>Form: 案件情報入力
    Form->>N8N: Webhook送信
    N8N->>ChatGPT: 提案書生成依頼
    ChatGPT->>N8N: 提案書コンテンツ返却
    N8N->>Docs: ドキュメント作成
    N8N->>Slack: 完了通知
    N8N->>Client: 提案書送付メール
```

## 🎨 入力フォームの作成

クライアント情報を収集するためのフォームも作りましょう。

HTML入力フォーム

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB制作お見積もりフォーム</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
        }
        .form-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
        }
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 6px;
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>🚀 WEB制作お見積もりフォーム</h1>
        <form id="proposalForm">
            <div class="form-group">
                <label for="company_name">会社名 *</label>
                <input type="text" id="company_name" name="company_name" required>
            </div>
            
            <div class="form-group">
                <label for="industry">業界 *</label>
                <select id="industry" name="industry" required>
                    <option value="">選択してください</option>
                    <option value="IT・テクノロジー">IT・テクノロジー</option>
                    <option value="小売・EC">小売・EC</option>
                    <option value="教育・学習支援">教育・学習支援</option>
                    <option value="医療・ヘルスケア">医療・ヘルスケア</option>
                    <option value="その他">その他</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="budget">予算範囲 *</label>
                <select id="budget" name="budget" required>
                    <option value="">選択してください</option>
                    <option value="50万円未満">50万円未満</option>
                    <option value="50-100万円">50-100万円</option>
                    <option value="100-300万円">100-300万円</option>
                    <option value="300万円以上">300万円以上</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="features">希望機能（複数選択可）</label>
                <textarea id="features" name="features" rows="4" placeholder="例：レスポンシブデザイン、CMS機能、EC機能、API連携など"></textarea>
            </div>
            
            <div class="form-group">
                <label for="deadline">希望納期</label>
                <input type="date" id="deadline" name="deadline">
            </div>
            
            <button type="submit">🎯 提案書を生成する</button>
        </form>
    </div>

    <script>
        document.getElementById('proposalForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            
            try {
                const response = await fetch('YOUR_N8N_WEBHOOK_URL', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });
                
                if (response.ok) {
                    alert('✅ 提案書の生成を開始しました！30分以内にメールでお送りします。');
                    this.reset();
                } else {
                    throw new Error('エラーが発生しました');
                }
            } catch (error) {
                alert('❌ エラーが発生しました。時間をおいて再度お試しください。');
            }
        });
    </script>
</body>
</html>
```

## 📊 効果測定：数字で見る改善効果

### 作業時間の比較

| 項目 | Before | After | 改善率 |
|------|--------|-------|---------|
| 提案書作成時間 | 4時間 | 30分 | **87.5%削減** |
| 月間対応案件数 | 10件 | 30件 | **300%向上** |
| 営業関連業務時間 | 40時間 | 15時間 | **62.5%削減** |

### ROI（投資対効果）の計算

```javascript
// ROI計算例
const beforeMonthlyRevenue = 10 * 50000; // 10件 × 平均単価50万円
const afterMonthlyRevenue = 30 * 50000;  // 30件 × 平均単価50万円

const timeReduction = 25; // 節約時間（時間/月）
const hourlyRate = 5000;  // 時給

const additionalRevenue = afterMonthlyRevenue - beforeMonthlyRevenue;
const timeSavingValue = timeReduction * hourlyRate;

console.log(`売上向上: ${additionalRevenue.toLocaleString()}円/月`);
console.log(`時間節約価値: ${timeSavingValue.toLocaleString()}円/月`);
// 結果: 売上向上: 1,000,000円/月, 時間節約価値: 125,000円/月
```

## 🔧 さらなる改善：応用テクニック

### 1. 業界別テンプレート対応

```javascript
// 業界別提案書テンプレート
const industryTemplates = {
  'IT・テクノロジー': {
    emphasis: ['技術力', 'セキュリティ', 'スケーラビリティ'],
    technologies: ['React.js', 'Next.js', 'TypeScript', 'AWS']
  },
  '医療・ヘルスケア': {
    emphasis: ['セキュリティ', '法的対応', 'アクセシビリティ'],
    technologies: ['HTTPS', 'GDPR対応', 'WAI-ARIA']
  }
};
```

### 2. 競合分析の自動化

ChatGPTに競合サイトの分析も依頼して、差別化ポイントを提案書に含めます。

### 3. 見積もり計算の自動化

```javascript
// 自動見積もり計算
function calculateEstimate(features, complexity, deadline) {
  const basePrice = 300000; // 基本料金
  const featureMultiplier = features.length * 0.2;
  const urgencyMultiplier = deadline < 30 ? 1.5 : 1.0;
  
  return Math.round(basePrice * (1 + featureMultiplier) * urgencyMultiplier);
}
```

🚨 注意点とベストプラクティス

:::note warn
API利用料金に注意
ChatGPT APIは従量課金制です。月間利用量を監視して、予算オーバーを防ぎましょう。
:::

:::note alert
個人情報の取り扱い
クライアント情報を扱うため、セキュリティには十分注意してください。n8nのセルフホスト版の利用も検討しましょう。
:::

セキュリティ強化のポイント

```bash
# docker-compose.yml（セルフホスト版）
version: '3.7'
services:
  n8n:
    image: n8nio/n8n
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=admin
      - N8N_BASIC_AUTH_PASSWORD=your-secure-password
      - WEBHOOK_URL=https://your-domain.com
    volumes:
      - ./n8n-data:/home/node/.n8n
    ports:
      - "5678:5678"
```

### 🎉 まとめ：自動化で手に入れた自由

この自動化システムを構築してから、私の働き方は劇的に変わりました：

⏰ 時間的自由：月25時間の節約で新しい技術学習に集中

💰 経済的自由：案件数3倍で収入も大幅アップ

🧠 精神的自由：単調作業から解放されてクリエイティブな仕事に専念

🚀 成長の機会：空いた時間でthree.jsやGSAPなど新技術を習得

「技術で人生を豊かにする」 - これこそがエンジニアの醍醐味だと思います！

みなさんも、ぜひn8n × ChatGPTの組み合わせで、業務効率化にチャレンジしてみてください。きっと新しい可能性が見えてくるはずです✨

### 業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

<a href="https://github.com/YushiYamamoto"> <img src="https://img.shields.io/badge/　GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub"> </a> <a href="https://yushi.prodouga.com/" target="_blank" rel="noopener"> <img src="https://img.shields.io/badge/　ポートフォリオ-FF5500?style=for-the-badge&logo=react&logoColor=white" alt="ポートフォリオ"> </a> <a href="https://qiita.com/YushiYamamoto" target="_blank" rel="noopener"> <img src="https://img.shields.io/badge/　Qiita-55C500?style=for-the-badge&logo=qiita&logoColor=white" alt="Qiita"> </a> <a href="https://codepen.io/yamamotoyushi" target="_blank" rel="noopener"> <img src="https://img.shields.io/badge/　Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white" alt="Codepen"> </a> <br> <a href="https://prodouga.com/" target="_blank" rel="noopener"> <img src="https://img.shields.io/badge/　株式会社プロドウガ-FF0000?style=for-the-badge&logo=firefox&logoColor=white" alt="株式会社プロドウガ"> </a> <a href="https://rakuraku-site.prodouga.com/" target="_blank" rel="noopener"> <img src="https://img.shields.io/badge/　らくらくサイト-4285F4?style=for-the-badge&logo=rocket&logoColor=white" alt="らくらくサイト"> </a>

**あなたの企業のAI×自動化戦略について、ぜひご相談ください！**

技術的な実現可能性から運用体制の構築まで、PoC設計から実装・運用まで包括的に支援いたします。一緒に次世代のビジネス変革を実現しましょう！


🌳 [らくらくサイト詳細](https://rakuraku-site.prodouga.com/)

📩 **お問い合わせ・見積もり・ご相談**: [お気軽にご連絡ください](https://prodouga.com/contact)



https://qiita.com/YushiYamamoto/items/022e2eb80dd11ca051ea

https://qiita.com/YushiYamamoto/items/1c6fa7d52a0186f58165

https://qiita.com/YushiYamamoto/items/447110485b071e66cd13

https://qiita.com/YushiYamamoto/items/c9bb311ceab05a6b2f1e