Geminiで手描きの画面をアプリに。
「Canvas」の手順と注意点。
この記事の読者：個人向け（紙に描いたアイデアを、手元で動かしてみたい人）／全社員・非専門（プログラミングを知らなくても、手順と注意だけ知りたい人）／情シス・DX担当（社員が試作を共有リンクで回さないか気になる人）／経営・管理職（試作の段階で、データがどこまで外に出るかを知りたい人）。専門知識が無くても、手順1〜4は今日そのまま真似できます。
要点：紙に描いたアプリの画面（モックアップ、習慣トラッカー、ゲームボード）の写真をGeminiに渡し、「Canvas」を選んで「このアプリのコードを生成して」と頼むと、Geminiがコードを書き、プレビューで動かして色・フォント・機能を直せます。Googleの公式ブログ（11月5日付）の3手順です。今日やることは、画面を1つだけ描いて試すこと。ただし、公開リンクを作ると、リンクを知る人はアプリのデータを見て編集できると、公式ヘルプにあります。実在の個人情報や仕事のデータは入れないでください。
紙に描いた画面を、Geminiがアプリにします。
Googleが11月5日（米国時間）に、公式ブログで案内した使い方です。
撮った写真をGeminiに渡して「Canvas」を選び、「このアプリのコードを生成して」と頼みます。
私は今朝、公式ブログとヘルプ、国内の報道を読みました。実機のGeminiは、動かしていません。
11月5日に案内されたのは、撮って渡して、動かす3手順
公式ブログ（11月5日付）が示した流れは、3つです。
- 写真を渡す。アプリのモックアップ、習慣トラッカー、ゲームボードなど、紙に描いたスケッチの写真をGeminiにアップロードします。
- Canvasで頼む。「Canvas」ツールを選び、
Can you code this app?（このアプリのコードを書ける？）と頼みます。Geminiが絵を読み取り、コードを書きます。 - プレビューで試す。プレビューの画面でアプリを動かし、色・フォント・機能の変更をGeminiに頼みます。
国内では、ケータイ Watchが11月6日に報じました。日本語の頼み方は「このアプリのコードを生成して」と書かれています。公式ブログの文例は英語です。
Canvasは、公式ヘルプによると、Geminiで文書・アプリ・スライド・コードを一緒に作る場所です。
国内の報道は「新たな機能」と書いています。一方、公式ブログの文面は使い方の案内で、いつから使えるかは書かれていません。
今日やること：画面を1つだけ描いて、動かしてみる
画面の名前とボタンの名前は、英語版ヘルプ（パソコン版）の表記です。
日本語の画面では、読み替えてください。
- 紙に画面を1つだけ描く。ボタンや入力欄の位置が分かれば十分です。ここは本紙の案で、公式に決まりはありません。実在の名簿、パスワード、他社アプリの画面やロゴは、描かないでください。
- 写真を撮り、Canvasを開く。gemini.google.comを開き、入力欄の下の「Add Files」から「Canvas」を選び、写真を添えます（ヘルプのパソコン版の手順）。紙全体が写って線がはっきり見えるほうが読み取りやすい、と私は考えていますが、確かめていません。
- 頼む。公式ブログの文面は
Can you code this app?です。日本語なら「このアプリのコードを生成して」（ケータイ Watch）。動きや色を足したいときは、ひとこと添えます。下に例文を置きました。 - プレビューで動かして、直す。押す、入力する、を試し、変えたいところを言葉で頼みます（色・フォント・機能、公式ブログ）。コードを見たいときは、Canvasの画面の右上の「Code」。動かないときは、右上の「Show console」でエラーやログを見られます。変更は自動で保存されます（ヘルプ）。
- 共有は、あとで決める。試すだけなら、共有は要りません。人に渡すなら、次の節を先に読んでください。
手順3の例文です。本紙が作った文で、動かしていません。
この手描きの画面を、スマホで使えるアプリにして。ボタンと入力欄は紙のとおりに並べて。色は緑と白で。
人に見せる前に：公開リンクで、他人が触れるもの
公式ヘルプのCanvasのページに、共有の手順と注意が書かれています。
- 共有の手順。Canvasの画面の右上の「Share & export」から「Share」を選び、「g.co/gemini/share」のリンクをコピーして渡します。
- アプリを共有するときは、アプリ情報を確認する。ヘルプには、公開リンクを知る人は、アプリに結びついたデータを見て、編集できる、とあります（原文は
view and edit data associated with the app）。 - アプリ情報の例。ユーザー間でデータを共有する、Geminiを使った機能（文章や画像の生成）、データを次回や別の端末にも残す、の3つが挙げられています。
- リンクの開き方。共有リンクはgemini.google.comでだけ開けます。Geminiのスマホアプリでは開けません。
- 複製。リンクを開いた人は「Copy Canvas」で、自分用の複製を作って直せます。
見落としやすいのは、編集できるものが「データ」と書かれている点です。
ヘルプは、他人がコードを書き換えられるとは書いていません。
逆に、「見えるのは画面だけ」とも書いていません。
| 場面 | 公式に書かれていること | ヘルプで見つからなかったこと |
|---|---|---|
| 試すだけ（共有しない） | Canvasで作り、プレビューで動かし、コードの確認と修正ができる。変更は自動保存 | 無料プランで使えるか。日本語の画面での名前 |
| 公開リンクで共有 | 「Share & export」→「Share」。リンクを知る人は、アプリのデータを見て編集できる | 作ったリンクをあとで止める手順。データの置き場所と保存期間 |
| リンクを開いた人 | gemini.google.comで開ける。「Copy Canvas」で複製して編集できる。スマホアプリでは開けない | 複製した側に、元のデータが渡るのか |
| AI機能を足す | 「Add Gemini features」で文章・画像の生成を足せる。条件はサインインと18歳以上 | 追加したときの利用上限や料金 |
実例と組み合わせ案：紙のチェック表を、押せるアプリにする
ここからは本紙の案で、まだ動かしていません。
まず、実例を1つ。
- 実例：公式ブログが挙げている習慣トラッカーです。紙に、横に7日、縦に3つの習慣のマス目を描きます。写真を渡して、「マスを押すと色が付くチェック表のアプリにして」と頼みます。直すときは、「今日の列だけ濃くして」のように、変えたい場所を1つずつ言葉にします。
- 組み合わせ（1）：Canvasの「Add Gemini features」で、Geminiを使った機能を足します。たとえば、チェック表に「今週のひとこと」を文で出すボタンです。ヘルプによると、文章と画像の生成を足せます。条件は、サインインと18歳以上です。
- 組み合わせ（2）：「Code」で出てきたコードを、別のAI（ChatGPTやClaudeなど）に貼り、「この画面の項目と動きを、箇条書きの仕様にして」と頼みます。開発担当に見せる、たたき台になります。コードを別のAIに貼ることになるので、仕事で使うなら、社内のルールを先に確かめてください。
どちらも、動かしたわけではありません。
見えていないのは、使えるプランと、仕事用アカウントでの扱い
今朝の時点で、確かめられていないことは6つあります。
- 無料プランで使えるか。公式ブログとヘルプのCanvasのページに、プランの条件は書かれていませんでした。
- スマホアプリから、紙の写真でこの使い方ができるか。検索結果に出た解説記事の要約には、「ウェブ版のみ」とする記述と、そうでない記述がありました。記事そのものは開いておらず、公式でも確かめられていません。共有リンクがスマホアプリで開けないことだけが、ヘルプにあります。
- 仕事用（Google Workspace）のアカウントで、公開リンクが使えるか。解説記事の要約に、管理者の設定次第とする記述がありましたが、公式では確かめられていません。情シス担当の方は、自社の管理コンソールで確かめてください。本紙は、該当する設定の場所を確認していません。
- 作った公開リンクを、あとで止める手順。私が読んだヘルプのページには、見当たりませんでした。
- 「データ」の置き場所と保存期間。解説記事の要約に、データを残す機能が必要なときは保存先が自動で作られる、との記述がありました。これも記事は開いておらず、公式で確かめていません。
- 手描きが雑なとき、どこまで読み取るか。実機で1回も動かしていません。失敗しやすい場面は、まだ言えません。
最初の1回は、手順1から4だけで十分です。
共有は、公開のところを確かめてからにしてください。
仕事で試作を回すなら、実データを入れないことを、先に決めておくと安心です。社内ルールのたたき台は、生成AI 社内ルールのひな形で組めます。
Geminiの個人アカウントの設定は、学習を止める2つの手の回と、Gemの移行の回に書いています。
編集責任者：Tatsuki Morohashi（発行人・運営者情報） ／ 最終更新：2026.11.08
本記事は、編集責任者の指示のもとAI編集部が執筆し、編集責任者が内容を確認しています。掲載の判断と内容の責任は編集責任者が負います。誤りを見つけられた場合はお問い合わせからご指摘ください。訂正の手順は訂正ポリシーに定めています。
参考にした主な出典
・Google「Transform a quick drawing into a live app with Gemini.」（blog.google、英語。2026年11月5日付。11月8日閲覧。全文を読んだ一次情報）——3手順、文例、プレビューでの調整
・Google「Create docs, apps & more with Canvas」Gemini Apps Help（support.google.com、英語・パソコン版。11月8日閲覧。全文を読んだ一次情報）——Canvasの開き方、Code・Show console、Add Gemini features、共有と公開リンク、Copy Canvas
・ケータイ Watch「手描きのモックアップから「Gemini」がコードを書いてアプリ化する機能」（k-tai.watch.impress.co.jp。11月6日付。11月8日閲覧。全文を読んだ報道）——日本語の頼み方、「新たな機能」とする報じ方
・検索結果に出た解説記事（Jetstream、UniteAI、TokenPostなど）は、要約だけを見ており、記事そのものは開いていません。本文の根拠には使っていません（確かめられていない点の手がかりとして触れたのみ）
・Xの投稿は、本文の根拠に使っていません
ツギノテはAI編集部が毎日発行するメディアです。同じ仕組みを作りたい方は 構築の相談 へ。