GeminiのCanvas機能で「AI旅行プラン自動生成アプリ」を作ってみた【ノーコード】
はじめに
Google Gemini に「Canvas」という機能があるのをご存じでしょうか。
一言で言うと、プロンプトを入力するだけでWebアプリを作れて、そのままリンクで共有できる機能です。
今回はこれを使って、旅行の条件を入力するとAIが工程表と予算を丸ごと生成してくれるアプリを作ってみました。
👉 アプリを試してみる（Googleアカウントが必要です）
そもそもGemini Canvasとは？
Canvasとは、Geminiのチャット画面内に専用の作業スペースが開き、ドキュメントやWebアプリをAIと一緒にリアルタイムで作成・編集できる機能です。
従来のAIチャットは「テキストを生成して終わり」でしたが、Canvasでは生成したコンテンツをその場でプレビューしながら修正でき、完成したらリンク一発で誰とでも共有できます。
Canvasでできること
Canvasには大きく2つのモードがあります。
ドキュメントモード 文章・レポート・スライド資料などのテキストコンテンツを作成・編集できます。太字・見出し・箇条書きなどの書式もGoogleドキュメントのように直接編集でき、完成後はGoogleドキュメントにエクスポートすることも可能です。また文章をそのままクイズやインフォグラフィック、音声解説、Webページに変換する機能も搭載されています。
アプリ（コード）モード HTML/CSS/JavaScriptなどのコードを生成・プレビューしながら開発できます。コードを直接編集したり、エラーログを確認したり、範囲を選択してAIに部分修正を依頼することもできます。Pythonコードの場合はGoogle Colabへの直接エクスポートにも対応しています。
Canvasの始め方・使い方
1. Canvasを起動する
ブラウザで gemini.google.com を開く
チャット入力欄の下にある 「Canvas」ボタン をクリック
作りたいものをプロンプトで伝えて送信するだけ
ヒント: スライド資料やクイズなど特定の形式で作りたい場合は、プロンプトにその旨を明記すると意図通りに生成されます。
例：「〇〇についてのスライドプレゼンテーションを作って」「〇〇の理解度をチェックするクイズを作って」
2. 生成後に編集する
Canvasで生成されたコンテンツは、以下の方法で自由に編集できます。
チャットで追加指示： 左側のチャット欄に「〇〇を変更して」と指示するだけでAIが更新
範囲を選択して質問： 右下の「選択して質問」ボタンで、修正したい箇所だけを選択してピンポイントに変更依頼できる
Gemini機能を追加： 「Gemini機能を追加」ボタンで、テキスト生成・画像生成などのAI機能をアプリ内に組み込める（18歳以上のユーザー向け）
直接編集： コードや文章を手動でも直接書き換え可能。変更は自動保存される
3. 完成したら共有する
共有はとても簡単です。
Canvas右上の 「共有とエクスポート」 をクリック
「公開リンクをコピー」を押してリンクを取得
SNS・メール・メッセージアプリなどに貼り付けて共有
共有リンクを受け取った人は、リンクを開いて「コピーを作成」をクリックすると、自分のCanvasとして続けて編集することもできます。
注意点：
共有リンクを開くには Googleアカウントへのログインが必須 です
仕事用・学校用のWorkspaceアカウントでは共有リンクの発行が制限される場合があります
モバイルアプリでは共有リンクを開けません。ブラウザ（PC）専用 です
今回作ったもの：AI旅行プラン自動生成アプリ
入力画面
以下の条件を入力フォームに入力して、「AIで旅行計画を作成する」ボタンを押すだけです。
■ 入力項目
出発日・帰着日：カレンダーから選択
大人の人数：数値入力
子供の人数：数値入力
出発地：テキスト入力（「現在地」ボタンあり）
目的地：テキスト入力
目的・やりたいこと：自由記述（例：観光地巡り、グルメ、歴史探訪など）
出力内容（例：海外8泊9日・家族旅行の場合）
生成されるのは大まかに以下の内容です（あくまで一例です。目的地や日程によって内容は変わります）。
費用の概算内訳
交通費・宿泊費・食費や現地入場料などがカテゴリ別に自動算出されます。家族構成や旅行日数を反映した総費用の目安も表示されます。
日程表（タイムライン形式）
1日ごとに時刻・訪問スポット・移動手段・費用目安が記載されたスケジュールが生成されます。フライトの時間帯や現地での移動なども考慮されたリアルな工程になります。
地図との連携
右側にGoogle Mapsが表示され、工程表の各スポットをクリックするとマップ上でピンが移動する仕様になっています。「出発地からのルートを見る」ボタンもあります。
⚠ 注意： 生成される料金・営業時間・フライト情報などはAIによる概算・参考値です。実際の手配は必ず各サービスの公式サイトや旅行代理店でご確認ください。
利用プランとクオリティについて
Canvasは無料のGeminiアカウントでも利用できます。ただしプランによって使われるモデルが異なります。
無料プラン： 主にGemini 3 Flash（軽量・高速モデル）
Google AI Pro / Ultra： Gemini 3 Pro（高性能モデル）＋ 100万トークンのコンテキストウィンドウ
旅行プランの生成程度であれば無料プランでも十分に動作しますが、行程が長い旅行や複雑な条件では、有料プランの方が細かい出力が得られる場合があります。
まとめ
GeminiのCanvas機能を使えば、コードを一切書かずにAI搭載のWebアプリを数分で作れます。今回の旅行プランナーのように実用的なツールも、プロンプトひとつで形にできるのが本当に面白いところです。
「アイデアはあるけどコードはわからない」という方にこそ、ぜひ試してみてほしい機能です。
使用ツール：Google Gemini Canvas