Canvas で実用的な成果物を作る
要約 — このレッスンの要点
- Canvas は ChatGPT が生成したコード・ドキュメント・図解を、会話ウィンドウとは別のサイドパネルに表示・保持する機能だ。
- 生成された Canvas は会話中にその場でプレビュー・編集・コピーでき、作業ループが短縮される。
- 対応するコンテンツタイプはコード・テキスト・Markdown・HTML/CSS/JSなど複数ある。
- 編集は会話側からの指示と、Canvas 内の直接編集の両方で行える。インライン編集や差分指示にも対応する。
- ChatGPT Web / デスクトップアプリで利用可能。書き出して共有することもできる。
Canvas とは
通常の会話では、ChatGPT が生成したコードや長文ドキュメントはチャット本文の中に流れてしまいます。 Canvas はその成果物を会話右側のパネルに固定表示し、 会話を続けながら並行して確認・修正できる機能です。
例えば「この仕様書を元にログイン画面の HTML を作って」と依頼すると、 生成された HTML コードが Canvas として表示され、 ブラウザでのプレビューとソースコードを切り替えながら 「ボタンを青にして」「エラーメッセージを追加して」と反復的に修正できます。
対応するコンテンツタイプ
Canvas が対応する主なコンテンツタイプは以下のとおりです (OpenAI Help: Canvas 参照)。
- コード(Python・JavaScript・TypeScript・SQL 等) — シンタックスハイライト付きで表示・実行
- HTML / CSS / JS — プレビュー可能な静的成果物として編集
- 長文テキスト・Markdown — フォーマット済みドキュメントを編集モードで作業
- 段落・行レベルの編集指示 — 特定箇所だけを直接書き換える指示が可能
使い方の流れ
- ChatGPT にログインし、通常の会話を開始する。
- 「〇〇のコードを書いて」「〇〇の仕様書を作って」など成果物を求めるプロンプトを入力する。
- ChatGPT が Canvas として適切と判断すると、右側パネルに自動的に表示される(明示的に「Canvas で書いて」と指示することも可能)。
- パネル上の「コピー」「ダウンロード」「直接編集」から操作する。
- 会話で追加指示を出す、もしくは Canvas 内の段落を選択して微修正を依頼すると、その場で更新される。
- 書き出して(コピー / ダウンロード)チームに共有する。
Projects との連携
Level 2-5「GPTs / Projects」で解説したとおり、Projects 内で生成した Canvas は 同じプロジェクトの会話をまたいで参照・利用できます。 例えばスタイルガイドを Canvas として保存しておき、 新しい会話で「さっきのスタイルガイドに合わせて」と指示することが可能です。
できること・できないこと
Canvas は ChatGPT が生成したコンテンツを見やすく整理し、再利用性を高める機能です。 コードを直接 OS レベルで実行してシステムを操作する用途は Canvas の範囲外であり、 それは Operator(次レッスン)や Codex CLI が担います。 Canvas はあくまで「生成・確認・共有」の効率化が目的です。
参考: 詳細記事
Canvas を含む ChatGPT の全機能の概要は 「Codex / ChatGPT 完全ガイド」 でも解説しています。
