M2 ユーザーガイド

M2 Canvas は、チームと AI エージェントが一緒にデザインできる共有キャンバスです。このガイドでは、利用開始、エディター、エージェントとの作業、デザインシステム、共有と書き出しについて説明します。

アプリの画面は英語と中国語で提供しています。このガイドでは、ボタンやメニューの名前を画面どおり英語で記載しています。

利用を始める

M2 は現在プライベートベータ中のため、登録は招待制です。

1. トップページでウェイトリストに登録します。承認されると、招待リンクをメールでお送りします。
2. リンクを開き、Google、GitHub、またはメールアドレスとパスワードで登録します。招待を受け取ったメールアドレスを使ってください。招待リンクの有効期限は 7 日間で、使えるのは 1 回だけです。
3. メールアドレスで登録した場合は、届いた確認コードを入力する（またはそのメール内のリンクをクリックする）とアドレスの確認が完了します。

すでにアカウントをお持ちの場合は、Google、GitHub、またはメールアドレスとパスワードでログインできます。ログイン画面の「Forgot password?」からパスワード再設定用のリンクを受け取れます。

初めてログインするとワークスペースが開き、短い案内が表示されます。始め方は Start with an example（サンプルから始める）と Blank project（空のプロジェクト）の 2 つです。どちらを選んでもプロジェクトが開き、エージェントを接続するための案内が表示されます。

ワークスペースとプロジェクト

• ワークスペースのサイドバーにある New Project でプロジェクトを作成します。作成できるプロジェクト数はプランによって異なります。詳しくは料金をご覧ください。
• プロジェクトには 1 つ以上のページがあります。エディター左サイドバーの Pages タブで、タブ行の右端にある + からページを追加し、ページをダブルクリックすると名前を変更できます。ページのメニューから複製、並べ替え、削除ができます。削除したページは元に戻せません。
• プロジェクトを削除すると Trash（ゴミ箱）に移動します。ゴミ箱から復元、完全削除、ゴミ箱を空にすることができます。ゴミ箱での保管期間はプランによって異なります。
• ワークスペースのプロジェクト数がプランの上限を超えると、超えた分のプロジェクトは読み取り専用になり、アップグレードすると再び編集できます。

エディター

左サイドバー。 上部には M2 ロゴとプロジェクト名があります。M2 ロゴをクリックするとメインメニューが開きます。Go to project でプロジェクト一覧に戻り、View でサイドバーのスタイル切り替えやサイドバー・右パネルの表示切り替えができます。Preferences はキャンバス設定、Help and account には使い方ガイドがあります。プロジェクト名をクリックするとプロジェクトメニューが開き、名前の変更（Rename）、リンクのコピー、スター、エージェントの接続、プロジェクトの削除ができます。Coming soon と表示された項目はまだ使えません。その下には 3 つのタブがあります。Pages はページ一覧、Resources にはアプリ、アップロードしたファイル、デザインシステムのコンポーネントがあり、上部の検索欄でこの 3 つをまとめて検索できます。Layers は現在のページのレイヤーで、Find layer で名前から探せます。サイドバーの右端をドラッグすると幅を変えられ、⌘ \ で折りたたみ・展開ができます。サイドバーには Standard と Compact の 2 つのスタイルがあります。Compact はアイコンの列だけになり、アイコンをクリックすると対応するパネルが開きます。View メニューかサイドバーのレイアウトメニューで切り替えます。

ツールバー。 キャンバス下部のツールバーには、選択 V、手のひら H、ペン P、取り消し、やり直し、そして + があります。+ を開くと挿入メニューが表示され、Frame F、テキスト T、画像 I、長方形 R、楕円 O、直線 L、矢印 Shift L があり、多角形と星は More shapes にあります。キャンバスの右上には保存状態、参加中のメンバー、Share があります。

キャンバス。 右下のズームコントロール、または ⌘ +、⌘ −、⌘ 0（100%）、⌘ 1（全体を表示）、⌘ 2（選択範囲に合わせる）でズームします。Space を押したままドラッグするとキャンバスを移動できます。ルーラー、ピクセルグリッド、スナップ、背景などのキャンバス設定は、M2 ロゴのメニューの Preferences にあります。

右パネル。 右側のパネルには 2 つのタブがあります。エージェントタブでは M2 の内蔵エージェント Patch Agent と会話できます。タブのメニューから、お使いのコンピューター上のエージェント（ローカルエージェントを使っている場合）への切り替えや Connect an agent… も選べます。Design タブには選択中のノードのプロパティが、何も選択していないときはページの ID と背景が表示されます。パネルの左端をドラッグすると幅を変えられ、M2 ロゴのメニューの View にある Right panel、またはサイドバーのレイアウトメニューで表示・非表示を切り替えます。

レイアウトとプレゼンテーション。 サイドバーのレイアウトメニュー（サイドバーの開閉ボタン横の ▾）と M2 ロゴのメニューの View には、Standard、Compact sidebar、Canvas focus（サイドバーと右パネルを隠し、キャンバスとツールバーだけを残します）、Presentation の 4 つのレイアウトがあります。パネルを個別に表示・非表示にすると、4 つのどれにもチェックが付きません。Toolbar and zoom で下部のツールバーとズームコントロールをまとめて表示・非表示にできます。Presentation を選ぶとプレゼンテーションになり、エディターの UI がすべて隠れます。移動、ズーム、クリックでの確認はできますが、編集はできません。Esc（選択中のものがあれば先に選択を解除します）を押すか、上部のヒントの Exit をクリックすると終了し、元のレイアウトに戻ります。ポインターをキャンバスの上端に移動するとヒントが再び表示されます。

内蔵エージェントでデザインする

右パネルのエージェントタブに作りたいものを入力し（例：「3 つのプランがある料金ページをデザインして」）、Enter で送信します（改行は Shift Enter）。エージェントは現在のページと選択中の内容を自動的に読み取り、プロジェクトのデザインシステムを使ってつくります。

• 入力欄の横にあるモデル選択からモデルを切り替えられます。
• New chat（+）で新しい会話を始め、History から以前の会話に戻れます。
• 内蔵エージェントはクレジットを消費します。残りのクレジットと次回の付与日は、ワークスペースの切り替えメニューで確認できます。クレジットが足りない場合は、会話を始める前にお知らせします。プランごとのクレジットは料金をご覧ください。

自分のエージェントを接続する

普段使っているエージェントでデザインすることもできます。Claude Code、Codex、Cursor、OpenCode、Qoder、そのほか MCP に対応したクライアントが使えます。

• いちばん簡単なのは、エージェントにこの一文を貼り付ける方法です：「Read https://patch.design/agent-setup.md and follow the instructions to connect to M2.」エージェントが自分で設定し、ブラウザでのログインを求めます。
• または、エージェントメニュー（またはプロジェクトメニュー）で Connect an agent… を選び、Copy to agent をクリックします。現在のプロジェクトとページを含んだ最初のプロンプトがコピーされるので、そのまま貼り付けられます。
• クライアントごとのコマンドと MCP エンドポイントはMCP で接続にまとめています。

Connect パネルには、このプロジェクトにいるすべてのエージェントが、所有者、作業中のページ、応答しているかどうかとともに表示されます。エージェントとチームメイトは同じキャンバスをリアルタイムに編集し、それぞれにカーソルがあります。

デザインシステム

デザインシステム（DS）にはトークンとコンポーネントが入っていて、エージェントはそれに沿ってデザインするため、どの画面もブランドに沿ったものになります。

• ワークスペースの Design Systems で New design system を選んで作成します。ゼロから始めることも、既存のデザインシステムをもとに複製することもできます。新しいデザインシステムは Draft（下書き）として始まります。
• デザインシステムを開くと Overview、Library、Assets、Versions を確認できます。Start Editing で編集を始め、Publish で新しいバージョンを公開します。リリースノートも付けられます。
• コンポーネントはエージェントがつくります。デザインシステムのページでエージェントに依頼してください（例：「Button コンポーネントを追加して」）。
• プロジェクトでは、左サイドバーの Resources タブにある Components セクション見出しの Bind Design System（バインド後はデザインシステム名が表示されます）で新しいノードに使うデザインシステムを選び、プロジェクトが追従するバージョンを選びます。ノードを選択すると、右パネルの Design タブにある Design System セクションに、そのノードが使っているデザインシステムとバージョンが表示されます。

共有と共同作業

• キャンバス右上の Share から、メールアドレスで閲覧者としてプロジェクトに招待できます。一般アクセスは Restricted（制限付き）または Anyone with the link（リンクを知っている全員が閲覧可能）に設定できます。Copy link で閲覧専用のリンクをコピーできます。
• 編集者を追加するには、ワークスペース設定 → Members → Invite で Admin、Editor、Viewer のいずれかを選びます。編集者と管理者はシートを使い、閲覧者は無料です。
• 共有を管理できるのは、ワークスペースのオーナーと管理者だけです。
• プロジェクトで作業している全員が、キャンバス右上のアバターとキャンバス上のライブカーソルで表示されます。人もエージェントも同じです。

アセットとアプリ

• Resources タブで、タブ行の右端にあるアップロードボタン、または右クリックメニューの Upload files…・Upload folder… から画像をアップロードし、フォルダーで整理できます。対応形式は PNG、JPEG、GIF、WebP、SVG、BMP、TIFF で、1 ファイル 10 MB までです。保存容量の合計はプランによって異なります。
• エージェントはキャンバス上にインタラクティブなアプリをつくれます。アプリを選択して Run（または Enter）を押すと、その場で使えます。Resources → Apps の Export code から Vite プロジェクトとしてダウンロードし、npm install && npm run dev で実行できます。
• Resources タブの Components セクションでは、デザインシステムのアイコンとコンポーネントを閲覧し、キャンバスにドラッグして使えます。

書き出し

キャンバス上の要素を右クリックします。

• Copy as → Copy as PNG（⌘ Shift C）、Copy ID、Copy Node JSON。
• Export… で PNG、JPG、SVG を書き出せます。倍率は 0.5× から 4× まで選べ、幅または高さを指定することもできます。

キーボードショートカット

Windows では ⌘ の代わりに Ctrl を使います。

補足

• 変更は自動で保存され、保存状態はアバターの横に表示されます。
• 取り消しの対象は、現在のセッションで自分が行った編集だけです。ページを再読み込みすると引き継がれません。
• プロジェクトのバージョン履歴はまだありません。デザインシステムは公開したバージョンの一覧を保持します。
• ご不明な点は hello@m2ui.ai までお問い合わせください。