ChatGPT「canvas」使い方と、Claude「Artifacts」との違いを解説 文章作成やコーディングがスイスイできます
2024年10月3日、OpenAIのChatGPTに追加された、生成された文書や（プログラム）コードを直接編集できる「canvas（キャンバス）」機能を徹底解説 【もっと写真を見る】
2024年10月3日、OpenAIのChatGPTに生成された文書や（プログラム）コードを直接編集できる「canvas（キャンバス）」という新しいインターフェイスが追加された。 現在はベータ期間中で有料ユーザーしか使えないが、終了後には無料ユーザーにも開放されるという。 この記事ではcanvasを使ってできることの基本を紹介していく。 独立したウィンドウで表示される canvasを利用するには、ChatGPTのモデルセレクターで「GPT-4o with canvas（ベータ版）」を選択する。 後はいつも通りプロンプトを書けばよい。canvasは必要な場合自動的に起動するが、念の為「canvasを使用して」と書いておくと確実だ。 画面が自動的に二分割され、左側にチャットウィンドウが、右側にcanvasが起動し、文章が生成された。 チャットウィンドウではいつものように自然言語でChatGPTと会話できる。 canvasには生成された文章が独立して表示される。 生成された文章を自由に編集 ここからが本番だ。これまでもChatGPTで文章は生成できたが、生成された文章を少しだけ変更・修正したい場合は、テキストエディターなどにコピー＆ペーストして編集するか、もしくはそのたびにプロンプトで要望を伝え、一から書き直してもらう必要があった。だが、canvasに表示された文章は直接編集することができるのだ。 やり方もシンプル。編集したい場所にカーソルをもっていき、 単に書き換えるだけでいい。 これだけで修正は完了だ。 範囲指定して修正 もちろんこれだけではない。文書の一部分を選択するとテキスト下部にツールボックスが表示される。 「ChatGPTに質問する」と書かれた部分は小さなチャットウィンドウになっており、自然言語で修正をお願いできる。ここでは「もう少しキャッチーな見出しにして」とお願いしてみよう。 すると一瞬で見出しを書き直してくれた。 なお、左側のウィンドウにもチャット履歴はきちんと記録されている。 ツールボックスには他にもボタンが用意されている。「B」をクリックすると選択した部分が太字に、「I」をクリックすると斜体に、「Aa」をクリックすると見出しレベルを変更できる。 履歴管理も可能 canvas画面の右上にもいくつかアイコンが表示されている。 左向きの矢印は「アンドゥー（元に戻す）」、右向きの矢印は「リドゥー（やり直し）」だ。 アンドゥーを確定するときは「このバージョンに戻す」を、アンドゥーを取り消して修正後のバージョンに戻したい場合は「最新バージョンに戻る」をクリックすればよい。 また、「時計」アイコンをクリックすると変更箇所を見やすく色分けして表示してくれる。 「□」が重なったアイコンをクリックすると生成したテキストをクリップボードにコピーできる。完成した原稿をテキストエディターなどに移す際に便利だ。 役立つツールがたくさん ここまではテキストエディターなどで使える基本的な編集機能だが、canvasはさらにAIならではの便利ツールが多数用意されている。ツールを利用するにはcanvas画面の右下にある「鉛筆＋」アイコンをクリック。 5つのツールボタンが表示された。それぞれの機能を説明していこう。 編集を提案する まずは一番下の「編集を提案する」ツールから。 クリックするとアイコンが鉛筆から矢印に変わるのでもう一度クリック。 すると、ChatGPT（GPT-4o）によって、修正したほうがいいと思われる箇所にアンダーラインが引かれ、右側に内容の提案が表示される。 たとえば「生成AIの背後には「機械学習」と呼ばれる技術があります」の部分には、「この部分に機械学習の簡単な説明を加えると、初心者の読者にとってさらに理解しやすくなります」という提案が表示されている。 提案内容が妥当だと思ったら「適用する」ボタンをクリックしよう。 提案内容を元に「機械学習とは、コンピュータがデータを使って学習し、パターンを見つけ出す技術で、これによりAIが新しい情報を基に判断や生成を行うことができます」という機械学習の簡単な説明が追加された新しいバージョンが生成される。ここからさらに手動で修正することも可能だ。 なお、提案内容を採用したくない場合は「x」をクリックすればよい。 長さを調整する 次は「長さを調整する」ツール。長さとは生成された文章の文字数のことだ。 アイコンをクリックすると画面がスライダーに変化する。 スライダーを上の方に動かすと文字数が増え、 下の方に動かすと文字数が減る。 なお、スライダーを動かすだけではなにも起こらず、動かしてから改めてクリックすることで確定する。 「最短」にしたところ。具体的には文字数が1258文字から626字と、約半分になった。 なお、「最長」にしたところ、2153字と約70％増となった。SNS入力欄の文字数制限などにあわせるときに便利な機能だ。 読解レベル 「読解レベル」は想定読者を指定することで文章の難易度・読みやすさを調整する機能だ。 クリックすると「長さを調整する」機能と同様スライダーに変化する。 スライダーを上に動かすと読解レベルが上がる（難しくなる）。一番上は「大学院」レベルだ。 「大学院」レベルに書き直した文章。文字数も1258文字から2131文字とかなり増えている。 逆にスライダーを下に動かすと読解レベルが下がる。一番下は「幼稚園児」レベルだ。 確かにわかりやすくなったがほとんどの幼稚園児に「機械学習」という漢字は読めないと思う。 最終仕上げを追加する 「最終仕上げを追加する」ボタンをクリックすると、もう一度テキストの文法と一貫性をチェックしたうえで小見出しを追加し、読みやすく整理してくれる。 タイトルと小見出しが追加され読みやすさが増している。 絵文字を追加する 「絵文字を追加する」ボタンをクリックすると、文字通りテキストに適切な絵文字（emoji）を追加してくれる。 ビジネス文書にはそぐわないだろうが、飛び道具としてなら使えるかも。 以上、canvasでテキストを生成・編集する基本的な方法を見てきた。 この例のようにゼロから文章を書いてもらうだけではなく、自分が書いた文章を添削してもらったり、CSVやPDFなどを読み込ませてレポートを作成してもらうといった用途にも使えるだろう。 canvasでコーディング canvasはGPT-4oを使用しているので、通常のテキストだけではなくプログラムコードを書いてもらうこともできる。 プロンプト：canvasを使ってPythonで「神経衰弱」ゲームを作って 単に「神経衰弱ゲームを作って」でも構わないのだが、「canvasを使って」「（言語は）Pythonで」と明示的に書いた方が確実だ。 数秒で下記のPythonコードが完成した。 ただし、canvasはプログラムの実行環境を持っていないので実行するためにはPCにPythonをインストールし、コマンドプロンプト（またはターミナル）で実行する必要がある。詳しい方法はチャットで聞けば教えてくれる。 また、Repl.itやGoogle Colabといったオンラインで利用できるPython実行環境を用意してもいいだろう。 生成されたコードは通常のテキストと同様に直接編集可能だ。 また、コード内の特定の箇所を選択するとチャットウィンドウが表示されるので、 例えば「この関数はなに？」といったように自然言語で質問することができる。 回答はチャットウィンドウの方に表示される。また、同様に「この部分を◯◯のように変更」といった部分的な編集作業も可能だ。 さらに、以下のようなプロンプトを入力することでプログラム学習の教材としても利用することができる。 プロンプト：このコードを超初心者向けに1行目から解説して なお、画面右上にある「アンドゥー」「リドゥー」「変更を表示」「コピー」の4つのボタンはテキストの場合と同様の挙動だ。 テキストとは異なるツール群 canvasでプログラムコードを生成した場合、画面の右下にはテキストの場合と同様に5つのツールを表示するアイコンが表示されるが、ツールの内容はテキストとは異なっている。 コードレビュー まずは「コードレビュー」、これはテキストの「編集を提案する」と同様に、改善点や修正点を指摘してくれるツールだ。 クリックするとコード内の問題のある部分にアンダーラインが引かれ、右側に修正案が表示される。 テキストの場合と同様、内容が妥当だと思えば「適用する」をクリック。無視したい時は右上の「x」をクリックしよう。 なお、テキストと異なり英語で表示されてしまっているが、これもチャットウィンドウで「日本語でレビューして」とでも頼めば日本語に直してくれる。 言語に移植する これは生成されたコードを別のプログラム言語に移植・翻訳するツールだ。 移植可能な言語は「PHP」「C++」「Python」「JavaScript」「TypeScript」「Java」の6つ。ここでは「JavaScript」を選んでみよう。 PythonコードがJavaScriptコードに書き換えられた（ここでは動作検証はしていません）。 なお、このツールで候補として出される言語は上記の6つだが、GPT-4oに質問すると他にもたくさんの言語に対応している。 とは言え、すべての言語間で移植・翻訳が可能なわけではない。 文法・パラダイムの違い、標準ライブラリと機能の違い、サードパーティライブラリなど様々な問題があるため、簡単なアルゴリズムや数学的処理などは比較的簡単に言語間で翻訳できるが、複雑なシステムやフレームワークに依存するコードの翻訳には相応の時間と労力が必要なようだ。 バグを修正する 「バグを修正する」ツールは名前のとおりクリックするとコードのバグを探し修正してくれる。 修正した内容はチャットウィンドウで詳しく説明してくれる。 前述の「コードレビュー」が可読性や保守性などコードの品質を向上させることが主な目的なのに対し、こちらの「バグを修正する」は特定のバグや不具合を修正することが目的だ。 ログを追加する 「ログを追加する」をクリックすると、コード内の各所にデバッグに役立つ標準出力の処理などを挿入してくれる。 下図の赤で囲んだ部分が標準出力の処理だ。「print()」関数を使ってプログラムの進行状況をターミナルなどの標準出力に表示するようになっている。 コメントを追加する 「コメントを追加する」をクリックすると、コード全体に対して複数のコメントを自動で挿入してくれる。コメントを追加することにより、コードを読む際に内容が理解しやすくなる。 赤で囲まれた部分が追加されたコメントだ。Pythonの場合、文頭に「#」の付いた行はコメント扱いとなる。 コメントを日本語にしたい場合も簡単。チャットでお願いすればいいだけだ。 他サービスとの比較 以上、canvasの機能について一通り見てきた。一見するとClaudeが提供している「Artifacts」機能（詳しくはこちら）に似ている部分もあるが、Artifactは生成されたコンテンツを直接ピンポイントで修正することはできない。また、canvasが提供する「文字数」や「難易度」といった便利な調整ツールもない。 一方、canvasにはプログラムを実行する環境がないため生成したプログラムを動かすには追加の手間が必要だ。対してArtifactでは、生成したプログラムをその場でプレビューでき、さらに不特定多数に公開することも可能になっている。 また、AIを使ったコード生成の分野では「Cursor」が人気だ。Cursorは「Visual Studio Code（VSCode）」をベースにしたAI対応のコードエディターであり、プログラマー向けの機能が充実している。 増える一方のAIツール。これからは自分のニーズやスキルに応じて適切なツールを選ぶことがこれまで以上に重要になってくるだろう。 田口和裕（たぐちかずひろ） 1969年生まれ。ウェブサイト制作会社から2003年に独立。雑誌、書籍、ウェブサイト等を中心に、ソーシャルメディア、クラウドサービス、スマートフォンなどのコンシューマー向け記事や、企業向けアプリケーションの導入事例といったエンタープライズ系記事など、IT全般を対象に幅広く執筆。2019年にはタイのチェンマイに本格移住。 新刊発売中：「生成AI推し技大全 ChatGPT＋主要AI 活用アイデア100選」： 文● 田口和裕
