Gemini Canvasのプレビューが表示されない｜種類・画面・動作を順に確認

最初に「ないもの」を3つに分ける

プレビューとは、コードで作ったアプリを画面に表示して、見た目やボタンの動作を確かめることです。コードは、その表示や動きを決める記述です。文章の下書きを作っただけの状態と、動くアプリを作った状態を同じものとして扱わないようにします。

この表は原因を断定するものではありません。たとえば白い画面でも、生成中なのか、読み込みが止まったのか、コードが実行できないのかで対応が変わります。「ボタンがない」と「ボタンを選んだ後に動かない」を分けるだけでも、不要なやり直しを減らせます。

文書とアプリでは、確認する結果が違う

「お知らせの文章を作って」と頼んだ場合、完成の基準は、その文章を読めて編集できることです。一方、「日付を選ぶと予約内容が変わるアプリを作って」と頼んだ場合は、表示に加えて操作した結果も確認する必要があります。

GoogleのCanvasの公式ヘルプも、文書の編集と、アプリ・コードの編集を分けて説明しています。文書だから必ずプレビューが存在しない、とまで決めつけるのではなく、まず自分が必要としている成果物を確かめます。

たとえば店頭のお知らせを印刷したいなら、文章や文書の出力が目的です。クリックできる予約ページを試したいなら、アプリとして作る必要があります。途中で目的が変わった場合は、元の文書を保存したうえで「この内容をもとに、入力とボタンのあるアプリをCanvasで作って」と、変えたい対象を明示します。

漫画では、紙のお知らせと動くアプリを分けています。プレビューという言葉だけを探す前に、「文章が読めれば完成なのか」「押した結果まで確認したいのか」を決める、という確認です。

• 出典：Canvasの公式ヘルプ（新しいタブ）

Canvasの上部を開き、コードとプレビューを見る

PCの確認例では、Geminiの入力欄にある「アップロードとツール」を開き、「Canvas」を選びました。選択後は入力欄の近くにCanvasの表示が出ます。その状態で、次の節の小さなアプリを依頼しています。

生成後のアプリには「コード」「プレビュー」の切り替えがありました。コード側では記述を確認し、プレビュー側では表示と動作を見ます。画面が狭い、表示の下の方にいる、Canvasを閉じている、といった場合は、先に対象の内容を開き、Canvasの上部を確認してください。

上は2026年10月11日のPC画面の一部です。左から「コード」「プレビュー」、続いてダウンロードなどの操作が並んでいました。全画面表示にすると、確認中の内容を広く見られます。配置やアイコンは端末・更新で変わるため、色や座標だけで判断せず、表示名も見てください。

今回の画面では、アプリが会話の中に表示される状態と、全画面で表示される状態を確認しました。必ず画面右側に独立したパネルが出る、と決めて探すと、表示されている内容を見落とすことがあります。公式ヘルプの「パネル」という説明と自分の画面の位置が異なる場合も、同じアプリの名前と切り替えを目印にします。

元のアプリを残し、小さな例で試す

本番用の予約システムや顧客管理画面を、いきなり作り直す必要はありません。元の依頼文とコードを、職場で認められた保存先に残してください。保存先で開けることを確かめてから、個人情報のない別の小さな例を試します。

次は、実際の試験に使った依頼の要点です。アプリ名、最初の表示、ボタン名、押した後の表示を決めておくと、成功したかを判断しやすくなります。これは予約システムの完成版ではなく、表示とクリックの動作を分けて確認するための例です。

HTMLは、Web画面の内容を書く形式です。ここでの「外部ライブラリなし」は、別のサイトからプログラムを読み込む仕組みを使わない、という指定です。aria-liveは、文字が変わったことを読み上げ環境へ伝えるための指定です。これらの語を暗記するより、まずこの小さな例で同じ結果になるかを確認してください。

漫画の要点は、機能を増やす前に、押した結果が変わるかを見ることです。図は説明用の架空例で、スマホのGeminiを実機検証した画面ではありません。実際に確認したPCの結果は、次の実画像で示します。

「表示された」と「動いた」を別々に確認する

試験では、アプリの見出しと「準備OK」が表示された後に、「確認する」を押しました。修正後のアプリでも同じ操作を行い、「動作OK」へ変わることを画面と表示文字の両方で確認しています。

同じ結果なら、その小さな例では表示とクリックの処理が動いています。それだけで元の大きなアプリまで正常だとは言えません。元のアプリに戻り、追加した入力欄、データの読込み、外部のプログラムなど、違いを1つずつ確認する材料になります。

「準備OK」は見えるが押しても変わらない場合は、ボタンの動作を確認します。見出しも出ない場合は、プレビューの表示や読み込みから確認します。「動作OK」は出るがデザインだけ違う場合は、配色や余白など見た目の記述を確認します。表示全体がない状態と、見た目だけが違う状態を混ぜないことが大切です。

AIが作ったコードは、依頼どおりかも確認する

今回の初回生成では、「外部ライブラリなし」と頼んだにもかかわらず、コードの先頭にTailwind CSSを外部サイトから読み込む記述が入りました。Tailwind CSSは見た目を整えるための仕組みですが、外部の読込みを減らしたい今回の試験条件には合いません。

そこで「外部のscript・style・画像・フォント・API・保存処理を使わず、1つのHTML内に直す」と追加で依頼しました。修正版では、先頭にあった外部ライブラリの読込みがなくなり、末尾のボタン処理では表示文字を「動作OK」に変えることを確認しました。コードを直した後も、プレビューへ戻って再度ボタンを押しています。

この例で伝えたいのは、「依存関係が原因なら必ずこの方法で直る」ということではありません。依存関係とは、そのコードが動くために頼っている別のプログラムなどのことです。AIが依頼を満たしたと述べても、実際の記述と動作を確認する必要があります。コードの一部を見ただけで、すべての安全性や外部通信の有無を保証することもできません。

読めないコードを無理に削って直すより、「この行の外部読込みを使わずに作り直して」「今の機能を保ち、依存関係を減らして」と対象を具体的に伝えます。仕事のアプリでは、元のコードと変更後を両方残し、必要なら担当者に差を確認してもらってください。

白い画面や動かない画面は、エラーの文字を残す

プレビューが選べるのに動かない場合、公式ヘルプは「コンソールを表示」からエラーやログを確認する方法を案内しています。コンソールは、実行時のメッセージを確認する場所です。PCの実画面でも、全画面表示の上部からこの操作を開けることを確認しました。

まず画面に出たエラーの先頭、いつ表示されたか、直前に押したボタンを残します。たとえば「ページを開いた直後に白くなる」と「確認するを押した後だけ変わらない」では、調べる処理が異なります。エラーがないことだけで正常と決めず、期待する表示と実際の結果も並べてください。

Geminiへ修正を頼む場合は、エラーの文章と期待結果を一緒に渡します。「全部直して」だけより、「見出しは出るが、確認するを押しても準備OKのまま。押すと動作OKになるよう、この部分を確認して」と伝えた方が、確認したい箇所が明確になります。

相談用のエラー画像に、顧客情報、個人名、認証に使う文字列などがあれば、そのまま外へ送らないでください。今回の試験では、特定のエラーを故意に発生させたり、利用者の不具合を再現したりはしていません。実際に起きていないエラー画像を、発生例として掲載することもしません。

PC・スマホ・アカウントを一度に変えない

同じ小さな例でも表示されないときは、利用場所を記録します。PCのブラウザ、スマホのブラウザ、スマホのGeminiアプリでは、入口や表示方法が同じとは限りません。GoogleのiPhone・iPad向け公式説明とAndroid向け公式説明には、アプリのプレビューとログ確認の案内があります。

公式には、共有されたCanvasの公開リンクをGeminiモバイルアプリで開けないという案内もあります。自分のCanvasを編集する操作と、他の人から届いた共有リンクを開く操作は分けてください。共有リンクが目的なら、公式が示すgemini.google.comでの開き方を確認します。

比較するときは、変更するものを1つにします。アカウントとブラウザとコードを同時に変えると、どの違いが関係したか分かりません。職場の管理アカウントでは、利用可能な機能や許可された作業を管理者へ確認します。確認のためだけに、会社の情報を個人アカウントへ移さないようにしてください。

• 出典：iPhone・iPad向け公式説明（新しいタブ）
• 出典：Android向け公式説明（新しいタブ）

保存・共有・購入は、プレビューの確認と分ける

プレビューが動かないからといって、元のチャットを消したり、アプリを公開したりする必要はありません。まず元のコードを認められた場所へ残します。ダウンロードなどで保存する場合は、ファイルがあることに加え、保存先で内容を開けることも確かめてください。今回の実演ではダウンロードしたファイルの動作までは確認していません。

GoogleのCanvasの安全性とセキュリティの説明も、アプリの作成・利用時の扱いを案内しています。公開共有リンクを作る操作は、表示確認とは別です。データ保存などの機能を付けたアプリでは、公開リンクを知る人が関連データを閲覧・編集できる場合があるため、共有前にアプリの情報を確認します。

漫画の「最小の例」は、元の顧客データを削って公開することではありません。問題を説明できる、無害な別の例を作ることです。元のコードの保存、共有する内容の確認、相談に必要な範囲の切り出しを順に行います。

今回の対処に、別の画像生成サービスや文字起こしサービスの契約は必要ありません。有料Geminiなら必ず直るとも言えません。小さな例が動くか、元のアプリのどこが異なるかを確認し、必要な機能と利用条件が分かってから、制作支援やプランを検討すれば十分です。

• 出典：Canvasの安全性とセキュリティの説明（新しいタブ）