デモURL
WordPress更新補助AI保守提案ワークベンチ
https://wordpress-update-assistance-ai.web.app/
作品概要
WordPress更新補助AI保守提案ワークベンチは、WordPressサイトの保守・更新提案を行うWeb制作者やフリーランス向けに開発した、調査・見積・比較・報告書作成をまとめて支援する業務補助アプリです。
WordPressの更新作業では、公開サイトの状態確認、プラグイン構成の整理、更新リスクの説明、テスト環境との表示差分確認、顧客向け見積や報告書の作成など、細かい確認作業が多く発生します。このアプリでは、それらをひとつのワークベンチ上で順番に進められるようにし、保守提案の初動を早く、説明しやすくすることを目的にしています。
公開URLを入力すると、サイトの基本状態やWordPressらしさ、フォーム数、サイトマップ情報などを確認できます。さらに、専用のWordPress診断プラグインから取得した内部診断JSONを貼り付けることで、PHP・WordPress・テーマ・プラグイン情報を提案材料として整理できます。
ポートフォリオ用紹介文
WordPress保守提案で毎回発生する「調査」「リスク整理」「見積」「表示確認」「報告文作成」を、ひとつの流れにまとめたAI活用型の業務支援ツールです。
単なるチェックリストではなく、Web制作者が顧客へ説明する場面を想定し、技術的な診断結果を見積項目や顧客向け文章に変換できるように設計しました。公開サイトの簡易診断、内部診断JSONの整理、重要機能の補正、類似プラグインの確認、SEO基本確認、本番・テスト環境の表示比較までを一画面で進められます。
特に表示比較では、本番サイトとテストサイトのスクリーンショットを左右表示・重ね表示で確認でき、透明度調整や1px単位の位置合わせにも対応しています。広告表示の有無などで縦位置がずれるページでも、比較しやすい状態に調整できます。
WordPress更新作業を「作業者の経験だけに頼る」状態から、説明可能な確認フローとして扱えるようにすることを目指したアプリです。
主な機能
- 公開URLからの簡易サイト診断
- WordPress判定、ステータス、フォーム数、サイトマップ情報の確認
- WordPress診断プラグイン用ZIPのダウンロード
- 診断プラグインで取得した内部診断JSONの貼り付け・整理
- PHP、WordPress、テーマ、プラグイン情報の確認
- 有効・無効・更新ありプラグインの整理
- 重要機能の手動補正
- フォーム、EC、会員、予約、外部連携などの影響範囲確認
- 類似・重複プラグイン候補の確認
- SEO基本情報、サイトマップ、noindex系の確認
- 概算見積項目の自動整理
- 顧客向け説明文・メール文・作業報告書の生成
- Codexなどの開発支援AIへ渡す作業指示文の作成
- 本番環境とテスト環境のURL候補生成
- スクリーンショット取得による表示比較
- 左右表示による本番・テスト比較
- 重ね表示による差分確認
- 透明度スライダーによるテスト画像の透過調整
- 1px単位の上下左右位置合わせ
- 長押しによる連続位置調整
- コメントピンによる差分メモ
- AIによるスクリーンショット差分確認
- 複数ページの一括スクショ取得・一括AI差分確認
- ページ一覧のキーボード操作
- IndexedDBによるスクリーンショットキャッシュ
- Firebase Hostingでの公開画面配信
- ローカル補助サーバーによる安全な診断・撮影処理
使い方
1. 対象サイトURLを入力する
最初に、調査したいWordPressサイトのURLを入力します。公開診断を実行すると、HTTPステータス、最終URL、WordPressらしさ、フォーム数、サイトマップの有無などを確認できます。
この段階では、外部から見える範囲の情報だけを使って診断します。顧客から管理画面情報を預かる前でも、保守提案の初期調査として使えるようにしています。
2. 案件サマリーを確認する
診断後は、案件サマリーとしてリスク、更新対象数、見積の概算、表示比較の準備状況などを確認できます。
画面上部に工程ナビを配置しているため、診断、補正、見積、比較、報告書、Codex指示、本番反映チェックという流れで作業を進められます。
3. WordPress内部診断JSONを貼り付ける
より詳しい提案を作る場合は、専用の診断プラグインをWordPressに一時的に導入し、内部診断JSONを取得します。
取得したJSONをアプリへ貼り付けると、以下のような情報を整理できます。
- PHPバージョン
- WordPressバージョン
- 使用テーマ
- 子テーマの有無
- 有効プラグイン
- 無効プラグイン
- 更新可能プラグイン
- WordPressデバッグ設定
- サイトURL、ホームURL
- REST APIやサイトヘルス関連情報
内部情報を貼り付けることで、公開診断だけでは分からない更新リスクや見積前提を補強できます。
4. 重要機能を補正する
フォーム、EC、決済、会員機能、予約機能、外部サービス連携など、更新後に個別テストが必要な機能を手動で補正できます。
WordPress更新では、単にプラグインを更新するだけでなく、問い合わせフォームの送信、決済完了メール、会員ログイン、予約導線などの確認が必要になる場合があります。このアプリでは、それらを見積や作業前チェックに反映できるようにしています。
5. 見積項目を確認する
診断結果と手動補正をもとに、更新作業、バックアップ、テスト環境確認、フォーム確認、表示比較、SEO確認などの見積項目を整理します。
見積はあくまで概算として扱い、Web制作者が最終判断できるように、項目ごとに内容を確認・調整しやすい構成にしています。
6. 本番サイトとテストサイトを比較する
比較機能では、本番URLとテストURLを入力し、サイトマップや代表ページから比較候補を作成できます。
候補ページごとにスクリーンショットを取得し、以下の方法で確認できます。
- 左右表示: 本番とテストを横並びで確認
- 重ね表示: 本番の上にテスト画像を重ねて確認
- 透明度調整: テスト画像の透過率を変更
- 位置合わせ: テスト画像を上下左右に1px単位で移動
- コメントピン: 気になる場所へメモを追加
- AI差分確認: 取得済みスクリーンショットをAIで比較
広告表示の有無や、読み込みタイミングの違いでページ位置がずれる場合でも、位置調整ボタンで見た目を合わせながら差分確認できます。
7. ページ一覧を効率よく操作する
比較ページが多い場合でも確認しやすいように、ページ一覧はキーボード操作に対応しています。
- 上下キー: フォーカス行を移動
- Enterキー: 一括差分確認対象のチェックをON/OFF
- クリック: 表示対象ページを選択
大量のURL候補がある場合でも、マウス移動を減らして確認対象を選びやすくしています。
8. 顧客向け文章を作成する
診断結果、補正内容、見積項目、表示比較メモをもとに、顧客へ送る説明文やメール文を作成できます。
技術的な情報をそのまま出すのではなく、顧客に伝わりやすい言葉へ変換することを意識しています。更新作業の必要性、注意点、確認項目、概算費用をまとめた文章を作成できます。
9. Codex向け作業指示を作成する
WordPressテーマやプラグインの調査を開発支援AIに依頼する場面を想定し、Codexへ渡すための作業指示文も作成できます。
対象URL、診断結果、プラグイン情報、重要機能、表示比較メモ、見積前提などをまとめ、調査・修正・報告に必要な情報を整理したプロンプトとして出力できます。
10. 本番反映チェックを整理する
本番反映前、反映中、反映後に確認する項目をチェックリスト化できます。
バックアップ、テスト環境確認、更新対象の確認、フォーム送信テスト、表示確認、顧客報告など、作業漏れを防ぐための確認項目をまとめられます。
スクリーンショット比較機能の使い方
1. 本番URLとテストURLを入力する
比較したい本番サイトと、テスト環境またはローカル環境のURLを入力します。同じパス構造のページを比較候補として生成できます。
2. 比較URL候補を生成する
サイトマップや代表ページ情報をもとに、トップページ、固定ページ、投稿ページ、問い合わせページなどを比較候補として一覧化します。
自動候補に出ないページは、URLまたはパスを手動で追加できます。
3. スクリーンショットを取得する
選択したページの本番・テスト両方のスクリーンショットを取得します。取得した画像はブラウザ内のIndexedDBにキャッシュされるため、再表示もしやすくなっています。
4. 左右表示で確認する
左右表示では、本番スクリーンショットとテストスクリーンショットを横に並べて確認できます。片方をスクロールすると、もう片方も同期してスクロールするため、同じ位置を比較しやすくしています。
5. 重ね表示で確認する
重ね表示では、本番スクリーンショットを下地にし、テストスクリーンショットを上に重ねます。透明度スライダーでテスト画像の濃さを変えることで、余白、崩れ、文字位置、画像位置の違いを見つけやすくしています。
6. 広告ズレを位置調整する
ブログ記事や固定ページでは、本番環境だけ広告が表示され、テスト環境では広告が出ないことがあります。その場合、ページ全体の位置がずれて比較しづらくなります。
このアプリでは、重ね表示時にテスト画像を上下左右へ1pxずつ移動できます。長押しにも対応しているため、大きくずれている場合も素早く合わせられます。
7. コメントピンを追加する
気になる箇所をクリックすると、スクリーンショット上にコメントピンを追加できます。表示崩れ、余白の違い、フォントサイズの違い、画像位置の違いなどをメモとして残せます。
技術構成
- React
- TypeScript
- Vite
- Tailwind CSS
- Firebase Hosting
- Firebase Authentication
- Firebase Admin SDK
- Express
- tsx
- Gemini API
- Google GenAI SDK
- IndexedDB
- WordPress診断プラグイン
- ローカル補助サーバー
- Cloud Runデモ構成
工夫した点
WordPress保守提案では、技術的な確認結果をそのまま顧客へ渡しても伝わりにくい場合があります。そのため、診断結果を単なる一覧で終わらせず、見積項目、リスク説明、作業前チェック、顧客向け報告文へつなげる流れを重視しました。
また、表示比較機能では、単純な左右表示だけでなく、実務でよく起きる「広告の有無による縦ズレ」「本番とテストで一部だけ読み込み状態が違う」「ページ数が多く確認が大変」といった問題に対応できるようにしています。
重ね表示、透明度調整、1px単位の位置合わせ、ページ一覧のキーボード操作を追加することで、目視確認の負担を減らし、表示差分を説明しやすくしました。
データの扱いについても、スクリーンショット画像やAPIキーをFirebase Hostingへ直接アップロードしない構成にしています。公開画面はHostingで配信し、診断や撮影、AI処理はローカル補助サーバーやデモ用Cloud Runで行う構成にすることで、用途に応じた安全な運用を想定しています。
想定ユーザー
- WordPress保守を請けているフリーランス
- 小規模なWeb制作会社
- 既存顧客へ保守提案を行いたい制作者
- WordPress更新作業の見積を効率化したい人
- 本番・テスト環境の表示確認を丁寧に行いたい人
- AIを使って顧客向け説明文を整えたいWeb担当者
- WordPress更新前のリスク整理を標準化したいチーム
活用シーン
新規保守提案前の初期調査
名刺交換や紹介で相談を受けたサイトに対して、公開URLから簡易診断を行い、保守提案の入口を作れます。
既存顧客への更新提案
プラグイン更新やPHPバージョン変更が必要な場合に、リスクや確認項目を整理し、顧客へ説明しやすい形にできます。
テスト環境確認
本番とテスト環境のスクリーンショットを比較し、更新後の表示崩れやレイアウト差分を確認できます。
作業報告書作成
診断結果、見積、表示比較メモ、作業ログをもとに、顧客向けの作業報告文を作成できます。
今後の改善案
- WordPress管理画面からの診断データ取得フロー改善
- 複数案件の保存・検索機能
- 見積テンプレートのカスタマイズ
- 顧客別の単価設定
- 表示比較結果のPDF出力
- コメントピン付きスクリーンショットの共有機能
- 差分検出結果の自動分類
- プラグイン更新履歴の記録
- バックアップ手順のテンプレート化
- 本番反映チェックリストの案件別保存
- チーム共有機能
- Cloud Run版のデモ範囲拡張
制作メモ
このアプリは、WordPress保守の現場で発生する細かい判断や確認作業を、できるだけ同じ画面上で扱えるようにすることを意識して制作しました。
特に、Web制作者が顧客へ説明するためには、技術情報だけでなく「なぜ確認が必要なのか」「どの作業に費用がかかるのか」「更新後に何を見ればよいのか」を整理する必要があります。
WordPress更新補助AI保守提案ワークベンチは、その説明準備を早くし、保守提案をより具体的にするための業務補助ツールです。