コードアシスト
AI・スキル学習

AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テ…｜codoAssist

2026.05.07 奥崎 慎太郎
Web制作 提案書 作り方 AI | AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テンプレ
  • 著者：奥﨑 慎太郎（おくざき しんたろう）
  • 肩書：コードアシスト 主催 / 株式会社SOFI 代表取締役
  • 経歴：株式会社SOFI 代表取締役。受講生100名超の提案書作成を伴走。Claude × Notion × Figma 連携で提案書作成時間を月50時間→月15時間に短縮。
  • SNS / 関連：note ／ SOFI公式

AI×Web制作の提案書を3倍速で作る｜Claude × Notion × Figma の連携テンプレ

「提案書1本に8-10時間かかる」副業フリーランスの最大の時間泥棒です。本記事は、AIツール3点（Claude / Notion / Figma）を連携することで、提案書の作成時間を3倍速・1本2-3時間に短縮する具体テンプレを提示します。

提案書作成が遅くなる3つの原因

原因①「白紙から書き始める」

毎回ゼロから書き始めると、頭の整理だけで2時間消える。テンプレ化されていないのが最大の問題。

原因②「文章 → デザイン → 修正」の直列工程

文章とデザインを別々に作ると、デザインに合わせて文章を直す追加工程が発生。並列で作るべき。

原因③「クライアント情報の調査が手作業」

競合分析・業界動向・クライアント情報を手で調べると、各案件で3-4時間消える。AIで30分に圧縮可能。

3ツール連携の全体像

[Step 1] Notion（テンプレ起動） ↓ 案件情報・クライアント情報をNotionテンプレに記入

[Step 2] Claude（情報生成） ↓ Notion情報を渡して、競合分析・課題分析・提案内容をAI生成

[Step 3] Figma（デザイン化） ↓ Claude生成内容をFigmaテンプレに流し込み

[Step 4] PDF/Notion/Slidesで出力

この4ステップで、提案書1本2-3時間で完成。

Step 1｜Notion テンプレの設計

Notion 提案書テンプレの構成

1. クライアント情報 - 会社名・業種・規模・所在地 - 担当者名・役職・連絡先 - 商談経緯（誰の紹介・初接触日）

2. クライアントの課題 - 現状の数値（売上・集客・コンバージョン） - 痛み・困っていること - 既にやってきた施策

3. 提案内容 - 解決したい課題（最大3つ） - 提案するサービス - 期待される成果（数値）

4. 価格・スケジュール - 各サービスの単価 - 合計金額 - 納期・スケジュール

5. SOFI（自分）の強み - 実績・ポートフォリオ - 業界特化点 - 差別化要素

受講生Wさんの所感

「Notionテンプレを作っておくだけで、案件ごとの『情報整理』時間が30分→10分に短縮。3点情報をテンプレに埋めるだけで、Claudeに渡す素材が完成する。」

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分で完成。

Step 3｜Figma でデザイン化

Figma 提案書テンプレの作り方

  1. A4横サイズのフレームを20枚作成
  2. 共通要素（ロゴ・ヘッダー・フッター）を Component 化
  3. 各ページのレイアウトを統一テンプレに

流し込みフロー

Claude 生成の本文を、Figma の各ページにテキストとして流し込む。テンプレが整っていれば、流し込みは30-45分で完了。

効率化のポイント

  • 図表はFigma Plugin（Recharts等）で自動生成
  • 画像はFigma 内蔵のアイコンライブラリで揃える
  • 配色はFigma Variable で統一（業界ごとに変える）

Step 4｜出力フォーマットの選択

出力形式 用途 推奨度
PDF 法人クライアント・大型案件 ⭐⭐⭐⭐⭐
Notion 公開 スピード重視・カジュアル ⭐⭐⭐
Google Slides 対面プレゼン ⭐⭐⭐⭐
Figma View Only デザイン重視・印象勝負 ⭐⭐⭐

法人案件は PDF、対面プレゼンは Slides、その他は Notion が標準。

受講生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時間の節約になる。」

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の設定でも学習除外可能。

📩 「AI×Web制作 提案書テンプレ集（Notion/Figma/PDF）」をLINE登録で配布中

業界別5パターンのテンプレ・Claudeプロンプト10本・Figma提案書テンプレを1セットに。

→ LINE登録はこちら

LINE登録で詳細を受け取る →


– 副業フリーランスがやりがちな単価交渉の失敗5パターン
– AI機能組込み案件の取り方｜単価15-50万円の中小企業クライアント獲得術

奥﨑 慎太郎（おくざき しんたろう）
株式会社SOFI 代表取締役 / コードアシスト 主催。Claude × Notion × Figma 連携で提案書作成時間を月50時間→月15時間に短縮。受講生100名超の提案書作成を伴走。

関連記事

コラム一覧へ 無料個別相談を予約