M3E Canvas、画面を組むと指示文になる 1画面で3,889字出た

GoogleでフォローするGoogle検索でAInformationの記事が出やすくなります

M3E Canvasは登録なしで0円　画面を組んで指示文にする

M3E Canvasは、アプリの画面をブラウザで組み立ててAI向けの指示文に変える無料のツールだ。オープンソースで公開されている。公式サイトを開くだけで使え、アカウントの登録もソフトのインストールも要らない。

組み立てに使う部品は、Googleのデザインの決まりであるMaterial 3 Expressiveに沿ったものだ。左の一覧からボタンやリスト項目を選び、スマホの形をした画面へドラッグで置いていく。

ボタンやチップを近づけると磁石のようにくっつき、角の丸みも並びに合わせて変わる。丸い追加ボタンのFABも同じ一覧から置ける。

指示文に入るのは配置と配色と遷移先　Claude Codeへ貼るだけ

右側の「プロンプト」を押すと、組んだ画面がそのまま指示文になる。中に入るのは画面の大きさ・部品の種類と配置・配色・ボタンを押したときの移動先だ。文はその場で直してからコピーできる。

コピーした文はClaude CodeやCodexのようなAIコーディングツールに貼り、アプリづくりを頼む。画面の配置やボタンの動きを文章で説明する手間を省くのが、このツールの狙いだ。

画面どうしをつないでタップで確かめられる

画面は「画面を追加」で増やせる。ボタンの「トリガー」で移動先を選ぶと、2つの画面が矢印で結ばれる。切り替えの動きは上下左右のスライド・フェード・拡大から選ぶ。

「プレビュー」に切り替えればボタンを押して動きを確かめられる。指示文を出す前に流れの抜けに気づけるのが強みだ。配色は7種類のテーマから選べ、ライトとダークも切り替わる。

編集部が開くと画面は日本語　初期の1画面で3,889字が出た

AInformation編集部が10月31日に公式サイトを開くと、部品の一覧は「ボタン」「チップ」「ナビゲーションバー」のように日本語で並んでいた。登録の画面は出ず、開いた時点で「ホーム」の画面が1枚置かれていた。

その1画面のまま「プロンプト」を押すと、日本語の指示文が3,889字出た。書き出しは「この画面を Material 3 Expressive のデザインで実装してください。」だ。色は役割ごとに色コードで指定され、上から順に部品の場所が書かれていた。

気をつけたいのは実装先だ。この初期の状態では、指示文に「実装先は Android（ネイティブアプリ）です」と入っていた。社内向けのWebアプリを作るつもりなら、貼る前にこの1行を確かめておきたい。

APIキーが要るのはAI補助だけ　まずスマホ1画面で試す

指示文を作るだけなら料金はかからない。生成はブラウザの中で終わり、外部のAIのAPIキーも利用料も要らない。

APIキーが要るのは、文章から画面案を作らせたり部品の動きの説明を書かせたりするAI補助のほうだ。OpenAI・Claude・Google Gemini・DeepSeekのキーを入れると使える。会社で試すなら、ここに誰のキーを入れるかを先に決めておくとよさそうだ。

画面はスマホの412×892ピクセルとパソコンの1280×800ピクセルを切り替えられる。手元で動かしたい人はNode.jsとGitを入れ、リポジトリを取ってきて動かす。まずはスマホの1画面を組み、出てきた指示文をそのままClaude Codeに渡すのが早い。