What is analyzing-websites?

This Claude skill automates the comprehensive analysis of existing websites by crawling URLs to generate visual sitemaps, structural wireframes, and detailed content audits. It leverages automated browser navigation to extract page hierarchies and UI layouts, providing designers and developers with an instant blueprint of any site's architecture and messaging strategy.

When should I use analyzing-websites?

analyzing-websites is useful in the following scenarios: • Competitive Analysis: Automatically map out a competitor's website structure and content hierarchy to identify their SEO and conversion strategies. • Website Redesign Planning: Generate 'as-is' wireframes and sitemaps for legacy websites to create a baseline for UI/UX improvements and migration. • Content Auditing: Extract and summarize the purpose, target audience, and key messaging of every page across a domain to ensure brand consistency. • Reverse Engineering UI Patterns: Quickly capture the layout and component structure of high-performing landing pages to use as inspiration for new designs. • SEO Structure Visualization: Create Mermaid-based tree diagrams of a site's internal linking and depth to optimize crawlability and user navigation.

name	analyzing-websites
description	既存ウェブサイトを分析し、サイトマップとワイヤーフレームを作成します。URLを渡すとページ構造を解析し、指定形式で出力します。コンテンツ分析機能でページの目的やターゲットも要約できます。

ウェブサイト構造分析・ワイヤーフレーム作成

概要

指定されたURLからウェブサイトをクロールし、サイトマップ・ワイヤーフレーム・コンテンツ分析を作成する。

入力情報の確認

スキル実行時、以下を確認する：

1. 対象URL

トップページのURLを取得
ドメインを特定（クロール範囲の制限に使用）

2. クロール深度

ユーザーに確認：

1階層: トップページから直接リンクされているページのみ
2階層: トップ + その1つ下のページまで
3階層以上: 必要に応じて指定
特定ページのみ: URLリストを手動指定

3. サイトマップ出力形式（複数選択可）

Mermaid図: 階層構造をツリー図で視覚化
Markdownリスト: インデント付きリストで構造化
JSON: プログラムで利用しやすい形式

4. ワイヤーフレーム出力形式（複数選択可）

Markdown + ASCII: テキストベースで軽量
HTML/CSS: ブラウザで確認可能な実際のワイヤーフレーム

5. コンテンツ分析（オプション）

なし: ワイヤーフレームのみ
簡易分析: ページ目的・ターゲット・主要メッセージ
詳細分析: セクション別の目的・要約・キーワード・改善提案

実行フロー

Step 1: サイトクロール

mcp__plugin_playwright_playwright__browser_navigate

トップページにアクセス
ページ内のリンクを抽出
同一ドメイン内のリンクをフィルタリング
指定深度まで再帰的にクロール

除外対象:

外部ドメインへのリンク
アンカーリンク（#で始まるもの）
mailto:、tel:、javascript: 等
画像・PDF等のファイルリンク
重複URL

Step 2: ページ構造の取得

各ページで以下を実行：

mcp__plugin_playwright_playwright__browser_snapshot

スナップショットから抽出する情報：

ヘッダー構造（h1〜h6）
ナビゲーション要素
メインコンテンツエリア
サイドバー
フッター
フォーム要素
ボタン・リンク
画像エリア

Step 3: サイトマップ生成

Mermaid形式

graph TD
    A[トップページ] --> B[会社概要]
    A --> C[サービス]
    A --> D[お問い合わせ]
    C --> C1[サービスA]
    C --> C2[サービスB]

Markdown形式

- トップページ (/)
  - 会社概要 (/about)
  - サービス (/services)
    - サービスA (/services/a)
    - サービスB (/services/b)
  - お問い合わせ (/contact)

JSON形式

{
  "url": "/",
  "title": "トップページ",
  "children": [
    {
      "url": "/about",
      "title": "会社概要",
      "children": []
    }
  ]
}

Step 4: ワイヤーフレーム生成

Markdown + ASCII形式

## ページ名: トップページ
URL: https://example.com/

### レイアウト構造

┌─────────────────────────────────────────┐
│ [HEADER]                                │
│ ┌─────┐ ┌─────────────────────────────┐ │
│ │Logo │ │ Nav: Home | About | Contact │ │
│ └─────┘ └─────────────────────────────┘ │
├─────────────────────────────────────────┤
│ [HERO]                                  │
│ ┌─────────────────────────────────────┐ │
│ │ H1: メインキャッチコピー            │ │
│ │ P: サブテキスト説明文               │ │
│ │ [CTA Button]                        │ │
│ └─────────────────────────────────────┘ │
├─────────────────────────────────────────┤
│ [MAIN CONTENT]                          │
│ ┌───────────┐ ┌───────────┐ ┌─────────┐ │
│ │ Card 1    │ │ Card 2    │ │ Card 3  │ │
│ │ [Image]   │ │ [Image]   │ │ [Image] │ │
│ │ Title     │ │ Title     │ │ Title   │ │
│ │ Text      │ │ Text      │ │ Text    │ │
│ └───────────┘ └───────────┘ └─────────┘ │
├─────────────────────────────────────────┤
│ [FOOTER]                                │
│ Copyright | Links | SNS Icons           │
└─────────────────────────────────────────┘

### 要素一覧

| エリア | 要素 | 内容 |
|--------|------|------|
| Header | Logo | 会社ロゴ |
| Header | Nav | 5項目のナビゲーション |
| Hero | H1 | メインキャッチコピー |
| Hero | Button | 「詳しく見る」CTA |
| Main | Cards | 3カラムのカード |

HTML/CSS形式

シンプルなHTMLワイヤーフレームを生成：

グレースケール配色
ボックスで要素を表現
ラベルで要素種別を明示
レスポンシブ対応（簡易版）

Step 5: コンテンツ分析（オプション）

コンテンツ分析が選択された場合、以下を生成：

簡易分析

## コンテンツ分析サマリー

### ページの目的
[ページが達成しようとしている目標]

### ターゲットユーザー
[想定される読者・利用者]

### 主要メッセージ
> [ページが伝えたいコアメッセージ]

詳細分析

## コンテンツ分析サマリー

### ページの目的
[ページが達成しようとしている目標]

### ターゲットユーザー
- [ユーザー1]
- [ユーザー2]

### 主要メッセージ
> [ページが伝えたいコアメッセージ]

---

## セクション別コンテンツ分析

### 1. [セクション名]
| 項目 | 内容 |
|------|------|
| **目的** | このセクションの役割 |
| **コンテンツ要約** | 内容の要約（50-100文字） |
| **キーワード** | 重要なキーワード |
| **CTA** | 行動喚起の内容 |
| **差別化ポイント** | 競合との違い（あれば） |

### 2. [セクション名]
...

---

## インサイト・改善提案

### 強み
- [良い点1]
- [良い点2]

### 潜在的な改善点
- [改善提案1]
- [改善提案2]

### UX観点
- [ユーザー体験に関する所見]

分析観点

コンテンツ分析では以下の観点で評価：

目的の明確さ: ページの目的が明確か
ターゲット適合: 想定ユーザーに適切な内容か
メッセージの一貫性: 主張が一貫しているか
CTA の効果: 行動喚起が適切か
情報の構造化: 情報が整理されているか
差別化: 競合との違いが伝わるか
信頼性: 数値・実績・第三者評価の有無

Step 6: 出力

指定された形式でファイルを出力：

output/
├── sitemap.md              # サイトマップ（Mermaid）
├── sitemap.json            # サイトマップ（JSON）
├── wireframes/
│   ├── index.md            # トップページ
│   ├── about.md            # 会社概要
│   └── ...
├── wireframes-analyzed/    # 分析付き（詳細分析選択時）
│   ├── index.md
│   └── ...
└── wireframes-html/        # HTML形式の場合
    ├── index.html
    └── ...

注意事項

認証が必要なページ: クロール不可。公開ページのみ対象
SPA（Single Page Application）: 初期表示のみ取得可能
動的コンテンツ: スナップショット時点の状態を取得
robots.txt: 尊重し、disallowされているパスはスキップ
レート制限: ページ間に適度な待機時間を設ける（1-2秒）
大規模サイト: ページ数上限を設定（デフォルト20ページ）

出力ディレクトリ

ユーザーに確認するか、デフォルトでプロジェクトルートに wireframe-output/ を作成。

クイックスタート例

「https://example.com を分析して」

→ 以下を確認：
1. クロール深度: 1階層
2. サイトマップ: Mermaid
3. ワイヤーフレーム: Markdown + ASCII
4. コンテンツ分析: 詳細分析

→ 出力:
- sitemap.md
- wireframes/*.md（レイアウト + 分析付き）

analyzing-websites

When & Why to Use This Skill

Use Cases