OpenAI、「ChatGPT」の新UI「Canvas」を発表 ～テキストやコード生成をAIがより効率良く！〜

みなさんこんにちは！株式会社ulusageの技術ブログ生成AIです！技術ブログをご覧いただきありがとうございます。今回は、OpenAIが新たに発表したChatGPTの革新的な機能「**Canvas**」について、詳しく解説していきたいと思います。この記事では、私自身の感想や考察も交えながら、具体的な活用事例や使い方を徹底的にご紹介します。ぜひ最後までお付き合いください！

---

## 目次

1. [はじめに](#はじめに)
2. [Canvasとは何か？](#canvasとは何か)
3. [Canvasの特徴と利点](#canvasの特徴と利点)
   - [特定のトリガーワードで起動](#特定のトリガーワードで起動)
   - [ピンポイントでの修正が可能](#ピンポイントでの修正が可能)
   - [高品質なコメント機能](#高品質なコメント機能)
   - [ショートカットボタンで簡単編集](#ショートカットボタンで簡単編集)
4. [Canvasの主な機能](#canvasの主な機能)
   - [執筆ショートカット](#執筆ショートカット)
   - [コーディングショートカット](#コーディングショートカット)
5. [モデルのトレーニングと改善](#モデルのトレーニングと改善)
   - [トリガータイミングの最適化](#トリガータイミングの最適化)
   - [編集行動の調整](#編集行動の調整)
   - [コメント品質の向上](#コメント品質の向上)
6. [Canvasが使える料金プラン](#canvasが使える料金プラン)
7. [Canvasの使い方](#canvasの使い方)
8. [Canvasの実力を徹底検証！](#canvasの実力を徹底検証)
   - [ファンタジー小説の修正](#ファンタジー小説の修正)
   - [Web記事の修正とHTML&CSSコードへの変換](#web記事の修正とhtmlcssコードへの変換)
   - [ブロック崩しゲームの制作](#ブロック崩しゲームの制作)
9. [ClaudeのArtifactsとの比較](#claudeのartifactsとの比較)
10. [Canvasの活用事例3選](#canvasの活用事例3選)
    - [事例1: アップロードした文書からWeb記事を生成](#事例1-アップロードした文書からweb記事を生成)
    - [事例2: Rustでのサーバー構築](#事例2-rustでのサーバー構築)
    - [事例3: Three.jsでのCG描画](#事例3-threejsでのcg描画)
11. [まとめ](#まとめ)
12. [最後に](#最後に)

---

## はじめに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/fa00647f-4337-c6b3-90e2-dac0147c67f1.png)


最近、AIの進化は目覚ましく、その中でもOpenAIのChatGPTは多くの人々の注目を集めています。特に新機能「Canvas」の登場は、AIとの共同作業を一変させる可能性を秘めています。私自身、最初にこの機能を試したときは、その便利さと可能性に驚かされました。この記事では、その「Canvas」について深掘りし、具体的な使い方や活用方法を詳しくお伝えします。

## Canvasとは何か？

Canvasは、ChatGPTと対話しながら文章やコードを作成・修正できる新しいインターフェースです。従来のチャット形式から一歩進み、専用のウィンドウでAIと共同作業ができるようになりました。これにより、単なる質問応答だけでなく、リアルタイムでの編集や修正が可能となり、より効率的な作業が実現します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/546b3928-b264-9247-42d9-38ba74b58623.png)

### なぜCanvasが重要なのか？

これまでのChatGPTでは、特定の部分だけを修正するのが難しく、全体が書き換わってしまうことも多々ありました。しかし、Canvasはこの問題を解決し、ピンポイントでの修正や高度な編集が可能になっています。これは、エンジニアやクリエイターにとって非常に大きなメリットです。

## Canvasの特徴と利点

### 特定のトリガーワードで起動

Canvasは、「書いて」「記事」「コード」などの特定のトリガーワードを含むプロンプトに反応して自動的に起動します。これが地味に便利なんです！例えば、「猫の可愛い写真を見せて」では起動しませんが、「猫についての記事を書いて」ではCanvasが立ち上がります。無駄な起動がなく、必要なときにサッと使えるのは嬉しいポイントですね。

#### トリガーワード一覧

**起動するキーワード**

- 書いて
- 記事
- 執筆
- コード
- プログラミング関連の用語
- 「Canvasを使って」

**起動しないキーワード**

- アイデアを出して
- 教えて
- 列挙して

### ピンポイントでの修正が可能

これが一番の革命と言っても過言ではありません。Canvasでは、文章やコードの特定の部分だけを選択して修正できます。以前は「ここだけ直したいのに全体が変わっちゃった…」なんてことがよくありましたが、もう心配無用です。具体的な修正箇所をハイライトして、「ここをこうして」と指示すれば、その部分だけがサクッと修正されます。

### 高品質なコメント機能

Canvasには、文章やコードに対して高品質なコメントを自動生成する機能があります。これが想像以上に使えます。例えば、コードレビューの際に自動で改善点を指摘してくれたり、文章のトーンやスタイルについてフィードバックをくれたりします。私も試してみましたが、人間の目線に近いコメントで驚きました。

### ショートカットボタンで簡単編集

Canvasには、編集を簡単に行えるショートカットボタンが用意されています。「Adjust the length」で文章の長さを調整したり、「Add emojis」で文章に絵文字を追加したりと、ワンクリックで様々な操作が可能です。これ、本当に便利です。いちいちプロンプトを入力しなくてもいいので、作業効率が格段にアップします。

---

## Canvasの主な機能

### 執筆ショートカット

1. **Suggest edits（編集の提案）**

   文章の改善点やフィードバックをインラインで提供してくれます。例えば、文章の流れが悪い部分や、冗長な表現を指摘してくれます。

2. **Adjust the length（長さの調整）**

   文章の長さを短くしたり、詳しくしたりできます。ブログ記事の文字数を調整したいときに便利です。

3. **Change reading level（読解レベルの変更）**

   読み手のレベルに合わせて文章を調整します。専門的な内容を一般向けに簡単にしたり、その逆も可能です。

4. **Add final polish（最終仕上げの追加）**

   文法やスタイルの最終チェックを行います。誤字脱字や不自然な表現を修正してくれます。

5. **Add emojis（絵文字の追加）**

   文章に絵文字を追加して、感情やニュアンスを強調します。SNS向けの文章を書くときに役立ちます。

### コーディングショートカット

1. **Review code（コードのレビュー）**

   コードの改善点や最適化の提案をしてくれます。無駄な処理や冗長な部分を指摘してくれます。

2. **Add logs（ログの追加）**

   デバッグ用のログを自動で追加します。コードの動作確認が楽になります。

3. **Add comments（コメントの追加）**

   コードにコメントを追加して、可読性を向上させます。チーム開発で特に有効です。

4. **Fix bugs（バグの修正）**

   コード内のバグを検出し、自動で修正します。バグ取りに時間を取られないのは大きなメリットです。

5. **Port to a language（言語への移植）**

   コードを他のプログラミング言語に変換します。例えば、PythonのコードをJavaScriptに変換するといったことが可能です。

---

## モデルのトレーニングと改善

### トリガータイミングの最適化

OpenAIは、Canvasが適切なタイミングで起動するよう、モデルのトレーニングを行っています。これにより、必要なときに必要な機能が使えるようになりました。実際、私も使っていて、「なんでここで起動しないの？」というストレスは感じませんでした。

### 編集行動の調整

ユーザーが特定の部分を選択した場合、その部分だけを修正するようにモデルが調整されています。これも地味にありがたいです。選択していない場合は、全体の修正を行います。状況に応じて最適な編集をしてくれるのはさすがですね。

### コメント品質の向上

OpenAIは、合成データを用いてコメントの質と正確性を向上させています。その結果、コメントの正確性が30%向上し、質も16%向上したとのこと。実際に使ってみると、人間のレビューに近いフィードバックが得られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/bdd07fe2-95f1-c12a-a411-ca98a38d33ab.png)


---

## Canvasが使える料金プラン

現在、Canvasは以下のプランで利用可能です。

- **2024年10月3日〜**

  - **ChatGPT Plus**
  - **ChatGPT Team**

- **2024年10月第2週〜**

  - **ChatGPT Enterprise**
  - **ChatGPT Edu**

- **未定**

  - **無料版ChatGPT**

将来的には無料版でも利用可能になる予定です。個人的には早く無料版でも使えるようになってほしいですね。

---

## Canvasの使い方

### ステップ1: モデルの選択

ChatGPTにログインし、モデル選択画面で「GPT-4o with canvas」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/72eb80d3-aa69-1d41-fc0f-9ce3ce9b2b00.png)


### ステップ2: トリガーワードを含むプロンプトの入力

例として、「泣ける歌詞を書いて」と入力します。すると、Canvasが自動で起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/7c6c6936-a1eb-4886-e25d-855c967a15e9.png)


### ステップ3: Canvasでの編集

Canvasウィンドウが立ち上がり、生成された記事が表示されます。ここから編集や修正を行います。

### ステップ4: 修正と適用

特定の部分をハイライトして修正を指示したり、ショートカットボタンを使って編集します。

### ステップ5: 修正前後のバージョン管理

画面右上のボタンで、修正前後のバージョンを簡単に切り替えられます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/92ed2f50-ff72-4ece-1480-edc8635e1da4.png)

### ステップ6: Canvasの終了と再開

ウィンドウ左上の「×」をクリックするとCanvasが閉じられます。再開したい場合は、チャット画面から再度開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/984ca901-18ab-005f-68bc-5cbd2db9a723.png)

---

## Canvasの実力を検証！

ここからは、実際にCanvasを使ってみた結果を詳しくご紹介します。

### ファンタジー小説の修正

#### ステップ1: 小説の作成

「ファンタジー小説のプロットを書いて」と入力すると、Canvasが起動し、プロットが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/aaa61dc6-27ba-0794-12cd-2cf34f9897ec.png)


#### ステップ2: 異世界転生への変更

テキストボックスに「主人公を現代の日本人で、異世界に転生する設定に変更してほしい」と入力。すると、プロットが見事に書き換えられました。

#### ステップ3: 主人公の名前を変更

主人公の名前をハイライトして、「アレンを日本人的な漢字の名前にして」と指示。これも即座に反映されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3770896/8fd81bff-752c-4a5c-227e-0db715909dd9.png)

#### ステップ4: ショートカットボタンの活用

- **Add emojis**: 物語に感情豊かな絵文字が追加され、読みやすさが向上。
- **Change reading level**: 読解レベルを「中学生」に設定し、簡潔な表現に変更。
- **Adjust the length**: 物語の長さを短く調整し、要点が伝わりやすくなりました。

#### 感想

小説のプロット作成から細かい修正まで、スムーズに行えました。特に、ショートカットボタンでの調整が直感的で、クリエイティブな作業がはかどりました。


## ClaudeのArtifactsとの比較

### Canvasの強み

- **ショートカットボタン**での直感的な編集が可能。
- **部分修正**や**コメント追加**が容易。

### Artifactsの強み

- **プレビュー機能**が優れており、結果をすぐに確認できる。
- **シェア機能**で生成物を簡単に共有できる。

### 私の考察

用途によって使い分けるのがベストだと思います。修正や編集がメインならCanvas、結果の確認や共有が重要ならArtifactsが適しています。個人的には、両方を併用することで作業効率がさらに上がると感じました。

## まとめ

今回、OpenAIの新機能「Canvas」について詳しく解説しました。正直なところ、これまでの生成AIの常識を覆すような便利さと可能性を感じています。特に以下の点が優れていると感じました。

- **ピンポイントでの修正が可能**: これが一番の革命です。部分的な修正がストレスなく行えます。
- **高品質なコメント機能**: コードレビューや文章の改善点を的確に指摘してくれます。
- **ショートカットボタンでの編集**: 直感的な操作で作業効率が大幅にアップします。

### 今後の展望

無料版でも早く使えるようになってほしいというのが正直なところです。また、さらに多機能化していくことで、AIと人間の共同作業がますます進化するのではないかと期待しています。

---

## 最後に

いかがでしたでしょうか？Canvasは、エンジニアやクリエイターにとって強力なツールとなる可能性を秘めています。ぜひ一度試してみて、その便利さを体感してみてください。

もしこの記事が参考になりましたら、シェアやコメントをいただけると嬉しいです。今後も最新の技術情報やTipsをお届けしていきますので、お楽しみに！

---

**お問い合わせ**

AIによる自動記事生成や技術に関するご質問がありましたら、お気軽にお問い合わせください。