Gemini Canvasでアプリを作成！やり方やコツ、プロンプトも紹介

「AIでアプリが作れるらしいけど、具体的にはどうすればいいの？」と悩んでいませんか。

従来のチャット型AIでもコード生成は可能でしたが、生成と実行を別環境で繰り返す必要があり、未経験者には負担が大きい点が課題でした。

Gemini Canvasは、コード生成から編集、プレビューまでを一画面で進められる制作スペースです。自然言語（日本語の文章）で指示を出しながら、動作確認と修正を繰り返せます。

本記事では、Gemini Canvasを使ったアプリ作成の基本手順や進め方のコツ、すぐに使えるプロンプト例などを紹介します。

また、記事の最後では「実際に作成できる簡単なアプリの例」も紹介するので、ぜひ参考にしてみてください。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、昇進・転職などに役立つスキルを学んだりするためのセミナーを開催しています。

また、参加者限定で、「今日から使えるプロンプト100選」「新時代のAI×デザイン活用ガイド」「Nano Banana Pro 徹底解説」など、全12個の資料を無料で配布しています。

「これからAIを学び始めたい」「AIを使って副業収入を得たい」「AIで業務を効率化したい」という方は、ぜひ以下のボタンからセミナーに参加してみてください。

Gemini Canvasとは？

Gemini Canvasは、Geminiアプリに統合された対話型の制作ワークスペースです。

単なるチャットAIではなく、アイデアを視覚的な成果物に変えるための専用作業場として設計されています。

従来のチャット型AIとの最大の違いは、画面構成にあります。

左側にチャット（対話スレッド）、右側にCanvasパネルが並ぶデュアル画面により、AIと会話しながらリアルタイムでプレビューを確認できます（以下画像参照）。

また、Canvasで作成できるものは、Webアプリだけではありません。主な例は以下のとおりです。

• Webアプリ・ゲーム
• ドキュメント
• インフォグラフィック
• スライドプレゼンテーション
• Webページ

アプリ開発だけでなく、資料作成やコンテンツ制作など幅広い用途に対応しているのがCanvasの魅力です。

以下の記事ではGemini Canvasの使い方を網羅的に解説しています。ぜひ、参考にしてみてください。

Gemini Canvasでアプリは作成できる？

結論として、Gemini Canvasを使えばプログラミング未経験者でもアプリを作成できます。

自然言語（日本語の文章）でAIに指示するだけで、HTML・CSS・JavaScriptなどのコードを自動生成し、Canvas上でリアルタイムにプレビュー表示します。

フレームワークのインストールや開発環境の構築は一切不要です。

自然言語だけでアプリを作り上げるアプローチは「バイブコーディング（Vibe Coding）」と呼ばれ、新しい開発体験として注目を集めています。

なお、以下の記事ではGeminiの活用方法を徹底解説しています。ぜひ、参考にしてみてください。

Gemini Canvasは無料？

結論として、無料版（Gemini Basic）でもGemini Canvasで簡単なWebアプリは作れます。

Canvas機能は無料プランにも含まれており、シンプルなWebアプリやゲームのプロトタイプの作成は可能です。

ただし、複数機能を一度に詰め込んだり、長い指示をまとめて渡したりすると、使用上限や性能の影響で手戻りが増える場合があります。

無料版はAIが記憶できる情報量（コンテキストウィンドウ）が約32,000トークンと少ないです。

反復的な開発作業で以前のコード構造を忘れてしまうケースが起こりやすい点に注意が必要です。

なお、各プランの比較表は以下のとおりです。

プラン	月額（税込）	Canvas利用	主なモデル	アプリ開発への適性
無料	￥0	○（可能）	・高速モード ・思考モード（制限あり） ・32,000トークン	まずは試せる 軽量プロトタイプ向き
Google AI Plus	￥1,200	○（可能）	・高速モード ・思考モード（90回/日） ・128,000トークン	無料より余裕あり ライトユーザー向け
Google AI Pro	￥2,900	○（可能）	・高速モード ・思考モード（300回/日） ・Pro 3.1（100回/日） ・100万トークン	個人の業務利用向け 反復開発・長めの仕様に強い
Google AI Ultra	￥36,400	○（可能）	・上記すべての機能（制限緩和） ・Deep Think 3.1機能 ・Agent機能 ・最高レベルのアクセス	ヘビーユース・研究向け

GeminiのCanvas機能は、まず無料版で試し、本格的に開発したくなったら有料プランへの加入を検討しましょう。

Gemini Canvasでアプリを作成する方法

ここでは、Gemini Canvasでアプリを作成する方法を解説します。

Gemini Canvasでのアプリ作成は、以下の3つのステップで進めます。

1. Canvasの起動
2. プロンプトの入力
3. プレビューで動作確認

なお、Gemini Canvasでアプリを作成する際は、パソコンでの操作が効率的です。ここでは、パソコン上でのアプリ作成方法を解説します。

アプリの完成後は、URLをコピーしておくかブックマークしておきましょう。

再度URLを開くと、作成したアプリを使用できます。

Gemini Canvasでアプリを作成する際のコツ

Gemini Canvasでのアプリ作成をスムーズに進めるために、以下3つのコツを押さえておきましょう。

• 開発したい内容を具体的かつ詳細に言語化する
• 一度に全て作らず小さな単位で機能を追加する
• プレビュー機能で動作を確認しながら改善を繰り返す

1つずつ詳しく解説します。

開発したい内容を具体的かつ詳細に言語化する

AIに的確なコードを生成してもらうには、「誰が、どのような操作をして、どんな結果を得るか」を明確に伝える要件定義が重要です。

「いい感じのアプリを作って」のような曖昧な指示では、意図と異なるアプリが生成される可能性が高くなります。

具体的には、以下のポイントを意識してプロンプトを作成してみてください。

• アプリの目的（何を管理する？何を計算する？）
• 必要な画面要素（入力欄、ボタン、表示エリアなど）
• 操作の流れ（入力→ボタン押下→結果表示）
• プロンプト末尾に「不明点があれば質問してください」と追記する

要件を具体的に言語化するほど、AIの出力精度は格段に向上します。

一度に全て作らず小さな単位で機能を追加する

最初から複雑な完成形を目指すと、コードが破綻するリスクが高まります。

まずは最小限の骨組み（コア機能）を作り、動作確認してからデザインや追加機能を足していくアプローチが効果的です。

段階的に機能を追加する進め方には、以下のメリットがあります。

• エラーの原因を特定しやすくなる
• トークン消費を節約できる
• 各段階で正常に動作する状態を維持できる

「まず動くものを作り、少しずつ育てる」意識で進めると、完成度の高いアプリに仕上がりやすくなります。

プレビュー機能で動作を確認しながら改善を繰り返す

アプリを形にしていくうえで重要なのは、動作を確認しながら少しずつ改善を重ねることです。

Gemini Canvasでは、プレビュー画面を見ながら修正を重ねられます。違和感があれば、その都度AIに修正を依頼しましょう。

また、対話を重ねて調整していく中では、バージョン管理機能も役立ちます。

「前のバージョン」「次のバージョン」ボタンで変更履歴を行き来できるため、修正前の状態に戻すことも可能です。

Gemini Canvasでアプリを作成する際に役立つプロンプト

Gemini Canvasでのアプリ開発を成功させるためには、段階ごとの適切なプロンプトの使い分けが大切です。

以下の3ステップで進めましょう。

• アプリの基本構造と動作を指示するプロンプト
• デザインの雰囲気や色の配置を指定するプロンプト
• 不具合の解消や動きを調整するためのプロンプト

それぞれ、プロンプト例とあわせて解説します。

アプリの基本構造と動作を指示するプロンプト

最初のステップでは、デザインを気にせず機能の骨組みだけを作るよう指示します。

見た目は後から整えられるため、まずは「確実に動くロジック」を優先しましょう。

以下のプロンプト例をコピペして使えます。

HTML、CSS、JavaScriptを1つのファイルにまとめて、シンプルなタスク管理アプリの骨組みを作成してください。

要件：
・タスクを入力するテキストボックスと「追加」ボタンがある
・追加されたタスクがリスト表示される
・各タスクに「完了」チェックボックスと「削除」ボタンがある
・デザインの装飾は不要で、まずは確実に動くロジックだけを構築してください

「HTML、CSS、JavaScriptを1つのファイルにまとめて」と明示すると、Canvas上で扱いやすい単一ファイル構造にできます。

ファイルが分割されると管理が煩雑になるため、最初に指定するのがおすすめです。

デザインの雰囲気や色の配置を指定するプロンプト

骨組みが正しく動作することを確認できたら、次はデザインを整えます。

色やレイアウトは自然言語で伝えるだけでAIが反映するため、専門知識は不要です。

以下のプロンプト例を参考にしてみてください。

機能はそのまま維持して、デザインをモダンで洗練された雰囲気に変更してください。

要件：
・背景は薄いグレー（#F5F5F5）、全体のフォントは見やすいゴシック体
・タスク追加ボタンは鮮やかな青色のグラデーションにし、角を丸くする
・タスクリストは白いカード状にし、薄いシャドウをつけて浮かび上がるようにする
・完了したタスクは取り消し線と薄いグレーで表示する
・全体的に余白を十分にとり、見やすいレイアウトにする

配色の好みがある場合はカラーコード（#FFFFFFなど）で指定すると、より正確にイメージどおりのデザインに仕上がります。

不具合の解消や動きを調整するためのプロンプト

プレビューで思いどおりに動かない場合は、以下3点をAIに伝えましょう。

• 「何をしたか」
• 「何が起きたか」
• 「本当はどうなってほしいか」

専門用語は一切不要で、普段の日本語で状況を説明すれば問題ありません。以下のプロンプト例を参考にしてみてください。

以下の不具合を修正してください。

【やったこと】[例]タスクを入力して「追加」ボタンを押した
【実際の動き】[例]何も反応がなく、タスクがリストに表示されない
【期待する動き】[例]ボタンを押したら、入力したタスクがリストに追加される

原因と修正内容を分かりやすく教えてください。

「やったこと・実際の動き・期待する動き」の3点セットで伝えると、AIが原因を特定しやすくなり、的確な修正案が返ってきます。

また、機能を追加したい場合は、以下のプロンプト例を参考にしてみてください。

現在のアプリの機能とデザインはすべて維持したまま、以下の機能を1つだけ追加してください。

【追加したい機能】タスクに「期限日」を設定できるようにする
【具体的な動き】
・タスク入力欄の横に日付を選べるカレンダーを表示する
・追加されたタスクのリストに期限日も一緒に表示する
・期限を過ぎたタスクは赤文字で表示する

既存の機能（追加・完了・削除）が壊れないように注意してください。

なお、「現在の機能とデザインはすべて維持したまま」と明記すると、既存部分が上書きされるリスクを減らせます。

追加したい機能が複数ある場合は、1つ追加するたびにプレビューで動作確認してから次の機能に進みましょう。

【実例】Gemini Canvasでアプリを作成してみた！

ここでは、筆者がGemini Canvasで実際にアプリを作成してみた事例を3つ紹介します。

• 日々の作業を効率化するタスク管理ツール
• 入力内容を瞬時に計算するシミュレーター
• 短時間で遊べるシンプルなブラウザゲーム

各事例を通じて、Gemini Canvasの活用イメージを具体的に確認していきましょう。

日々の作業を効率化するタスク管理ツール

ここでは、ブラウザ上で動作する「カードを並べて進捗を見える化するタスク管理ツール」を作成します。

以下のプロンプトで作成しました。

HTML、CSS、JavaScriptを1つのファイルにまとめて、カンバン風のタスク管理ツールを作成してください。

要件：
・「未着手」「進行中」「完了」の3つのカラムを横並びで表示する
・タスクを入力するテキストボックスと「追加」ボタンがある
・追加されたタスクは「未着手」カラムに配置される
・各タスクにドラッグ＆ドロップでカラム間を移動できる機能をつける
・各タスクに「削除」ボタンをつける
・タスクデータはブラウザのローカルストレージに保存し、ページを閉じても消えないようにする
・デザインはモダンで見やすいカード型UIにする

日々のタスク整理や会議のToDoまとめなど、業務の中で手軽に使えるアプリが数分で完成しました。

ドラッグ＆ドロップでカラム間を移動できるため、タスクの進捗管理を直感的に行えます。

入力内容を瞬時に計算するシミュレーター

2つ目に作成するアプリは、単価・数量・割引率を入力するとリアルタイムで消費税込み合計金額とグラフが変化する見積もりシミュレーターです。

以下のプロンプトで作成しました。

HTML、CSS、JavaScriptを1つのファイルにまとめて、見積もりシミュレーターを作成してください。

要件：
・商品名、単価、数量、割引率（%）を入力するフォームがある
・複数の商品を追加でき、一覧表で表示する
・合計金額（税抜）、消費税額（10%）、税込合計金額をリアルタイムで自動計算する
・円グラフで各商品の金額構成比を表示する
・入力値が変更されるたびにグラフと合計が即座に更新される
・デザインはビジネス用途にふさわしい落ち着いた配色にする

営業の見積もり作成やイベント費用の概算など、数字を扱う場面で利用可能です。

入力と同時にグラフが更新されるため、クライアントへの説明資料としても活用できます。

短時間で遊べるシンプルなブラウザゲーム

3つ目に作成するアプリは、キーボードで操作するブロック崩しゲームです。

以下のプロンプトで作成しました。

HTML、CSS、JavaScriptを1つのファイルにまとめて、ブロック崩しゲームを作成してください。

要件：
・画面上部にカラフルなブロックが5行×8列で並ぶ
・画面下部にパドル（バー）があり、左右矢印キーで操作できる
・ボールがパドルで跳ね返り、ブロックに当たるとブロックが消える
・スコア表示、残りライフ表示、ゲームオーバー画面、リスタートボタンをつける
・ブロックの色は行ごとに変え、視覚的に楽しいデザインにする

業務ツールだけでなく、エンターテインメント性の高いコンテンツもGemini Canvasで作成できます。

タイピングゲームやクイズゲームなども同様のアプローチで作れるため、Canvasの汎用性と創造性を実感してみてください。

Gemini Canvasでアプリを作成する際の注意点

Gemini Canvasを安全に活用するために、以下3つの注意点を押さえておきましょう。

• 複雑な処理や大規模な開発には向かない点に留意する
• 生成されたコードが正しいか必ず動作を確認する
• 作業内容はこまめにコピーして手元に保存する

1つずつ詳しく解説します。

複雑な処理や大規模な開発には向かない点に留意する

Gemini Canvasは、ブラウザ上で動作する開発環境のため、外部ツールとの連携や、厳格な権限管理が必要な会員制システムの構築には制約があります。

そのため、単体で完結する便利ツールや、機能検証を目的としたプロトタイプ作成に活用するのが現実的です。

本格的な商用システムを構築する場合は、専用の開発環境を用意しましょう。

生成されたコードが正しいか必ず動作を確認する

GeminiをはじめとしたAIは、稀に古いライブラリを提案したり、論理的な誤りを含んだコードを生成する場合があります。

コードが生成されたら、必ずプレビュー機能で動作を確認してください。

確認時には以下のポイントを意識しましょう。

• 入力に対して期待どおりの出力が得られるか
• 空欄のまま送信するなど例外的な操作でエラーが出ないか
• 異なるブラウザやデバイスで表示が崩れないか

面倒に感じるかもしれませんが、公開前のテストは丁寧に行い、トラブルを未然に防ぎましょう。

作業内容はこまめにコピーして手元に保存する

完成したコードは、Googleドキュメントや外部エディタにバックアップしておくことを推奨します。

ブラウザの不具合や予期せぬエラーが起きた場合に備え、区切りのよいタイミングでコードを手元に保存しておくと安心です。

GeminiのCanvas機能では、「共有」ボタンからコードをコピーできます。こまめにコードを保存しておき、非常時に備えましょう。

Gemini Canvasで簡単にアプリを作成しよう！

Gemini Canvasを使えば、プログラミング未経験者でも自然言語だけでWebアプリを作成できます。

また、Canvas上で対話しながらリアルタイムにプレビュー・修正ができるため、従来のコピペ作業やエラー修正のストレスから解放されるでしょう。

アプリを作成する際は、以下のポイントを意識してみてください。

• 要件を具体的に言語化する
• 小さな単位で機能を追加する
• プレビューで確認しながら改善を繰り返す

AIを「ただの相談相手」ではなく「専属エンジニア」として使いこなすと、業務効率化やアイデアの実現が身近になるはずです。

まずは無料版のGemini Canvasで、Webアプリの作成を体感してみてください。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、キャリアアップで年収を高めたりするノウハウをお伝えする無料セミナーを開催しています。

セミナーでは、主に以下の内容を学習できます。

• AIを使った副業の始め方・収入を得るまでのロードマップ
• おすすめの副業案件と獲得方法
• AIスキルを高めて昇進・転職などに役立てる方法
• 実際に成果を出しているロールモデルの紹介
• これから使うべきおすすめのAIツール

無料セミナーは、AI初心者〜中級者の方を対象としています。

「これからAIを学習したいけど、何から始めていいのか分からない」「AIの独学に限界を感じてきた」という方にとくにおすすめです。

また、参加者限定で、「初心者が使うべきAIツール20選」や「AI副業案件集」「ChatGPTの教科書」など全12個の資料を無料で配布しています。

完全無料で参加できるため、ご興味のある方は、ぜひセミナーに申し込んでみてください。