---

name: blog-outline description: | ヒアリング内容を基に、ブログ記事の構成案を作成するスキル。 error-reportスキルで生成したレポートを解析し、 読者にとって価値のある技術ブログ記事の構成を提案。 allowed-tools: Read, Grep, Glob, Write, WebSearch, WebFetch

blog-outline Skill

使用例

Copy/blog-outline
/blog-outline next-image-error
/blog-outline tmp/learning/lambda-timeout/report.md

対象

error-report スキルで生成されたエラーレポートをブログ記事構成案に変換

スキル構成

Copy.claude/skills/blog-outline/
└── SKILL.md                          # このファイル

.claude/templates/learning/
└── blog_outline.md                   # ブログ構成案テンプレート

出力先

Copytmp/learning/<feature_name>/
├── report.md                         # エラーレポート（入力）
├── blog_outline.md                   # ブログ構成案（出力）
├── draw/                             # Draw.io ソースファイル（オプション）
│   └── 01_<name>.drawio
├── mmd/                              # Mermaid ソースファイル（オプション）
│   └── 01_<name>.mmd
├── puml/                             # PlantUML ソースファイル（オプション）
│   └── 01_<name>.puml
└── images/                           # 画像ファイル（オプション）
    └── 01_<name>.png

実行手順

Step 1: レポートの読み込み

「ブログ記事の構成案を作成します。

エラーレポートのパスを指定してください: （例: tmp/learning/next-image-error/report.md）

または、feature_name を指定してください: （例: next-image-error）」

レポートが見つからない場合は、/error-report スキルの実行を案内

Step 2: レポート内容の解析

読み込んだレポートから以下の情報を抽出：

Step 3: 追加の参考資料検索

「記事の価値を高めるため、追加の参考資料を検索します。

検索対象:

収集する URL 例:

• 公式ドキュメント: https://nextjs.org/docs/...
• 公式ブログ: https://nextjs.org/blog/...
• GitHub Discussion: https://github.com/xxx/discussions/123
• 技術ブログ: https://zenn.dev/xxx, https://dev.to/xxx

追加で参考にしたい URL があれば教えてください。」

注意: Web 検索を行い、記事執筆に役立つ情報を自動収集します。

Step 4: 記事構成の設計

「読者視点で記事構成を設計します。

想定読者を選択してください:

1. 初心者（基礎から丁寧に解説）
2. 中級者（要点を押さえた解説）
3. 上級者（技術的詳細を重視）

記事の難易度:

1. Easy（環境構築・基本操作レベル）
2. Medium（実装・トラブルシューティングレベル）
3. Hard（アーキテクチャ・最適化レベル）」

Step 5: タイトル案の生成

「記事タイトル案を生成します。

タイトル案生成の観点:

SEO 考慮ポイント:

• 検索されやすいキーワードを含める
• 具体的なエラーメッセージや技術名を含める
• 32 文字以内を推奨（検索結果での表示）」

Step 6: 構成案の生成

テンプレート .claude/templates/learning/blog_outline.md を使用し、構成案を生成

出力先: tmp/learning/<feature_name>/blog_outline.md

Step 7: 構成案の確認

「ブログ記事の構成案を作成しました：

出力ファイル: tmp/learning/<feature_name>/blog_outline.md

生成内容:

• タイトル案: 3 候補
• 記事構成: 7 セクション
• SEO キーワード: 3〜5 個
• 挿入ポイント: コード例・図表の配置案
• 参考資料: 収集した URL 一覧

構成案を確認して、修正が必要な箇所があれば教えてください。」

ヒアリング項目一覧

出力フォーマット例

Copy# ブログ記事構成案: next-image-sizing

## 記事メタ情報

| 項目       | 値                                       |
| ---------- | ---------------------------------------- |
| 作成日     | 2026-01-11                               |
| 元レポート | tmp/learning/next-image-sizing/report.md |
| 想定読者   | 中級者（Next.js 経験者）                 |
| 難易度     | Medium                                   |

## タイトル案

1. Next.js の Image コンポーネントで「width/height modified」エラーが出た時の対処法
2. 【Next.js】Markdown 内画像のサイズ制御でハマった話と解決策
3. Next.js Image の aspect ratio エラーを正しく解決する方法

## 記事構成

### 1. 導入

**目的:** 読者の興味を引き、記事の価値を伝える

**内容:**

- Next.js で Markdown コンテンツを扱う際の画像サイズ問題
- 同じエラーに遭遇した人への解決策提供

**想定文字数:** 200〜300 文字

### 2. 背景・状況説明

**目的:** 読者が同じ状況に遭遇した際に共感できるコンテキストを提供

**内容:**

- ブログシステムの技術構成（Next.js 14 App Router）
- Markdown レンダリングの実装方法
- 画像表示の要件

**挿入ポイント:**

- [ ] 技術構成図（Mermaid）
- [ ] 関連コードの抜粋

...

注意事項

• レポート内容を正確に反映し、誇張しない
• 読者の技術レベルに合わせた構成を心がける
• SEO を意識しつつ、価値のあるコンテンツを優先
• 参考資料は検証可能な URL のみを記載
• 挿入ポイントは具体的に指定（どのセクションに何を入れるか）
• テンプレートの各セクションに該当情報がない場合は「N/A」と記載