※本記事にはプロモーション（アフィリエイト広告）が含まれています。
このブログの図解・アイキャッチ・noteの見出し画像は、全部AIに作ってもらっています。私はPCを持っておらず、画像編集アプリも使っていません。iPhoneから日本語で「5ステップの図解を作って」と頼むだけで、上の画像のようなものが出てきます。
仕組みは「AIにHTMLで図を描いてもらい、それをブラウザで撮影して画像にする」です。この記事では、その流れ・頼み方の型・実際にやらかした失敗を、開設から2週間あまりで作った46枚分の経験からまとめます。「図解はCanvaで作るもの」と思っている人ほど、読んでみてください。
この記事でわかること
・AIに図解を作ってもらう仕組み（HTML→画像）と、なぜこの方法にしたか
・図解を頼むときの5つの指定と、そのまま使えるプロンプト
・アイキャッチ・比較表・ステップ図・数字入り図の4パターン
・実際にやらかした失敗3つと対処
・自分で作らずに人に頼む場合の目安
先に結論：図解は「絵」ではなく「文字の配置」で作る
ブログの図解に必要なのは、きれいなイラストではありません。「何が・いくつ・どういう順番か」が一目で分かる文字の配置です。それならAIが得意なHTML（Webページを作る言語）で描けます。
結論：図解の中身を箇条書きで渡し、AIにHTMLで描いてもらって画像に変換する。画像アプリを開く場面は1回もありません。修正も「余白を詰めて」「2行目を短く」と文字で頼むだけです。
この方法で作った枚数を数えたら、記事10本目以降だけで本文の図解20枚・アイキャッチ10枚・note用の見出し画像16枚でした。全部同じ型で作っているので、サイズも色もそろっています。
仕組み：HTMLで描いて、ブラウザで撮影する
流れは6つです。黄色の①と④だけが私の仕事で、あとはAIが進めます。
図解ができるまで
①図にしたい内容を箇条書きで渡す（「5ステップ」「3社の比較」など）
②AIがHTML＋CSSで図を描く。サイズ・色・フォントは共通の設定ファイルから読む
③ブラウザを自動操作するツールで開き、決めたサイズで撮影してPNGにする
④できた画像を見て、直したいところを文字で伝える
⑤画像の内容を説明するalt（代替テキスト）を日本語で書いてもらう
⑥WordPressにアップロードして、本文の位置に入れる
私はこれをClaude Code（クロードコード）でやっています。チャットで答えるだけでなく、ファイルを作ったり、ブラウザを動かしたり、WordPressに投稿したりまでしてくれるClaudeの使い方です。ブログの記事執筆から投稿までを任せている話は「Claude Codeでブログ運営を自動化した話」に書きました。図解づくりはその一部です。
なぜ「AIに画像を生成させる」ではなく「HTMLで描く」のか
画像生成AIで図解を作らない理由は3つあります。
HTMLで描く理由
①文字が正確：画像生成AIは日本語の文字が崩れやすい。HTMLならフォントで文字を出すので1文字も間違えない
②修正が文字で頼める：「3番目の説明を短く」と言えばその部分だけ変わる。生成AIは頼むたびに全体が変わってしまう
③サイズと色が毎回そろう：1200×630やサイトのキーカラーを設定ファイルに書いておけば、何枚作っても同じ見た目になる
もうひとつ、このブログではAIイラスト風の画像を使わないと決めています。ココナラの「AI生成イラストは出品禁止」を扱う記事もあるので、文字と図形だけの図解のほうが読者に対して筋が通ると考えたからです。
頼み方：図解をAIに頼むときの5つの指定
「図解作って」だけでも出てきますが、次の5つを伝えると、1回目からブログに貼れるものになります。
| 指定 | 私の設定 | 理由 |
|---|---|---|
| ①サイズ | アイキャッチ1200×630、本文図解は幅1200 | SNSで切れない・スマホで文字がつぶれない |
| ②色 | キーカラー青＋強調の黄＋文字の紺 | サイト全体と統一される。3色あれば足りる |
| ③中身 | 箇条書きで3〜6項目 | 7項目以上は読めない。2枚に分ける |
| ④文字 | 見出しは太く、説明は1行20字前後 | スマホの画面幅で読めるのはこのくらい |
| ⑤alt | 画像の内容を日本語の文章で | 検索エンジンと読み上げに図の中身が伝わる |
そのまま使えるプロンプト
Claude Codeでなくても、ChatGPTやClaudeのチャットにこのまま貼れば、HTMLのコードが返ってきます（画像への変換は後述）。
プロンプト例（ステップ図）
ブログ用の図解をHTMLとCSSで作ってください。
・サイズ：幅1200px、高さは内容に合わせて（800px前後）
・色：背景は薄いグレー、メインは #2f6fed（青）、強調は #ffd166（黄）、文字は紺
・フォント：Noto Sans JP。見出しは太字、説明文は1行20字以内
・内容：「スマホだけでAI副業を始める5ステップ」
1. 無料のAIアプリを入れる／2. 頼み方の型を覚える／3. 商品を決めてサンプルを作る／4. ココナラに無料登録して出品する／5. noteやSNSで発信する
・各ステップは白いカードに番号・見出し・1行の説明
・右下にブランド名「AIワークノート」
・最後に、この画像の内容を説明するaltの文章も日本語で書いてください
ポイントは「役割・目的・条件・出力形式」がそろっていることです。この型はどんな頼みごとにも効くので、詳しくは「プロンプトの書き方入門」にまとめています。
よく使う4パターン
46枚作ってみると、図解はほぼ4パターンに収まりました。パターンが決まっていると、記事を書きながら「これは②の型で」と頼むだけで済みます。
| パターン | 使う場面 | このブログの例 |
|---|---|---|
| ①アイキャッチ | 記事の顔。タイトル＋3つのキーワード | 青背景に白文字、黄色で1語を強調。全記事共通 |
| ②ステップ図 | 手順・始め方 | 「5ステップ」型。上の頼み方の図がこれ |
| ③比較・マップ | 2〜4つの選択肢を並べる | ASP3社比較、スマホ副業の相性マップ |
| ④数字入り | 実録・成果報告 | 「note18本・ビュー327」のような数字を大きく |
④の数字入りは、noteの見出し画像でも一番効きました。一覧に並んだときに「9日」「16記事」のような数字が目に入ると、実録だと一目で伝わります。noteでの結果は「noteからブログに人を呼ぶ方法」に書きました。
実際にやらかした失敗3つ
失敗①：画像の下に大きな余白ができた
比較図を作ったとき、高さを大きめに指定しすぎて、下3分の1が空白になりました。原因は高さを数字で決め打ちしたこと。対処は「余白を詰めて」と一言。高さを内容に合わせて縮めてもらえば直ります。高さは決め打ちせず「内容に合わせて」と頼むのがコツです。
失敗②：注釈と本体が重なった
フロー図の下に「黄色＝人間がやること」という注釈を入れたら、カードと文字が重なりました。今度は高さが足りなかったパターンです。できた画像は必ず自分の目で見る。AIは「できました」と言いますが、重なりは見ないと分かりません。
失敗③：サーバーのセキュリティ機能に画像のアップロードを止められた
画像をWordPressに自動でアップロードする仕組みを作ったら、レンタルサーバーのWAF（不正アクセスを防ぐ機能）が「攻撃」と誤検知してブロックしました。対処は、サーバーの管理画面でWAFを一時的にOFFにして作業し、終わったらONに戻す。知らないと「なぜ失敗するのか」で時間が溶けるので、先に覚えておいてください。
Claude Codeを使わない場合はどうする？
HTMLを書くところまでは、ChatGPTやClaudeのチャットでもできます。違うのは「画像に変換する」工程です。
| 環境 | 画像にする方法 | 向き不向き |
|---|---|---|
| PCがある | 返ってきたHTMLをファイルに保存してブラウザで開き、スクリーンショットを撮る | 手作業だが無料でできる。サイズを毎回そろえるのが少し面倒 |
| スマホだけ | Claude Codeにブラウザの撮影まで任せる | 私はこれ一択。撮影・alt・アップロードまで自動 |
Claude Codeは名前のせいで「プログラマー向け」に見えますが、私はプログラミング未経験です。何ができるかは「Claude Codeとは？非エンジニア向け解説」で説明しています。
自分で作らない選択肢：人に頼む目安
「AIとのやり取り自体が面倒」「ブランドイメージに合う絵がほしい」という人は、ココナラで図解やアイキャッチを頼む選択肢もあります。文字と図形の図解は、この記事の方法で自分で作り、イラストやロゴなど人の手が要るものだけ外注するのが、私の考える使い分けです。
ココナラで外注するときの頼み方と落とし穴は「ココナラでAI記事作成を外注する方法」に書いています。記事の話ですが、依頼文の書き方は画像でも同じです。
＼ 登録も出品依頼も無料 ／
よくある質問
Q. HTMLが読めなくても大丈夫？
A. 大丈夫です。私はHTMLを1行も書いていません。読むのは「できた画像」だけで、直したいところは日本語で伝えます。コードは見なくていい、と割り切ってください。
Q. 図解は1記事に何枚入れている？
A. アイキャッチ1枚＋本文の図解2枚が基本です。「結論の図」と「手順の図」の2枚があれば、記事の要点は画像だけでも伝わります。それ以上は増やしていません。
Q. フォントは何を使っている？
A. Googleが無料で公開している「Noto Sans JP（Noto Sans CJK JP）」です。太さの種類が多く、日本語がきれいに出ます。設定ファイルに1回書いておけば、全部の図解に同じフォントが使われます。
Q. 画像生成AIはまったく使わない？
A. 図解には使いません。文字が崩れるのと、修正のたびに全体が変わるのが理由です。写真風の素材が必要な記事が出てきたら、そのときは別の使い方を考えます。
まとめ：図解は「頼み方」でほぼ決まる
この記事のまとめ
・図解は絵ではなく「文字の配置」。AIにHTMLで描いてもらい、ブラウザで撮影して画像にする
・頼むときは「サイズ・色・箇条書きの中身・文字の太さ・alt」の5つを指定する
・型は4つ（アイキャッチ・ステップ・比較・数字入り）で足りる
・できた画像は必ず自分の目で見る。余白と重なりはAIには分からない
・イラストやロゴなど人の手が要るものだけ外注する
図解が入ると、記事の読みやすさが変わります。まずは上のプロンプトを1回コピーして、AIに投げてみてください。返ってきたものを見て「ここを直して」と言うところから、全部始まります。
コメント