webflow-mcp:asset-audit

アセット監査

Webflow サイトのアセットを分析して、SEO を最適化します。

重要な注意事項

すべての操作で、必ず Webflow MCP ツールを使用してください。

• アセットの取得と更新には、Webflow MCP の data_assets_tool を使用します
• 画像コンテンツの分析には、アセットの asset_id を指定して Webflow MCP の get_asset_preview を使用します
• 利用可能なサイトの一覧表示には、Webflow MCP の data_sites_tool とアクション list_sites を使用します
• 開始前にベストプラクティスを確認するには、Webflow MCP の webflow_guide_tool を使用します
• Webflow の操作には、ほかのツールや方法を使用しないでください
• すべてのツール呼び出しに、必須の context パラメーター（第三者視点で15～25語）を含めてください

手順

フェーズ 1：サイトの選択とアセットの検出

1. サイトを取得：対象のサイトを特定します。ユーザーがサイト ID を指定していない場合は、確認してください。
2. すべてのアセットを取得：Webflow MCP の data_assets_tool を使用して、サイトのすべてのアセットを取得します（各アセットレコードには、プレビューに必要な asset_id が含まれます）。
   • アセットが50件以上あるサイトでは、20件ずつ処理します
   • 進捗を表示します：「150件中1～20件のアセットを処理中...」
3. パターンを検出：アセット名を分析し、共通するパターンを特定します。
   • カメラからアップロードされた画像（IMG_、DSC_など）
   • スクリーンショット（screenshot、Screen Shotなど）
   • 一般的な名前（untitled、image-1など）
   • 日付ベースの名前（2024-01-10など）

フェーズ 2：問題の分析とパターンの認識

4. 問題を特定：次の条件に該当するすべてのアセットを一覧表示します。
   • alt テキストが設定されていない（null または空文字列）
   • alt テキストが設定されているものの、品質が低い（短すぎる、冗長な表現があるなど）
   • SEO に適したアセット名が付いていない
   • 重複している、または非常によく似ている
5. パターン検出レポート：検出されたパターンを表示します。

   🔍 Detected patterns:
   - 15 assets start with "IMG_" (camera uploads)
   - 8 assets contain "screenshot"
   - Suggest: Bulk rename these patterns
   

6. ユーザーの希望を確認：次のどれを生成するか、ユーザーに確認します。
   • alt テキストのみ
   • SEO に適した名前のみ
   • 両方
   • 命名パターン／テンプレートを適用

フェーズ 3：分析と提案の生成

7. アセットを分析：フェーズ1で取得した各アセットの asset_id を指定して、Webflow MCP の get_asset_preview ツールを使用し、更新が必要なアセットを分析します。
   • エラー処理：Webflow MCP の get_asset_preview が失敗した場合は、次の代替手段を使用します。
     • 既存のファイル名から説明を抽出します
     • 警告を付けて汎用プレースホルダーを使用します
     • ほかのアセットの処理を続けます
   • タイムアウトを避けるため、バッチ処理します
8. 検証を行いながら提案を生成します。
   • alt テキストの検証：
     • 最大125文字（超える場合は警告します）
     • 冗長な表現（「image of」「picture of」「photo of」）を含めない
     • 句読点で終わる
     • 一般的な説明にはフラグを付ける（信頼度50％未満）
   • SEO 名の検証：
     • 小文字のa～z、数字、ハイフンのみを使用
     • 拡張子が二重になっていない（.webp.webp など）。既存の拡張子を先に削除します
     • 最大100文字
     • スペースとアンダースコアをハイフンに置き換える
     • 特殊文字を含めない
9. フォルダー整理の提案：パターンが検出された場合は、フォルダー構成を提案します。

   💡 Organization suggestions:
   - Create "team-photos" folder for 8 team images
   - Create "product-images" folder for 15 product shots
   

フェーズ 4：きめ細かな承認と適用

10. 候補を提示し、個別に承認できるようにします：
    • チェックボックス付きの番号付きリストを表示します
    • 個別に切り替えられるようにします：「スキップする番号を入力してください（例：'2,4'）」
    • 選択肢：「すべて」、「なし」、または特定の番号
    • 各候補の検証に関する警告を表示します
11. 命名テンプレートを提案します（類似アセットが多数ある場合）：

    🎨 命名パターンを適用しますか？
    1. [category]-[description]（例：team-john-headshot）
    2. [description]-[location]（例：office-workspace-desk）
    3. カスタムパターン...
    4. パターンを使わず、個別の名前を使用する
    

12. ロールバックデータを保存します：変更を適用する前に、以下を保存します。
    • アセットの元の名前
    • 元の代替テキスト
    • タイムスタンプ
    • 変更したアセット
13. 更新を適用します：Webflow MCP の data_assets_tool を使用して、承認されたアセットのみを更新します
    • 一括更新の進行状況を表示します
    • 一部の更新が失敗した場合も適切に処理します
    • 成功と失敗を分けて報告します
14. ロールバックの選択肢を提示します：変更の適用後：

    📋 ロールバックを利用できます：
    最終更新：2 分前に 4 個のアセットを変更しました
    これらの変更を元に戻すには「undo」と入力してください
    

例

ユーザープロンプト：

Run an asset audit on my site.

ステップ 1：初回監査レポート

📊 SEO Asset Audit: MCP Demo #2

Total: 4 assets

🔍 Detected patterns:
- 4 assets have generic numeric names (1.webp, 2.webp, 3.webp, 4.webp)
- All assets are in WebP format ✓

⚠️ Missing Alt Text (4 assets):
├── 1.webp (empty alt text)
├── 2.webp (empty alt text)
├── 3.webp (empty alt text)
└── 4.webp (empty alt text)

⚠️ Non-SEO-Friendly Names (4 assets):
├── 1.webp (generic numeric name)
├── 2.webp (generic numeric name)
├── 3.webp (generic numeric name)
└── 4.webp (generic numeric name)

---

What would you like to generate?
1. Alt text only
2. SEO-friendly names only
3. Both alt text and SEO-friendly names

Please select an option (1, 2, or 3).

検証警告の例：

📋 Suggested Improvements:

[1] ✓ IMG_1234.jpg
    Alt text: "Professional team member headshot with blue background."
    New name: professional-team-member-headshot.jpg
    ✅ Validation passed

[2] ✓ screenshot-2024.png
    Alt text: "Dashboard analytics overview showing user engagement metrics."
    New name: dashboard-analytics-overview.png
    ✅ Validation passed

[3] ⚠️ untitled-image.webp
    Alt text: "Photo"
    ⚠️ Warning: Alt text too short (< 10 chars) - needs more detail
    New name: untitled-image.webp
    ⚠️ Warning: Unable to generate better name (image preview failed)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Alt text: "Image of a person working on laptop in modern office with plants and natural lighting through large windows in the background."
    ⚠️ Warning: Alt text too long (137 chars) - consider shortening for screen readers
    New name: team-photo-2024.jpg
    ✅ Validation passed (special characters removed)

Which assets would you like to update?

ステップ 2：ユーザーがオプション 3 を選択し、画像が分析された後

📋 Suggested Improvements:

[1] ✓ 1.webp
    Alt text: "Podcast host with headphones and microphone recording Webflow podcast episode in studio."
    New name: webflow-podcast-host-recording-studio.webp
    ✅ Validation passed

[2] ✓ 2.webp
    Alt text: "Professional developer wearing glasses working on laptop with Webflow logo in modern office."
    New name: developer-working-laptop-webflow-office.webp
    ✅ Validation passed

[3] ✓ 3.webp
    Alt text: "Webflow homepage hero section with tagline and email signup form."
    New name: webflow-homepage-hero-section.webp
    ✅ Validation passed

[4] ✓ 4.webp
    Alt text: "Speaker presenting on stage at Webflow Conf with audience watching."
    New name: webflow-conf-speaker-presentation-stage.webp
    ✅ Validation passed

---

Which assets would you like to update?
- Type numbers to skip (e.g., "2,4" to skip items 2 and 4)
- Type "all" to proceed with all
- Type "none" to cancel

ステップ 3：ユーザーが「all」で確認した後

🔄 Applying updates...

Progress: ████████████████████ 100% (4/4 assets)

✅ Updates Applied Successfully!

SEO Asset Audit Complete: MCP Demo #2

Summary:
- ✅ 4 assets updated successfully
- ❌ 0 assets failed
- ⏭️ 0 assets skipped

Changes Applied:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp                │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp                │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
└─────────────────────────────────────────────────────────────────┘

📋 Rollback Available:
Last update: 4 assets modified just now
Type "undo" to revert these changes

---

🎉 Your site's assets are now fully optimized for SEO and accessibility!

ステップ 3 の別の例：ユーザーが特定のアセット（例：「1,3」）を選択

🔄 Applying updates to assets 1 and 3...

Progress: ████████████████████ 100% (2/2 assets)

✅ Partial Update Complete!

Summary:
- ✅ 2 assets updated successfully
- ❌ 0 assets failed
- ⏭️ 2 assets skipped (as requested)

Changes Applied:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
└─────────────────────────────────────────────────────────────────┘

Skipped Assets (can run audit again later):
- [2] 2.webp
- [4] 4.webp

📋 Rollback Available:
Type "undo" to revert these 2 changes

ガイドライン

フェーズ 1：重要な検証（必ず従う）

ファイル拡張子の処理：

• 既存の拡張子は必ず削除してから、新しい拡張子を追加します
• 悪い例：image.webp → new-name.webp.webp
• 良い例：image.webp → new-name.webp
• 実装：拡張子を除いたファイル名と新しい拡張子を使用します

代替テキストの品質ルール：

• 最大長：125 文字（アクセシビリティのベストプラクティス）
• 句読点（ピリオド、感嘆符、疑問符）で終わる必要があります
• 冗長な表現を削除します：
  • ❌ "Image of a person" → ✅ "Person working at desk"
  • ❌ "Picture of logo" → ✅ "Company logo on blue background"
  • ❌ "Photo showing" → ✅ 直接的な説明
• 短すぎる場合（10 文字未満）は警告します：⚠️ "一般的すぎます。詳細が必要です"
• 長すぎる場合（125 文字超）は警告します：⚠️ "スクリーンリーダー向けに短くすることを検討してください"

SEO ファイル名のルール：

• 使用できる文字：小文字の a-z、数字の 0-9、ハイフンのみ
• 最大長：100 文字（拡張子を除く）
• スペースをハイフンに変換します：team photo → team-photo
• アンダースコアをハイフンに変換します：team_photo → team-photo
• 特殊文字を削除します：photo!@#$ → photo
• 小文字に変換します：TeamPhoto → team-photo
• 連続するハイフンを削除します：team--photo → team-photo
• 先頭と末尾のハイフンを削除します：-photo- → photo

フェーズ 2：一括処理とパフォーマンス

大規模サイトの処理：

• アセットが 50 個以上あるサイト：20 個ずつ処理します
• 進行状況を表示します：「バッチ 1/5 を処理中（アセット 1～20）...」
• ユーザーが特定のバッチを処理できるようにします
• タイムアウト保護：Webflow MCP の get_asset_preview が 30 秒を超えた場合は、次のバッチに進みます

パターンの検出： 以下のパターンを検出して報告します：

• カメラからのアップロード：IMG_、DSC_、DCIM_、P_
• スクリーンショット：screenshot、Screen Shot、Capture
• 一般的な名前：untitled、image-1、photo、asset
• 日付形式：2024-01-10、20240110、01-10-2024
• 3 個以上のアセットが同じパターンに一致する場合は、一括での名前変更を提案します

エラー処理：

• Webflow MCP の get_asset_preview が失敗した場合：
  1. エラーを記録します（ユーザーには表示しません）
  2. 代替手段として、ファイル名から説明を抽出します
  3. ⚠️ 警告を付けます：「ファイル名から生成しました（画像プレビューに失敗しました）」
  4. 他のアセットの処理を続行します
• 一部成功した場合の処理：
  • 成功と失敗を分けて報告します
  • 次のように表示します：「✅ 15 個を更新、❌ 2 個が失敗、⏭️ 3 個をスキップ」
  • 失敗したアセットの再試行を提案します

フェーズ 3：高度な機能

詳細な承認システム：

• 各提案に番号を付けます：[1]、[2]、[3] など
• チェックマークで状態を表示します：✓ または ✗
• 複数の形式を受け付けます：
  • "all" - すべて承認
  • "none" - 操作をキャンセル
  • "1,3,5" - 項目 1、3、5 をスキップ
  • "2-5" - 項目 2 から 5 をスキップ
• 各項目の検証状態を必ず表示します

命名テンプレート： 類似するアセットが 5 件以上検出された場合、テンプレートを提示します：

1. [category]-[description]-[modifier]
   • 例：product-laptop-front-view.jpg
2. [description]-[location]-[year]
   • 例：team-photo-office-2024.jpg
3. [type]-[name]-[variant]
   • 例：icon-arrow-blue.svg

フォルダーの整理： 以下を検出した場合、フォルダーを提案します：

• "team"、"staff"、"employee" を含む画像が 5 件以上 → team-photos フォルダー
• "product"、"item" を含む画像が 5 件以上 → product-images フォルダー
• "logo"、"brand" を含む画像が 5 件以上 → branding フォルダー
• "screenshot"、"capture" を含む画像が 5 件以上 → screenshots フォルダー

ロールバックシステム： 更新を行う前に、メモリに次の情報を保存します：

{
  "timestamp": "2026-01-10T00:45:00Z",
  "assets": [
    {
      "id": "asset-id",
      "originalName": "1.webp",
      "originalAltText": "",
      "newName": "podcast-host.webp",
      "newAltText": "Podcast host recording..."
    }
  ]
}

• 変更後 5 分間は元に戻せるようにします
• 次の監査が始まったらロールバックデータを消去します
• 最終サマリーにロールバックの選択肢を表示します

重複検出：

• アセットのサイズを比較します（一致する場合は重複の可能性が高いです）
• ファイル名を比較します（似た名前の場合は重複の可能性があります）
• 報告します："⚠️ 重複の可能性があるアセット：asset1.jpg（2.4MB）と asset1-copy.jpg（2.4MB）"
• 自動削除はせず、ユーザーが判断できるようにします

一般的なベストプラクティス

• 画像の内容を把握するため、必ず Webflow MCP の get_asset_preview を使用します（URL ではなく asset_id を指定）
• 具体的で説明的な提案を生成します（汎用的な提案は避けます）
• ユーザーに提示する前に、すべての提案を検証します
• 部分的な操作も適切に処理します
• 長時間かかる操作では、進捗状況を明確に表示します
• レポートでは、類似する問題をまとめます
• 視覚的なインジケーターを使用します：✅ ⚠️ ❌ 🔍 💡 📋 🎉
• 会話調を保ちつつ、簡潔にします
• 変更後は必ずロールバックを提示します