Codex作業でCanvaを使う方法

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へ渡す時の注意

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：
設置範囲：
変更してはいけないもの：
確認項目：