diegosouzapw ウェブサイト構造分析・ワイヤーフレーム作成
概要
指定された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（レイアウト + 分析付き）