M2 ユーザーガイド

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

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

利用を始める

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

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

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

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

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

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

エディター

左サイドバー。 Design タブには、プロジェクトのデザインシステム、ページ一覧、レイヤー一覧の Nodes（編集者には Assets も）が表示されます。Resources タブには、アップロードしたファイルとアプリがあります。Shift \ でサイドバーを折りたためます。

トップバー。 左側にはパネルの切り替え（Page、Inspector、Connect）とツールが並びます。選択 V、手のひら H、Frame F、テキスト T、図形ツール（長方形 R、直線 L、矢印 Shift L、楕円 O、多角形、星）、ペン P、画像 I です。中央にはプロジェクト名があり、クリックすると名前を変更できます。右側には保存状態、参加中のメンバー、Share があります。

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

エージェントパネル。 M2 の内蔵エージェントは右側にあります。左サイドバーを開いているときは右側に固定され、左サイドバーを折りたたむとフローティングカードになり、右下の小さなピル型に最小化できます。

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

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

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

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

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

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

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

デザインシステム

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

• ワークスペースの Design Systems で New design system を選んで作成します。ゼロから始めることも、既存のデザインシステムをもとに複製することもできます。新しいデザインシステムは Draft（下書き）として始まります。
• デザインシステムを開くと Overview、Library、Assets、Versions を確認できます。Start Editing で編集を始め、Publish で新しいバージョンを公開します。リリースノートも付けられます。
• コンポーネントはエージェントがつくります。デザインシステムのページでエージェントに依頼してください（例：「Button コンポーネントを追加して」）。
• プロジェクトでは、左サイドバーの Bind Design System で新しいノードに使うデザインシステムを選び、プロジェクトが追従するバージョンを選びます。ノードを選択すると、Inspector の 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 で実行できます。
• Design 側の Assets タブでは、デザインシステムのアイコンとコンポーネントを閲覧し、キャンバスにドラッグして使えます。

書き出し

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

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

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

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

補足

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