Claude Design・Artifactsで提案資料とモックを速くする──公式で確かめた機能、人が直す5つの点、時間の計算例
この記事は、Claude DesignとArtifactsを使って、制作会社の提案資料とモックを速く作る手順を扱います。
受注できるか分からない資料に、毎回まる2日かけていないか
「提案のために、トップページのデザイン案と、10枚の提案資料を作った。結果は失注」
受注前の資料は、売上になるか分からない仕事です。
それでも、見た目の案がないと、比べてもらう土俵に立てません。
この「受注前の手間」を縮めるのが、AIで資料とモックを作る使い方です。
ただし、速くなるのは作る作業であって、考える作業ではありません。
Claude Designとは、文章の指示や手元の資料から、デザイン案・試作（プロトタイプ）・スライドなどの見た目の成果物を、Claudeとのやりとりで作り、直し、書き出すための機能である
黒字化の外科医です。提案前の資料づくりに、Claude DesignとArtifactsをどう当てるかを解剖します。
以下の機能の説明は、Anthropicの公式の発表（2026年4月17日の「Introducing Claude Design by Anthropic Labs」）、Claudeのリリースノート（2026年9月16日の項）、claude.comのArtifactsの紹介ページで、2026年10月27日に確認した内容です。提供の範囲や名前は変わりやすいので、使う前に必ず公式で確かめてください。
なお私は弁護士ではありません。実務の指針として読み、個別の判断は専門家や公的な窓口に確認してください。
公式で確かめた、Claude DesignとArtifactsの機能
- 発表では、Claude Designは、デザイン・試作・スライド・1枚資料などの見た目の成果物を作るための機能として紹介されています
- 入力には、文章の指示のほか、画像や文書（DOCX・PPTX・XLSX）、コードの一式、Webサイトから要素を取り込む機能が挙げられています
- コードやデザインのファイルから、色・文字・部品をまとめたデザインシステムを作り、以降の案に使えると説明されています
- 直し方として、要素へのコメント、文字の直接の編集、調整用のつまみ（スライダー）が挙げられています
- 発表では、仕上げた案をClaude Codeに渡すためのまとまり（handoff bundle）を作れると説明されています
- 2026年9月16日のリリースノートでは、デザイン・スライド・文書を、Claude Codeを含むどの会話でも作れるようになり、Artifacts（Claude Design、Claude Slides、Claude Docsを含む）はFreeを含む全プランで使えるとされています
- Artifactsの紹介ページでは、作ったものは共有するまで本人だけのもので、TeamとEnterpriseでは、管理者が外部共有を有効にしない限り、リンクは組織の中にとどまると説明されています
- 同じページでは、書き出しの形式として、PowerPoint、Googleスライド、PDF、MP4、HTMLが挙げられています
Enterpriseプランでは、組織の設定で使えるかどうかが変わります。使えない場合は、社内の管理者に確認してください。
提案前の資料づくりに、Claude Designを使うべき理由
理由は、三つあります。
第一に、受注前の手間は、粗利から引かれる費用だから。
失注した提案の時間は、どの案件の売上でも回収されません。縮めた時間は、そのまま利益の守りになります。
第二に、見た目があると、お客様の反応が具体的になるから。
「もう少し明るく」「この情報を上に」と、言葉だけの要望より早く、合意の材料が集まります。
第三に、デザインシステムを使えば、案の質をそろえられるから。
自社の作り方の型を読み込ませておけば、担当者ごとのばらつきを減らせます。
今すぐ試せる：提案用のモックと資料を頼むプロンプト
Web制作の提案のために、次の2つを作ってください。
【お客様の情報】
・業種と事業：〔記載〕
・今のサイトの課題（ヒアリングで聞いたこと）：〔記載〕
・サイトの目的：〔例：問い合わせを増やす、採用の応募を増やす〕
・使ってよい素材：〔例：お客様から受け取ったロゴ、公開されている会社案内〕
【作るもの】
1. トップページのモック（スマートフォンとパソコンの2つ）
2. 提案資料6枚（課題の整理、目的、サイトの構成、進め方、体制、費用の考え方）
【条件】
・お客様から聞いていない事実や数字は書かず、〔要確認〕と示すこと
・写真は仮の枠にし、実在の人物や他社のロゴを使わないこと
・費用の欄は空けておくこと資料づくり工場：手順と、人が直す線
手順
1. ヒアリングの記録を整理する（人）
2. 構成と、伝えたい順番を決める（人）
3. モックと資料の下書きを作る（AI）
4. 事実・数字・表現を直す（人）
5. 共有の範囲を確かめてから、お客様に出す（人）AIに任せるのは3だけです。2を飛ばすと、きれいだけれど刺さらない資料になります。
提案資料のページ構成は、こちらで扱っています。
▶ AI駆動開発の提案書の作り方、「AIで速く安く」で終わらせない──工程表、レビュー体制、リスクと対策、費用の内訳の4ページを足して、比べられない提案にする
人が必ず直す5つの点
□ 事実：お客様の事業や数字に、聞いていないことが混ざっていないか
□ 素材：入れた画像・ロゴ・文章を、提案に使ってよいか（お客様の了解、契約の範囲）
□ 約束：モックの見た目が、そのまま作れる・その費用で作れる形か
□ 表現：誇大な言い回し、他社を貶める表現がないか
□ 共有：リンクの共有範囲が、渡したい相手だけになっているかお客様から預かった資料をAIのツールに入れる前の確認は、こちらで扱っています。
▶ 顧客のソースコードや機密をAIツールに入れる前の確認──「学習されない設定だから大丈夫」で止めない、契約・ツールの設定・社内の手順の3段チェック
時間の計算（例）
例：提案1件の資料づくり
これまで：モックと資料で12時間
AIを使った場合：下書き6時間 ＋ 人の確認と直し2時間 ＝ 8時間
縮んだ時間：12時間 − 8時間 ＝ 4時間
時間単価7,600円（例）で換算：4時間 × 7,600円 ＝ 30,400円
月に3件提案する場合：30,400円 × 3件 ＝ 91,200円数字はすべて例です。自社の提案1件の実績時間で計算してください。
モックから実装に進むときの見積もりの直し方は、こちらで扱っています。
▶ Figma MCPで実装の工程を変えたら、見積もりはどう直すか──コーディングを半額にせず、データの整備とレビューを行に足す計算例
提案の型をClaude Codeの社内標準（CLAUDE.md・Skills・サブエージェント定義）に組み込む雛形は、こちらに置きました。
▶ Claude Code社内標準化キット──CLAUDE.md・Skills・サブエージェント定義の雛形、MCPの許可表と権限設定、点検表
構造的なリスク
逆説を指摘しておきます。
モックが速く、きれいにできるほど、お客様は「これがそのまま完成する」と受け取ります。
提案の段階で、モックは見た目の方向性の合意であって、仕様と費用の合意ではないことを、資料の中に一文で書いてください。
もう一つは、共有の範囲です。
組織のプランでは、リンクは組織の中にとどまるのが基本と説明されています。お客様に見せる前に、どの方法で渡すか（書き出すか、共有するか）を決めておきます。
よくあるQ&A
Q. デザイナーの仕事はなくなるのか？
なくなるのは、白紙から形にするまでの手間です。何を、どの順で見せるかを決める仕事は残ります。
Q. 無料のプランで試してよいか？
リリースノートでは全プランで使えるとされています。ただし、お客様の情報を入れるなら、会社で契約し、データの扱いを確かめたプランで使ってください。
Q. 作ったモックを、そのまま納品物にしてよいか？
おすすめしません。提案用のモックは、検証や品質の確認を前提にしていません。受注後は、実装の工程で作り直す前提で見積もってください。
最後に
Claude Designは、受注前の資料づくりの手間を縮める道具です。
AIに任せるのは下書きだけと決め、事実・素材・約束・共有を人が確かめた会社だけが、提案の速さを受注と粗利に変えられるのです。
これまでの記事は、メンバーシップ「黒字化オペ室」でまとめて読めます。月額1,980円、記事2本分の金額です。詳しくはプロフィールから。
#Web制作会社 #ClaudeDesign #Artifacts #提案書 #デザインモック #生成AI活用 #制作会社経営 #中小企業 #営業効率化 #AI駆動開発
