article-image-enricher

記事内のリンク先から画像を取得し、記事に添付するスキル。

トリガー

• 記事作成完了後の画像エンリッチメント
• 「画像を追加」「リンク先の画像取得」

目的

• 記事内で紹介しているプロダクト/サービスの公式画像を取得
• 読者の理解度を上げる（文字だけより画像があると伝わる）
• 記事のグレードを上げる

---

ワークフロー

Step 1: 記事内のリンクを抽出

記事内の外部リンク（公式サイト、Product Huntなど）を特定。

# 記事からURLを抽出
grep -oE 'https?://[^)]+' <記事ファイル>

Step 2: 公式サイトから画像URL探索

優先順位:

1. 公式サイト（product.com）— 最も信頼性が高い
2. Product Hunt — レビューページに画像あり（ただし403になりやすい）
3. GitHub README — OSSプロダクトの場合

画像URL取得方法:

# HTMLソースから画像URLを抽出
curl -s <公式サイトURL> | grep -oE 'https?://[^"'\'']+\.(png|jpg|jpeg|gif|webp|svg)' | head -20

Step 3: 画像の確認・選定

取得した画像URLをimageツールで確認:

image(url, "この画像の内容を説明してください。記事への適合性を評価してください。")

選定基準:

• ✅ プロダクトのUIスクリーンショット
• ✅ 機能説明画像
• ✅ ロゴ + キャッチコピー（ヒーロー画像）
• ❌ 単体のロゴ（小さすぎる）
• ❌ アイコンのみ
• ❌ 人物写真（肖像権）

Step 4: 画像URLの有効性確認

curl -sI "<画像URL>" | head -5
# HTTP/2 200 を確認

Step 5: 記事に追加

Markdownフォーマット:

![説明テキスト](画像URL)
*出典: [サイト名](サイトURL)*

追加位置:

• プロダクト紹介の見出し直下
• 表の前（視覚的導入として）

---

⚠️ よくある落とし穴

• Figma CommunityやProduct Huntからの画像取得失敗: Figma CommunityはSPAのためweb_fetchでは画像取得困難。Product HuntはCloudflare保護で403になりやすい。これらのサイトの画像が必要な場合は公式サイトやGitHub READMEを代替ソースとして探す
• 出典リンクの付け忘れ: 公式サイトの素材を紹介目的で使用する場合でも、必ず*出典: [サイト名](URL)*形式で出典を明記する。不明・著作権が曖昧な場合は画像自体を省略する
• 外部CDN画像のリンク切れ: 外部CDNの画像URLは時間経過で無効になるリスクがある。長期的にはVercel Blobへのコピーを検討する。投稿前にcurl -sIで200 OKを確認すること
• 不適切な画像の選定: 単体のロゴ（小さすぎる）、アイコンのみ、人物写真（肖像権リスク）は使わない。プロダクトのUIスクリーンショット、機能説明画像、ヒーロー画像（ロゴ+キャッチコピー）を優先する

---

例: Blocksプラグインの画像追加

Before

### 1. Blocks — チームのワイヤーフレームツール

**公式:** [blocks.pm](https://www.blocks.pm/)

After

### 1. Blocks — チームのワイヤーフレームツール

**公式:** [blocks.pm](https://www.blocks.pm/)

![Blocks — ドラッグ&ドロップでコンポーネントを配置](https://cdn.prod.website-files.com/6620c59ba96f73dbd38266cb/6620c59ba96f73dbd3826745_size_big_name_1.webp)
*出典: [blocks.pm](https://www.blocks.pm/)*

---

ワークフロー統合

このスキルは以下のタイミングで呼び出す:

1. article-writer Step 4完了後（記事作成後）
2. digest-writer Top3個別記事作成後
3. dev-knowledge記事作成後

---

完了条件

• 記事内の主要プロダクト（1〜3個）に画像追加
• 画像URL有効性確認（200 OK）
• 出典リンク明記
• ビルド成功