Canva、Anthropic「Claude Design」と連携　AI生成コードをドラッグ＆ドロップ編集可能に

AIにHTMLやUIコンポーネントをコードで出力させた後、ボタンの色や配置を少し変えたいだけなのに、プロンプトを投げ直したらコード全体が書き換わって動かなくなった。そんな経験がある人は少なくないはずです。

CanvaとAnthropicがこの手戻りを解消する連携を発表しました。Anthropic LabsがClaude Opus 4.7を搭載した新機能「Claude Design」を公開し、Canvaはそこから生成されたデザイン案やHTMLコードをCanva上へ直接取り込める機能をリリースしました。

コード再生成をやめ、ドラッグ＆ドロップで修正する

最大のポイントは、Canvaが新しく導入したHTMLインポート機能です。これまでClaudeの「Artifacts」などで出力された動的コードは、編集しようとするとAIに再度コードを書かせるしかありませんでした。

今回の連携により、Claude上で作成したインタラクティブなコードやUI部品をCanvaのVisual Suiteへそのまま引き渡せるようになりました。引き渡されたコードは通常のデザイン要素と同じように扱えるため、色の変更や要素の移動がすべてマウス操作のドラッグ＆ドロップで完結します。

編集したパーツはCanva Presentationに埋め込んだり、Canva Formと組み合わせてデータを収集したり、Canva Websitesを使って独自ドメインでWebサイトとしてそのまま公開することも可能です。

Claude Opus 4.7で動く「Claude Design」

土台となるClaude Designは、Claude Pro、Max、Team、Enterpriseの有料プラン向けにリサーチプレビューとして順次提供が始まっています。最上位のビジョンモデルであるClaude Opus 4.7が裏側で動いています。

コードベースやデザインファイルを読み取らせることでブランドのルールを自動学習するほか、インラインでのコメント機能や、Claudeがその場で生成するスライダーを使って余白や配色を直感的に微調整できるUIを備えています。ここからCanvaへ送るだけでなく、Claude Codeへ開発を引き継ぐためのパッケージ出力にも対応します。

なぜ重要か

AIによるデザイン生成は、アイデア出しの速度を劇的に上げた一方で、「最後の10%の微調整」が最も面倒だという課題を抱え続けてきました。指示文だけで細かなピクセル調整を指示するのは、人間にとってもAIにとっても非効率だったからです。

今回の座組みは非常に現実的です。Anthropicは複雑なWebグラフィックエディタを自前で一から作るのを避け、Canvaは最先端モデルの開発競争に深入りせず「AI生成物の最終的な編集レイヤー」のポジションを固めにかかっています。

マーケターや個人開発者にとって、コードに触れずプロトタイプから公開までを一気通貫で進められるメリットは大きく、試す価値は十分にあります。一方で、複雑なJavaScriptを含むインタラクティブなコードをCanvaのキャンバスがどこまで崩さずに再現・維持できるかについては、実際の現場で検証していく必要があります。