アセット監査

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

重要な注意点

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

アセットの取得・更新にはWebflow MCPの data_assets_tool を使用
画像コンテンツの分析にはWebflow MCPの get_asset_preview（アセットの asset_id を使用）を使用
利用可能なサイト一覧の表示にはWebflow MCPの data_sites_tool をaction list_sites で使用
開始前にベストプラクティスを参照するにはWebflow MCPの webflow_guide_tool を使用
他のツールやメソッドをWebflowの操作に使用しないでください
すべてのツール呼び出しには必須の context パラメータ（15～25語、第三人称視点）を含めること

手順

フェーズ1: サイト選択とアセット発見

サイトを取得: 対象サイトを特定します。ユーザーがサイトIDを提供しない場合は、それを尋ねてください。
全アセットを取得: Webflow MCPの data_assets_tool を使用してサイトからすべてのアセットを取得します（各アセットレコードにはプレビューに必要な asset_id が含まれます）
- 50以上のアセットがあるサイトの場合、20個ずつのバッチで処理
- 進捗を表示: 「アセット 1-20 / 150 を処理中...」
パターンを検出: アセットの命名における一般的なパターンを分析:
- カメラアップロード（IMG_、DSC_ など）
- スクリーンショット（screenshot、Screen Shot など）
- 汎用的な名前（untitled、image-1 など）
- 日付ベースの名前（2024-01-10 など）

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

問題を特定: 以下の条件に該当するすべてのアセットをリストアップ:
- 代替テキストが設定されていない（nullまたは空文字列）
- 既存の代替テキストの質が低い（短すぎる、冗長フレーズなど）
- SEOに適したアセット名ではない
- 重複または非常に類似している

パターン検出レポート: 検出されたパターンを表示:

🔍 検出されたパターン:
- 15個のアセットが「IMG_」で始まる（カメラアップロード）
- 8個のアセットに「screenshot」が含まれる
- 提案: これらのパターンを一括リネーム

ユーザーに優先順位を尋ねる: 生成内容を尋ねる:
- 代替テキストのみ
- SEOフレンドリーな名前のみ
- 両方
- 命名パターン/テンプレートを適用

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

アセットを分析: Webflow MCPの get_asset_preview ツールを使用し、各アセットの asset_id（フェーズ1から）を渡して、更新が必要なアセットを分析
- エラーハンドリング: Webflow MCPの get_asset_preview が失敗した場合、フォールバックを使用:
  - 既存のファイル名から説明を抽出
  - 警告付きの汎用プレースホルダーを使用
  - 他のアセットで続行
- タイムアウトを避けるためバッチで処理
検証付きの提案を生成:
- 代替テキストの検証:
  - 最大125文字（それ以上は警告）
  - 冗長フレーズなし（「image of」「picture of」「photo of」）
  - 句読点で終了すること
  - 汎用的な説明にフラグ（信頼度 < 50%）
- SEO名の検証:
  - 小文字a-z、0-9、ハイフンのみ
  - 二重拡張子なし（.webp.webp）- 既存の拡張子を先に削除
  - 最大100文字
  - スペース/アンダースコアをハイフンに置換
  - 特殊文字なし

フォルダ整理の提案: パターンが検出された場合、フォルダ構造を提案:

💡 整理の提案:
- 8枚のチーム画像用に「team-photos」フォルダを作成
- 15枚の商品写真用に「product-images」フォルダを作成

フェーズ4: 段階的な承認と適用

段階的な承認付きの提案を表示:
- チェックボックス付きの番号付きリストを表示
- 個別のトグルを許可: 「スキップする番号を入力（例：「2,4」）」
- オプション: 「all」「none」、または特定の番号
- 各提案の検証警告を表示

命名テンプレートを提供（多数の類似アセットがある場合）:

🎨 命名パターンを適用しますか？
1. [カテゴリ]-[説明]（例：team-john-headshot）
2. [説明]-[場所]（例：office-workspace-desk）
3. カスタムパターン...
4. パターンをスキップ、個別の名前を使用

ロールバックデータを保存: 変更を適用する前に、以下を保存:
- 元のアセット名
- 元の代替テキスト
- タイムスタンプ
- 変更されたアセット
更新を適用: Webflow MCPの data_assets_tool を使用して、承認されたアセットのみを更新
- バッチ更新の進捗を表示
- 部分的な失敗を適切に処理
- 成功と失敗を別々に報告

ロールバックオプションを提供: 変更適用後:

📋 ロールバック可能:
最終更新: 2分前に4つのアセットが変更されました
これらの変更を元に戻すには「undo」と入力してください

例

ユーザープロンプト:

サイトのアセット監査を実行してください。

ステップ1: 初期監査レポート

📊 SEOアセット監査: MCP デモ #2

合計: 4アセット

🔍 検出されたパターン:
- 4アセットが汎用的な数値名（1.webp、2.webp、3.webp、4.webp）
- すべてのアセットがWebP形式 ✓

⚠️ 代替テキストなし (4アセット):
├── 1.webp (代替テキストなし)
├── 2.webp (代替テキストなし)
├── 3.webp (代替テキストなし)
└── 4.webp (代替テキストなし)

⚠️ SEOに適さない名前 (4アセット):
├── 1.webp (汎用的な数値名)
├── 2.webp (汎用的な数値名)
├── 3.webp (汎用的な数値名)
└── 4.webp (汎用的な数値名)

---

何を生成しますか？
1. 代替テキストのみ
2. SEOフレンドリーな名前のみ
3. 代替テキストとSEOフレンドリーな名前の両方

オプションを選択してください（1、2、または3）。

検証警告付きの例:

📋 改善案:

[1] ✓ IMG_1234.jpg
    代替テキスト: 「プロフェッショナルなチームメンバーのヘッドショット、青い背景。」
    新しい名前: professional-team-member-headshot.jpg
    ✅ 検証合格

[2] ✓ screenshot-2024.png
    代替テキスト: 「ユーザーエンゲージメント指標を示すダッシュボード分析概要。」
    新しい名前: dashboard-analytics-overview.png
    ✅ 検証合格

[3] ⚠️ untitled-image.webp
    代替テキスト: 「写真」
    ⚠️ 警告: 代替テキストが短すぎます（10文字未満）- より詳細な説明が必要です
    新しい名前: untitled-image.webp
    ⚠️ 警告: より良い名前を生成できませんでした（画像プレビュー失敗）

[4] ⚠️ TeamPhoto2024!!!.jpg
    代替テキスト: 「大きな窓から自然光が差し込むモダンなオフィスでラップトップを操作する人の画像。植物があり、背景には大きな窓があります。」
    ⚠️ 警告: 代替テキストが長すぎます（137文字）- スクリーンリーダーのために短くすることを検討してください
    新しい名前: team-photo-2024.jpg
    ✅ 検証合格（特殊文字を削除）

どのアセットを更新しますか？

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

📋 改善案:

[1] ✓ 1.webp
    代替テキスト: 「ヘッドフォンとマイクを装着したポッドキャストホストが、スタジオでWebflowのポッドキャストエピソードを録音している様子。」
    新しい名前: webflow-podcast-host-recording-studio.webp
    ✅ 検証合格

[2] ✓ 2.webp
    代替テキスト: 「眼鏡をかけたプロの開発者が、モダンなオフィスでWebflowロゴを背景にラップトップを操作している様子。」
    新しい名前: developer-working-laptop-webflow-office.webp
    ✅ 検証合格

[3] ✓ 3.webp
    代替テキスト: 「タグラインとメールサインアップフォームがあるWebflowホームページのヒーローセクション。」
    新しい名前: webflow-homepage-hero-section.webp
    ✅ 検証合格

[4] ✓ 4.webp
    代替テキスト: 「Webflow Confのステージで、聴衆が見守る中プレゼンテーションを行うスピーカー。」
    新しい名前: webflow-conf-speaker-presentation-stage.webp
    ✅ 検証合格

---

どのアセットを更新しますか？
- スキップする番号を入力（例：「2,4」で項目2と4をスキップ）
- すべて進めるには「all」と入力
- キャンセルするには「none」と入力

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

🔄 更新を適用中...

進捗: ████████████████████ 100% (4/4 アセット)

✅ 更新が正常に適用されました！

SEOアセット監査完了: MCP デモ #2

サマリー:
- ✅ 4つのアセットが正常に更新されました
- ❌ 0つのアセットが失敗しました
- ⏭️ 0つのアセットがスキップされました

適用された変更:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp                │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp                │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
└─────────────────────────────────────────────────────────────────┘

📋 ロールバック可能:
最終更新: たった今4つのアセットが変更されました
これらの変更を元に戻すには「undo」と入力してください

---

🎉 サイトのアセットがSEOとアクセシビリティのために完全に最適化されました！

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

🔄 アセット1と3に更新を適用中...

進捗: ████████████████████ 100% (2/2 アセット)

✅ 部分更新完了！

サマリー:
- ✅ 2つのアセットが正常に更新されました
- ❌ 0つのアセットが失敗しました
- ⏭️ 2つのアセットがスキップされました（リクエストによる）

適用された変更:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ 代替テキスト追加                                          │
│     ✓ ファイル名更新                                            │
└─────────────────────────────────────────────────────────────────┘

スキップされたアセット（後で監査を再実行できます）:
- [2] 2.webp
- [4] 4.webp

📋 ロールバック可能:
これらの2つの変更を元に戻すには「undo」と入力してください

ガイドライン

フェーズ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_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つ以上の類似アセットが検出された場合にテンプレートを提供:

[カテゴリ]-[説明]-[修飾子]
- 例: product-laptop-front-view.jpg
[説明]-[場所]-[年]
- 例: team-photo-office-2024.jpg
[タイプ]-[名前]-[バリエーション]
- 例: 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 を使用）を使用すること

Webflow アセット監査