目次

レシピアプリの画面を作るとしよう。トップ画面に検索バーとレシピカードを置き、カードをタップしたら詳細画面へ。色は落ち着いたグリーンにして、スマホ版とデスクトップ版の見え方も考えたい。

M3E Canvasなら、こうした画面をブラウザ上で組み立て、画面遷移をつなぎ、最後にAIコーディングツール向けのプロンプトとして書き出せる。デザイン案を見せるだけのツールではなく、作りたいアプリの構造や動きを、実装を始めるための指示にまとめるところまで面倒を見てくれる。

公開版はGitHub Pagesで使える。Claude Code、Codex、Gemini CLI、Cursorなど、プロンプトを受け取れるツールに渡して開発を始められる。この記事では、できることと実際の進め方を見ていこう。

まずは部品を置いて画面を作る#

使い始めるなら、公開版を開いてキャンバスに部品をドラッグ＆ドロップする。ボタンやアイコンボタン、FAB、チップ、アプリバー、ナビゲーションバー、タブ、検索バー、カード、リスト、ダイアログ、テキスト入力欄などがそろっている。画像やカメラ、地図のプレースホルダーもあるので、アプリの主要な画面をひと通り組み立てられる。

たとえばレシピアプリなら、画面上部に検索バー、その下にカテゴリのチップ、続けてレシピカードを並べる。カードを選ぶと詳細画面へ進み、画面下部のボタンから保存できる。まずは見た目を作り、次に部品の配置や動きを調整していけばいい。

画面は何枚でも追加でき、名前と背景色を付けられる。画面のラベルから、スマホ向けの412×892とデスクトップ向けの1280×800を切り替えられるのも便利なところだ。同じ名前の画面を両方の幅で用意すると、プロンプトでは「同じ画面の異なる幅」として扱われる。スマホ用とデスクトップ用を別々のアプリのように説明する必要がない。

画面遷移と操作もプレビューできる#

部品を配置したら、タップ時の移動先を設定する。ボタンやカードだけでなく、アプリバーのアイコンやナビゲーションバーの項目にも、別の画面や「戻る」を割り当てられる。切り替え方は、上下左右からのスライド、フェード、拡大、アニメーションなしから選べる。

キャンバス上には画面間の矢印が表示され、どこからどこへ移動するのかを確認できる。プレビューでは実際にタップして遷移を試せる。戻るときには、行きのアニメーションが逆向きに再生される。

画面ごとに左右上下のスワイプ先を決めることもできる。プレビューでは画面が指の動きに合わせて動き、逆向きにスワイプして戻れる。ボタンはトグルとして設定でき、タップするたびにオンとオフを切り替えられる。オンになったときのアイコンやスタイルも指定できる。

こうした操作を画面の説明文だけで伝えるのは、意外と難しい。M3E Canvasなら、見た目と遷移を同じキャンバスで確かめながら形にできる。

Material 3 Expressiveのテーマをまとめて調整#

テーマ設定は、Material 3 Expressiveの4つの軸をひとつのパネルから編集する。

カラーは7種類のプリセットから選べるほか、ベースカラーを指定してMaterial 3のカラースキームを作り、細部を調整できる。ライトとダーク、3段階のコントラスト、壁紙に合わせるダイナミックカラーにも対応する。

シェイプは、部品の角をまとめてスクエア、標準的な角丸、フルの角丸に切り替えられる。タイポグラフィはRoboto、Roboto Flex、Roboto Serif、システムフォントから選択。モーションは標準とエクスプレッシブを切り替えられ、プレビューの画面遷移にも反映される。

画面を何度も作り直さず、アプリ全体の雰囲気を見比べたいときに使いやすい。カラーや形を変えたら、そのまま画面間の遷移もプレビューしてみよう。

レイヤー整理と自動整列で仕上げる#

部品が重なる画面では、レイヤーパネルで前後関係を調整できる。行をドラッグして順番を変えたり、グループや連結した部品の中を開いて並べ替えたりできる。複数の部品をグループ化すれば、重なりを保ったまま一緒に移動できる。生成されるプロンプトにも、重なりや横並びの情報が含まれる。

配置に迷ったら「整える」を使う。バー類を画面の端に寄せ、FABを隅に置き、隣り合うボタンやリスト項目をつなぎ、残りの部品を16dpの余白で積み直す。もう一度押すと、整える前の配置に戻せる。

細かく整えたい場合は、補助線やスナップを使う。UndoとRedo、キーボードショートカットも用意されている。たとえばVで選択ツール、Hで手のひらツールに切り替え、Pでプレビューを開ける。矢印キーで部品を動かし、Shiftを押しながらなら8dp単位で移動する。

プロンプトを作ってAIコーディングツールへ#

画面ができたら、デザイン全体か選んだ1画面をプロンプトに変換する。出力言語は日本語、英語、中国語、韓国語から選べる。部品ごとに書いた動作メモや、画面の説明も含められる。実装先はAndroidかWebを指定でき、それに合わせた技術を使うようプロンプトに指示が入る。

進め方はシンプルだ。

  • キャンバスに画面と部品を配置する
  • 必要な画面遷移や操作を設定する
  • テーマと画面サイズを調整し、プレビューで確認する
  • 全体または対象画面のプロンプトを選び、必要なら手で編集する
  • プロンプトをコピーしてAIコーディングツールに渡す

AIに実装を頼むときは、プロンプトを貼るだけで終わりにせず、使いたい技術や実行環境も必要に応じて補足しよう。M3E Canvasの出力は画面の構成や振る舞いを伝えるための出発点だ。生成されたコードの動作確認や細部の調整は、実装側で進めることになる。

画面はPNGとして保存でき、設計を開ける共有リンクも作れる。共有リンクは、相手が自分のキャンバスでデザインを開くためのものだ。AIエージェント向けの指示を使う場合は、エージェントがagent.mdを読んで画面案を作り、共有リンクで返す流れになる。この機能はベータ版として案内されている。

スマホでも使える？開発者向けの情報は？#

スマホブラウザでは、1画面固定のボタン専用エディタが開く。プラスボタンで部品を追加し、画面上のボタンをタップして移動。下部のシートからテキスト、アイコン、スタイルを編集する。複数画面を扱うフル機能のエディタは、デスクトップブラウザ向けだ。

作業内容はブラウザのlocalStorageに保存される。任意のAI補助機能を使う場合は、OpenAI、Claude、Gemini、DeepSeekのAPIキーを自分で用意する。キーはブラウザ内に保存され、リクエストは各プロバイダへ直接送られる。AIに部品の動作メモや画面の説明を書かせる用途で、書き換えは元に戻せる。

M3E Canvasは無料で、MITライセンスで公開されている。自分でビルドする場合は、リポジトリを取得して依存関係を入れ、開発サーバーを起動する。

terminal
npm install
npm run dev

本番向けの静的書き出しは次のコマンドで行う。

terminal
npm run build

出力先は./out。GitHub Pagesのようにサブパスで公開する場合は、ビルド時にNEXT_PUBLIC_BASE_PATH=/リポジトリ名を指定する。リポジトリには、mainへのpush時にGitHub Pagesへ公開するGitHub Actionsの設定も含まれている。

まずは小さな画面をひとつ作ろう#

M3E Canvasが向いているのは、Material 3 Expressiveの画面を目で確かめながら組み、AIに実装の依頼を渡したい人だ。画面構成だけでなく、遷移、テーマ、画面幅、部品ごとの動作メモまでまとめられる。

最初から大きなアプリを設計しなくてもいい。検索バーとカードがある一覧画面をひとつ作り、カードから詳細画面へ移る設定を試してみよう。プレビューで動きを確認したら、日本語のプロンプトをコピーして手元のAIコーディングツールに渡してみてほしい。

出典: https://github.com/lnkiai/m3e-canvas

目次