CanvasはChatGPTの一部であり、AIが小さなチャットバブルから抜け出し、あなたと共有の編集可能なワークスペースに足を踏み入れることを可能にします。下書き、コード、反復編集、そして共同でのブラッシュアップに最適です。この記事では、最新の製品ニュースと実践的なハウツーを組み合わせ、Canvasを開いてプロのように編集し、実際のワークフローに統合する方法を解説します。具体的な手順、サンプルプロンプト、そしてCanvasに貼り付けてすぐに反復処理できるコードスニペットもご用意しています。
ChatGPT Canvasとは何ですか?
Canvasは、ChatGPT内の編集可能な並列ワークスペースです。単一のチャット返信以上のものを必要とするプロジェクト向けに設計されており、長文の執筆、反復的なコード編集、ドキュメント作成、レンダリングされた出力などに対応しています。Canvasは、チャットバブルで単一の返信を受け取るのではなく、アシスタントと共同で編集できる生きたドキュメントを提供します。バージョン管理、インプレース編集、そして下書きやリファクタリングに適したツールも備えています。この機能は、OpenAIによって執筆およびコーディングプロジェクトのための新しいインターフェースとして発表されました。
キャンバスが重要な理由
- チャットのみのワークフローの「カットアンドペースト」の煩わしさがなくなり、作業は編集可能なキャンバス内で直接行われます。
- 反復処理向けに構築されており、対象を絞った編集、元に戻せるバージョン、コンテキスト プロンプトにより変更が正確になります。
- 下書きと実行可能なコードを橋渡しし、コード、ドキュメント、レンダリングされた出力を一緒に保存できます。
ChatGPT Canvasの使い方 - 作成、編集、反復(ステップバイステップ)
以下は、Canvas セッションを開始し、編集をプッシュし、コードまたはテキストに Canvas を使用するための実用的な段階的なワークフローです。
簡単な前提条件(開始する前に)
- アクティブな ChatGPT アカウント (Canvas の可用性はプランと現在のロールアウトによって異なります。ChatGPT UI を確認してください)。
- サポートされているプラットフォームを使用してください。Web アプリと Windows では Canvas がサポートされています。macOS/モバイルのロールアウトについては、OpenAI ヘルプ ページを確認してください。
- チームでコラボレーションや共有が必要な場合は、共有コントロールの Enterprise/Edu または Team 設定を確認してください。
キャンバスを開く(ステップを作成する)
- ChatGPT (Web またはサポートされているデスクトップ アプリ) を開きます。
- Canvas対応モデルを選択する — 多くのUIでは、これは次のようにラベル付けされています 「キャンバス付きGPT-4o」 or *「Canvasを使ったGPT」*このモデルを選択すると、入力時に要求されたときにChatGPTにCanvas UIを開くように指示します。
- 新しい下書きを開始するか、Canvas の使用を依頼してください。 ドキュメントまたはプロジェクトを作成したいことを示すプロンプトを入力します。たとえば、「X についての 1200 語の記事を書いて、Canvas で開いてください」のように入力するか、既存のドキュメントを貼り付けて「これを Canvas で編集してください」と言います。Canvas が自動的に表示されない場合は、「Canvas を使用」と入力するか、Canvas アイコンがある場合はそれを選択します。
- キャンバスは並列ワークスペースとして開きます。 左側はチャットのまま、右側は下書きやコードブロックを表示する編集可能なキャンバスエリアになります。これで、ドキュメントをインラインで操作できるようになります。
例: 確実にキャンバスを開くプロンプト
I want to draft a technical tutorial on "How to set up GitHub Actions for CI". Create a new document in Canvas with headings, code blocks, and a sample workflow file. Start with an outline.
それを Canvas モデルを選択した状態で貼り付けると、ChatGPT によって Canvas ワークスペースに編集可能なドラフトが表示されます。
Canvas 内での編集 (変更、元に戻す、調整する方法)
Canvas はいくつかの編集パラダイムをサポートしています。
1) 自然言語によるインプレース編集
キャンバスの変更方法をアシスタントに指示する新しいメッセージを入力します。例:「イントロを3文に短くしてください」や「サンプル関数をリファクタリングしてasync/awaitを使用してください」などです。AIはキャンバスを直接変更し、差分または更新されたテキストを提供します。
2) 手動編集
キャンバス内を直接クリックして、他のドキュメントエディタと同じように編集できます。アシスタントに頼らずに細かい調整を行いたい場合に最適です。
3) 置換/挿入/展開コマンド
外科的変更に関するプロンプトを使用する:
- 「第 2 段落を 4 文の要約に置き換えます。」
- 「2 番目のコード ブロックの後に使用例を挿入します。」
これらのコマンドにより、編集の範囲が限定され、追跡可能になります。
4) バージョン履歴と元に戻す
Canvasは編集内容のバージョンを管理しているので、必要に応じて以前の状態に戻すことができます。履歴やスナップショットにアクセスするには、Canvasのツールバーまたはメニューを使用してください。これは、以前の下書きを失うことなく実験を行うために不可欠です。
5) 共有とコラボレーション
Team/Enterprise/Edu ユーザーの場合、Canvas アセットをチャットのように共有できます。レンダリングされたコード、ドキュメント、または Canvas 自体をツールバーから共有できます。これにより、チームメンバーは適切なアクセス制御の下で同じ編集可能な成果物を開くことができます。
実用的な例とコードスニペット(コピー&ペースト可能)
以下は、Canvas に貼り付けてコードの編集、リファクタリング、レンダリングを試すことができる小さな実用的な例です。
例A — リファクタリングするコードスニペット(JavaScript)
これを Canvas に貼り付けて、「この関数をリファクタリングして読みやすくし、単体テストを追加してください」というプロンプトを表示します。
// sample.js - small utility to fetch JSON with retries
async function fetchJson(url, retries = 3) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('bad status');
return await res.json();
} catch (err) {
if (retries > 0) {
await new Promise(r => setTimeout(r, 1000));
return fetchJson(url, retries - 1);
}
throw err;
}
}
export default fetchJson;
Canvas で提供できる編集プロンプトのサンプル:
Refactor this code: add JSDoc comments, increase delay exponentially with each retry, and export a named function. Also provide a small Jest test file.
例 B — 小さな React コンポーネント (貼り付けると、TypeScript に変換するプロンプトが表示されます)
// Greeting.jsx
import React from 'react';
export default function Greeting({ name }) {
return (
<div className="p-4 rounded shadow">
<h2>Hello, {name}!</h2>
<p>Welcome to the demo Canvas project.</p>
</div>
);
}
プロンプトのアイデア:
- 「これを TypeScript に変換して、プロパティ タイプを追加します。」
- 「コンポーネントに /api/greeting から挨拶メッセージを取得させ、読み込み状態を表示させます。」
例C - ドキュメント編集プロンプト(ライティングユースケース)
下書きを Canvas に貼り付けて、次の質問をします。
Tighten the prose, improve transitions, and produce a 200-word summary for the top of the article. Also add two inline citations and a recommended reading list.
実際の使用例とワークフロー
Canvasは様々なシナリオで役立ちます。以下は、個人やチームが実際に使用している具体的なワークフローです。
1) 長文コンテンツ(ブログ記事、レポート)の作成と編集
ワークフロー:
- キャンバスを開いて下書きを貼り付けます。
- ChatGPT に見出しと小見出しに再構成するよう依頼します。
- セクションで「短縮」/「拡張」アクションを使用して、長さとトーンを調整します。
- 最終コピーを CMS にエクスポートします。
Canvas を使用する理由モデルの編集中に記事全体が表示されるため、変更をスムーズに受け入れることができます。
2) 開発者ワークフロー - ラピッドプロトタイピングとデバッグ
ワークフロー:
- 失敗したスニペットを Canvas に貼り付けます。
- 質問:「実行してエラーを表示してください」(または「このトレースバックについて説明してください」)。
- 提案された修正を受け入れて再テストします。
- リファクタリングまたは最適化を反復します。
なぜ Canvas を選ぶのでしょうか? チャットと外部エディターを交互に使用するよりも高速です。特に、小さなスクリプトをデバッグしたり、ドキュメント用のコード スニペットを作成したりする場合に便利です。
3) 教育/説明ワークフロー
生徒と教師は、エッセイ、コード、数学の証明などをCanvasに貼り付け、段階的な説明、簡略化、テスト問題などを尋ねることができます。Canvasでは、必要な部分をハイライト表示して、的確なフィードバックを得ることができます。
4) プロジェクトの下書き + チーム引き継ぎ(プロジェクトと組み合わせる)
CanvasとChatGPT Projectsを組み合わせることで、進行中のプロジェクトの概要、参照ファイル、キャンバスの下書きを一箇所にまとめることができます。プロジェクトはフォルダとして機能し、Canvasはプロジェクト内の作業中のドキュメントとして機能します。この組み合わせにより、イニシアチブ全体で複数のキャンバスを整理できます。
エンドツーエンドの Canvas ワークフローの例 (シナリオ)
目標: 大まかな README + サンプル スクリプトを、洗練されたライブラリ オンボーディング ページと CI テストに変換します。
- ChatGPTを開き、 キャンバス付きGPT-4o.
- README.mdをCanvasに貼り付けます。
sample.jsコード ブロック内の上から。 - プロンプト: 「README をオンボーディングしやすいように書き直し、Getting Started コード スニペットを追加して、Jest を実行する GitHub Actions ワークフローを生成します。」
- Canvas で直接編集内容を確認し、「はじめにを 6 行に短縮する」や「トラブルシューティングに関する FAQ を追加する」などの変更を依頼します。
- 「フェッチをモックし、再試行動作をテストする Jest テストを追加します。」と要求して、サンプル モジュールのテストを生成します。
- README.md、sample.js、テストファイルをエクスポートし、リポジトリにコミットしてCIに接続します。Team/Enterpriseをご利用の場合は、キャンバスを共有して、レビュー担当者が編集可能なアーティファクトを確認できるようにします。
最後のヒント - ヒントと簡単なチートシート
セクションを短縮するように促す
Shorten the selected paragraph to 40–60 words, keep tone professional, and remove passive voice.
コードのリファクタリングを促す
Refactor the code block to be modular; export two functions, add JSDoc, and include a small Jest unit test.
別の形式に変換するように促す
Convert the current Canvas document into a 3-slide presentation outline (title + 2 slides), with speaker notes under each slide.
終わりの思考
Canvasは、会話をチャットバブルから共有・編集可能なワークスペースへと移行します。これは、反復的な執筆やコーディングに特に役立ちます。OpenAIは導入以来、Canvasを着実に改良し、チーム共有とプラットフォームサポートを追加してきました。これにより、個人で制作するクリエイターにも、共同作業を行うチームにも、Canvasは実用的になりました。Canvasを、規律あるプロンプト、小規模な反復編集、そして既存のレビューパイプラインと組み合わせることで、下書き→レビュー→公開というループを大幅に高速化できます。
まず、ChatGPTモデルを調べてみましょう。 GPT-5 プロ の能力 プレイグラウンド そして相談する APIガイド 詳細な手順についてはこちらをご覧ください。アクセスする前に、CometAPIにログインし、APIキーを取得していることを確認してください。 コメットAPI 統合を支援するために、公式価格よりもはるかに低い価格を提供します。
準備はいいですか?→ 今すぐCometAPIに登録しましょう !
