ClaudeとInkscapeワンライナーで作る簡易バナー

Posted at 2026-08-11

この記事は約5分で読めます

対象読者

こんな方には向きません

TL;DR

Claude Codeに「social-preview.svg作れ。絵文字はTwemojiベクター」と指示するだけで、Twemojiを使ったSNSシェア用バナーのSVGが生成できます
生成したSVGは、Inkscapeのコマンドライン一行でPNGに変換できます
スラッシュコマンド化しておけば、記事やリポジトリごとに毎回同じ手順を打たずに済みます

~/.claude/skills/make-social-preview/SKILL.md に、以下のようなカスタムコマンドを用意します。

~/.claude/skills/make-social-preview/SKILL.md

---
name: make-social-preview
description: social-preview.svg作れ。絵文字はTwemojiベクターにしろ
---

social-preview.svg作れ。絵文字はTwemojiベクターにしろ

これをコマンドとして呼び出すと、Claude Codeがsocial-preview.svgを生成してくれます。

使用例：Claude Codeのプロンプトとして入力する

/make-social-preview

ポイントは「絵文字はTwemojiベクターにしろ」という一文です。Twemojiには公式のGitHubリポジトリなどにSVGファイルが公開されており、Claudeに公開されているTwemojiのSVGベクター画像を参照させる狙いです。

絵文字をフォントとして配置すると環境によって表示される字形が変わってしまいます。あらかじめTwemojiのSVGパスとして埋め込んでおくことで、InkscapeでPNG化したときも絵文字が環境依存のフォント絵文字にすり替わらず、意図した見た目のまま出力されます。

作例

図1：拙作「lighthouse-badges」のOGP画像

図2：拙作「TsumiQiita」のOGP画像

生成されたsocial-preview.svgは、Inkscapeのコマンドラインから次の一行でPNGに変換できます。

SVGをPNGへ変換するワンライナー

"C:\Program Files\Inkscape\bin\inkscape.exe" `
  --export-filename=social-preview.png `
  --export-type=png `
  social-preview.svg

--export-filenameで出力先ファイル名を、--export-typeで出力形式を指定しています。Inkscapeを開いてGUIから書き出す手間がなく、ターミナルから叩くだけでPNG画像が手に入ります。

Windows環境では、Inkscapeの実行ファイルパスにスペース（Program Files）が含まれるため、パスを通していない場合はパスをダブルクォートで囲む必要があります。囲み忘れると'C:\Program' is not recognized...のようなエラーになり、実行に失敗します。
Claudeが生成するSVGで表示される絵文字をそのまま使うとInkscapeがフォント絵文字として処理してしまい、単色の枠線だけの絵文字として描画される場合があります。Twemojiである必要はありませんが、絵文字相当のベクター画像に置き換える処理が必要です。

Claude CodeにSVGバナーの生成を任せ、Inkscapeのコマンドライン一行でPNGに変換する、という二段構えの組み合わせで記事のOGP画像やSNSシェア画像を数分で用意できます。
デザインツールを立ち上げる手間がないぶん、記事を書くたびに気軽にバナーを作れるようになりました。

ChatGPTやGeminiに切り替えなくてもClaude Codeの作業を中断せずバナーまで作り切れるのが、この方法の一番の利点です。

CI上で記事公開前にinkscapeコマンドを自動実行し、PNGバナー生成をパイプライン化する
skills/make-social-preview/design_*.mdを用意し、記事タイトルやタグに応じて配色や絵文字を自動で変える
skills/make-social-preview/template_*.mdとしてSVGテンプレートを複数用意しておき、記事の種類（技術記事・雑記など）ごとに出し分ける