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]

オプション

必須

任意

テーマ一覧

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

暖色系

ライト系

使用例

基本

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キー不要

エフェクト