LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(AI自動化 エンジニア)in株式会社プロドウガ

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

Posted at

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

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

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

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

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

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

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

n8nとChatGPTの役割分担

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版なら簡単です！

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

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

Step 2: Webhookの設定

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

{
  "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呼び出しコード

// 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に自動保存します。

// 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: ワークフロー全体図

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

🎨 入力フォームの作成

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

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（投資対効果）の計算

// 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. 業界別テンプレート対応

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

2. 競合分析の自動化

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

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

// 自動見積もり計算
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);
}

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

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

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

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

# 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制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

GitHub ポートフォリオ Qiita Codepen
株式会社プロドウガ らくらくサイト

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

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

🌳 らくらくサイト詳細

📩 お問い合わせ・見積もり・ご相談: お気軽にご連絡ください

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?