asset-audit

アセット監査

SEO 最適化のために Webflow サイトのアセットを分析します。

重要な注意事項

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

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

手順

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

1. サイトを取得：対象のサイトを特定します。ユーザーがサイト ID を指定していない場合は、確認してください。
2. すべてのアセットを取得：Webflow MCP の asset_tool を使用して、サイトからすべてのアセットを取得します
   • アセットが 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. アセットを分析：更新が必要なアセットの分析には、Webflow MCP の get_image_preview ツールを使用します
   • エラー処理：Webflow MCP の get_image_preview が失敗した場合は、次の代替手段を使用します
     • 既存のファイル名から説明を抽出する
     • 警告を添えて汎用的なプレースホルダーを使用する
     • ほかのアセットの処理を続ける
   • タイムアウトを避けるため、複数回に分けて処理します
8. 検証付きで提案を生成：
   • alt テキストの検証：
     • 最大 125 文字（超過する場合は警告）
     • 冗長な表現（「image of」「picture of」「photo of」）を使用しない
     • 句読点で終える
     • 一般的すぎる説明にはフラグを付ける（信頼度 < 50%）
   • SEO 名の検証：
     • 小文字の a～z、数字の 0～9、ハイフンのみを使用する
     • 二重拡張子（.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'）」
    • 選択肢：「all」、「none」、または個別の番号
    • 提案ごとに検証の警告を表示する
11. 命名テンプレートを提案（類似アセットが多い場合）：

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

12. ロールバックデータを保存：変更を適用する前に、次の情報を保存します
    • 元のアセット名
    • 元の alt テキスト
    • タイムスタンプ
    • 変更したアセット
13. 更新を適用：承認されたアセットのみを更新するため、Webflow MCP の asset_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 文字（アクセシビリティのベストプラクティス）
• 句読点（ピリオド、感嘆符、疑問符）で終わる必要があります
• 冗長な表現を削除します：
  • ❌ 「人物の画像」→ ✅ 「机で作業する人」
  • ❌ 「ロゴの写真」→ ✅ 「青い背景に表示された会社のロゴ」
  • ❌ 「〜を示す写真」→ ✅ 直接的な説明
• 短すぎる場合（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_image_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_image_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_image_previewを使用します
• 具体的で分かりやすい提案を生成します（一般的な提案は避けます）
• ユーザーに提示する前に、すべての提案を検証します
• 一部だけ実行された操作も適切に処理します
• 時間のかかる操作では、進行状況を明確に示します
• レポートでは、類似する問題をまとめます
• 視覚的なインジケーターを使用します：✅ ⚠️ ❌ 🔍 💡 📋 🎉
• 会話調を保ちつつ、簡潔にします
• 変更後は必ずロールバックを提案します