jpskill.com
✍️ ライティング コミュニティ

article-illustration-generator

記事の内容に合わせた魅力的なイラストを自動で生成するSkill。

📜 元の英語説明(参考)

Generates illustrations for articles

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

一言でいうと

記事の内容に合わせた魅力的なイラストを自動で生成するSkill。

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

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

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

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

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して article-illustration-generator.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → article-illustration-generator フォルダができる
  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-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

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

記事のイラスト生成

このスキルは、Gemini Image API を使用してテキスト記事に関連するイラストを自動生成し、視覚的に魅力的な HTML ファイルに変換します。

ワークフロー

  1. API キーの確認:

    • まず、GOOGLE_API_KEY 環境変数が設定されているか確認します。
    • 設定されていない場合は、AskUserQuestion ツールを使用して、ユーザーに API キーを設定済みか尋ねます。
    • ユーザーが設定していない場合は、Google API キーを提供するよう依頼します。
    • スクリプト実行で使用するために API キーを保存します。

  2. 入力分析:

    • ユーザーの記事テキストを読み込みます。
    • テキストを論理的なセクション（段落）に分割します。
    • イラスト化する主要なシーンを特定します（2〜3段落ごとに1枚の画像を目指します）。

  3. 画像生成:

    • 特定された各シーンについて、テキストの文脈に基づいて記述的なプロンプトを生成します。
    • google.genai SDK を使用して画像を生成します。
    • モデル: gemini-2.5-flash-image（デフォルト、またはユーザー指定）。
    • 設定: 記事の画像には aspect_ratio="16:9" または 4:3 を使用します。

  4. HTML の構築:

    • assets/template.html に提供されている HTML テンプレート（「故都の秋」スタイル）を使用します。
    • テキストと生成された画像（ローカルに保存）を HTML 構造に挿入します。

リソース

このスキルには、references/ ディレクトリに参照ファイルが含まれています。

  • references/template.html: セリフ体フォントとすっきりとしたレイアウトの HTML/CSS テンプレートです。出力ファイルのベースとしてこれを使用します。
  • references/api_guide.md: 高度な画像生成ニーズに使用できる Nano Banana Pro (Gemini 3 Pro Image) API の詳細なドキュメントです。
  • references/script_template.py: API 呼び出しロジックを含む Python スクリプトテンプレートです。

使用ガイド

呼び出されたとき、エージェントは次のことを行います。

  1. API キー設定の確認:

    • Bash を使用して GOOGLE_API_KEY 環境変数が設定されているか確認します: echo $GOOGLE_API_KEY (Linux/Mac) または echo %GOOGLE_API_KEY% (Windows)。
    • 空または未設定の場合、AskUserQuestion を使用して「您是否已经配置了 Google API Key？」と尋ねます。
      • オプション 1: 「是，已配置为环境变量」 - スクリプトを続行します。
      • オプション 2: 「否，我需要提供 API Key」 - API キーを尋ね、コマンドライン引数としてスクリプトに渡します。
    • ユーザーが API キーを提供した場合、この実行のために一時的に保存します。

  2. ユーザーが提供したターゲット記事を読み込みます。

  3. 画像の挿入箇所を計画します。

  4. 適切なパラメータで Python スクリプト (scripts/article_to_html.py) を実行します。

    • ユーザーが API キーを提供した場合: python scripts/article_to_html.py <article_file> <api_key>
    • 環境変数を使用する場合: python scripts/article_to_html.py <article_file>
    • オプションのパラメータ: --images N, --model MODEL, --ratio RATIO, --size SIZE

  5. 結果を確認し、出力場所をユーザーに通知します。

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

Article Illustration Generator

This skill automatically generates relevant illustrations for a text article using the Gemini Image API and converts it into a visually appealing HTML file.

Workflow

  1. API Key Check:

    • First, check if the GOOGLE_API_KEY environment variable is set.
    • If not set, use the AskUserQuestion tool to ask the user if they have configured their API key.
    • If the user hasn't configured it, ask them to provide their Google API key.
    • Store the API key for use in the script execution.

  2. Input Analysis:

    • Read the user's article text.
    • Split the text into logical sections (paragraphs).
    • Identify key scenes for illustration (aim for 1 image every 2-3 paragraphs).

  3. Image Generation:

    • For each identified scene, generate a descriptive prompt based on the text context.
    • Use the google.genai SDK to generate images.
    • Model: gemini-2.5-flash-image (default, or user specified).
    • Config: Use aspect_ratio="16:9" or 4:3 for article images.

  4. HTML Construction:

    • Use the HTML template provided in assets/template.html ("故都的秋" style).
    • Insert the text and generated images (saved locally) into the HTML structure.

Resources

This skill includes reference files in the references/ directory:

  • references/template.html: The HTML/CSS template with serif fonts and clean layout. Use this as the base for the output file.
  • references/api_guide.md: Detailed documentation for the Nano Banana Pro (Gemini 3 Pro Image) API, which can be used for advanced image generation needs.
  • references/script_template.py: A Python script template containing the API calling logic.

Usage Guide

When invoked, the agent should:

  1. Check API Key Configuration:

    • Use Bash to check if GOOGLE_API_KEY environment variable is set: echo $GOOGLE_API_KEY (Linux/Mac) or echo %GOOGLE_API_KEY% (Windows).
    • If empty or not set, use AskUserQuestion to ask: "您是否已经配置了 Google API Key？"
      • Option 1: "是，已配置为环境变量" - Proceed with the script.
      • Option 2: "否，我需要提供 API Key" - Ask for the API key and pass it as a command-line argument to the script.
    • If the user provides an API key, store it temporarily for this execution.

  2. Read the target article provided by the user.

  3. Plan the image insertion points.

  4. Execute the Python script (scripts/article_to_html.py) with appropriate parameters:

    • If API key was provided by user: python scripts/article_to_html.py <article_file> <api_key>
    • If using environment variable: python scripts/article_to_html.py <article_file>
    • Optional parameters: --images N, --model MODEL, --ratio RATIO, --size SIZE

  5. Verify the result and inform the user of the output location.