非エンジニアでも簡単！ ChatGPT「Canvas」で便利なアプリを作成する方法【今すぐ使えるプロンプト紹介】：その悩み、生成AIが解決（2/2 ページ）

[酒井麻里子，ITmedia]

AIが生成したプロンプトを貼るだけでアプリが完成

　チャットに先のプロンプトを貼り付けて送信すると、コードの生成が開始される。

コードの生成完了までには少し時間がかかる。出力が完了すると「プレビュー」ボタンをクリックできるようになる

　出力が完了したら、画面右上の「プレビュー」をクリックすれば、画面上でアプリを動かすことができる。実際に操作して、意図した通りになっているか確認しよう。

画面が左右に分割される形で、アプリのプレビューが表示される。アプリを実際に動かしてみることが可能だ

　今回作成したアプリは、フォームから情報を入力すると、その内容がカードとして表示される。

情報入力画面。フォーム形式で必要事項を入力できるようになっている

　カードは処理のステータス別に並んで表示され、カードをクリックすると詳細が確認できるようになっている。

カードの詳細画面。入力した全ての情報をここから見ることができる

　改善したいところがあれば、チャットで追加指示をすればよい。今回は画面の見た目と機能について以下の修正を指示した。

プロンプト

下記の改善をお願いします。

- ヘッダー背景色の黒をネイビーに変える

- 絞り込み結果のCSVデータを取得できるようにする

- 問い合わせ詳細画面で、編集・削除ができるようにする

　CSV取得ボタンや詳細画面の編集ボタンなどが追加されて、より使い勝手のよいアプリになった。

トップページのヘッダーの色変更およびCSV表示ボタン追加、詳細画面への「編集」「削除」ボタンの追加を行った

　もし追加指示が思うように反映されていない場合は、さらに追加で指示して修正を続けよう。その際も「何がうまくいかないか」をチャットで伝えるだけでよい。

　なお、ファイルをダウンロードする仕様については、環境によっては安定して動かない場合がある。今回は当初、絞り込み結果をCSVとしてダウンロードする仕様を目指したが、エラーが頻発したため、画面にCSVテキストを表示してワンクリックでコピーして貼り付けられる方式に切り替えた。

　このように制作中に思い通りにいかないことがあった場合も「ダウンロードがうまくいきません」「こんなエラーが出ます」などと状況を伝えれば代替案が提案されるので、スムーズに完成まで進められる。

　アプリが意図した通りに動くようになったら、Canvasプレビュー画面内右上の共有アイコンからURLを取得してブックマークなどに保存しておくと便利だ。次回からはリンクを開けばすぐにCanvasのWebアプリ画面にアクセスできる。

　ただし、Canvasを使って作成したアプリは、一般的なWebサービスのように「誰でもいつでも使える形で継続的に運用できるアプリ」とは性質が少々異なる。元のチャットを削除すればアクセスできなくなるので、あくまでも補助的な簡易アプリとして使うのがよいだろう。

リンクの共有範囲は、自分だけがアクセスできる「非公開」、URLを知っている人がアクセスできる「公開」（組織向けプランの場合は「ワークスペース」）から選択できる

　ChatGPTの「Canvas」を使えば、業務のなかで発生する「ちょっとした不便」を解消するツールを自分の手元で気軽に作れる。なお、同様の機能は、Geminiでは「Canvas」、Claudeでは「アーティファクト」として提供されている。大まかな制作の流れは同じだ。

　これはとくに、既成のツールではかゆい所に手が届かなかったニッチな用途で活躍するはずだ。改善もチャット上の指示で容易にできるので、気になるところを改善しながら自分に最適化したツールに育てていける。