Agentic Canvas：AIエージェントと一緒にデザイン2 min read

AIエージェントは数分でWebサイトを生成できます。でもその後、ボタンを移動したり、2つのレイアウトを比べたり、スクリーンショットを集めたり、余白を自分で直したくなります。すると、視覚的な変更をまた別のプロンプトで説明することになります。プロンプトを書くより、ドラッグしたほうが早いこともあります。

だから私たちはAgentGrid.ioのAgentic Canvasを作りました。これは、あなたとMCP対応エージェントが、同じ実際のHTMLとCSSのページで作業できる無料のAIデザインキャンバスです。HTMLを取り込む、デザインや画像から始める、あるいはエージェントにページを作ってもらう。できあがったものを選択し、移動し、サイズを変え、編集できます。アカウントを作らずにAgentic Canvasを開けます。

使い方はシンプルです。HTMLページや画像を取り込み、視覚的に配置・編集し、ClaudeやChatGPTにアニメーションやインタラクションの調整を頼んでからHTMLを書き出します。最初から新しいプロンプトを書かなくても、いつでも自分の手で修正できます。

Agentic Canvasとは？

AIエージェントと一緒に本物のWebページをデザインするための視覚的な作業スペースです。キャンバスにはおなじみのフレーム、レイヤー、インスペクター、レイアウト操作があります。ただしフレームは静止画像ではなく、コードでできています。MCPで接続したエージェントは現在のページを読み取り、変更できます。結果を見て手作業で調整し、更新されたデザインからエージェントに作業を続けてもらえます。

何を直すべきか見て判断する人と、コードを書けるエージェントが、同じものを一緒に作る場所だと考えてください。

AIエージェントのためのキャンバスが必要だった理由

1. プロンプトのやり直しを減らす視覚的な共同作業

ClaudeやChatGPTでランディングページ、製品画面、マーケティング素材を作るとき、最初の案は出発点にすぎません。ヒーローセクションを3案並べたり、グリッドを詰めたり、別のCTAを試したりしたいはずです。何を変えたいか正確にわかっているのに、視覚的な判断を一つずつチャットで説明するのは時間がかかります。

Canvasなら、その変更を直接加えられます。エージェントが読むのは、すでに古くなった版の言葉による説明ではなく、今そこにあるページです。大きな作業はエージェントに任せ、最終的な判断は自分の手で行い、その続きからまたエージェントに任せられます。

2. 視覚的な参考資料を集める場所

アイデアは仕様書ではなく、ムードボードから始まることもあります。スクリーンショット、参考ページ、画像、テキストを集めて空間に配置し、作りたいものを伝える材料を追加しましょう。AIエージェントは長いチャット履歴から推測する代わりに、目の前のデザインをもとに作業できます。

ブランドの仕事では特に重要です。レイアウトの参考、コピー、スクリーンショットがあれば、目指す雰囲気をもう一段落説明するより早く意図が伝わることがあります。

3. キャンバスに本物のHTMLとCSSを使う理由

なぜHTMLとCSSをベースにデザインツールを作るのでしょうか。コーディングエージェントはすでにコードを自在に読み書きできるからです。私にとって、別のデザイン形式を経由させるのは、英語を母語とする人に英語で考えながら中国語で読み書きするよう求めるようなものです。余分な変換で細部が失われ、時間とトークンもかかります。私は以前からデザインはコードだと主張してきました。ここでは、それが文字どおり形になります。

Agentic Canvasでは、フレームは実際のページであり、自動レイアウトはCSS flexboxに、グリッドはCSS gridに対応します。ボタンを視覚的に編集し、エージェントにアニメーションやインタラクションの追加を頼み、準備ができたらコードを書き出せます。キャンバス上の動くページでは、スクリプト、ホバー状態、レスポンシブな動作も実行できます。後から作り直す必要のある画像ではありません。

従来のデザインキャンバスと何が違う？

従来のデザインキャンバスは視覚的なアイデアを組み立てるのに便利ですが、それを動くWebページにするには、別途実装が必要になることがよくあります。Agentic CanvasはHTMLデザインツールです。フレームそのものが実際のページなので、エージェントはあなたが視覚的に編集するのと同じHTMLとCSSを読み、変更できます。成熟したデザインツール群の全機能を備えているという意味ではありません。AIが生成したサイトを調整する場合も、新しいサイトを作る場合も、視覚的な判断と動くコードを一緒に扱うことが目的です。

Agentic CanvasでClaudeやChatGPTとWebサイトをデザインする方法

1. 手元にあるものから始める。 キャンバスを開いてHTMLを貼り付ける、Figmaからコピーして貼り付ける、画像やデザインを取り込む、またはエージェントが生成したページから始めます。対応する開始方法はインポートガイドに記載されています。
2. エージェントを接続する。 キャンバスでAIエージェントを選び、次にエージェントを追加を選択します。Claude、ChatGPTなどのMCP対応クライアントの設定は接続ガイドに従ってください。エージェントが作業する間、キャンバスのタブは開いたままにします。
3. 一緒に最初の案を作る。 レイアウトやインタラクションを依頼し、キャンバス上で動く結果を確認します。
4. 視覚的に手を加える。 要素を動かし、色を変え、フレームのサイズを調整し、レイアウトを手で整えます。最新の状態からエージェントに続きを依頼しましょう。
5. 準備ができたら書き出すか共有する。 公開せずにHTMLやその他の対応形式で書き出せます。ホストされたリンクが必要なら、AgentGrid.ioで共有または公開できます。このクラウドでの操作は任意で、アカウントが必要です。

ローカルに残るものと、アカウントが必要なものは？

登録せずに、ブラウザで無料でデザインを始められます。ファイルはそのデバイスのそのブラウザに保存され、自動で他のデバイスにバックアップされるわけではありません。ブラウザの外にも残したい作業はコピーを書き出してください。外部エージェントを接続すると、そのエージェントはキャンバスを読み取り、ネットワークも使用します。つまり「ローカル」は「オフライン」を意味しません。AgentGrid.ioでの共有や公開は任意で、アカウントが必要です。

次のデザインツールは、視覚的な操作と、ものを作れるエージェントのどちらかを選ばせるべきではないと思います。エージェントは仕事そのものの言語で作業し、私たちは画面上のものをつかんで変えられるべきです。

Agentic Canvasを開き、エージェントと一緒にデザインしてみてください。 ワークフローを手短に見るなら、ローンチデモを見て機能を確認してください。

Agentic Canvasに関するよくある質問

Agentic Canvasは無料ですか？アカウントは必要ですか？

はい、デザインキャンバスは無料です。ブラウザで開けば、アカウントなしでデザインを始められます。AgentGrid.ioのアカウントが必要なのは、AgentGrid.ioで共有または公開する場合だけです。

Agentic CanvasではどのAIエージェントを使えますか？

Claude、ChatGPT、Claude Code、Codex、CursorなどのMCP対応エージェントは、開いているキャンバスを読み取り、変更できます。AIエージェント、次にエージェントを追加を選んで接続手順に進みます。エージェントの作業中はキャンバスのタブを開いたままにしてください。

AIが生成したWebサイトを視覚的に編集できますか？

はい。HTMLページまたはサイトのフォルダーを取り込み、キャンバス上で要素を移動、サイズ変更、調整できます。フレームは本物のHTMLとCSSなので、エージェントは静的なモックアップを作り直さずに、あなたの視覚的な編集から作業を続けられます。

既存のHTMLページやWebサイトを取り込めますか？

はい。HTMLをキャンバスに貼り付けるか、サイトのフォルダーまたはZIPをホーム画面にドロップしてください。Figmaの選択範囲や画像から始めることもできます。

キャンバスのファイルはどこに保存されますか？バックアップされますか？

使用したブラウザとデバイスにローカル保存され、自動的なクラウドバックアップはありません。別のブラウザやデバイスからは見えません。大切な作業はコピーを書き出すか、クラウドバックアップとバージョン履歴が必要ならAgentGrid.ioでの共有を選んでください。

タブを閉じた後もAIエージェントはキャンバスで作業できますか？

いいえ。接続したエージェントがデザインを読み取ったり変更したりする間は、キャンバスのタブを開いておく必要があります。後から同じブラウザでローカル保存したファイルに戻れます。

エージェントを接続するとAgentGrid.ioのワークスペースにもアクセスできるようになりますか？

いいえ。エージェントをキャンバスに接続しても、作業できるのは開いているキャンバスのファイルです。そのエージェントをAgentGrid.ioのアーティファクトに接続するには、別の手順が必要です。

公開せずに書き出せますか？

はい。共有も公開もせずにHTML、PNG、SVG、PDFを書き出せます。HTMLをコーディングエージェントに渡して、別の場所で開発を続けることもできます。

共有と公開は同じですか？

いいえ。AgentGrid.ioでの共有は、あなたが選んだ人やエージェントにアクセスを許可します。公開すると、デザインは一般公開のWebアドレスで見られるようになります。どちらも任意で、AgentGrid.ioのアカウントが必要です。