M3E Canvasとは。画面を組んでAIに渡すプロンプトをつくるOSSを、レバテックLABの取材から整理

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、私がブックマークに保存していた、レバテックLABの取材記事を紹介します。開発者のinoriさんが、画面を組んでAIに渡すプロンプトをつくるOSS、M3E Canvasについて話した記事です。

この記事を選んだのは、私が書いてきた記事と同じ向きで読める実例が並んでいたからです。作る理由を先に自分の側に置くこと。洗い出しはAIに任せて、確認は自分で持つこと。役に立つかより先に、自分のワクワクを種にすること。この向きで読める話でした。

読み方の筋は、きっかけ、広がった数字、画面をプロンプトにする理由、発信と機能、使われ方、こだわり、そしてAIに頼む前に決める3つ、の順です。私はM3E Canvasを動かして確かめたわけではなく、元記事を読んで整理した記事です。専門の言葉は、出てきた所で言い換えます。

レバテックLABの記事（出発点）

Androidアプリをバイブコーディングでつくっていて、AIに指示を出すのがいつも面倒でした。

面倒を、そのままにしなかった話です。大学1年生のinori（いのり）さんは、個人でアプリやOSSをつくっています。OSSは、設計図にあたるプログラムを公開して、誰でも使えて直せる形にしたソフトのことです。

inoriさんは、Androidアプリをバイブコーディングでつくっていました。バイブコーディングは、AIに話しかけてアプリをつくる方法です。困りごとは、AIに指示を出すのがいつも面倒だったこと。

「このボタンをここに置いて」「この画面からあの画面へ移って」と、同じ説明を何度も伝える必要があったそうです。

Androidのマテリアルデザインが大好きだと、inoriさんは話しています。部品や見た目があらかじめ決まっているので、AIにつくらせても整ったデザインになるからです。

一方、Figma（画面デザインの専用ソフト）は神ツールだけれど、デザインを学んでいないと扱いにくく、エンジニアの自分には細かすぎると感じていたそうです。

そこで思いついたのが、自分で画面のモックを組み立てて、そのままプロンプトに変換する形です。モックは画面の見本、プロンプトはAIへの指示文のこと。

Claudeと相談して、1日でつくって公開したのが「M3E Canvas」です。

AI氣道『AIでアプリ開発して稼ぐ人が作っているのは、自分が欲しいから続けられる便利なアプリ』より

「私なら、作る理由は、データより先に、自分が欲しいかどうかに置きます。」

作る理由は自分の側に置くと、私は『AIでアプリ開発して稼ぐ人が作っているのは、自分が欲しいから続けられる便利なアプリ』で書いています。

MITライセンスにした理由も語られています。

誰でも自由に使える公開の約束のことで、今までMITライセンスのアプリにたくさん助けられてきたので、今度は自分がそちら側に立ちたい、誰でも使えるという文化が大好き、という話でした。

私の読みです。面倒を見過ごさず、自分の困りごとを1日で道具にした点が、この記事の出発点だと思います。

レバテックLABの記事（広がった数字）

9月4日と5日にはGitHub Trendingで2日連続の全言語1位になり、スターは公開から約4日で4,000、約6日で5,000、約3週間で8,000を超えました。

想定した読み手と、実際に届いた先が違った、という話です。inoriさんによると、公開前に「オープンソースで公開します」と告知した段階から、Xで大きな反応がありました。

公開直後の告知ポストは1,000いいねを超え、GitHubのスターも1日で100を超えたそうです。スターは、気に入った人が付ける印のこと。リポジトリは、プログラムの置き場のことです。

そこから日本の外へ広がります。アメリカのほか、特に中国でかなり話題になったとのことです。inoriさんは、最初の公開時点でリポジトリに英語も入れていたのが良かったのだと思う、と話しています。

今は画面の表示もプロンプトの出力も、日本語・英語・中国語・韓国語の4言語に対応しています。

Xの新規フォロワーは海外の方が圧倒的に多く、全体の4分の3を占めたそうです。9月4日と5日にはGitHub Trendingで2日連続の全言語1位になり、11月3日には10,000スターを超えました。

GitHub Trendingは、いま注目を集めているプロジェクトが並ぶ一覧のことです。

想定していたのは、バイブコーディングで個人開発をしている日本の開発者でした。日本はiPhoneの普及率が高く、iOS開発者も多い。

Androidの大ファンとして、日本のiOS開発者をAndroidに引き込むきっかけをつくりたかった、と話しています。結果として、特に反応が大きかったのは海外でした。

私の読みです。想定した読み手と、実際に届いた先が違った点が、おもしろいと思います。あなたの仕事でも、想定したお客さまと、実際に喜んでくれる人が違う、という場面はあるかもしれません。

レバテックLABの記事（プロンプトに変える理由）

M3E Canvasは、キャンバスに組んだ画面をプロンプトに変換します。

M3E Canvasは、自分で組んだ画面を、AIへの指示文に変えるツールです。inoriさんは、デザインとバイブコーディングの中間を狙ったところが、いちばんおもしろいと話しています。

画面をAIに渡す方法としては、画面のスクリーンショットを読み取らせる方法や、Figmaでつくったデザインを、MCPで読み取らせる方法がよく使われます。MCPは、AIが外の道具につながる仕組みのことです。

こうした方法は、デザインから直接コードをつくります。間にプロンプトを挟んで、デザインの意図を文章で整理する工程がありません。

そのため、デザインどおりに再現するのが難しいという課題があった、とinoriさんは話しています。

スクリーンショットからは、見た目は伝わります。でも、ボタンを押したらどの画面に移るのか、どんな動きで切り替わるのかまでは伝わりません。旅行の写真を見せても、回る順番までは伝わらないのと似ています。

M3E Canvasのプロンプトには、部品の種類や配置に加えて、画面のつながりや動きも文章で書かれます。AIが推測で補う部分が減り、デザインどおりにつくりやすくなる、という説明です。

プロンプトの生成にはLLM（文章を生み出すAI）を使っていないので、同じ画面からは毎回同じプロンプトが出ます。ここが大事なんです。

私の読みです。AIに頼む前に、画面を文章の指示に直す工程を1つ挟む、という考え方だと読みました。経営者の仕事に置き換えると、現場に口で伝える前に、順番と条件を紙に書き出す作業に近いと思います。

レバテックLABの記事（発信とAIのモック機能）

動画なら言語に関係なく、使ったことがない人にも流れが伝わります。

言葉の違う国にも届けるには、動画が強い、という話です。inoriさんは、動画なら言語に関係なく、使ったことがない人にも流れが伝わると話しています。

いちばん大きいのはXだったそうです。自分で出した宣伝や紹介のポストの反応がとてもよく、公開後しばらくは通知が止まりませんでした。公開初日から動画をつくって、解説や紹介を続けたそうです。

動画はClaudeでつくり、動画制作の仕組みも別のプロジェクトとしてつくっていた、と話しています。

特に反応が大きかった発信は2つです。1つは、500スター到達の報告と一緒に「コントリビューター大歓迎」と呼びかけたポストで、約7,500いいね、約107万表示でした。

コントリビューターは、開発に参加してくれる人のことです。

もう1つは、画面を組んでAI（Gemini）に渡すと、デザインどおりのAndroidアプリができる様子を見せた8秒のデモ動画です。約2,700いいね、約70万表示でした。

AI氣道『GitHubで話題のAIツール7選を任せる所と自分の目で確かめる所に分ける』より

「洗い出しはAIに任せて、直した画面は自分で開いて確かめる。」

洗い出しはAIに任せて確認は自分で持つと、私は『GitHubで話題のAIツール7選を任せる所と自分の目で確かめる所に分ける』で書いています。

追加した機能もウケたと、inoriさんは話しています。自分で画面をデザインしたり部品を配置したりすることすら面倒な人がいて、inoriさん自身がそうだそうです。

それならモックもAIにつくってもらい、自分は微調整と確認だけして、そのままAIに渡せばいい、と考えました。

「料理のレシピが見られるアプリをつくりたい」と伝えるだけで、ブラウザ上でモックをつくってくれます。

エージェント（自分で作業を進めるAI）に、自分のパソコンの中でつくってもらうこともでき、デザイン案はリンクで共有できます。

私の読みです。8秒の動画で「画面を組む、AIに渡す、アプリができる」の流れが一目で分かる点が、言葉の違う国にも届いた理由の1つだと思います。

レバテックLABの記事（使われ方）

M3E Canvasで画面を設計して実際のアプリに実装しているものが、10月10日時点で17件も見つかったんです。

作った本人が、使われ方を後から調べて知った話です。inoriさんは最初、M3E Canvasでアプリをつくったという報告がほとんど見つからず、みんなひっそり使っているのかなと思っていたそうです。

そこでGitHubの公開リポジトリまで調べると、M3E Canvasで画面を設計して実際のアプリに実装しているものが、10月10日時点で17件ありました。

いちばんスターが多いのは、1,000スターを超えるAndroidのパスワード管理アプリ「Monica」で、設定検索の画面の設計と実装に使われていたそうです。

気づいたことを順に書きます。1つ目は、プロダクトの構想を固めるモックとして使われていること。

保存した設計データがコードと一緒に置かれ、41画面、52画面とアプリ全体を先に描いたものや、案を3本つくって比べて1つを選んだものがありました。

2つ目は、AIエージェントが設計から実装までの工程に深く関わっていると見られることです。AIがたたき台をキャンバスにつくり、人が手直ししてから実装する流れを記録した例がありました。

inoriさんは、エージェントに設計させて人が確認する使い方も広がっているのかもしれない、と推測として話しています。

3つ目は、Android以外にも広がっていたことです。Webアプリ、ブラウザの拡張機能、Linux（パソコンの基本ソフトの1つ）のデスクトップアプリの画面設計にも使われていました。

エディタそのものを自分のアプリに組み込んだ例が9件あり、思ってもいなかった使われ方だったそうです。

ただ、見つかったのは公開されているものだけです。非公開のリポジトリや個人の環境で使っている人もいると思うので、こっそりでも教えてほしい、と呼びかけています。

私の読みです。作者本人が、使われ方を後から調べて知った点が印象に残りました。

レバテックLABの記事（使いやすさ）

最初から、誰でも直感的に触れて説明書がいらないレベル、極端に言えば言語が対応していない国の人でもなんとなく使えるレベルを目指しました。

目指したのは、説明書がなくても触れば分かる画面です。inoriさんは、極端に言えば、言語が対応していない国の人でもなんとなく使えるレベルを狙ったと話しています。

公開直後には、Issueが予想以上にたくさん来ました。Issueは要望や不具合の連絡、PRは修正の提案のことです。一日中対応して、自分でも修正したそうです。

公開直後の反応の多さが、その後の作り込みにつながったようです。

反応を受けて手を入れたところは、たくさんあります。コンポーネント（画面の部品）を追加し、部品の設定を編集するパネルのデザインは、公開当初から大きく変えました。

このパネルは、文字や大きさを変える画面です。サイズはエディタ上で直接ドラッグして調整できるようにしています。

アニメーションにもこだわり、コンポーネントを一つひとつ丁寧につくり直したそうです。配色を選ぶだけで、画面全体の色が切り替わる作りにもなっています。

inoriさんは、Zennの開発者catnoseさん（この取材の聞き手で解説者）のように、デザインに強くこだわるタイプだと自分で話しています。

その結果として、最近はIssueもほとんど来なくなったそうです。機能面もコードレビューを重ねたので、大きな問題は出ていない、とのことです。

私の読みです。説明を足すより、触れば分かる作りに寄せたことが、手離れの良さにつながっているように読めます（inoriさん自身も「そのおかげか」と話しています）。

あなたの会社の資料でも、説明を長くするより、見れば分かる形に直す方が、問い合わせは減るのかもしれません。

レバテックLABの記事（これから）

利益より自分が楽しいことを優先するのは、これからも変わらないと思います。

利益より自分が楽しいことを優先する、というのが、inoriさんの結びです。今後どう発展させるかは今のところ未定で、コンポーネントを増やしたり、新しいアイデアを実装したりしたい、と話しています。

M3E Canvas以外では、AITuberをつくったり、ほかのリポジトリに貢献したりして楽しんでいるそうです。これからもオープンソースで出していくと思う、とのことです。基本は個人開発です。

聞き手のcatnoseさんは、自分が面倒だと感じたことを見過ごさず、1日でツールにして世に出す行動力が素晴らしい、と書いています。

個人の動機から始まった小さな「面倒くささ」の解決が、国を越えて多くの人の役に立っている点を、個人開発やオープンソースの醍醐味だと感じたそうです。

AI氣道『AI時代の個人開発で避けたいのは役に立つだけの自作ツール、入江さんの結論は好きなエンタメ要素』より

「私なら、役に立つかより先に、自分の内側から湧くワクワクを、作るものの種にします。」

役に立つかより先に自分のワクワクを種にすると、私は『AI時代の個人開発で避けたいのは役に立つだけの自作ツール、入江さんの結論は好きなエンタメ要素』で書いています。

ここから、あなたがAIに頼む前に、人が決める所を3つ書き出します。1つ目は、頼む仕事の流れを「どこに何があって、次にどうなるか」まで言葉にしてから頼むこと。

たとえば毎月の請求書の確認を頼むなら、元の資料の置き場所、確認する順番、迷った時に私が見る所を、先に書きます。

2つ目は、たたき台はAIに作ってもらい、直す所と最後の確認は自分で持つこと。3つ目は、同じ説明を3回AIにしたら、それは道具にする合図だと考えること。inoriさんの出発点と同じです。

私の考えです。この記事の末尾に、AIエージェントに渡す依頼文の囲みがあります。

inoriさんは、AIに指示を出すのが面倒という自分の困りごとを見過ごさず、1日でM3E Canvasをつくって公開しました。公開から約2か月で、10,000スターを超えたそうです。

画面をスクリーンショットではなくプロンプトに変えることで、画面のつながりや動きまで文章で渡せる、というのがinoriさんの説明でした。使われ方も、構想のモック、AIエージェントとの設計、Android以外へと広がっていたそうです。

私の考えです。AIに頼む前に、頼む流れを「どこに何があって、次にどうなるか」まで言葉にします。たたき台はAIに作ってもらい、直す所と最後の確認は自分で持ちます。

同じ説明をAIに3回したら、それは道具にする合図だと思います。inoriさんの出発点と同じです。まずご自身の仕事で、同じ説明を3回している所を1つ書き出してみてください。

この記事で学んだことを誰かに教えて恩送りして学びを深めよう！