投稿者 齋藤竹紘投稿日: カテゴリー ChatGPT
「チームでのブレスト内容を、すぐに形にして確認したい」 「コードが書けない企画者でも、エンジニアとスムーズに意思疎通する方法はないだろうか？」
個人がAIを活用する時代から、チームがAIと一体となって働く時代へ。コラボレーションの形が、今まさに変わろうとしています。
このシリーズ「日本語で学ぶOpen- Academy」では、OpenAI公式の学習プラットフォーム「OpenAI for Business」コレクション（全13本）の内容を、日本語で徹底解説しています。
第6回のテーマは、「Prototyping with canvas in ChatGPT（ChatGPTのCanvas機能を使ったプロトタイピング）」。 ※動画タイトルは異なりますが、実質的な内容は「AIとの共同作業」の進化形です。
チームのアイデアを瞬時に「動く形」に変え、開発プロセスを劇的に加速させる新しい共同作業のスタイルをご紹介します。
今回のキーポイント：インタラクティブ空間「Canvas」
今回紹介する「Canvas」は、単なるチャット画面ではありません。チームメンバーとAIが同じ場所に集い、アイデア出しからコーディング、プレビューまでをシームレスに行える、インタラクティブな共同作業空間です。
特に画期的なのは、Canvasが持つコーディング機能です。これにより、技術者と非技術者の間の壁を取り払い、全員がアイデアの具現化に直接関わることができます。
本編：アイデアを即座にプロトタイプ化する3ステップ
動画では、製品要求仕様書（PRD）という一枚のドキュメントから、実際に動作するアプリケーションのプロトタイプをAIと共同で作り上げる様子が紹介されています。
ステップ1：自然言語で「作りたいもの」を伝える
まず、企画者やプロダクトマネージャーが、チームで合意した製品要求仕様書（PRD）をCanvasにアップロードします。
そして、エンジニアに話すのと同じように、「このドキュメントに基づいて、統一分析ダッシュボードのプロトタイプを作成して」と、平易な言葉でAIに指示を出します。
ステップ2：AIによるコーディングと人間の編集
指示を受けたAIは、「思考の連鎖」機能で計画を立てながら、プロトタイプに必要なHTMLやReactなどのコードを自動で生成していきます。
ここでのポイントは、Canvasが単なるコード生成ツールではない点です。
- 直接編集: ユーザーはAIが生成したコードを、その場で直接編集できます。
- インライン提案: コードの特定の部分を選択し、「この部分を改善して」「バグを修正して」といった指示を出すと、AIが即座に提案を返します。
- 質問と対話: 「この行のコードはどういう意味？」と質問すれば、AIが丁寧に解説してくれます。
これにより、コーディングの知識がない人でも、AIとの対話を通じて開発プロセスに深く関与できるのです。
ステップ3：リアルタイムでの実行とプレビュー
Canvasの最も強力な機能が、生成したコードをその場で実行し、動作するプロトタイプとしてプレビューできることです。
動画の例では、完成した分析ダッシュボードのプロトタイプが実際に表示され、「CEO」「マーケティング責任者」など役割を切り替えるボタンをクリックすると、表示されるデータがリアルタイムで変化する様子が確認できました。
アイデアが「動く形」になることで、チームメンバーは具体的なイメージを共有でき、「もっとこうしたい」という次の改善サイクルを即座に回し始めることができます。
まとめ：アイデアと実装の距離がゼロになる
今回の「Canvas」機能がもたらすのは、チームの「アイデア（企画）」と「実装（コーディング）」の間の時間的・心理的な距離を限りなくゼロにすることです。
企画者が考えたアイデアを、AIという超優秀なペアプログラマーの助けを借りて、その場で動くプロトタイプとしてチーム全員に提示できる。このスピーディーな共同作業のスタイルは、製品開発のあり方を根本から変えるほどのインパクトを持っています。
この記事を読んだ人は、こんな記事も読んでいます
