Material 3 Expressiveの画面をブラウザで組み立てて画面同士をつなぎタップして確かめてそのままAIコーディング用のプロンプトにするツール「M3E Canvas」

編集画面には部品の一覧とスマートフォン型のキャンバスが表示され、各部品をドラッグ＆ドロップで配置できます。

今回はタスクの一覧と追加画面を持つToDoアプリを例に、画面の作成からAI向けプロンプトの生成まで試してみます。

左側の「部品」からトップアプリバー・リスト項目・チェックボックス・FABと呼ばれる丸い追加ボタンを選び、スマートフォンの画面内に配置します。

配置した部品をクリックすると右側に設定項目が表示され、タイトルやボタンの文字・形状・大きさなどを調整できます。

さらにボタンやチップを近づけると部品同士が磁石のように連結し、部品の配置状況に合わせて角の丸みも自動で変化します。

◆画面同士をつないで動作を確認
画面上部の「画面を追加」をクリックしてタスク追加用の画面を作り、画面の名前を「タスク追加」に変更します。

一覧画面の「追加ボタン」を選んで「トリガー」タブをクリックし、移動先を「タスク追加」にすると2つの画面が矢印で結ばれます。

上下左右のスライド・フェード・拡大など画面切り替え時のアニメーションを設定可能です。

「プレビュー」モードで「追加ボタン」をクリックするとアニメーション付きで移動する様子を実際に確認できます。

◆画面からAIコーディング用プロンプトを生成
画面右側の「プロンプト」ボタンをクリックすると画面の大きさ・部品の種類と配置・配色・ボタンを押したときの遷移先などを盛り込んだ指示文が自動生成されます。

生成された文章はその場で修正してコピーでき、Claude CodeやCodexなどのAIコーディングツールへ貼り付けてアプリの開発を依頼できます。なお、通常のプロンプト生成はブラウザ内で完結するため、生成そのものに外部AIのAPIキーや利用料金は不要です。

◆テーマやデザインを一括変更
左側の「カラー」アイコンをクリックするとカラーテーマの選択画面が表示され7種類の配色からテーマを選択でき、いずれかのテンプレートをクリックすると画面内のボタンや背景色がまとめて切り替わります。

ライトモードとダークモードの変更にも対応しており、同じ部品構成のまま見た目を比較できます。

「シェイプ」アイコンをクリックすると部品の角の丸みをまとめて変更できます。

◆その他の機能
このほか部品の重なり順を変更するレイヤー機能・複数部品のグループ化・16dpの余白を使った自動整列・画像としての保存などを備えています。

デザイン編集画面にはスマートフォンの412x892ピクセルとデスクトップの1280x800ピクセルの表示を切り替えるボタンがあり、それぞれの画面幅に合わせて部品が再配置されます。

OpenAI・Claude・Google Gemini・DeepSeekのAPIキーを設定すれば、文章から画面案を作成したり部品の動作説明を書かせたりするAI補助機能も利用できます。

◆セルフホスト版M3E Canvasの導入方法
今回はWindowsにNode.jsとGit for WindowsのGit Bashを用意した環境で構築します。作業フォルダーでリポジトリをクローンし以下のコマンドを実行します。

git clone https://github.com/lnkiai/m3e-canvas.git
cd m3e-canvas
npm install
npm run dev

ブラウザから「http://localhost:3000」へアクセスしM3E Canvasのデザイン画面が表示されれば構築完了です。