seo-article-writing

使用する場面

• SEO 向けにブログセクションを設定する
• オーガニックトラフィックを獲得するブログ記事を書く
• 比較・レビューコンテンツを作成する
• コンテンツマーケティングの素材を作成する
• ファイルベースのブログ CMS が必要なあらゆるプロジェクト

前提条件

記事を書く前に、次の項目を確認してください。

1. ブログのインフラストラクチャが設定されている（ブログのセットアップを参照）
2. AI 画像生成機能が利用できる
3. バンドラーで MDX のサポートが設定されている

---

クイックスタート

# 1. Set up blog infrastructure (first time only)
# Copy assets from this skill to your project

# 2. Create article folder
mkdir -p src/content/blog/{slug}

# 3. Generate unique article image using AI
# See Image Generation section below

# 4. Write article using template
# Use assets/templates/article.mdx as base

---

ワークフローの概要

┌─────────────────────────────────────────────────────────────────┐
│  1. SETUP (One-time)                                            │
│     └─> Blog infrastructure                                     │
├─────────────────────────────────────────────────────────────────┤
│  2. RESEARCH                                                    │
│     └─> Keywords → Competitors → Content gaps                   │
├─────────────────────────────────────────────────────────────────┤
│  3. OUTLINE                                                     │
│     └─> Structure → Tables → FAQs                               │
├─────────────────────────────────────────────────────────────────┤
│  4. IMAGE GENERATION                                            │
│     └─> AI-generate unique image for article content            │
├─────────────────────────────────────────────────────────────────┤
│  5. WRITE                                                       │
│     └─> Draft → Optimize → Review                               │
├─────────────────────────────────────────────────────────────────┤
│  6. PUBLISH                                                     │
│     └─> MDX file → Sitemap → Verify                             │
└─────────────────────────────────────────────────────────────────┘

---

画像生成（重要）

基本方針

すべての記事に、記事固有の画像を必ず用意してください。 汎用的なパターン背景は使用しないでください。次の条件を満たすカスタム画像を生成します。

1. 記事のトピックを視覚的に表現する
2. 関連するテキストやタイトルを重ねて表示する
3. 一貫したブランドスタイル（ダークテーマ、オレンジのアクセント）を採用する
4. OG 共有用に 1200x630 ピクセルのサイズにする

画像生成の手順

記事ごとに、次のテンプレートを使って AI 画像生成を行います。

A sophisticated hero image for "[ARTICLE TITLE]" blog article.
[DESCRIBE VISUAL CONCEPT THAT MATCHES CONTENT]
Dark background (#0f172a or #1e293b) with orange (#f97316) accents.
Modern, minimalist, professional SaaS style like Linear or Vercel.
Include text overlay: "[TITLE]" and optional subtitle.
1200x630 pixels.

記事の種類別プロンプトの例

比較記事

A sophisticated hero image for "Sunsama Alternatives" comparison article.
Modern minimalist design with floating app icons and comparison cards.
Deep navy background (#0f172a) with orange (#f97316) gradient accents.
Show multiple tools being compared with visual hierarchy.
Include title text overlay. Professional SaaS marketing style.
1200x630 pixels.

ガイド／チュートリアル記事

A sophisticated hero image for "Time Blocking Guide" tutorial article.
Modern minimalist design showing calendar grid with colorful time blocks.
Dark slate background (#1e293b) with vibrant orange (#f97316) blocks.
Clean 3D floating elements suggesting productivity and organization.
Include title: "TIME BLOCKING GUIDE" and subtitle "Master Your Day".
1200x630 pixels.

比較記事

A sophisticated hero image for "Time Blocking vs To-Do Lists" comparison.
Split design: left side shows organized calendar blocks, right side shows
scattered checklist items. Visual contrast between order and chaos.
Dark background with orange (#f97316) and blue (#3b82f6) accents.
Include title text. Editorial style. 1200x630 pixels.

セルフホスト／技術記事

A sophisticated hero image for "Self-Hosted Productivity Apps" article.
Server/cloud icon with data flowing to personal devices.
Emphasizes privacy and control with lock/shield symbols.
Dark navy background with green (#22c55e) security accents and orange highlights.
Include title and tagline about privacy/control. 1200x630 pixels.

日課／習慣に関する記事

A sophisticated hero image for "Daily Planning Routine" habit article.
Morning scene with coffee, notebook, and digital calendar interface.
Soft gradient from deep purple to warm orange (#f97316).
Floating UI elements showing checklist items.
Calm, productive, aspirational mood. Include title. 1200x630 pixels.

画像の命名規則

わかりやすい名前を付けて画像を保存します。

public/blog-{slug}.png

Examples:
- blog-sunsama-alternatives.png
- blog-time-blocking-guide.png
- blog-self-hosted.png
- blog-daily-planning-routine.png

Frontmatter の更新

画像の生成後、記事の frontmatter を更新します。

export const frontmatter = {
  // ...other fields
  image: "/blog-{slug}.png"
};

---

ブログのインフラストラクチャのセットアップ

必須ファイル

assets/ から次のファイルをプロジェクトにコピーします。

your-project/
├── src/
│   ├── content/
│   │   └── blog/           # MDX articles go here
│   │       └── {slug}/
│   │           └── index.mdx
│   ├── types/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── lib/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── components/
│   │   └── blog/
│   │       ├── blog-card.tsx
│   │       └── blog-layout.tsx
│   └── routes/
│       ├── blog.tsx        # Blog listing
│       └── blog.$slug.tsx  # Individual post
└── public/
    └── blog-{slug}.png     # Generated images per article

Vite／React のセットアップ

Vite プロジェクトでは、import.meta.glob を使って MDX ファイルを読み込みます。

// src/lib/blog.ts
const modules = import.meta.glob('../content/blog/*/index.mdx', { eager: true });

Next.js のセットアップ

Next.js プロジェクトでは、@next/mdx または contentlayer を使用します。

// next.config.js
import mdx from '@next/mdx';
const withMDX = mdx({ extension: /\.mdx?$/ });
export default withMDX({ pageExtensions: ['ts', 'tsx', 'mdx'] });

---

キーワード調査

ステップ 1：メインキーワードの選定

ウェブ検索を使ってトピックを調査します。

Search queries to run:
- "[topic] 2026"
- "best [topic]"
- "[topic] alternative"
- "[topic] vs [competitor]"

ステップ 2：検索意図の分類

意図	指標	コンテンツの種類	優先度
購入検討	"best"、"alternative"、"buy"	比較、レビュー	高
情報収集	"how to"、"what is"、"guide"	チュートリアル、解説	中
特定サイトへの移動	ブランド名、特定のツール	機能ページ	低

サブエージェント用プロンプト：キーワード調査

You are an SEO expert. Research keywords for [TOPIC].

Use web search to find:
1. Primary keyword with highest search intent
2. 5 secondary keywords (long-tail variations)
3. Top 5 competitor URLs for analysis
4. Content gaps competitors are missing

Return:
- Prioritized keyword list with intent classification
- Recommended content angle
- Estimated search volume (HIGH/MEDIUM/LOW)

---

記事の構成

Frontmatter のテンプレート

export const frontmatter = {
  title: "SEO Title Under 60 Characters with Primary Keyword",
  description: "Meta description 150-160 chars with keyword and compelling hook.",
  date: "2026-01-30",
  author: "Team Name",
  tags: ["primary-tag", "secondary-tag", "category"],
  readingTime: 10,
  image: "/blog-your-article-slug.png"  // UNIQUE image per article!
};

記事のアウトラインのテンプレート

# [Primary Keyword in H1 Title]

## Introduction
- Hook with statistic or pain point
- What reader will learn
- Establish credibility (1-2 paragraphs)

## [Section 2: Definition/Background]
- What is [topic]?
- Why it matters (2-3 paragraphs)

## [Section 3: Core Content / How-To]
- Main value proposition
- Step-by-step if tutorial
- Numbered list for scanability

## [Section 4: Comparison Table]

| Feature | Option A | Option B | Option C |
|---------|----------|----------|----------|
| Price   | Free     | $10/mo   | $25/mo   |
| Feature | ✅       | ✅       | ❌       |

## [Section 5: Detailed Analysis]
- 3-4 paragraphs per option
- Pros and cons
- Best use cases

## Frequently Asked Questions

### What is [primary keyword]?
[2-3 sentence answer targeting featured snippet]

### Is [option A] better than [option B]?
[Honest comparison with recommendation]

## Conclusion
- Summary of key points
- Clear CTA with link to action

---

執筆ガイドライン

SEO のベストプラクティス

要素	ガイドライン
タイトル	メインキーワードを含め、60 文字未満にする
メタディスクリプション	150～160 文字で、キーワードと魅力的なフックを含める
H2 見出し	関連キーワードを自然に含める
キーワード密度	メインキーワードの 1～2％
内部リンク	関連ページへのリンクを 2～3 件
外部リンク	信頼性の高い情報源へのリンクを 1～2 件

目標文字数

コンテンツの種類	最低文字数	最適な文字数
比較／レビュー	2,000	2,500
完全ガイド	2,500	3,500
ハウツーチュートリアル	1,500	2,000
ソートリーダーシップ	1,800	2,200

---

記事作成の全ワークフロー

ステップ 1：調査

Use keyword research agent to identify:
- Primary keyword
- Secondary keywords  
- Top 5 competitors
- Content gaps

ステップ 2：画像の生成

Use AI image generation with article-specific prompt.
Save to public/blog-{slug}.png

ステップ 3：記事フォルダーの作成

mkdir -p src/content/blog/{slug}
touch src/content/blog/{slug}/index.mdx

ステップ 4：コンテンツの執筆

Use article writer agent with:
- Keyword targets
- Word count requirement
- Comparison tables
- FAQ section

ステップ 5：Frontmatter の更新

export const frontmatter = {
  title: "...",
  description: "...",
  date: "YYYY-MM-DD",
  author: "Team Name",
  tags: ["..."],
  readingTime: X,
  image: "/blog-{slug}.png"  // Your generated image
};

ステップ 6：サイトマップへの追加

<url>
  <loc>https://yoursite.com/blog/{slug}</loc>
  <lastmod>{date}</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
</url>

ステップ 7：確認

• ブログ一覧で画像が正しく表示される
• 記事が正しく表示される
• すべてのリンクが機能する
• サイトマップが有効である

---

サブエージェント用プロンプト

画像生成エージェント

Generate a unique blog hero image for: "[ARTICLE TITLE]"

Topic: [brief description]
Style: Dark background, orange accents, modern SaaS aesthetic
Include: Title text overlay, relevant visual elements
Size: 1200x630 pixels

Save as: blog-{slug}.png

記事執筆エージェント

Write a [WORD_COUNT]+ word SEO article on [TOPIC].

Primary keyword: [KEYWORD]
Secondary keywords: [KEYWORD_LIST]

Include:
1. Frontmatter with all required fields
2. Introduction with hook/statistic
3. Comparison table with 4+ options
4. Detailed breakdown (3-4 paragraphs per option)
5. FAQ section with 5+ questions using h3 headers
6. Conclusion with CTA linking to [PAGE]

Image has been generated at: /blog-{slug}.png
Include this in frontmatter.

FAQ 執筆エージェント

Write 7 FAQ questions for article about [TOPIC].

Target keywords:
- [keyword 1]
- [keyword 2]
- [keyword 3]

Use h3 headers (###) for each question.
Each answer should be 2-3 sentences.
Target featured snippet format (direct, concise).

---

公開チェックリスト

• この記事専用の画像を生成した
• 画像を public/blog-{slug}.png に保存した
• Frontmatter の画像パスがファイルと一致している
• タイトルにメインキーワードを含めた
• メタディスクリプションを最適化した（150～160 文字）
• 比較表を少なくとも 1 つ追加した
• FAQ の質問を少なくとも 5 つ追加した
• 内部リンクを追加した（2～3 件）
• 読了時間を算出した
• タグを設定した（2～4 個）
• 日付を正しく設定した
• 記事を sitemap.xml に追加した

---

ファイルの参照

assets/ フォルダーについては、以下を参照してください。

ファイル	用途
templates/blog-types.ts	TypeScript インターフェース
templates/blog-utils.ts	MDX の読み込み用ユーティリティ関数
templates/article.mdx	記事テンプレート
components/blog-card.tsx	記事一覧用カードコンポーネント
components/blog-layout.tsx	個別記事用レイアウト
scripts/setup-blog.sh	クイックセットアップスクリプト

---

更新履歴

• v1.1（2026-01-31）：記事ごとに一意の AI 生成画像を必須にするよう更新
• v1.0（2026-01-30）：ワークフロー全体を含む初期スキル