記事公開日
Gemini Canvasで実現する、コードを書かない爆速プロトタイプ作成術
こんにちは。DXソリューション営業本部の吾妻です。
システムの要件定義を行ったり、Webサービスを新たに立ち上げたりする際に、「どのような画面にするか」という認識を共有し、合意形成を図るために、プロトタイプ（モックアップ）を作成することがよくあります。
一般的には、PowerPointなどで図形を組み合わせてみたり、Figmaなどのツールで起こしたりすることが多いかと思いますが、実際の動きや遷移の認識合わせに苦労する場面が少なくないかと思います。そこで今回は、Googleの生成AIツールである Gemini と、静的サイトをホスティングするためのサービスを組み合わせることで、数分で、コーディングせずに、動きのあるプロトタイプをWeb上に公開する手順をご紹介します。静止画では伝わりにくい細かな挙動も、Gemini Canvasを使えばコードを1行も書かずに『実際に動くアプリ』として共有できます。
「とにかく早く動くプロトタイプを作って合意形成したい」というプロジェクトマネージャーやディレクター、エンジニアの方におすすめします。
今回使用するツール
今回は、プロトタイプの生成に「 Gemini Canvas 」を、生成した成果物を公開する場として「 GitHub Pages 」もしくは「 Azure Static Web Apps 」を利用します。
Gemini Canvas
通常のチャット形式のAIとは異なり、画面の片側でチャットを行いながら、もう片側で生成された成果物（コードやドキュメント）をプレビュー・編集できるインターフェースです。生成されたHTML、スタイルシート、JavaScriptソースをそのままプレビューすることができ、細かく対話しながらUIをブラッシュアップするのに適しています。
GitHub Pages
リポジトリにプッシュされたファイルを静的サイトとして公開できる、GitHubの機能です。
HTMLなどの静的なコンテンツをそのまま公開することも、GitHub Actionsを構成して Node.jsなどで構築されたビルドが必要なWebアプリケーションを公開することもできます。
Azure Static Web Apps
Azure上で提供されている、静的サイトのデプロイに特化したサービスです。
GitHubやAzure DevOpsといったソース管理システムと連携させることが前提となっており、自動的にGitHub ActionsによるCI/CDパイプラインが構築されます。企業利用のために認証機能を追加したり、バックエンド連携（Azure Functions）と組み合わせて拡張したりしやすいのがメリットです。社内に限定して公開したい場合には、Azure Static Web Appsを選択した方がセキュアだといえます。
Azure Static Web Appsそのものの概要や、一般的な利用方法については、以下の記事もご覧ください。
生成するプロトタイプ
今回Geminiに生成させるプロトタイプの題材は、「為替レート表示アプリ」にします。主要通貨ごとの外国為替レートを一覧表示する機能と、通貨換算の計算機の機能を持たせたいと思います。
Power Automate for Desktopのハンズオンで使用するサンプルサイトとして作成することを目的に、この題材を選びました。
よくある定番のアプリテーマとプロンプトに記載する機能の例を以下に挙げておきます。手元で試してみる際にご活用ください。
| アプリ名 | 主要機能 |
| ToDoリスト（タスク管理アプリ） | ・タスクの追加／完了チェック／削除 ・期限設定 ・タグ付け ・ドラッグ＆ドロップでの並べ替え |
| ブログツール（簡易CMS） | ・記事の投稿／一覧表示／詳細表示／編集 ・Markdown記法の表示 ・ページネーション ・いいね／コメント ・記事検索 |
| 家計簿（支出管理アプリ） | ・支出を入力 ・数値データの計算・集計、グラフ描画 ・予算設定 ・月次レポート出力 ・レシート画像のアップロード |
| SNSクローン | ・短文・画像投稿 ・他ユーザーのフォロー ・タイムライン表示 ・ユーザー認証 ・通知機能 |
| レシピ共有サイト | ・料理名・材料・手順・写真の登録 ・レシピの共有／お気に入り登録 ・レシピ検索／ランキング |
| ショッピングサイト | ・商品一覧 ・カート機能（セッション管理） ・購入処理（決済フローそのものはダミー） ・在庫管理 ・注文履歴ダッシュボード |
| チャットアプリ | ・リアルタイムなメッセージ送受信 ・WebSocketによる双方向通信 ・既読機能 ・グループチャット ・スタンプ／ファイル添付 |
| 会議室予約システム | ・日時指定での予約枠確保 ・カレンダーUIの実装 ・予約キャンセル ・リマインドメール送信 ・Googleカレンダー連携 |
Step 1: Gemini Canvas でモックを生成する
まずはGemini Canvasを開き、作りたい画面のイメージを伝えます。今回は例として「為替レート表示アプリ」を作成します。
プロンプトが具体的であればあるほど、期待通りのプロトタイプが生成される可能性が高まります。サンプルとして、以下のようなプロンプトを入力してみます。
プロンプト全文 を開く
| 以下のWebアプリケーションを構築しようと思います。ソースコードを生成してください。 # アプリケーションの概要 タイトル: 為替レート表示アプリ 機能: - 主要通貨ごとの日本円に対する外国為替レートを表示するテーブル - 各レート表示は、divタグのid属性で区別できるように、固定された一意なidを割り振る - 通貨換算の計算機 - 日本円の金額を入力するテキストボックス、通貨を選択するドロップダウンメニュー、換算後の金額を表示するラベル - 外国通貨の金額を入力するテキストボックス、通貨を選択するドロップダウンメニュー、換算後の日本円を表示するラベル # 使用技術 フロントエンド: HTML, CSS, JavaScript レートのサンプルデータ: JSONファイルまたはJavaScriptオブジェクトとして定義（サンプルデータを含めておく） # ソースコード構成 以下の3ファイルで構成する。 HTMLファイルの1ファイルにまとめられる場合は、app.cssとapp.jsは不要。 - index.html - app.css - app.js # デプロイ方法 - GitHub Pagesを利用してデプロイする - Reactを利用する場合は、ビルドして静的サイトとしてデプロイする - Deploy.mdにデプロイ手順を記載する # その他要件 - レスポンシブデザインによる、PC・スマートフォン両対応 - ユーザーフレンドリーなUI - 落ち着いた色合いのカラーリング・アクセントカラー - 歴史ある銀行のような、重厚で信頼感のあるネイビーブルーを基調に、ホワイトとグレーで清潔感を出した配色 # エラーハンドリングの想定 - 為替レート情報を取得するのに失敗した場合のエラーメッセージ表示 - 計算に失敗した場合のエラーメッセージ表示 |
Geminiへの指示出しのポイント
Gemini Canvasを利用してプロトタイプを作成する場合、以下の事項をプロンプトに明記すると取り扱いが楽になります。
①デプロイ方法を指定する
…デプロイ先の具体例としてGitHub Pagesと明示することで、静的サイトとしてWebアプリを作成させます。
②ファイル構成を指定する
…通常、Webアプリは複数のファイルから構成されますが、単一のHTMLファイルにまとめさせることで、Canvas内でプレビューできるようにするとともに、ファイル管理やデプロイの手間を減らします。
③デザインの雰囲気を伝える
…配色などの想定をGeminiに伝えずにプロトタイプを生成させると「サイバーパンク調」「レトロゲーム調」にしたがる傾向があるため、特にB2BのWebサービスにおいては、「信頼感のあるネイビーブルー」「企業向けの落ち着いた配色」など、具体的なイメージをプロンプトに明記して落ち着いたカラーリングにさせた方が良いと思います。
また、正常系の処理だけでなく、準正常系（エラーメッセージ出力など）、異常系（例外処理）の処理も実装させるように明記しましょう。
プロトタイプが生成されると、Canvasの左側のウィンドウには応答が、右側のウィンドウにはコードおよびプレビューが表示されます。
プレビュー画面を開くと、生成されたアプリを実際に操作しながら動作確認できます。不足している機能や、改善したいUIパーツがあれば、プロンプトを追加で入力していきます。
Step 2: ソースコードの取得
生成されたコードの内容やセキュリティを各自の責任において確認したうえで、問題がなければ、デプロイ用のファイルを取得します。
Canvasを「コード」に切り替えて、「共有」＞「内容をコピー」からHTMLファイルのコンテンツを取得し、ローカルファイルに貼り付けて保存します。
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>為替レート表示アプリ</title>
<!-- Tailwind CSS (スタイリング用) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome (アイコン用) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</html> |
Step 3: デプロイ手順
生成されたプロトタイプをWeb上に公開します。
目的や公開範囲に合わせて、サービスを選択してください。
GitHub Pages を利用する場合
個人の検証のために一時的に公開したい場合や、広く一般公開してしまっても問題ない（機微情報などを一切含まない）ようなコンテンツを対象としている場合に選択します。
①GitHubで、新規リポジトリを作成します
②生成されたファイル（index.htmlなど）をリポジトリにアップロード（コミット＋プッシュ）します
③リポジトリの設定画面で「Pages」を開きます
④ブランチとして「main」を選択し、「Save」をクリックします
⑤GitHub Actionsによるデプロイが完了し次第、「https://<user>.github.io/<repo>/」でプロトタイプが表示されるようになります
Azure Static Web Apps を利用する場合
企業ポリシーでAzureを利用する場合や、将来的にAzure Functions等と連携させたい場合はこちらがおすすめです。Azure Static Web Appsの詳細については、以前の記事もご覧ください。
①Azure Portalにログインし、「Static Web Apps」を検索して「作成」をクリックします
②デプロイの詳細設定を行います
| 項目 | 設定内容 | 備考 |
| ソース | GitHub | |
| GitHub アカウントでサインイン | 認証を行い、ソースが置かれているリポジトリとブランチを選択 | |
| ビルドのプリセット | 「Custom」 アプリの場所は「 / （ルート）」 |
ビルドが必要なフレームワークを利用している場合は、適宜変更する必要がある |
③「確認および作成」をクリックします
Step 4: 成果物の確認
GitHub PagesもしくはAzure Static Web Appsで発行されたURLにアクセスすると、「為替レート表示アプリ」の画面が表示されるかと思います。
レスポンシブデザイン対応とするようにプロンプトで指示出ししているため、ブラウザのウィンドウサイズを変更すると、コンテンツの表示方法も変化することが分かるかと思います。
| レスポンシブデザイン（横） | レスポンシブデザイン（縦） |
 |
 |
HTMLのid属性のように、直接UIに現れない部分については、ブラウザの開発者ツールを用いて確認します。
このように、作成されたプロトタイプは、UIだけでなく、裏側の処理まである程度実装されています。
これにより、実際の挙動をステークホルダー全員で目の当たりにしながら、「ここの挙動は意図通りか？」「データ構造はどうなっているか？」といった要件定義や機能改修の検討を、具体的かつスムーズに進めることができます。
まとめ
今回は、Gemini CanvasとGitHub Pagesを組み合わせた、新しい仕様検討の進め方をご紹介しました。
このような手法をとることで、ステークホルダー全員で「動くもの」を見ながら合意形成を行える点にあります。静的なドキュメントだけでは見落としがちな認識のズレを防ぎ、修正が必要な場合もその場で迅速に対応できます。
また、仕様が確定したあとは、プロトタイプを捨てて一から作り直すのではなく、静的なサンプルデータから、実際の為替レートAPIなどに置き換えたり、Azure Functionsを使用してバックエンド処理を実装したりすることで、スムーズに本番開発へ移行できます。
QESでは、このような最新のAI開発ツール活用から、Azureを中心とした堅牢なエンタープライズシステムの構築まで幅広く支援しています。「PoC（概念実証）を素早く行いたい」「クラウドネイティブな開発を始めたい」というご希望があれば、ぜひお問い合わせください。
このブログで参照されている、Microsoft、Azure、GitHub、その他の製品・サービスは、米国 Microsoft Corporation およびその関連会社の商標です。
このブログで参照されている、Google、Geminiは、Google LLCの商標です。
