九保すこひです（フリーランスのITコンサルタント、エンジニア）
さてさて、Claude Codeは工夫すれば多方面で活用できることがわかり、プログラムを始めたことのようなワクワク感を感じてる今日この頃です。
ちなみに、ブログのメイン画像もそうですが、最近は生成AIに丸投げっていう人も多いんじゃないでしょうか。
ただ、きっとみんな感じてることを大きな声で代弁します。
画像つくった後、微調整むっっず！！！
そうです。ChatGPT、Claude、Geminiどれも画像は作れるものの、一発で思いどおり画像が出てくるわけじゃありません。
だから、細かく指示をするわけですが・・・・・・
そうじゃねぇぇぇ！！！
何回言えばわかるんやあ😡
ってなることありませんか？
もちろんフォトショップだったり、イラストレーターのように「レイヤー（画像が重なる）構造」をもったファイルをくれればいいんですが、まだ対応してないんですね。
※2026/09/08 現在の話です
そこで！今回は、この問題をClaude Codeで解決するテクニックです。
次のような方は最後まで読んでくださいね！
- 「生成AI画像、タイトルが微妙にずれる・・・（なおせ😡）」
- 「ここだけ、シャドウとか明るさ調整したいのに…😅」
- 「イラストを足したいのに、重なりが表現できねぇ😨」
- 「フォトショ、イラレ高すぎワロタ…無料でぷりーず😂」
- 「過去の画像を参考にして、似た画像、AIでつくれん？🙏」
「狭い町内なのに、
同じEVトゥクトゥクとすれ違った！
気がついたら、👍してた」
目次
答えは、SVG画像でした。
SVG画像っていうのは、簡単に言うと
- データを使った画像（拡大しても劣化しない。illustratorもベクター形式）
- 中身は（HTMLみたいな）タグで記述されてる。
というものです。
たとえば、こんな感じ。
※サンプルなので、この画像自体はpngです。
見た目は普通の画像ですね。
でも、テキストエディタで開くとこうなります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<!-- 顔の土台（黄色の円） -->
<circle cx="50" cy="50" r="45" fill="#FFD700" stroke="#E6B800" stroke-width="2" />
<!-- 左目 -->
<circle cx="35" cy="40" r="5" fill="#333333" />
<!-- 右目 -->
<circle cx="65" cy="40" r="5" fill="#333333" />
<!-- 口（円弧を描くpathタグ） -->
<path d="M 30 60 Q 50 80 70 60" fill="none" stroke="#333333" stroke-width="5" stroke-linecap="round" />
</svg>
色とか形、サイズが詰まってますね。
そして、ほぼHTMLなので、Claude Codeで作れそうですよね。
InkscapeならSVG画像を編集できる
そして、SVG画像は、とある有名なソフトウェア（無料）で編集できます。
それが・・・・・・Inkscape（いんくすけーぷ）です。
- Windows
- macOS
- Linux
すべての環境に対応してます（GPLのオープンソース。2026/09/08 現在）
ホントは長年使ってるGIMPが良かったんですが、レイヤーの重なりを再現できませんでした😢
Claude Codeで、どうやってSVG画像をつくる？
シンプルに、
- 過去の画像（SVGである必要はない）
- 素材
- これからどんな画像がほしいか
の3点をClaude Codeに渡してやればいいわけです。
なので、私はブログのアイキャッチ画像をつくるため、以下3つのフォルダを用意しました。
- eye-catch-images：気に入ってるアイキャッチ画像（pinterest.comで見つけてきてもいいかも）
- images：素材（任意 ※）
- results：SVGを出力するフォルダ
※私のブログではアイキャッチ画像に以下のようなイラストを入れているため。もしこういう画像が不要でしたら、imagesフォルダも不要です。
つまり、こんな感じです。
アイキャッチ画像フォルダ：
イラストフォルダ：
Claude CodeにSVG画像をつくってもらう
では実際にプロンプト（スキル）をつかって、Claude Codeに指示をします。
実際の「Skill.md」はWordPaveで公開中！
【Claude Code】WordPressのアイキャッチ画像
※「スキルとして保存する」をクリックでDLできます。
でも！やっぱり微調整は必要（デザイン4原則を10分で解説）
で、この前 【Claude + MCP】個人サイトのルーティーン（コピペ）作業を完全自動化した話 のアイキャッチ画像をClaude Codeでつくったのがこちら。
もちろん、これでもわるくはないんですが、デザイン4原則を考えるとずれてる部分があるので、Inkscapeで修正します。
まずは完成形。
デザインのプロからしたら「うーん…」という部分もあるでしょうが、さっきより改善してませんか？🤔
では、修正した部分を紹介します。
1：近接
似たブロックは近づける（空白を開けてグループ化する）
2：整列
見えない線をあわせました。机の整理整頓と同じです。
3：反復
繰り返し。よりテンポがでるように矢印を小さくしました。
4：対比
同じサイズのものが続くと見にくいので、大きいものと小さいものをつくる。
あとは、星やあしらい、背景など微調整して完成です！
おわりに
ということで、今回のテクニックをつかえば「うわー、明らかにAIで作った画像やん…」とは思わせない作品づくりができますね！
AI時代に「逆にAIっぽさを消す」というのは1つの戦略だと思います。
たとえば、Geminiがつくった画像は調べれば高い確率でバレます。
ピクセルパターンに「すかし」が入っているそうです。
なので、AIやGoogle検索からしても「あー。AIでつくったね、はいはい」みたいに評価を下げる時代がくるのかもしれません（もう来てる？🤔）
つまり、「どこにAIを使うか？」だけじゃなく「どこにAIを使わないか？」も、重要だと思うわけです。
私も「AIが言ってるし、いっか！」みたいに流されそうになることがありますが、危険なタイミングだと思います。
ぜひみなさんも「AIと手動のバランス」を検討してみてくださいね。
ではでは〜❗
「和歌山の有名クラフトビール店が
大阪に直営店つくってた。
さすがのウマさ🍺」
