AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テンプレ
# AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テンプレ
「提案書1本に8-10時間かかる」副業フリーランスの最大の時間泥棒です。本記事は、AIツール3点（Claude / Notion / Figma）を連携することで、提案書の作成時間を3倍速・1本2-3時間に短縮する具体テンプレを提示します。
H2-1：提案書作成が遅くなる3つの原因
原因①「白紙から書き始める」
毎回ゼロから書き始めると、頭の整理だけで2時間消える。テンプレ化されていないのが最大の問題。
原因②「文章 → デザイン → 修正」の直列工程
文章とデザインを別々に作ると、デザインに合わせて文章を直す追加工程が発生。並列で作るべき。
原因③「クライアント情報の調査が手作業」
競合分析・業界動向・クライアント情報を手で調べると、各案件で3-4時間消える。AIで30分に圧縮可能。
H2-2：3ツール連携の全体像
“` [Step 1] Notion（テンプレ起動） ↓ 案件情報・クライアント情報をNotionテンプレに記入 [Step 2] Claude（情報生成） ↓ Notion情報を渡して、競合分析・課題分析・提案内容をAI生成 [Step 3] Figma（デザイン化） ↓ Claude生成内容をFigmaテンプレに流し込み [Step 4] PDF/Notion/Slidesで出力 “`
この4ステップで、提案書1本2-3時間で完成。
H2-3：Step 1｜Notion テンプレの設計
Notion 提案書テンプレの構成
“` 1. クライアント情報 – 会社名・業種・規模・所在地 – 担当者名・役職・連絡先 – 商談経緯（誰の紹介・初接触日） 2. クライアントの課題 – 現状の数値（売上・集客・コンバージョン） – 痛み・困っていること – 既にやってきた施策 3. 提案内容 – 解決したい課題（最大3つ） – 提案するサービス – 期待される成果（数値） 4. 価格・スケジュール – 各サービスの単価 – 合計金額 – 納期・スケジュール 5. SOFI（自分）の強み – 実績・ポートフォリオ – 業界特化点 – 差別化要素 “`
受講生Wさんの所感
> 「Notionテンプレを作っておくだけで、案件ごとの『情報整理』時間が30分→10分に短縮。3点情報をテンプレに埋めるだけで、Claudeに渡す素材が完成する。」 [取材音声引用]
H2-4：Step 2｜Claude による情報生成
プロンプトテンプレ（コピペ可）
“` 以下のクライアント情報を元に、Web制作の提案書本文を作成してください。
【クライアント情報】 [Notionからコピペ]
【依頼】 1. クライアントの課題を3つに整理（共感重視・上から目線NG） 2. 各課題への提案サービス内容（具体的・行動指示型） 3. 各サービスの期待効果（数値で・控えめに） 4. 業界の競合分析（3社比較・強み弱み） 5. 提案書のエグゼクティブサマリー（200字）
トーン：丁寧だが煽らない。中小企業オーナー向け。 “`
このプロンプトで得られる出力
- 課題分析：500-800字
- 提案サービス：1,500-2,000字
- 競合分析：1,000-1,200字
- エグゼクティブサマリー：200字
合計約4,000字の提案書本文が、20-30分で完成。
H2-5：Step 3｜Figma でデザイン化
Figma 提案書テンプレの作り方
1. A4横サイズのフレームを20枚作成 2. 共通要素（ロゴ・ヘッダー・フッター）を Component 化 3. 各ページのレイアウトを統一テンプレに
流し込みフロー
Claude 生成の本文を、Figma の各ページにテキストとして流し込む。テンプレが整っていれば、流し込みは30-45分で完了。
効率化のポイント
- 図表はFigma Plugin（Recharts等）で自動生成
- 画像はFigma 内蔵のアイコンライブラリで揃える
- 配色はFigma Variable で統一（業界ごとに変える）
H2-6：Step 4｜出力フォーマットの選択
| 出力形式 | 用途 | 推奨度 |
|---|---|---|
| 法人クライアント・大型案件 | ⭐⭐⭐⭐⭐ | |
| Notion 公開 | スピード重視・カジュアル | ⭐⭐⭐ |
| Google Slides | 対面プレゼン | ⭐⭐⭐⭐ |
| Figma View Only | デザイン重視・印象勝負 | ⭐⭐⭐ |
H2-7：受講生Wさんの提案書1本作成タイムライン
“` 14:00 – 14:10 Notion テンプレに情報入力 14:10 – 14:30 Claude で本文生成 14:30 – 15:15 Figma で流し込み・デザイン微調整 15:15 – 15:30 PDF 書き出し・ファイル整備 15:30 – 16:00 セルフレビュー・修正 合計：2時間 “`
> 「入塾前は1本に8時間かかっていた。3ツール連携を体得した今は2時間。月10本出すなら、月60時間の節約になる。」 [取材音声引用]
H2-8：FAQ
Q1. 提案書の質が下がりませんか？ A. 逆に上がります。AIが「業界知識・競合分析・数値根拠」を補強してくれるので、人間1人で書くより包括的。
Q2. クライアントに「AI 生成」とバレないか心配 A. Claudeの出力をそのまま使わず、必ず編集してください。自分の言葉に書き換える編集時間で、AIっぽさは消えます。
Q3. Figmaが使えない A. Figma は1ヶ月で習得可能。苦手なら Canva でも代替可。Notion ページのまま提示するスクールもあります。
Q4. プロンプトが思うように効かない A. プロンプトの精度は経験。最初の10本はプロンプトを試行錯誤、11本目から型ができる。
Q5. クライアント情報を AI に渡すのは怖い A. Claude / ChatGPT 共に「API 経由なら学習に使われない」設定があります。機密案件はAPI経由で。Pro/Plusの設定でも学習除外可能。
—
[CTA]
📩 「AI×Web制作 提案書テンプレ集（Notion/Figma/PDF）」をLINE登録で配布中 業界別5パターンのテンプレ・Claudeプロンプト10本・Figma提案書テンプレを1セットに。
→ LINE登録はこちら（CTA URL要差し替え）
—
[関連記事]
—
{“@context”: “https://schema.org”, “@graph”: [{“@type”: “Article”, “headline”: “AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テンプレ”, “author”: {“@id”: “https://codoast.com/#person”}, “datePublished”: “2026-05-07”, “mainEntityOfPage”: “https://codoast.com/column/teiansho-ai-3bai-soku/”}, {“@type”: “Person”, “@id”: “https://codoast.com/#person”, “name”: “奥﨑慎太郎”, “jobTitle”: “コードアシスト 主催 / 株式会社SOFI 代表取締役”}, {“@type”: “FAQPage”, “mainEntity”: [{“@type”: “Question”, “name”: “提案書の質が下がりませんか？”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “逆に上がります。AIが業界知識・競合分析・数値根拠を補強してくれるため、人間1人で書くより包括的です。”}}, {“@type”: “Question”, “name”: “AI生成とバレないか心配”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “Claudeの出力をそのまま使わず必ず編集。自分の言葉に書き換える編集時間でAIっぽさは消えます。”}}, {“@type”: “Question”, “name”: “Figmaが使えない”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “Figmaは1ヶ月で習得可能。苦手ならCanvaでも代替可。Notionページのまま提示するスクールもあります。”}}, {“@type”: “Question”, “name”: “プロンプトが思うように効かない”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “プロンプトの精度は経験。最初の10本は試行錯誤、11本目から型ができます。”}}, {“@type”: “Question”, “name”: “クライアント情報をAIに渡すのは怖い”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “API経由なら学習に使われない設定あり。Pro/Plusの設定でも学習除外可能。”}}]}]}