AIと話しながらコードや文章を編集したいとき、チャット欄だけだと不便です。「Canvas」はそれを解決するために生まれた専用の編集ウィンドウです。チャット画面の横にパネルが開き、AIが生成したものをその場で確認・修正できます。
ただし「Canvas」という名前は複数のサービスで使われており、それぞれ別物です。このページではAIツールとしてのCanvasを解説します。ブラウザの描画機能「HTML Canvas API」については HTML Canvas API を参照してください。
ChatGPT Canvas（OpenAI）
2024年10月3日にOpenAIが公開しました。ChatGPTの画面の横に専用パネルが開き、コードや文章をAIと一緒に作業できます。
主な機能
- テキストの一部を選択して「ここだけ直して」と指示できる
- コードのデバッグ・バグ修正・コメント追加をワンクリックで実行
- JavaScript・Python・Java など複数の言語へ変換
- 過去バージョンに戻せる履歴機能
たとえば長い文章の特定の段落だけ「もっと簡潔に」と指定できるイメージです。
詳しくは Introducing Canvas | OpenAI を参照してください。
Claude Artifacts（Anthropic）
Anthropicの Claude.ai に搭載されている機能です。ChatGPT Canvasと似た「独立したコンテンツ表示ウィンドウ」ですが、特にコードを実際に動かして見せる点が特徴です。
15行以上のコードや文書を生成すると、自動的にArtifactsパネルに表示されます。
主な機能
- Reactコンポーネントをブラウザ上でそのままプレビュー実行
- フローチャート・SVGグラフィック・インタラクティブダッシュボードの作成
- MCP（Model Context Protocol）を通じて Asana・Google カレンダー・Slack などの外部サービスと連携
- 無料プランを含む全プランで利用可能
「コードを書いたらすぐ動く画面が見られる」ため、試作品を素早く確認するのに向いています。
詳しくは What are Artifacts | Claude Help Center を参照してください。
Figma Code to Canvas（2026年2月〜）
2026年2月17日、AnthropicとFigmaが共同発表した連携機能です。「AIが生成したコード」を「デザインツールで編集できるレイヤー」に変換します。
使い方
- Claude Codeでコードを生成する
- チャットに「Send this to Figma」と入力する
- ブラウザ上の表示結果がFigmaのデザインレイヤーに変換される
なぜ重要か
AIはコードを素早く書けますが、レイアウトや視覚的な一貫性の調整にはまだ人の目が必要です。この機能はAIコーディングとプロのデザインワークフローをつなぎます。
詳しくは The Future of Design Is Code and Canvas | Figma Blog を参照してください。
3つの比較
| 機能 | 提供元 | 特徴 |
|---|---|---|
| ChatGPT Canvas | OpenAI | 一部選択して編集・言語変換 |
| Claude Artifacts | Anthropic | コードをその場で実行・MCPと連携 |
| Figma Code to Canvas | Figma × Anthropic | AIコードをFigmaデザインに変換 |
このサイトでの使われ方
このサイト（arismmn）はClaude Codeで開発・運用されています。
- このwiki記事を含むコンテンツの下書きをClaude Artifactsで確認してから投稿することがあります
- UIコンポーネントの試作にClaude ArtifactsのReactプレビューを活用しています
- 将来的にはFigma Code to Canvasを使ってデザインの整合性確認に役立てることを検討しています