【OpenAIのChatGPT新機能Canvas】ClaudeのArtifactsとの比較、概要、料金まで徹底解説
WEELメディア事業部AIライターの2scです。
みなさん！OpenAIが発表したChatGPTの新機能「Canvas」は、もう使いましたか？
このCanvasは、生成したコンテンツを微修正できる便利機能！OpenAI曰く、「生成AIのマルチモーダル化に匹敵する革命」なんだそうです。
さらに最新（2024年10月18日）のアップデートでは、「Show changes」アイコンを使って、文章やコードの修正前後の変化を簡単に確認できるようになりました。この機能のおかげで、編集作業がますます効率化されています！
実際すごくて、JavaScriptの知識がない筆者でも、Canvasを駆使すれば以下のようなゲームが作れてしまいます。
当記事では、そんなCanvasを徹底解剖！そのすごいところや使い方、実際に使ってみた様子まで余すところなくお伝えしていきます。
完読いただくと、ChatGPTでのライティング&コーディングがますます捗っちゃうかも……
ぜひぜひ、最後までお読みくださいね！
OpenAIが送るChatGPTの新機能「Canvas」とは？
2024年10月3日（米国時間）にOpenAIは、ChatGPTの最新機能「Canvas」のベータ版を発表しました！このCanvasは、生成した文章・ソースコードの気になる箇所を指定してピンポイントで修正ができる便利機能。Claudeの「Artifacts」と同じように、専用のウィンドウからコンテンツに微修正が加えられます。
そんなCanvasの詳しい仕様・特徴は……
- GPT-4oをベースにOpenAIが独自開発した合成データで、効率よくトレーニング済み
- モデル欄から「GPT-4o with canvas」として利用可
- 「記事」「書いて」「コード」等のトリガーワードに反応して起動
- 指定箇所にターゲットを絞った修正が可能
- コンテンツ全体を俯瞰して、高品質なコメント生成も可能
- 「Show changes」アイコンから修正前後のバージョンを復元可能
- 「絵文字の追加」「文章量の変更」「バグの修正」等のショートカットボタンも利用可
- ChatGPT PlusとTeamから順次公開（今後は無料含む他プランでも利用可能に）
以上のとおり。Canvasはこれまで生成AIのネックだった「コンテンツをピンポイントで修正できない」という点を見事、克服しています。OpenAI曰く、これはマルチモーダル化（GPT-4V）に匹敵する進化なんだそうです！
OpenAI・ChatGPTの「Canvas」のすごいところ
まずは、OpenAIが自信を持って送り出す文章&コード編集機能「Canvas」のすごいところを4点ご紹介します。以下、起動時のギミックから詳しくみていきましょう！
特定のトリガーワードで起動できる
Canvasはモデル選択後、特定の「トリガーワード」を含む命令にだけ反応して、自動で立ち上がります。具体的には「猫の記事を書いて」というプロンプトでは起動しますが、「猫の可愛いところを挙げて」というプロンプトでは起動しないといった調整がなされているのです。他のトリガーワードの例としては、下記が挙げられます。
- 書いて
- 記事
- 執筆
- ソースコード
- Canvasを使って（過去のチャットにも適用可）
- その他、プログラミング系全般
…etc.
- アイデアを出して
- 教えて
- 列挙して
…etc.
この機構の実現にあたってOpenAIは、あえてトリガーワードへの反応性を鈍くする調整をGPT-4oに加えています。間違いなく適切なトリガーワードにだけ反応できるようにした結果……
以上のとおり、Canvasを備えたGPT-4oは素のモデルよりも正確な反応が可能になりました。執筆タスクでは83％、コーディングタスクでは94％も反応精度がUPしています。
任意の箇所にだけ修正が加えられる
これまで、ChatGPTで生成したコンテンツの修正については運任せな部分もありました。「気になる部分だけ修正しようとすると、コンテンツ全体が別のものに書き変わってしまった……」という経験は、ChatGPTユーザーなら誰しもが味わっているはずです。
ですが、もう大丈夫！今回登場したCanvasなら、プロンプトで指定した箇所だけをピンポイントで修正できるようになっています。
OpenAIによると……
修正箇所を明記して部分修正を命じた場合、Canvasを備えたGPT-4oは素のモデルよりも18％増しで適切な修正ができるとのこと。実際に、Canvasで修正箇所を示してみると……
以上のとおり完璧です。物語の第一章だけを書き換えたり、主人公の名前だけを書き換えたりといった修正ができてしまいます。
高品質なコメントが添えられる
Canvasは文章の改善点を示したり、ソースコードにコメントアウトを添えたりといったコメント機能も完備。コンテンツ全体を俯瞰して、正確かつ高品質なコメントが添えられるようになっています。
このコメント機能についても、OpenAIの工夫が光ります。コメントを改善するには学習データを用意する必要があるのですが、OpenAIは大胆にもOpenAI o1による合成データを学習に使用。コスト・工数を抑えながらも、コメントの品質改善に成功しました。
そんな企業努力の結果……
Canvas搭載のGPT-4oでは素のモデルよりも、コメントの正確性が30％UP・質が16％UPしています。
編集時にショートカットボタンが使える
Canvasではプロンプトによる修正のほかに、「ショートカットボタン」を押すだけの簡易修正も可能。OpenAIは以下のとおり、文章生成時とソースコード生成時のそれぞれで、5種類のショートカットボタンを用意してくれています。
- Suggest edits：文章にマーカーを引いて提案やフィードバックを提供
- Adjust the length：文章の長さを短縮or延長
- Change reading level：読解レベルを「幼稚園 / 中学校 / 高校 / 大学 / 大学院」で調整
- Add final polish：文法やわかりやすさ、一貫性をチェック
- Add emojis：文章全体に適切な絵文字を追加
- Review code：コードにマーカーを引いて改善案を提供
- Add logs：ログ（Print関数など）を追加し、コードのデバッグ・読解を補助
- Add comments：コードを読みやすくするためのコメントアウトを追加
- Fix bugs：バグ・問題のあるコードを検出して修正
- Port to a language：コードをJavaScript / TypeScript / Python / Java / C++ / PHPに変換
これなら、あまり深く考えなくてもいいコンテンツが作れる……かもしれませんね！
なお、最強のコード生成AIについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
OpenAI・ChatGPTの「Canvas」が使える料金プラン
ChatGPTの超便利機能・Canvasですが、リリースは有料プランから順番に行われる予定です。OpenAIの発表によると、各プランでのCanvasのリリース日時は……
- 2024年10月3日〜
- ChatGPT Plus
- ChatGPT Team
- 2024年10月第2週〜
- ChatGPT Enterprise
- ChatGPT Edu
- 未定
- 無料版ChatGPT
以上のとおり。ゆくゆくは無料プランでもCanvasが使えるとのことで、今後に期待ができそうです！
なお、ChatGPTの有料プラン・Teamについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
OpenAI・ChatGPTの「Canvas」の使い方
ここでは、OpenAIが送るChatGPTの新機能・Canvasの使い方を画像付きでお伝えしていきます。
では早速、ChatGPTのホーム画面に有料アカウントでログインしてみましょう。すると……
このように、お馴染みのホーム画面が現れます。
ここでチャット右上のモデル名（今回はChatGPT 4o）をクリックしてみてください。すると……
このように、GPT-4oの下に「GPT-4o with canvas」が表示されているはずです。こちらをクリックすると、Canvasが使えるようになります。
あとは、トリガーワードを含むプロンプトをいつものテキストボックスに入力するだけ。今回は試しに「泣ける歌詞を書いて」と入力してみましょう！
するとこのように、Canvas機能のウィンドウが自動で立ち上がります。ここから画面左下のテキストボックス、あるいは画面右下のショートカットボタン（青枠部分）を介しての修正が可能です。
続いては、テキストボックスに「もっとヘビメタっぽい歌詞で」と入力してみます。すると、ウィンドウ中のコンテンツが書き変わって……
以上のとおり、修正が反映されました。ここでは、画面右上のボタン（青枠部分）から「修正前への復元」「修正後への復元」「コンテンツのコピー」も行えます。
ちなみに、Canvas機能を終了したい場合は、ウィンドウ左上「×」のクリックでウィンドウが閉じられます。そして、Canvas機能を再開したい場合は……
該当するチャットから縮小表示されているウィンドウ右上（青枠部分）をクリックするだけでOKです。
OpenAI・ChatGPTの「Canvas」の実力を徹底検証！
さて、ここからはみなさんお待ちかねの実験パートです。今回はChatGPTの新機能・Canvasを使って……
- ファンタジー小説の修正
- Web記事の修正とHTML&CSSコードへの変換
- ブロック崩しゲームの制作
- Claude「Artifacts」との比較
以上4点の検証を行なっていこうと思います。ではでは、ファンタジー小説の修正から試していきましょう！
ファンタジー小説の修正
まずは、Canvasでのライティングを検証！ChatGPT上でファンタジー小説を制作・修正してみます。
その前に、Canvasが正確にトリガーワードを拾えるかどうかだけ、確かめておきましょう！試しにトリガーワードを含まない命令「ファンタジー小説のアイデアを出して」をChatGPTに入力してみると……
以上のとおりお見事！Canvasは起動しないでいてくれます。
続いてアイデアのうちの1つ「忘れられた王国の影」で草案を書いてもらうと……
こちらも上出来。Canvasが自動で立ち上がって、草案がウィンドウに表示されました。
さて今度は本題、Canvasでの修正を検証していきます。物は試しということで、ChatGPTが生成してくれた物語を異世界転生物に変えていきましょう！「主人公は21世紀・現代の日本出身で異世界転生したことにしてほしいです」と入力してみると……
以上のとおり、パーフェクト。第一章が異世界転生の流れに修正されました！
続いては、主人公の名前を変えてみます。変えたい箇所（今回は主人公の名前）をマウスで範囲指定して、「Ask ChatGPT」をクリックしてみると……
このようにテキストボックスが現れました。あとは「アレンを日本人的な漢字の名前にして」と入力するだけでOKです！
今度は、ショートカットボタンでの修正も試していきます。ショートカットボタンの出し方は……
以上のとおり、画面右下の鉛筆マークにマウスカーソルを合わせるだけOKです。
では早速、一番上のボタン「Add emojis」をクリックしてみましょう！すると……
このように、絵文字マシマシの草案が返ってきます。
続いて、一番下のボタン「Suggest edits」もクリックしてみると……
お見事！ChatGPTが英語のコメントを添えてくれました。
このコメントを和訳してもらうと……
以上のとおり、わかりやすい改善案が返ってきていますね。これは「OpenAIの発表内容に偽りなし」といえるんじゃないでしょうか。あとは、採択したいコメントにカーソルを合わせて「Apply」を押すだけで、ChatGPTが勝手に内容を修正してくれます。
さて、残りは駆け足で紹介！「Change reading level」で難易度を中学生レベルにして、「Adjust the length」で内容をより短くするには……
それぞれ、ショートカットボタンを押した後にスライダーを動かすだけでOK。こちらも適用しました。
最後に「Add final polish」で文法・一貫性チェックを実施し、テキストウィンドウに「Wordで出力」と入力してみると……
お見事です！完成した文章が、Wordファイルとしてダウンロードできるようになりました。
気になる成果物は、というと……
以上のとおり、ちょうどいい長さの異世界転生物になっています。絵文字が消えているのは残念ですが、それ以外は文句なしです。
Web記事の修正とHTML&CSSコードへの変換
続いては、Canvasを使って生成した文章を1枚のWebページに収めてみます。手始めに「チョコレートに関するweb記事」と、ChatGPTに入力してみると……
以上のとおりCanvasが立ち上がりました。
ここから、ショートカットボタン「Adjust the length」で内容を最短にしてみると……
このように、内容が簡潔になります。
今度は「WEELチョコレート」のPR記事に修正していきます。テキストウィンドウから要望を伝えたあと、「Change reading level」から内容を高校生レベルにしてみると……
お見事！読みやすいPR記事が返ってきました。
ここからさらに、「Suggest edits」での提案を反映したり、一部内容を表に起こしたりしてみました。その結果は……
以上のとおり完璧。こちらをWebページに使いましょう！
それでは、生成した記事をHTMLファイルに変えながら、挿入画像も生成してもらいます。ChatGPTに命令してみると……
このように、CanvasでもDALL-E3が起動して画像生成ができました！お見事です。
最後に、完成したHTMLコードをファイルにまとめていきます。ダウンロードする旨をChatGPTに伝えると……
以上のとおり、ダウンロード用のリンクが出現。こちらを押すだけでダウンロードができます。
さて、肝心のWebページはというと……
最高の仕上がりです！記事本文はもちろん、画像・表・リンクボタンも本格的なPR記事のものになっています。これなら、企業の広報にもChatGPTが使えちゃうかもしれません。
ブロック崩しゲームの制作
次は趣向を変えて、Canvasでのコーディングも試していきます。今回は「萌えイラストを使ったレトロなブロック崩しゲーム」をChatGPTに作ってもらいましょう！
手始めに、ChatGPTに「ブラウザで遊べるブロック崩しゲーム」を注文してみます。すると……
このように、Canvasが起動してコードが返ってきました。
早速、このコードをHTMLファイルとしてダウロードした後、ブラウザで起動してみます。気になる結果は……
お見事です！ブロック崩しゲームになっています。
ただ、萌えイラストを表示させるにはゲームの枠が狭すぎます。ということで、ゲームの枠を広くして、ついでにブロックの色もコバルトブルーに変えちゃいましょう！
するとこのように、修正が加わります。
この修正後のコードをダウンロード&起動してみると……
命令は反映されていますね。ただ、左上に寄っているブロックが気になります。それと、クリアした後の話ですが、何も表示されないのが残念です。
ということで、「ブロックの追加と再配置」「ゲームクリア&ゲームオーバー時のメッセージの追加」をぞれぞれ、ChatGPTに頼んでみましょう！
こちらも修正後のコードを起動してみると……
完璧です。クリア時には「Congratulations！」が、ゲームオーバー時には「GAME OVER」がそれぞれ、表示されています。ブロックも中央に再配置されていて、文句なしの仕上がりですね。
あとは、以下の修正も実施して、背景の萌えイラストが映えるようにしました。
- ゲーム枠外の色を白から黒に変更
- 背景画像追加用のコードを加筆
- 背景の透かしを白から透明に変更
そして、肝心の萌えイラストは……
このように、DALL-E3で用意しています。
最後に、ショートカットボタン「Fix bugs」を押してデバッグをしてみると……
お見事！ChatGPTは、クリア&ゲームオーバー時のメッセージの無限ループを解消してくれました。
さて、完成したHTMLコードと画像をダウンロード&起動してみます。気になる結果は……
見事、往年のアーケードのような風情あるブロック崩しゲームが完成しました。これなら、個人のゲーム制作が捗りそうですね。
ちなみに、このゲームはショートカットボタン「Add logs」を適用済み。右クリックで「検証」を選択してConsoleを覗いてみると……
このように、ログが表示されます。（左側がログなし / 右側がログあり）
Claude「Artifacts」との比較
最後に、ChatGPTのライバル・Claudeの類似機能「Artifacts」もお見せします。Canvasと比較してみましょう！
手始めに、「ブロック崩しゲーム」をClaudeに注文してみると……
このように、ゲームのソースコード（JavaScript）が返ってきました。
続いては、こちらをブラウザで遊べるようにするためのHTMLコードも生成してもらいましょう。気になる結果は……
このように、ChatGPT以上に親切！Canvasにない「プレビュー」が生成されて、その場でゲームが試せるようになっています。
しかも、プレビュー右下の「Publish」をクリックすると……
以上のとおり、プレビューのシェアまでできちゃうんです。
ちなみに、シェアしたプレビューは……
このように閲覧が可能。確認しながらコンテンツを修正したい場合は、Canvasよりも圧倒的にArtifactsがおすすめです。
さて、ChatGPTのCanvasとClaudeのArtifactsの魅力をそれぞれまとめると……
● ChatGPTのCanvasは「ショートカットボタン」が魅力で、修正が楽
● ClaudeのArtifactsは「プレビュー」が魅力で、修正後の確認が楽
以上のとおり。使い分け方は好みの問題になるでしょう。
OpenAI・ChatGPTの「Canvas」の活用事例3選
最後に、X（旧Twitter）でバズっていたCanvasの活用事例を3つご紹介します。まずは、本家・OpenAIの投稿から、詳しくみていきましょう！
活用事例1.アップロードした文書からWeb記事を生成
OpenAIは、CanvasでのWeb記事の制作事例をXに投稿しています。気になるその内容は……
キャンバスは別ウィンドウで開き、あなたとChatGPTが並んでアイデアを練ることができます。
キャンバスでは、ChatGPTが編集を提案し、長さを調整し、読みのレベルを変更し、インラインフィードバックを提供することができます。また、キャンバスに直接書き込んで編集することもできます。
以上のとおり、アップロードした文書からWeb記事を制作するというデモ動画です。動画中では「Suggest edits」で修正案を出したり、「Reading level」を大学生レベルに変えたりとショートカットボタンを駆使しています。
これなら、各種資料作成も楽チンなはず。みなさんもぜひぜひ、真似してみてください！
活用事例2.Rustでのサーバー立て
同じくOpenAIは、コーディングのデモ動画も公開中。「プログラミング言語・Rustを使ってサーバーを立てて」という命令で、各機能を紹介しています。元の投稿は、以下をチェックしてみてください！
コードを書くとき、canvasを使えばChatGPTの変更を簡単に追跡し、理解することができます。
また、コードのレビュー、ログやコメントの追加、バグの修正、JavaScript や Python などの他のコーディング言語への移植も可能です。
こちらでも、「Code review」での提案や「Add comments」でのコメントアウトなどなど、ショートカットボタンが大活躍していますね。これからは、仕事道具もゲームもCanvasで作る時代……なのかもしれません。
活用事例3.ThreeJSでのCG描画
最後に、OpenAI以外のCanvasの活用事例も1つだけご紹介します。以下の投稿者はCanvasを使って、CG用JavaScriptライブラリ・ThreeJSでの「正八胞体（四次元の立体図形）」の描画を試みています。その結果は、というと……
ChatGPTの新しいキャンバスインターフェイスはゲームチェンジャーです。ThreeJSでテッセラクト/ハイパーキューブのビジュアライザーを作るのに使ったところだ。
チャット、インラインコメント、そしてGPT-4oがコードに魔法をかけるのを見るという、統一されたUXが気に入っています。古くならない。
クロードアーティファクトは今、真剣な競争相手を持っている。）
以上のとおり完璧。Canvasで微調整したコードは見事、宇宙空間に正八胞体が浮かぶ様子を描画できています。
なお、3Dモデル生成ができるAIモデルについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
OpenAIの「Canvas」で、生成も修正も思うがまま
当記事では、OpenAIが送るChatGPTの便利機能「Canvas」をご紹介しました。
Canvasなら、これまでのChatGPTでは難しかった生成コンテンツの微修正が可能です。具体的には……
- 特定のトリガーワードで起動できる
- 任意の箇所にだけ修正が加えられる
- 高品質なコメントが添えられる
- 編集時にショートカットボタンが使える
以上の仕様で、意のままに文章&ソースコードが修正できます。
使い方によりますが、Canvasなら小説や記事はもちろん、凝ったWebページやブラウザゲームまで楽々作れる……かもしれません。みなさんもぜひぜひ、お試しください！
生成系AIの業務活用なら！
・生成系AIを活用したPoC開発
・生成系AIのコンサルティング
・システム間API連携
最後に
いかがだったでしょうか？
弊社では、
・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発
などの開発実績がございます。
まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。
「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。
セミナー内容や料金については、ご相談ください。
また、大規模言語モデル（LLM）を対象に、言語理解能力、生成能力、応答速度の各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。
