Canva MCP × Claude Code｜
AIエージェントにSNS投稿と
Web制作素材をつくらせる

はじめに：この記事のヒーロー画像はAIが作りました

このページの一番上に表示されているヒーロー画像と、SNSでシェアしたときに出るOGP画像は、人間がCanvaの編集画面を一度も開かずに作られています。ターミナルのClaude Codeに「こういう画像がほしい」と日本語で指示しただけです。デザイン生成、レイアウト調整、書き出しまでがAIエージェントとCanvaの間で完結しました。

これを可能にしているのが MCP（Model Context Protocol）です。MCPはAIアシスタントと外部ツールをつなぐオープンな標準規格で、Canvaは公式のMCPサーバを提供しています。つまり「AIがCanvaを操作する」ための正規の入り口が用意されている、ということです。

Web制作やSNS運用の現場では、バナー・サムネイル・告知画像といった「重要だが単価の低い量産作業」が慢性的に発生します。ここをAIに渡せるなら効果は大きい。一方で、AIが作ったものをそのまま世に出すのは、事業者としてはリスクです。実際に検証したところ、そのまま公開したら信用を落としかねない出力にも遭遇しました。

そこで本記事では、できたこととできなかったこと・危なかったことの両方を記録します。導入判断の材料としてお使いください。

Canva MCP（AI Connector）とは

Canvaが提供する公式のリモートMCPサーバで、製品名としては「Canva AI Connector」と呼ばれています[1]。Canva公式は「Design with Canva, right from your AI chat（AIチャットからそのままCanvaでデザインする）」と表現しており、その裏側がCanva MCP Serverです。

Claude Codeへの接続手順

Claude Codeはリモートのhttp型MCPサーバを claude mcp add で登録できます[3]。Canvaの場合はこれだけです。

# サーバーを登録（--scope user で全プロジェクト共通にする）
claude mcp add --transport http canva https://mcp.canva.com/mcp --scope user

# Claude Code のセッション内で OAuth 認証を実行
/mcp

Claude Code公式ドキュメントは「Use /mcp to authenticate with remote servers that require OAuth 2.0 authentication」と記載しており[3]、ブラウザが開いてCanvaのログイン・認可画面に進みます。APIキーの発行やヘッダー設定は不要です。

登録結果の確認

登録内容は ~/.claude.json（user スコープ）または .mcp.json（project スコープ）に保存されます。実際の登録内容と疎通確認は次のとおりでした。

$ claude mcp list
Checking MCP server health…

canva: https://mcp.canva.com/mcp (HTTP) - ✔ Connected

# ~/.claude.json の該当エントリ
"canva": { "type": "http", "url": "https://mcp.canva.com/mcp" }

スコープの選び方（実務上の判断）

.mcp.json をリポジトリにコミットしてもCanvaの認証情報は含まれません（URLのみ）。トークンは各利用者のローカルに保持されるため、接続先の共有と資格情報の共有は別物です。この分離は、チーム配布を検討するうえで重要な性質です。

実際に見えたツールは33個

接続後、Claude Codeから利用可能になったCanvaのツールは33個でした。カテゴリごとに整理すると、Canva MCPが何をカバーしているかが見えてきます。

実践①：SNS投稿画像を生成する

まずSNS告知用の画像を作ります。指示は自然言語で、design_type に instagram_post を指定するだけです。実際に投げたプロンプトの要点は次のとおりです。

design_type: instagram_post
query:
  B2B向けIT企業「株式会社テクノスフィア」のSNS告知投稿。
  訴求内容は「技術ブログ更新のお知らせ：Canva MCP を Claude Code に
  つないで、SNS投稿画像とWeb制作素材をAIエージェントに作らせた検証レポート」。
  見出しは「技術ブログ更新」、メインコピーは「AIエージェントに デザインを任せる」。
  ダークネイビー(#0B1F3A系)背景にシアン〜ブルーのグラデーション、
  幾何学ラインのテック的装飾。写真・人物イラストは使わない。
  日本語はゴシック体で必ず文字化けしない一般的な日本語フォントを使用し、
  英字プレースホルダ（架空のURLや社名、CEOなどの架空の肩書き）は一切入れないこと。
  文字数は少なく、余白広め、可読性最優先。

返ってくるのは「候補4案」

generate-design はデザインを直接作るのではなく、候補（design candidates）を4案返す設計です。レスポンスは次の形でした。

{
  "job": {
    "id": "2c4d09ff-a234-4d0f-96c2-ff4a7fecf388",
    "status": "success",
    "result": {
      "generated_designs": [
        { "candidate_id": "dg-5a03d4c0-...", "url": "...", "thumbnails": [...] },
        { "candidate_id": "dg-5dc4338c-...", "url": "...", "thumbnails": [...] },
        { "candidate_id": "dg-99f3fe0c-...", "url": "...", "thumbnails": [...] },
        { "candidate_id": "dg-c1922500-...", "url": "...", "thumbnails": [...] }
      ]
    }
  }
}

この段階ではまだCanvaアカウントに保存されていません。気に入った候補を create-design-from-candidate で確定させて初めてデザインになります。「4案出して選ぶ」というCanvaのUXが、そのままAPIの構造になっているわけです。

MCP error -32602: Input validation error:
[{ "code": "invalid_type", "expected": "string", "received": "undefined",
   "path": ["job_id"], "message": "Required" }]

採用した候補を確定させると、デザインIDとURLが返ります。

{
  "design_summary": {
    "id": "DAHQb2vIfiE",
    "title": "Digital Post for Tech Blog Announcement",
    "urls": { "edit_url": "https://www.canva.com/d/...", "view_url": "https://www.canva.com/d/..." },
    "page_count": 1
  }
}

あとは export-design で書き出すだけです。実際に出力されたのは 1080×1350ピクセル（4:5の縦型）のPNGで、Instagramのポート型投稿にそのまま使えるサイズでした。書き出し結果は署名付きの一時ダウンロードURLとして返されます。

所要時間は、プロンプト投入から書き出しURL取得まで1〜2分程度。デザイナーに依頼して戻ってくるまでのリードタイムと比べれば、告知用の「とりあえず1枚」を用意する速度としては十分実用的です。

生成AIデザインの落とし穴（実測）

ここからが本題です。速いのは事実ですが、そのまま公開してはいけない出力が確かに混ざります。今回の検証で実際に発生した3つの問題を記録します。

① 日本語が「豆腐」になる

4案のうち1案で、日本語のコピーがすべて □□□ の並び（いわゆる豆腐）になりました。選ばれたテンプレートのフォントが日本語グリフを持っていなかったためと考えられます。英語圏発のテンプレート資産を使う以上、これは構造的に起こり得ます。

対策として、SNS画像の生成時にはプロンプトへ「文字化けしない一般的な日本語フォントを使用」と明記しました。その結果、SNS投稿側では4案すべてで日本語が正常に描画されています。完全な保証にはなりませんが、有効な予防策です。

なお編集APIの仕様上、フォントファミリの変更はサポートされていません（サイズ・太さ・スタイルは変更可）。つまり豆腐化した候補は、後からAPIで直せません。捨てて選び直すのが正解です。

② テンプレート由来のダミー情報が残る

同じ候補には、指示していない架空のドメイン名（"REALLYGREATSITE.COM"）と架空の肩書き（"CEO"）が、自社名の下に配置されていました。Canvaのテンプレートに元から入っているプレースホルダがそのまま残ったものです。

これは実害が大きい種類の問題です。自社名と並んで存在しないURLや肩書きが載った画像を公開すれば、それは誤情報の発信になります。生成結果を自動でSNSへ投稿するパイプラインを組む場合、ここに人間の確認工程がないのは危険です。

③ 指示していない「事実」を書き足す

SNS投稿の候補の1つには、こちらが一切指定していない「2026年7月25日 土曜日」という日付が挿入されていました。興味深いことに、2026年7月25日は実際に土曜日で、曜日の整合性は取れています。しかしこの日付自体に根拠はなく、記事の公開日でもありません。

実践②：ブログのヒーロー／OGP画像をつくる

次に、この記事自身の画像を作ります。Web制作の現場でよく必要になる「記事のヒーロー画像（横長）とOGP画像（1200×630）」という実用ケースです。

ここで問題になるのがサイズです。Canvaの design_type には「OGP画像」という選択肢がなく、近いのは twitter_post（実測 1600×900）です。今回は次の方針を取りました。

1. generate-design (twitter_post) で 1600×900 のバナーを生成
2. export-design で PNG 書き出し
3. ローカルで用途別にトリミング・リサイズ
   - ヒーロー用: 中央帯を切り出して 1920×720
   - OGP用    : 上下を少し詰めて 1200×630（≒1.905:1）

resize-design ツールを使えばCanva側でサイズ変更もできますが、これはPro以上の有料プラン限定機能です[4][1]。また、比率が大きく変わる変換では文字組みが崩れることもあるため、「Canvaで作る → 最終的な出力比率はビルド側で確定させる」という分業のほうが、Webサイトへの組み込みでは扱いやすいと感じました。

書き出し可能な形式は get-export-formats で確認できます。今回のバナーでは pdf / jpg / png / pptx / gif / mp4 が返りました。公式ドキュメントも、対応形式はデザインごとに異なるため事前に get-export-formats で確認してから export-design を呼ぶことを求めています。形式を決め打ちすると失敗します。

実践③：編集トランザクションAPIでデザインを"コードで"直す

生成された画像は良い雰囲気でしたが、サブタイトルの文字が小さすぎました。ここでCanva MCPの最も"エンジニアリング寄り"な機能、編集トランザクションの出番です。

トランザクションの3ステップ

start-editing-transaction   → transaction_id と全要素の構造を取得
perform-editing-operations  → 編集操作を（複数まとめて）適用（この時点ではドラフト）
commit-editing-transaction  → 確定して保存
cancel-editing-transaction  → 破棄

デザインが構造化データとして返ってくる

start-editing-transaction を呼ぶと、デザインの中身が完全な構造データとして返ります。これが編集APIの本質です。

{
  "transaction": { "status": "open", "transaction_id": "6021823355239838297" },
  "richtexts": [
    { "element_id": "PBp0yWztFdlLtTRN-LBkDD5fv59dB7xqT",
      "regions": [{ "type": "character", "text": "AIエージェントがSNS投稿とWeb制作素材をつくる" }],
      "containerElement": { "type": "TEXT",
        "position": { "top": 321.31, "left": 636.8 },
        "dimension": { "width": 326.4, "height": 16.17 } } },
    { "element_id": "PBp0yWztFdlLtTRN-LBJrm4Pyk00lGtt8",
      "regions": [{ "type": "character", "text": "Canva MCP × Claude Code" }], ... }
  ],
  "fills": [ { "type": "image", "asset_id": "MAHQbxakfeA", "editable": true, ... } ],
  "pages": [ { "page_id": "PBp0yWztFdlLtTRN", "dimension": { "width": 1600, "height": 900 },
               "is_responsive": false, "is_editable": true } ]
}

要素ID・テキスト内容・座標・寸法・画像アセットIDが揃っているため、「サブタイトルの幅を760pxに広げ、中央に寄せ、30pxの太字にする」といった指示をピクセル単位で組み立てられます。実際に投げた操作は次のとおりです。

[
  { "type": "resize_element",   "element_id": "...LBkDD5fv59dB7xqT", "width": 760 },
  { "type": "position_element", "element_id": "...LBkDD5fv59dB7xqT", "top": 310, "left": 420 },
  { "type": "format_text",      "element_id": "...LBkDD5fv59dB7xqT",
    "formatting": { "font_size": 30, "color": "#5EC8F5",
                    "text_align": "center", "font_weight": "bold" } }
]

結果、豆粒だったサブタイトルが読めるサイズになりました。このページ最上部のヒーロー画像が、その適用後の状態です。

実際に遭遇した失敗：部分成功する

同じ呼び出しで、空のテキスト要素に社名クレジットを入れようとした操作は失敗しました。注目すべきは、1回の呼び出しの中で成功と失敗が混在したことです。

"edit_operation_results": [
  { "status": "success", "operation_info": { "type": "resize_element",   ... } },
  { "status": "success", "operation_info": { "type": "position_element", ... } },
  { "status": "success", "operation_info": { "type": "format_text",      ... } },
  { "status": "failure", "operation_info": { "type": "replace_text",     ... },
    "error": { "code": "internal_error",
               "message": "Unexpected error occurred when processing this operation" } },
  { "status": "success", "operation_info": { "type": "resize_element",   ... } },
  { "status": "success", "operation_info": { "type": "position_element", ... } },
  { "status": "failure", "operation_info": { "type": "format_text",      ... },
    "error": { "code": "internal_error", ... } }
]

失敗したのは、いずれもテキストが空の要素に対する replace_text と format_textでした。同じ要素への resize_element と position_element は成功しています。テンプレートに残った空のテキストプレースホルダは、文字を流し込む対象としては扱えなかったことになります（今回は delete_element で削除して解決しました）。

レスポンスが大きい点にも注意

編集トランザクションのレスポンスは、要素数に比例して大きくなります。Claude CodeはMCPツールの出力が10,000トークンを超えると警告を表示し、既定では25,000トークンで打ち切ります（上限は MAX_MCP_OUTPUT_TOKENS 環境変数で引き上げ可能）[3]。ページ数の多いプレゼンテーションを丸ごと編集させる用途では、この制限に当たる可能性があります。ページ単位で処理を分割する設計が無難です。

プラン別制限とレート制限

導入前に必ず確認すべき部分です。ここは特に慎重に、公式の記載をそのまま引きます。

プラン要件

CanvaのAI ConnectorページのFAQは、「すべてのCanvaプランがAIアシスタントに接続できます。Canva Freeを含みます」と明言しています。そのうえで機能ごとの制限として、「リサイズは有料のCanvaプランのみ」「オートフィルとブランドテンプレートはEnterpriseプランのみ」と記載しています[1]。

レート制限（公式ドキュメント記載値）

生成と書き出しが20 req/minという点は、バッチ処理を設計するうえで効いてきます。「100商品分のSNS画像を一括生成」といった用途では、1分あたり20件がボトルネックになります。数百枚規模の量産を想定するなら、リトライとスロットリングを前提にした実装が必要です。

商用利用ライセンスの落とし穴

技術的に動くことと、業務で使ってよいことは別問題です。制作会社として、また発注する側としても、ここは押さえておく必要があります。

CanvaのContent License Agreementは、広告・販促物・印刷物・パッケージ・プレゼンテーション・映像・カタログ・ブローシャーといった用途での利用を、複製数の上限なしで認めています[5]。SNS投稿画像やWebサイトのバナーは、通常この範囲に収まります。

一方で、明確に禁止されている行為があります。

受託制作でクライアントに納品する場合、成果物としての制作物の納品と、素材そのものの譲渡は区別して考える必要があります。ロゴやコーポレートアイデンティティに関わる領域は、Canva素材ではなくオリジナル制作で対応するのが安全です。案件の性質に応じて、契約条件を確認したうえでご判断ください。

どこまで自動化すべきか

今回の検証を踏まえた、弊社としての現時点の整理です。

要点は「レイアウトはAIに、事実は人間に」です。Canva MCPが本当に強いのは、ゼロから絵を描かせることよりも、確定した正しい情報を、整った体裁に流し込む工程だと感じました。編集トランザクションAPIで replace_text を使えば、テキストの正しさは完全にこちらの管理下に置けます。

よくある質問（FAQ）

Q. Canva MCPは無料プランでも使えますか？

Canva公式のAI Connectorページでは「すべてのCanvaプランがAIアシスタントに接続できます（Canva Freeを含む）」と案内されています[1]。ただしリサイズは有料プラン、オートフィルとブランドテンプレートはEnterpriseプラン限定とされています。なお公式ドキュメント間でブランド系機能の要件表記に差があるため、詳細はプラン別制限の章をご確認ください。

Q. Claude Code以外のAIツールからも使えますか？

使えます。Canva公式はChatGPT・Claude・Amazon Quick Suiteを提供中、Google Geminiを近日、Microsoft Copilotをプレビューとして掲載しています[1]。加えて、MCPに対応したクライアントであれば https://mcp.canva.com/mcp に接続できます。本記事の検証はClaude Code（CLI）で行いました。

Q. AIが生成したデザインをそのまま公開してよいですか？

推奨しません。今回の検証だけでも、日本語の文字化け、架空のURL・肩書きの混入、指示していない日付の挿入という3種類の問題が実際に発生しました。詳細は落とし穴の章をご覧ください。公開前の目視確認は必須の工程です。

Q. 生成した画像を商用利用・クライアント納品できますか？

CanvaのContent License Agreementでは、広告・販促物・パッケージ・プレゼンなど幅広い商用利用が認められています[5]。ただし商標・ロゴの一部としての利用（フォントを除く）と素材そのものの再販・再配布は禁止されています。詳細はライセンスの章をご確認ください。ロゴやCIに関わる制作は、オリジナルで対応するのが安全です。

Q. 大量の画像を一括生成できますか？

可能ですが、generate-design と export-design がいずれも20 req/minのレート制限を持ちます[4]。数百枚規模ではスロットリングとリトライを前提にした実装が必要です。定型フォーマットへのデータ流し込みであれば、生成ではなくブランドテンプレートのオートフィル（Enterprise）や編集トランザクションによるテキスト差し替えのほうが、速度・正確性ともに有利です。

Q. 社内でチーム共有できますか？

接続設定は .mcp.json をリポジトリに含めることでチーム配布できますが、認証はユーザー単位で、利用者それぞれがCanvaアカウントで認証する必要があります[2]。AIが操作できる範囲は、そのユーザーがCanva上で持つアクセス権の範囲に限られます。

まとめ

結論として、Canva MCPは「デザイナーの代替」ではなく「制作パイプラインの部品」として優秀です。特に、確定した情報を定型フォーマットへ流し込む工程——記事のアイキャッチ量産、多言語版の一括差し替え、定期レポートの体裁整形——では、すぐに投資対効果が出ます。逆に、ブランドの根幹に関わる表現や、数値・日付の正確性が問われる資料は、人間が主導すべき領域が明確に残ります。

テクノスフィアでは、MCPサーバを組み込んだAIエージェント基盤の設計・構築や、社内業務ツールとAIの連携（Redmine・Obsidian・社内Wikiなど）の実装をご支援しています。「デザイン以外の業務も同じ発想で自動化できないか」といったご相談も歓迎です。

AIソリューション　｜ AIエージェントの業務自動化事例　｜ 開発の相談をする

参考文献・出典

1. Canva「Canva's AI Connector」公式ページ（対応AIアシスタント、プラン要件のFAQ） — canva.com/ai-connector/
2. Canva Developers「Canva Model Context Protocol (MCP)」（エンドポイント、CIMD/DCR認証、アクセス権の範囲） — canva.dev/docs/mcp/
3. Anthropic「Connect Claude Code to tools via MCP」（claude mcp add の構文、/mcp によるOAuth認証、MCP出力トークン上限、プロンプトインジェクションの注意） — code.claude.com/docs/en/mcp
4. Canva Developers「MCP tools and rate limits」（全ツールのレート制限とプラン要件） — canva.dev/docs/mcp/tools/
5. Canva「Content License Agreement」（許諾される商用利用の範囲、商標・ロゴへの利用禁止、再配布の禁止） — canva.com/policies/content-license-agreement/
6. Model Context Protocol 公式サイト — modelcontextprotocol.io

※本記事に掲載したコマンド出力・APIレスポンス・エラーメッセージは、2026年7月26日に弊社環境（Claude Code + Canva MCP）で実行した結果の抜粋です。プラン要件・レート制限・提供ツールは各社の仕様変更により変わる可能性があります。ライセンスの解釈については各案件の契約条件をご確認のうえ、必要に応じて専門家にご相談ください。Canvaは Canva Pty Ltd、Claude および Claude Code は Anthropic PBC の商標です。