M3E Canvasは、ドラッグした画面をAIへの指示文に変える

Claude CodeやCursorのようなAIコーディングエージェントに、「ホーム画面を作って。上にタイトルバー、その下にボタンを2つ、真ん中にリストを3行」と、位置関係を言葉で説明したことはないだろうか。説明している途中で、どのボタンが先だったか、リストと重なる部品はなかったかが怪しくなってくる。

無料のブラウザツール「M3E Canvas」を使えば、この説明をそもそも書かずに済む。部品をドラッグして画面の形に並べるだけで、その配置がAIコーディングツールにそのまま渡せる指示文(プロンプト)になる。公式GitHubリポジトリで2026-11-10に確認した時点でStarは1万を超えた。levtechの記事によると、2026-11-03に1万Starへ達したという。

ドラッグした画面がこうなる

公式デモページを開くと、「Home」という名前の画面が最初から1つ用意されている。自分で新しく設計したものではなく、ツールの初期サンプルだ。上から順に、タイトルバー、「お気に入り」「共有」の2つのボタン、「受信トレイ」「スター付き」「アーカイブ」の3行リスト、右下の編集FAB、最下部のナビゲーションバーが並ぶ。

右側の「Prompt」ボタンを押すと、テキストエリアに英語の指示文が表示された。自分で全文を保存して数えると6,562文字あった。冒頭はこう始まる。

Please implement this screen in the Material 3 Expressive design language. Target a portrait phone screen (412×892dp), light mode only. Build it for Android, as a native app.

この3行だけで、デザイン言語・画面サイズ・出力先OSが指定されている。画面に出ていたピル型のボタンや丸みの強いカードの見た目には名前が付いている。Googleが2026年に示したデザイン言語「Material 3 Expressive」だ。続けて配色が16進コードの表、形と文字とモーションの指定、画面の部品が上から下へ箇条書きで並ぶ。自分が画面で見た部品の並び順が、そのまま文章の並び順になっていた。

画面右上のアイコンから日本語・英語・中文・한국어を切り替えられる。日本語に切り替えて同じ画面を生成し直すと、部品の名前も指示の中身も自然な日本語になって出てきた。英語が苦手でも、日本語のまま指示文を受け取れる。

なぜ毎回同じ指示文になるのか

この並び順の対応関係を、スマホ画面の形のまま描くと次のようになる。

上の図で縦に並んだ部品の順番が、指示文の「Layout」という見出しの下で説明される順番と一致する。これを自分で確かめるため、同じ画面から指示文を2回続けて生成し、1文字ずつ比較した。結果は完全に一致した。AIに都度書かせているなら多少の表現の揺れが出るはずだが、揺れがない。つまりM3E Canvasは、部品の位置と役割を決まった規則で文章に展開しているだけで、文章を作る段階でAIを呼んでいない。だから同じ画面なら、何度作り直しても同じ並び順・同じ数値の指示文になる。

指示書の中身を読む

指示文の後半は、部品ごとの数値と、画面全体に共通するルールが並ぶ。たとえば「FABは56dp、角丸16dp。浮かせる位置は画面端から16dp」のように、部品の種類ごとにM3 Expressiveの標準寸法が書かれている。共通ルールの一部を挙げる。

• 画面が作れたら、その種類のアプリが普通持っている機能(作成・一覧・詳細・編集・削除・検索・設定)も、スケッチに無くても実装する
• 利用者が作ったデータは端末に保存し、再起動しても消えない。ダミーデータは入れず、何もないときは空の状態を見せる
• ラベルのあるボタンや項目は、ラベルの意味どおりに動かす(保存・送信・詳細を開くなど)
• 「横に並ぶ」と書かれた部品は同じ行に収め、縦に積んだり折り返したりしない
• タップできる部品にはリップルと軽い押し込みの演出を付け、戻る操作は画面が開いた動きを逆再生する

これらは自分が画面を組んだわけではなく、ツールが最初から部品の種類ごとに持っている既定値だ。細かい数値まで指定されているので、受け取ったAIコーディングツールが独自に解釈する余地は小さい。

渡したあとに自分で見る点

ここまで読むと、至れり尽くせりの指示書に見える。だが指示文の最後に、自分が読んでいて引っかかった一文があった。

Do not verify on an emulator or a device. When the implementation is done, produce a signed release APK as the deliverable.

エミュレータでも実機でも動作確認をせず、署名済みのリリース用APKを成果物として作れ、という指示だ。データの永続化や入力検証まで細かく指定していた同じ指示文に、検証を飛ばす一文が入っている。この落差に気づいたのは、自分で全文を最後まで読んだからだった。この記事が当てはまるのは、M3E Canvasの指示文をそのままAIコーディングツールへ渡す人全員になる。出てきたアプリは、渡した時点では誰も動作確認をしていない前提のものとして扱い、自分で一度触ってから使う必要がある。

対応ツールと今の制限

M3E Canvasが生成する指示文は特定のAIツール専用ではない。公式READMEは「Claude Code、Codex、Gemini CLIやCursorなど、プロンプトを受け取れるAIコーディングツールなら何でも」と説明している。一方で、今の時点ではまだ足りていない組み合わせもある。

• 部品配置・画面遷移の確認・4言語切替・プロンプト生成までのフル機能は、デスクトップブラウザ向け
• スマートフォンのブラウザでは、画面は1つに固定され、ボタン中心の簡易編集しかできない
• 出力ターゲットはAndroid(ネイティブアプリ)とウェブから選べるが、本記事で中身を確認したのはAndroid向けの指示文のみ。ウェブ向けを選んだときの文章は未確認とする
• 自分のAPIキーを登録すれば、ラフな説明文からAIに画面を自動生成させる「Ask an AI」(BETA)も使える。ただしこの機能はブラウザから各AIプロバイダへ直接リクエストが送られる設計なので、鍵の扱いには注意が要る

まとめ

M3E Canvasは、ブラウザで部品をドラッグして画面を組むだけで、Claude CodeやCursorなど複数のAIコーディングツールにそのまま渡せる指示文を作る。同じ画面なら何度作り直しても同じ指示文になるのは、AIではなく決まった規則で文章を組み立てているからだと、自分で2回生成して確かめた。

指示文には部品の数値やアプリとしての挙動まで細かく書き込まれている。その一方で「検証せずにAPKを作れ」という指示も含まれているので、受け取ったAIが作ったものは自分の手で一度動かしてから使うとよい。アカウント登録もインストールも要らないので、今使っているAIコーディングツールに渡す画面があるなら、試すだけならすぐにできる。