Material 3 Expressive の画面をブラウザで組み立てて、画面同士をつなぎ、タップして確かめ、そのまま AI コーディング用のプロンプトにするツールです。
画面を組み、タップで流れを確かめ、プロンプトをコピーして、AI コーディングツールにアプリを作ってもらう。（mp4）
M3E Canvas は、本物の Material 3 Expressive の部品でアプリの画面を描ける、無料のオープンソースのスケッチツールです。ブラウザだけで動き、アカウントもサーバーもインストールもいりません。描いた画面は正確なプロンプトになり、Claude Code、Codex、Gemini CLI、Cursor など、プロンプトを受け取れる AI コーディングツールならどれでも、動くアプリに仕上げられます。
- 組む：部品をスマホやデスクトップの画面にドラッグします。部品同士はくっつき、4dp グリッドにそろいます。
- タップして確かめる：部品に移動先の画面をつなぎ、プレビューで遷移ごと動きを試せます。
- プロンプトをコピー：デザイン全体が、選んだ言語の短い指示文になります。AI コーディングツールに貼るだけです。
本物の M3 Expressive 部品：ボタン、FAB、バー、タブ、カード、リスト、シート、ピッカー、カルーセル、ローディングなど。部品ごとにテキスト、スタイル、サイズ、タップしたときの動きを決めるパネルがあります。
画面と遷移：スマホとデスクトップの画面、スクロールする長い画面、タップやスワイプで好きな遷移を付けて開く画面。全体の流れは矢印で見えます。
テーマを 1 か所で：カラー、シェイプ、タイポグラフィ、モーション。7 種のパレットか自分のベース色、ライトとダーク、3 段階のコントラスト、角丸、フォント、エクスプレッシブなばねの動き。
AI の手助け（任意）：自分のキーでデザインの下書きや説明文を書かせたり、コーディングエージェント向けの指示をコピーして共有リンクで返してもらったりできます。キーはブラウザの外に出ません。
できることの一覧
- 部品 – ボタン、アイコンボタン、FAB と拡張 FAB、FAB メニュー、スプリットボタン、チップ、トップアプリバー、ナビゲーションバーとレール、フローティングツールバー、タブ、検索バー、カード、リスト項目、ボックス、ボトムシート、ダイアログ、スナックバー、テキスト入力、ドロップダウン、スイッチ、チェックボックス、ラジオボタン、スライダー、日付と時刻のピッカー、テキスト、画像、カルーセル、カメラと地図のプレースホルダー、区切り線、形が変化するローディングと波形のプログレス。どの部品にもテキスト、スタイル、サイズ、配置を決めるパネルと、タップしたときの動きを決めるトリガーのタブがあります。
- 磁石のような連結 – ボタン、チップ、リスト項目を近づけると 1 つのグループにくっつき、角が溶けてつながります。
- スマホ画面とデスクトップ画面 – 画面は何枚でも追加できます。画面のラベルから 412×892 のスマホと 1280×800 のデスクトップを切り替えられ、バーは伸び、ナビゲーションバーはレールに（戻せばバーに）なり、部品は並べ直されます。同じ名前の画面はプロンプトで「1 つの画面の 2 つの幅」として書かれます。
- スクロールする画面 – 画面を端末より長くすると、プレビューでは本文がバーの下でスクロールします。下のベゼルの取っ手をドラッグするか、画面パネルで 1x〜3x を選べます。
- タップとスワイプで遷移 – 部品、アプリバーのアイコン、ナビゲーションの項目に移動先の画面（または「戻る」）と遷移を設定できます。スライドは上下左右、ほかにフェード、拡大、なし。スワイプで別の画面を開くこともでき、プレビューですべて再生され、戻るときは逆再生されます。
- レイヤーとグループ – 画面ごとのレイヤーパネルで重なり順を変えられます。グループにすると重なりを保ったまま一緒に動き、選んだ部品はまとめてコピーして別の画面に貼り付けられます。
- テーマ – 7 種のパレットか、ベース色 1 つから作る Material 3 のスキーム（微調整可）、ライトとダーク、3 段階のコントラスト、ダイナミックカラー。全部品の角丸をスクエア、標準、フルでまとめて切り替え。Roboto、Roboto Flex、Roboto Serif、システムフォント。スタンダードかエクスプレッシブのモーションで、プレビューにも反映されます。
- プロンプト – デザイン全体か 1 画面を、日本語・英語・中国語・韓国語の簡潔な指示文にします。部品ごとのメモも入ります。横並び、重なり、そろったカードのグリッドも書き出すので、生成されるレイアウトが崩れにくくなります。実装先は Android か Web を選べ、コピー前に手で編集したり、画面を PNG で保存したりできます。
- 整える – ボタンひとつでバーを端に、FAB を隅に寄せ、隣り合う部品をつなげ、残りを余白 16dp で積み直します。もう一度押すと元に戻ります。
- AI 補助（任意） – OpenAI、Claude、Gemini、DeepSeek の自分のキーを入れると、ひと言からデザインを下書きしたり、部品の動作や画面の説明を書いたりしてくれます。書き換えはすべて元に戻せます。リクエストはブラウザからプロバイダへ直接送られます。
- 共有リンク – デザインを相手のキャンバスで開けるリンクをコピーできます。Claude Code や Codex などのエージェント向けの指示もコピーでき、エージェントは agent.md を読んでスケッチを作り、そのリンクで返してきます。
- そのほか – 補助線と 4dp グリッド、Undo / Redo、キーボードショートカット、キーボードで使える部品パネル、お気に入り、アプリとしてインストール、ブラウザへの自動保存。
- スマホでは – 1 画面固定のボタン専用エディタになり、ボトムシートで編集します。フル機能は PC のブラウザ向けです。
| キー | 操作 |
|---|---|
V / H |
選択 / ハンドツール（Space 長押しでパン） |
ホイール、Ctrl + ホイール |
パン、ズーム |
+ - 0 |
拡大、縮小、全体表示 |
Ctrl+Z / Ctrl+Shift+Z |
元に戻す / やり直す |
Ctrl+C / Ctrl+V |
部品のコピー / 貼り付け（画面をまたいでも可） |
Ctrl+D |
複製 |
Ctrl+G / Ctrl+Shift+G |
グループ化 / 解除 |
Shift + クリック |
選択に追加 |
矢印キー（Shift で 8dp） |
少しずつ移動 |
Ctrl + ドラッグ |
スナップせずに移動（補助線と 4dp グリッドなし） |
Delete |
部品や画面を削除 |
P |
プレビュー |
npm install
npm run dev # http://localhost:3000
npm run build # ./out に静的書き出し静的サイトとして書き出す構成です。サブパス（GitHub Pages のプロジェクトサイトなど）で配信するときはビルド時に NEXT_PUBLIC_BASE_PATH=/リポジトリ名 を指定してください。.github/workflows/deploy.yml が main への push ごとにこれを行い、GitHub Pages に公開します。
バグ報告、部品のリクエスト、PR を歓迎します。手順と約束事（コメントは英語、文言は 4 言語すべて）は CONTRIBUTING.md にまとめています。質問は Discussions へどうぞ。
M3E Canvas は無料で MIT ライセンスのまま続けます。時間の節約になったら、GitHub Sponsors で開発を支えてもらえると助かります。新しい部品、プロンプトの調整、貢献のレビューにかかる時間に充てます。支援の有無で使える機能は変わりません。
開発を支えてくださっているスポンサーの方々に感謝します。
コード、アイデア、レビューで関わってくださったみなさん、ありがとうございます。
- ローディングの形とアニメーションのモデル: material-components-android（Apache-2.0）、Aler1x/m3-loading-indicator 経由。
NOTICEを参照してください。 - アイコン: Material Symbols（Apache-2.0）。フォントは Google Fonts から読み込みます。
- matraic/m3e – Material 3 Expressive を Lit の Web Components にしたもの（MIT）。React バインディングとアイコンパッケージ付き。ここで描いた画面の実装先に向いています。
- Beer CSS – Material Design 3 の CSS フレームワーク（MIT）。描いた画面を Web で作るもう 1 つの選択肢です。
Issue に向かない相談（協業や取材など）は、こちらからどうぞ。
MIT © lnkiai