jpskill.com
🎨 デザイン コミュニティ

article-cover

ブログ記事や技術ドキュメントなどのカバー画像を、タイトルや図、技術的なグラフィックを用いて、プロフェッショナルな印象のSVG形式で作成するSkill。

📜 元の英語説明(参考)

Generate professional article cover images as SVG files. Use when user wants to create cover/banner images for blog posts, technical articles, or documentation. Creates visually appealing covers with titles, diagrams, and tech-themed graphics.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ブログ記事や技術ドキュメントなどのカバー画像を、タイトルや図、技術的なグラフィックを用いて、プロフェッショナルな印象のSVG形式で作成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o article-cover.zip https://jpskill.com/download/9204.zip && unzip -o article-cover.zip && rm article-cover.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9204.zip -OutFile "$d\article-cover.zip"; Expand-Archive "$d\article-cover.zip" -DestinationPath $d -Force; ri "$d\article-cover.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して article-cover.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → article-cover フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

記事カバー SVG 生成

技術ブログ、ドキュメント、記事向けに、プロフェッショナルで視覚的に印象的な記事カバー画像を SVG 形式で生成します。

重要なルール

  1. ViewBox の標準: viewBox="0 0 1200 630" を使用します（ソーシャルメディアに適した 1.91:1 の比率）。

  2. テキストの可読性（必ず守ってください）:

    • メインタイトル: 44-48px、太字、高コントラスト
    • サブタイトル: 28-32px、白または明るい色
    • ラベル/タグ: 14-16px
    • 11px より小さいフォントは絶対に使用しないでください

  3. 背景デザイン:

    • 常にグラデーション背景を使用してください（単色のベタ塗りは避けてください）
    • ダークな技術テーマ: #0d1117 → #161b22 (GitHub のダークスタイル)
    • 深みを出すために、控えめなグリッドパターンや装飾的な要素を追加します

  4. 視覚的な階層:

    • タイトル領域: 画像の下 1/3 (y: 420-540)
    • 図/イラスト領域: 上 2/3 (y: 80-400)
    • タグ/ラベル: 下端 (y: 550-600)

  5. 色のコントラスト: テキストが背景に対して読みやすいことを確認してください

    • 暗い背景に明るいテキスト
    • 強調のためにグラデーションを使用します（技術にはオレンジ/黄色、データには青/シアン）

デザインパターン

技術記事カバー (比較レイアウト)

最適な用途: パフォーマンス比較、バージョンアップグレード、ビフォー/アフターのシナリオ

┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘

技術記事カバー (フローレイアウト)

最適な用途: プロセスの説明、アーキテクチャの概要

┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘

カラーシステム

目的 背景 ストローク/テキスト ユースケース
ネガティブ/Before #1c2128 #dc3545 問題、古いバージョン
警告/Transition #1c2128 #ffcc02 部分的な解決策、v1
ポジティブ/After #1c2128 #00f2fe 解決策、新しいバージョン
成功 #22863a #22863a チェックマーク、改善
アクセント #ff6b35 → #ffcc02 gradient タイトル、ハイライト

SVG テンプレート

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>

要素テンプレート

比較ボックス (ステータスアイコン付き)

<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>

ステータスアイコン: ❌ (ネガティブ)、⚠ (警告)、✓ (ポジティブ)

パフォーマンスバッジ

<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>

タグピル

<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>

矢印 (ラベル付き)

<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>

D

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Article Cover SVG Generation

Generate professional, visually striking article cover images in SVG format for technical blogs, documentation, and articles.

Critical Rules

  1. ViewBox Standard: Use viewBox="0 0 1200 630" (social media friendly 1.91:1 ratio)

  2. Text Readability (MUST follow):

    • Main title: 44-48px, bold, high contrast
    • Subtitle: 28-32px, white or light color
    • Labels/tags: 14-16px
    • Never use fonts smaller than 11px

  3. Background Design:

    • Always use gradient backgrounds (avoid flat solid colors)
    • Dark tech themes: #0d1117 → #161b22 (GitHub dark style)
    • Add subtle grid patterns or decorative elements for depth

  4. Visual Hierarchy:

    • Title area: bottom 1/3 of the image (y: 420-540)
    • Diagram/illustration area: top 2/3 (y: 80-400)
    • Tags/labels: bottom edge (y: 550-600)

  5. Color Contrast: Ensure text is readable against backgrounds

    • Light text on dark backgrounds
    • Use gradients for emphasis (orange/yellow for tech, blue/cyan for data)

Design Patterns

Tech Article Cover (Comparison Layout)

Best for: Performance comparisons, version upgrades, before/after scenarios

┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘

Tech Article Cover (Flow Layout)

Best for: Process explanations, architecture overviews

┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘

Color System

Purpose Background Stroke/Text Use Case
Negative/Before #1c2128 #dc3545 Problems, old version
Warning/Transition #1c2128 #ffcc02 Partial solution, v1
Positive/After #1c2128 #00f2fe Solution, new version
Success #22863a #22863a Checkmarks, improvements
Accent #ff6b35 → #ffcc02 gradient Titles, highlights

SVG Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>

Element Templates

Comparison Box (with status icon)

<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>

Status icons: ❌ (negative), ⚠ (warning), ✓ (positive)

Performance Badge

<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>

Tag Pill

<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>

Arrow (with label)

<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>

Data Bar (for showing proportions)

<rect x="X" y="Y" width="WIDTH" height="12" rx="2"
      fill="#COLOR" opacity="0.8"/>

Workflow

  1. Understand the article: What's the main topic? Is it a comparison, tutorial, or overview?

  2. Choose layout pattern:

    • Comparison → Use 2-3 column comparison layout
    • Process/Flow → Use flow diagram layout
    • Single concept → Use centered illustration

  3. Extract key elements:

    • Main title (keep concise, 10-15 Chinese chars or 5-8 English words)
    • Subtitle (descriptive, can be longer)
    • Key metrics (performance numbers, version info)
    • Tags (3-5 relevant keywords)

  4. Design the illustration:

    • Use simple shapes (rectangles, arrows)
    • Show the core concept visually
    • Use color to differentiate states/versions

  5. Generate SVG: Follow the template, ensure all text is readable

Output

  • Filename: {article-slug}-cover.svg
  • Location: Same directory as the article or assets/ folder
  • Tell user: Can be opened in browser, converted to PNG via Inkscape/browser screenshot

Tips

  • Chinese text: Use font-family="Arial, sans-serif" which has good CJK support
  • Emphasis: Use filter="url(#glow)" sparingly on key elements
  • Spacing: Keep 20-40px padding around text elements
  • Testing: Open SVG in browser to verify rendering before finalizing