svg-header-image

SVG Header Image Generator

テンプレートベースでプロフェッショナルなヘッダー画像をSVGで生成。ノイズテクスチャ、グローエフェクト、コーナーアクセント等のリッチな表現を含む。外部API不要。

使用タイミング

• 「ヘッダー画像を作って」「タイトル画像を作って」と依頼されたとき
• YouTubeサムネイル、ブログアイキャッチが必要なとき
• テキストベースのビジュアル画像が必要なとき

図解・フローチャートが必要なら svg-diagram または mermaid-to-webp を使用。

基本コマンド

node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
  --output <output.svg> \
  --title "メインタイトル" \
  [options]

オプション

必須

オプション	説明
--output, -o	出力SVGファイルパス
--title, -t	メインタイトル

任意

オプション	説明	デフォルト
--subtitle, -s	サブタイトル	なし
--theme	テーマ名	midnight
--theme-file	カスタムテーマJSONファイル	なし
--badge	バッジテキスト（右上）	なし
--category	カテゴリラベル（上部）	なし
--width, -w	出力幅（px）	1920
--height, -h	出力高さ（px）	1080
--list-themes	テーマ一覧を表示	-

テーマ一覧

ダーク系（技術系コンテンツ向け）

テーマ	名前	特徴
midnight	Midnight	ダークブルー系、サイバー感。デフォルト
ocean	Ocean Deep	ブルー/シアン系、深海感
lavender	Lavender Dream	パープル系、幻想的
neon	Neon Cyber	サイバーパンク、グリッドパターン
geometric	Bold Geometric	ダーク、幾何学的装飾

暖色系

テーマ	名前	特徴
sunset	Sunset	レッド/ピンク系、情熱的
forest	Forest	グリーン系、自然・成長

ライト系

テーマ	名前	特徴
glass	Soft Glass	ライト系、柔らかい印象

使用例

基本

node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
  -o header.svg \
  -t "AIエージェント入門"

バッジ・サブタイトル付き

node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
  -o header.svg \
  -t "Claude Code完全ガイド" \
  -s "2025年最新版" \
  --badge "NEW" \
  --category "TUTORIAL"

カスタムサイズ（正方形）

node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
  -o square.svg \
  -t "SNS用画像" \
  -w 1080 -h 1080

カスタムテーマ

{
  "name": "Corporate Blue",
  "type": "v3",
  "bg": ["#0a1628", "#162d50", "#1e3a5f"],
  "accent": ["#4da6ff", "#66b3ff", "#99ccff"],
  "text": "#ffffff",
  "subText": "#b0c4de"
}

node ${CLAUDE_PLUGIN_ROOT}/scripts/generate.js \
  -o header.svg \
  -t "企業プレゼン" \
  --theme-file ./corporate.json --theme "Corporate Blue"

WebPへの変換

生成したSVGをWebPに変換するには svg-to-webp プラグインを使用:

node <svg-to-webp-plugin>/scripts/convert.js \
  -i header.svg -o header.webp --quality 90

前提条件

• Node.js 16+ (Intl.Segmenter使用)
• 外部APIキー不要

エフェクト

エフェクト	説明
ノイズテクスチャ	フィルムグレイン風の質感
グローエフェクト	光の拡散効果（背景のオーブ）
ドロップシャドウ	テキストに深みを追加
グリッドパターン	背景に繊細なパターン
コーナーアクセント	四隅の装飾線