M3E Canvas とは？Material 3 Expressive をAIプロンプトに変換するUIデザインツール
M3E Canvas とは？Material 3 Expressive をAIプロンプトに変換するUIデザインツール
ブラウザ上で Material 3 Expressive の UI をドラッグ＆ドロップで組み立て、Claude Code・Cursor などの AI コーディングツール向けプロンプトを自動生成するツール。ログイン不要・バックエンドなしで使えるオープンソース（MIT）。GitHub で 4,200 超スターを集め急上昇中。
GitHubで急上昇中の lnkiai/m3e-canvas をご紹介します。 スター数 4245★ を獲得し、DevTool分野で注目されているツールです。
M3E Canvas とは？AIコーディング時代の新しいUIデザインワークフロー
M3E Canvas は、Google の最新デザインシステム「Material 3 Expressive」に準拠した UI パーツをブラウザ上でドラッグ＆ドロップして画面を組み立て、その設計をそのまま Claude Code・Codex・Cursor・Gemini CLI などの AI コーディングツール向けプロンプトに変換するオープンソースツールです。
「AIに画面を作ってもらいたいけど、うまく伝わらない」という課題を持つ開発者に向けて作られており、視覚的に組み上げたレイアウトを自然言語プロンプトに自動変換する点が最大の特徴です。Next.js 16・React 19 で構築され、バックエンドなし・ログイン不要でブラウザだけで使えます。コントリビューター 9 名で活発に開発が続いており、2026年に GitHub でトレンド入りして急速に注目を集めています。
こんな人におすすめ:
- エンジニア向け: モバイルアプリ開発者が Claude Code・Cursor 等の AI ツールと組み合わせ、画面設計から実装のループを高速化するために活用
- 非エンジニア向け: プログラミング知識が必要なため、エンジニア専用ツールです（UIデザイナーでも画面仕様の伝達ツールとして活用可）
主な機能・特徴
- ドラッグ＆ドロップで M3 Expressive 部品を配置（ボタン・カード・FAB・ナビゲーションバー等30種以上）
- 画面間のタップ遷移・スワイプ遷移を視覚的に設定してプレビュー可能
- 日本語・英語・中国語・韓国語でプロンプトを自動生成（AI コーディングツールへ直接貼り付け）
- テーマエディタで配色・シェイプ・タイポグラフィをワンタッチ変更（7種プリセット＋カスタム）
- localStorage 保存でログイン不要・バックエンドなし
M3E Canvas の使い方・始め方
ブラウザで今すぐ使う（インストール不要）
公式デモサイト https://lnkiai.github.io/m3e-canvas/ を開くだけで、すぐに使い始められます。
ローカル開発環境を構築する場合
git clone https://github.com/lnkiai/m3e-canvas.git
cd m3e-canvas
npm install
npm run dev # http://localhost:3000 で起動
npm run build # ./out に静的書き出し（GitHub Pages等へデプロイ可）
基本ワークフロー（5ステップ）
- 部品をキャンバスに配置: 左パネルからボタン・ナビゲーションバー・カード等をドラッグ
- 画面遷移を設定: 部品をタップして「移動先画面」を指定、遷移アニメーション（スライド・フェード・拡大）を選択
- プレビューで確認:
Pキーでタップスルーモードに入り、実際の操作感を確認 - プロンプト出力: 右パネルの「プロンプト」タブから言語（日本語）を選択してコピー
- AIツールに貼り付け: Claude Code・Cursor・Codex 等に貼り付けて実装を依頼
活用事例
Androidエンジニア（モバイルアプリ開発者）: レシピアプリの画面設計を M3E Canvas で組み立てて日本語プロンプトを生成し、Claude Code に渡すと Android アプリのコードを自動生成。設計から実装コードまで数時間で完結するワークフローを構築できる。スター数 4245 のコミュニティが証明する実用性の高さが際立つ。
フロントエンドエンジニア（Next.js/Webアプリ開発者）: Material 3 準拠の Web アプリのワイヤーフレームをブラウザ上で作成し、「Web」ターゲットを選択してプロンプトを生成。Cursor に貼り付けるだけで、ナビゲーション構成・コンポーネント階層・遷移アニメーションを考慮した実装コードが得られる。
Figmaとの違い・なぜ今このツールか
Figma などの従来の UI デザインツールは「デザイン仕様書」の作成に特化しており、AI コーディングツールへの橋渡しは手動の作業が必要でした。M3E Canvas は「AI への指示書（プロンプト）の自動生成」を主目的とした設計になっており、視覚的に組んだレイアウトが即座に構造化された自然言語になる点が根本的に異なります。
また、Figma が有料プランを必要とするのに対し、M3E Canvas は完全無料・MIT ライセンスです。2026年に Google が Material 3 Expressive を正式発表したタイミングと AI コーディングツールの普及が重なり、「M3E 準拠の UI をどう AI に伝えるか」という課題を解決するツールとして急速に注目を集めています。
こんな人に向いている
Androidアプリエンジニア
Google の最新デザインシステム M3 Expressive に準拠したアプリを開発する際、従来は Figma でデザインを作り、仕様書を書き、AI に指示するという3ステップが必要でした。M3E Canvas を使えば、設計とプロンプト生成が1ツールで完結します。特に形状変化する Loading Indicator や磁石連結ボタンなど M3 Expressive 固有の部品がそのまま組み込まれている点は大きなアドバンテージです。
AIコーディングを活用するフロントエンドエンジニア
Claude Code・Cursor・Codex で UI を生成する機会が多いエンジニアに最適です。「ナビゲーションバー上部・中央にロゴ・右端に設定ボタン」という曖昧な自然言語ではなく、M3E Canvas で組んだ通りの構造化されたプロンプトが得られるため、AI への指示精度が格段に上がります。
UIデザイナー（エンジニアとの協業）
プロンプトを生成するだけなら、プログラミング知識は不要です。Figma ライクな操作感で Material 3 の画面を組み立て、エンジニアへの仕様伝達ツールとして活用できます。AI 補助機能（任意のAPIキー入力）を使えば、部品の説明文生成まで一括対応できます。
使う前に知っておきたいこと
技術的制限とパフォーマンス
- localStorage のみ: クラウド保存・チーム共同編集には非対応です。ブラウザのローカルストレージにのみデータ保存されます
- スマホ版は機能限定: スマホブラウザでは1画面固定・ボタンのみのシンプルエディタになります（フル機能はPC必須）
- AI 補助機能は任意のAPIキーが必要: OpenAI・Claude・Gemini・DeepSeek のいずれかのAPIキーを自身で用意する必要があります（キーはブラウザのみに保存・サーバー送信なし）
ライセンスの注意点
MIT ライセンスのため商用利用・改変・再配布が自由です。ただし Loading Indicator コンポーネントは Apache-2.0（material-components-android 由来）のため、製品への組み込み時は NOTICE ファイルの確認を推奨します。
オープン Issue（2026年9月時点）
Simplified Chinese ラベルとレイアウトプロンプトの改善が議論されています。中国語ユーザー向け機能の一部に改善余地がある状態です。
関連ツール・おすすめサービス
- DigitalOcean — 開発者向けクラウド・App Platform でかんたんデプロイ
- さくらVPS — 国内ホスティングでのセルフホストならこちら
まとめ
M3E Canvas は、Material 3 Expressive デザインと AI コーディングツールの橋渡しをするユニークなポジションのツールです。Figma のような高機能デザインツールではありませんが、「AI へのプロンプト生成」という一点に絞ったシンプルさと Material 3 Expressive への完全対応が強みです。Claude Code・Cursor・Codex を使って Android/Web アプリを開発するエンジニアは、一度試してみる価値が十分にあります。
この技術を学ぶ
DevToolに興味を持った方には、Udemyのオンラインコースもおすすめです。
- 関連するDevToolコース一覧 — セール時（最大90%OFF）を狙うとお得です
関連記事
この記事が役に立ったらシェアしてください