CodexとCanvaの連携
プラグインと、画像をサイトへ反映する流れ

Canvaプラグインでできること（2026年9月24日確認）

OpenAI が公開しているプラグインの一覧（GitHub の openai/plugins）には、Canva 社の Canva プラグインがあります。Canva アカウントをつなぐと、Codex との会話でデザインの作成・確認・修正を頼めると説明されています。

• 今あるデザインの文字や画像の差し替え、書式や配置の調整
• Facebook・Instagram・LinkedIn 向けのサイズ変更
• スプレッドシートのデータから、複数のデザインをまとめて作る

デザインの変更はまず下書きとして行われ、確定する前に確認を求める作りになっています。使えるかどうかは、アカウントやワークスペースの設定で変わります。サイトに置く画像は、プラグインを使う場合も、書き出したファイルの名前と保存場所を決めてから Codex に設置を頼むと確かめやすくなります。

Codex作業でCanvaは何に使える？

Canvaは、サイトロゴ、ヘッダーバナー、カテゴリバナー、記事アイキャッチ、ニュース画像、キャラクター付き説明画像、SNS投稿画像、図解、チェックリスト画像、プレゼン素材などを作る時に使いやすいツールです。

役割を混ぜないことが大切です。素材作成はCanva、HTML/CSS実装はCodex、コード管理はGitHub、公開ファイル反映はCodexやFTP、素材や報告書の保管はGoogleドライブ、というように分けておくと事故が減ります。

ChatGPT・Canva・Codexの役割分担

ロゴ画像を作ってサイトへ設置する流れ

バナーやアイキャッチを作る流れ

記事アイキャッチやホームページバナーは、サイズ、用途、表示ページ、altを先に決めます。Canvaで文字を入れすぎるとスマホで読みにくくなるため、重要な説明はHTML本文にも残します。

• 画像ファイル名を決める
• 保存場所を決める
• 表示したいページと位置を決める
• PC / スマホでの最大幅を決める
• 変更してはいけないSEOタグやsitemapを明記する

図解や説明画像を作る流れ

初心者向けページでは図解が役立ちます。ただし、画像だけに重要情報を閉じ込めると、読み上げや検索、スマホ表示で不利になる場合があります。Canvaで作った図解は補助として使い、重要なテキストはHTML本文にも残します。

画像内の文字は小さくしすぎず、PCでもスマホでも読める大きさにします。公開前に人間が画像内の文字、日付、価格、リンク先を確認します。

Canva素材をCodexへ渡す時の注意

Canva プラグインを使わない場合、CodexがCanva内の画像を直接見られるとは限りません。サイトに置く画像は、PCへダウンロードし、ローカル作業フォルダへ置いてから、ファイル名と保存場所を明確に伝える方が安全です。複数候補がある場合は、画像の特徴も一緒に書きます。

ファイル名と保存場所の決め方

chatgptguide-logo.png
codexguide-logo.png
top-news-banner.png
chatgpt-beginner-eyecatch.png
codex-workflow-diagram.png

CanvaとGoogleドライブ・GitHubの使い分け

Canva素材設置用Codexオーダーテンプレート

Canvaで作成した画像をサイトへ設置してください。

元画像の場所：
使用する画像：
コピー先：
設置するページ：
設置位置：
alt：
PC表示サイズ：
スマホ表示サイズ：
変更してはいけないもの：
確認項目：
停止条件：
報告書形式：

Canvaで作成したロゴ画像をヘッダーに設置してください。

元画像の場所：
最終ファイル名：
コピー先：
リンク先：
alt：
設置範囲：
変更してはいけないもの：
確認項目：