finm137.wiki
M3E Canvas
最終更新：
kemonowikii
-
view
M3E Canvas
- M3E Canvas
- 概要
- 「人間が画面をデザインする」**
- 「その画面構成を自然言語へ変換する」**
- 「AIコーディングツールへ渡す」**
- 「実際のアプリとして生成する」**
- デザインをAI開発へ直接接続するためのツール**
- Material 3 Expressiveとは
- Material 3 Expressive**
- ドラッグ＆ドロップUI
- 複数画面を作れる
- ホーム画面**
- 詳細画面**
- 設定画面**
- 実際にボタンを押して画面遷移を確認する**
- スマートフォンとデスクトップ対応
- スマートフォン**
- デスクトップ**
- テーマ変更
- Magnetic Connections
- Magnetic Connections**
- 複数のボタンが一体化したUI**
- Tidy機能
- AIコーディング用プロンプト生成
- 自然言語プロンプト**
- Androidアプリ向け**
- Webアプリ向け**
- UIデザインをそのままコード生成へ接続**
- Vibe Codingとの関係
- Vibe Coding**
- 「こういうアプリを作って」**
- その設計をAIが理解しやすい文章へ変換する**
- 人間＝見た目を設計**
- AI＝コードを書く**
- AI Helper
- UI部品の動作説明**
- 画面全体の説明**
- AI Agentによる画面生成
- AI側からM3E Canvasの画面を作る**
- AIが設計したUIをCanvas上で編集**
- 人間 → Canvas → AI**
- AI → Canvas → 人間が修正 → AIへ戻す**
- 共有リンク
- サーバーへ保存しなくても共有できる**
- PNG出力
- ローカル保存
- サーバー**
- ユーザーアカウント**
- 技術構成
- GitHub Pages**
- オープンソース
- MIT License**
- GitHubで急速に注目
- 2026年9月4日・9月5日にGitHub Trendingで1位**
- Figmaとの違い
- 短時間でUIを作る**
- AI用プロンプトへ変換する**
- AIに実装させる**
- AIコーディング前のラフ設計ツール**
- 今後の可能性
- GUI設計とAIコーディングの中間レイヤー**
- 人間が絵としてUIを作る**
- AIが仕様を理解する**
- AIがコードを書く**
- 人間がCanvasで修正する**
- 関連項目
M3E Canvas**とは、ブラウザ上でMaterial 3 Expressive風のUI画面を組み立て、そのデザインをそのままAIコーディング用のプロンプトへ変換できるオープンソースのUI設計ツールである。
開発者は**lnkiai**。
GitHub上で公開されており、MITライセンスで利用できる。
2026年9月にはGitHubトレンドで上位に入り、スクリーンショットでは9月4日・5日にTypeScriptカテゴリだけでなく全言語でも1位を獲得したと紹介されている。
公式説明では、
「Material 3 Expressiveの画面をブラウザで組み立て、画面同士をつなぎ、実際にタップして確認し、そのままAIコーディング用プロンプトにするツール」**
とされている。
Claude Code、Codex、Gemini CLI、Cursorなど、プロンプトを受け取れるAIコーディングツールと組み合わせて使用できる。
概要
M3E Canvasの特徴は、単なるUIモックアップ作成ツールではなく、
「人間が画面をデザインする」**
↓
「その画面構成を自然言語へ変換する」**
↓
「AIコーディングツールへ渡す」**
↓
「実際のアプリとして生成する」**
という流れを前提に設計されている点である。
つまりFigmaのように画面デザインを作って終わるのではなく、
デザインをAI開発へ直接接続するためのツール**
に近い。
公式READMEでは、レシピアプリをM3E Canvas上で作成し、テーマを変更し、そのデザインをプロンプトとしてコピーしてAIコーディングツールへ渡し、Androidアプリとして動かす例が紹介されている。
Material 3 Expressiveとは
M3Eの「M3E」は、
Material 3 Expressive**
を意味する。
Material 3 ExpressiveはGoogleのMaterial Design 3をさらに表現力の高い方向へ発展させたデザイン体系で、
- 大胆な形状
- 丸みの強いUI
- 動きのあるアニメーション
- 柔軟な配色
- 強調されたタイポグラフィ
- 視覚的に分かりやすいインタラクション
などを特徴としている。
M3E Canvasでは、このMaterial 3 Expressive風のUI部品をドラッグ＆ドロップで配置できる。
ドラッグ＆ドロップUI
M3E Canvasには多数のUIパーツが用意されている。
主なものとして、
- ボタン
- アイコンボタン
- FAB
- スプリットボタン
- FABメニュー
- チップ
- アプリバー
- ナビゲーションバー
- フローティングツールバー
- タブ
- 検索バー
- カード
- リスト
- ダイアログ
- スナックバー
- テキスト入力欄
- ドロップダウン
- スイッチ
- チェックボックス
- ラジオボタン
- スライダー
- テキスト
- 画像
- カメラ用プレースホルダー
- 地図用プレースホルダー
- バッジ
- ボックス
- 区切り線
などが存在する。
これらを画面上へ配置することで、アプリUIを視覚的に組み立てられる。
複数画面を作れる
M3E Canvasでは、一枚の画面だけではなく複数の画面を作ることができる。
例えば、
ホーム画面**
↓
詳細画面**
↓
設定画面**
といったアプリ構成を作り、各画面のボタン同士を接続できる。
さらにPreview機能を使うことで、
実際にボタンを押して画面遷移を確認する**
こともできる。
単なる静止画モックアップではなく、簡易プロトタイプとして使用できる。
スマートフォンとデスクトップ対応
画面サイズは主に、
スマートフォン**
412×892
デスクトップ**
1280×800
を切り替えられる。
スマートフォンからデスクトップへ変更すると、
- ナビゲーションバーがNavigation Railへ変化
- バーが画面幅へ合わせて伸びる
- 各パーツが自動的に再配置される
など、画面サイズへ合わせた調整が行われる。
逆にデスクトップ画面をスマートフォンへ戻すことも可能。
テーマ変更
M3E CanvasではMaterial 3 Expressiveのテーマを細かく変更できる。
主な設定は、
Color
- 7種類のプリセット
- 任意のシードカラー
- ライトモード
- ダークモード
- 3段階のコントラスト
- Dynamic Color
Shape
- スクエア
- ラウンド
- フルラウンド
Type
- Roboto
- Roboto Flex
- Roboto Serif
- システムフォント
Motion
- Standard
- Expressive
など。
一つの画面を作ったあと、テーマだけを変更してアプリ全体の雰囲気を一括変更できる。
Magnetic Connections
M3E Canvas独自の特徴として、
Magnetic Connections**
がある。
ボタンやリスト項目を近づけると、隣接したUI同士が自動的に接続されたグループとして認識される。
角の丸みも自動調整されるため、
複数のボタンが一体化したUI**
を簡単に作れる。
Material 3 Expressiveらしい柔らかいUIを作るための機能である。
Tidy機能
「Tidy」ボタンを押すと、UI部品が自動整列される。
例えば、
- アプリバーを画面上部へ配置
- FABを画面端へ配置
- リスト項目を接続
- 16dpマージンで部品を整列
などが自動で行われる。
もう一度押すことで元に戻すこともできる。
ラフに配置してから自動整理するという使い方が可能。
AIコーディング用プロンプト生成
M3E Canvas最大の特徴。
作成したUI全体を、
自然言語プロンプト**
として出力できる。
例えば、
Androidアプリ向け**
Webアプリ向け**
を選択でき、
さらに言語も、
- 日本語
- 英語
- 中国語
- 韓国語
に対応している。
生成されたプロンプトを、
- Claude Code
- Codex
- Gemini CLI
- Cursor
などへコピーして渡すことで、
UIデザインをそのままコード生成へ接続**
できる。
Vibe Codingとの関係
M3E Canvasは、いわゆる
Vibe Coding**
との相性を強く意識している。
Vibe Codingでは、細かくコードを書く代わりに、
「こういうアプリを作って」**
とAIへ指示してコードを書かせる。
しかし文章だけでは、
- ボタンの位置
- 画面構成
- 配色
- ナビゲーション
- UIの大きさ
などを正確に伝えにくい。
そこでM3E Canvasで人間がUIを視覚的に組み、
その設計をAIが理解しやすい文章へ変換する**
という方法を取っている。
つまり、
人間＝見た目を設計**
AI＝コードを書く**
という分業が可能になる。
AI Helper
M3E Canvasには任意でAI補助機能も利用できる。
対応しているAIとして、
- OpenAI
- Claude
- Gemini
- DeepSeek
が挙げられている。
自分のAPIキーを設定すると、
UI部品の動作説明**
画面全体の説明**
などをAIに生成させることができる。
APIキーはM3E Canvasのサーバーへ送信されるのではなく、ブラウザから直接各AIサービスへ送られる方式。
M3E Canvas自体にはサーバーがなく、APIキーもブラウザのlocalStorageへ保存される。
AI Agentによる画面生成
M3E Canvasにはさらに、
AI側からM3E Canvasの画面を作る**
機能も存在する。
ベータ機能として、AIエージェントがM3E Canvas用のJSONドキュメントを生成できる。
AIは、
- 画面
- ボタン
- テキスト
- 画面遷移
- テーマ
などをJSON形式で記述する。
そのJSONをM3E Canvasへ読み込ませれば、
AIが設計したUIをCanvas上で編集**
できる。
つまり、
人間 → Canvas → AI**
だけでなく、
AI → Canvas → 人間が修正 → AIへ戻す**
という往復も可能になる。
共有リンク
作成したデザインは共有リンクとして出力できる。
特徴的なのは、
サーバーへ保存しなくても共有できる**
こと。
デザインデータを圧縮し、URL内へ埋め込む方式が採用されている。
そのためリンクを開くと、そのデザインが直接M3E Canvas上へ復元される。
PNG出力
作成した画面はPNGとして保存可能。
そのため、
- 企画書
- ブログ
- 仕様書
- プレゼン資料
- 開発メモ
などへそのまま画像として使用できる。
ローカル保存
M3E Canvasは基本的にデータをブラウザ内へ保存する。
公式Securityページによれば、
サーバー**
ユーザーアカウント**
は存在しない。
作成したデザインはlocalStorageへ保存される。
ネットワーク通信は主に、
- Google Fonts読み込み
- 任意で有効にしたAI Helper
など。
そのため通常利用では、作成中のUIが外部サーバーへ送信される仕組みではない。
技術構成
GitHubのpackage-lock.jsonなどから確認できる主な技術は、
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Motion
- html-to-image
など。
M3E Canvas自体もWebアプリとして作られている。
静的なNext.jsアプリとしてビルド可能で、
GitHub Pages**
などへそのまま配置できる。
オープンソース
M3E CanvasはGitHubでソースコードが公開されている。
ライセンスは、
MIT License**
無料で利用でき、スポンサー限定機能なども存在しない。
GitHub上ではバグ報告や機能追加のPull Requestも受け付けている。
GitHubで急速に注目
2026年9月にはGitHub上で急速に注目された。
GitHubリポジトリは記事作成時点で約7900スターを獲得している。
また作者の投稿によれば、
2026年9月4日・9月5日にGitHub Trendingで1位**
となり、TypeScriptカテゴリだけでなく全言語でも1位だったとしている。
Material 3 ExpressiveとAIコーディングを直接つなぐという分かりやすさから、短期間で広く注目されたツールといえる。
Figmaとの違い
Figmaと似て見えるが、方向性は異なる。
Figmaは本格的なUI/UXデザイン、共同編集、デザインシステムなどを中心とする。
M3E Canvasは、
短時間でUIを作る**
↓
AI用プロンプトへ変換する**
↓
AIに実装させる**
というワークフローへ特化している。
そのため、
AIコーディング前のラフ設計ツール**
としての性格が強い。
今後の可能性
M3E Canvasの考え方は、
GUI設計とAIコーディングの中間レイヤー**
としてかなり興味深い。
将来的には、
人間が絵としてUIを作る**
↓
AIが仕様を理解する**
↓
AIがコードを書く**
↓
人間がCanvasで修正する**
という開発方法が一般化する可能性もある。
現在はMaterial 3 Expressive中心だが、
- ゲームUI
- VR UI
- 管理画面
- メタバースUI
- スマートフォンアプリ
- Webサービス
などへ似た仕組みが広がる可能性もある。
関連項目
- Material Design
- Material 3 Expressive
- Vibe Coding
- AIコーディング
- Claude Code
- Codex
- Gemini CLI
- Cursor
- Next.js
- React
- TypeScript
- GitHub
- オープンソース
[Amazon商品]
