M3E Canvasの使い方｜画面を組んでAIへの指示にする無料デザインツール

今回の仕上がり

開始ボタンを「星あつめを始める」に変え、枠線スタイルとWeb向けの指示文を確認しました。仕上がったのは画面案と指示文であり、動くゲームではありません。

この記事の目次開く・閉じる

作者のいのり様は、Xのプロフィールで個人開発者・AIエンジニアと紹介されています。2026年9月2日の開発告知では、Material 3 ExpressiveのUIをWebで組み立て、AIへの指示を作る仕組みを紹介。同日の返信から、オープンソースでの公開先も確認できました。

この開発告知は、2026年10月1日の確認時点で106,473表示・222いいね・18リポスト。Xで反響のある作品として今回選びました。数字は変動し、利用者数や品質を保証する数字ではありません。今日新しく公開されたツールという意味でもありません。

いのり様の元投稿・動画をXで見る ↗表示されない場合は、上のリンクからご覧ください。

公式READMEの紹介は、ブラウザで画面を描き、AI制作ツールへプロンプトを渡すというものです。作者の発表と現行の公開画面を照合し、単なる画像作成ではなく、AIに制作を頼むところまで考えた道具として紹介します。作者の未公表の動機や開発期間は推測していません。

Material 3 Expressiveは、画面の色・形・文字・動きなどを扱うデザインの体系です。M3E Canvasにはボタンなどの部品があり、画面上で編集できます。Google公式のアプリではなく、いのり様が公開しているツールです。

今回、最初に表示された「はじめる」ボタンを「星あつめを始める」に変更し、塗りつぶしから枠線へ切り替えました。生成された文章には、変更したラベルとアウトラインボタンの指定が反映されていました。画面の見た目を改めて文章で説明する手間が減り、実際に使って便利に感じた点です。

ただし、これは画面の下書きです。今回ボタンを編集しただけで、星あつめゲームが完成したわけではありません。ゲームのルールや処理は、別途設計・実装する必要があります。

今回はPCブラウザの1280×800表示で確認しました。同じ初期画面なら、次の順番で試せます。以前のデザインが保存されている場合は、最初の配置が異なることがあります。既存デザインを消して始める必要はありません。

公式のM3E Canvasを開きます。左が部品、中央が画面案、右が編集・プロンプトの欄です。今回の初期画面には「お気に入り」「共有」「はじめる」がありました。まず、中央にある「はじめる」をクリックします。

選択すると右側にボタンの編集項目が出ます。「テキスト」のラベル欄に「星あつめを始める」と入力しました。次に「スタイル」で「枠線」を選びます。中央の文字と見た目が変わったことを確認します。

右上の「プロンプト」を押します。今回、最初の実装先はAndroidだったため「Web」へ切り替えました。指示文の実装先がWebになり、変更したボタン名も含まれることを確認しています。

上にある「スマホ／デスクトップ」は画面案のサイズを選ぶものです。「Android／Web」は実装先なので、混同しないようにします。スマホサイズのWebアプリという組み合わせもあります。

右の文章欄で内容を確認し、「プロンプトをコピー」から制作に渡せます。今回は表示された文章の変化までを確認し、クリップボードへのコピー結果と、その後のAIによるアプリ生成は未検証です。コピーできない場合は、文章欄を選択して手動でコピーする方法を試してください。

自分のアプリでは「何を押すとどうなるか」「今回は何を作らないか」も指定しましょう。見た目が似ていても、期待する処理まで自動で一致するとは限りません。

今回表示された指示文には、描いていない機能もアプリの種類から補う趣旨の内容がありました。さらに末尾には、ブラウザでの動作確認を不要とする指定も含まれていました。

小さく作りたい場合は、機能の追加範囲と検証の指定を自分で修正してください。例えば、編集側なら「この画面と開始ボタンだけを作る。ログインや共有機能は追加しない。実装後にPC・スマホ幅で表示とボタン動作を確認する」と補足します。この補足例を渡した実装結果は、今回検証していません。

画面案に初期表示されている「共有」なども、不要なら制作指示に残さないよう確認します。今回のスクショは機能紹介用に初期部品を残したもので、講座の星あつめの確定仕様ではありません。

基本操作はAIへのAPI送信なしで確認できました。公式には任意のAI補助機能もありますが、今回はキーを入力せず使っていません。外部AIの費用や送信内容は、それぞれのサービスと設定を確認してください。

スマホには簡易編集の案内があり、今回も狭いブラウザ幅で「フル機能はPCのブラウザで使えます」と表示されました。スマホ実機での編集・複数画面の遷移設定・画像出力・保存の復元・共有リンク・AI補助は未検証です。初めて使うなら、PCでこの記事の手順を試すと分かりやすいと思います。

確認日：2026年10月1日。画像は公式アプリを操作した実画面で、手順説明に必要な範囲を引用しています。AI生成の架空画面ではありません。UIの制作・配布はいのり様および各貢献者に帰属し、当サイト独自のデザインとして配布するものではありません。

もっと自由に画面の流れを描きたいならExcalidraw。ゲームそのものの制作を始めたいならはじめての個人ゲーム開発01へ。M3E Canvasは、どんな画面にするかを先に考える道具として組み合わせられます。