WebPatchは、Webサイトの制作・改修プロセスにおいて発生するフィードバック、修正指示、デザイン確認、および対応完了の進捗管理を劇的に効率化するビジュアルレビュー支援ツールです。HTMLファイルのZIPアーカイブや対象WebページのURLリストを読み込み、実際のブラウザ表示画面を見ながら気になる要素にダイレクトにピンを立てて修正コメントを記録できます。
開発の背景と抱えていた課題
従来のWeb制作における修正依頼は、メール、チャット、Excel・スプレッドシート、あるいは画面キャプチャ画像への赤書きといった多様な媒体に散らばりがちでした。「どのページのどの場所の修正指示なのか」「テキスト変更なのかデザイン変更なのか」「すでに修正作業が完了しているのか」という認識の齟齬が頻繁に発生し、ディレクターやエンジニアの大きなストレスとなっていました。
システムアーキテクチャと主な特徴
画面上へのダイレクト指示とピン留め 実際のWebサイトのレイアウト上に直感的にピンを打つことで、対象のHTML要素と紐付いたピンポイントな修正指示を作成できます。
変更前後のビジュアル比較（Before / After） 修正前と修正後の画面をオーバーレイやサイドバイサイドで重ね合わせて比較表示し、意図通りのデザインやレイアウト修正が正しく反映されているかを一目で確認できます。
ステータス管理とスレッド対話 各修正ピンごとに「未対応」「作業中」「確認待ち」「完了」といったステータスを付与。ピン内で関係者同士がコメントのやり取りを行えるため、修正の意図や履歴がすべて追跡可能です。
実装されている主な機能
- URL指定またはHTML ZIPファイルからのサイト取り込み
- レスポンシブ表示（PC / タブレット / スマホ）の切替確認
- 画面要素へのピン留めによるビジュアルコメント機能
- 修正ステータス管理（未対応 / 作業中 / 完了など）
- ピンごとのスレッド形式でのコメント・画像やり取り
- 修正前・修正後画面のビジュアル比較機能
- 修正指示一覧のCSV / 報告書PDFエクスポート
- レビュー用共有URLの即時発行機能
想定される利用シーン
- クライアントとのWebサイト検収やデザインフィードバックをスムーズに進めたい制作会社
- 複数メンバーでサイトの修正点やテキスト赤入れを効率よく共有・追跡したいディレクター
- 修正指示の場所や意図を正確に把握し、手戻りのない実装を行いたいエンジニア
設計において重視したポイント
レビューに参加するクライアントや非エンジニアの担当者が、マニュアルを読まなくても直感的に操作できるシンプルなUIを徹底追求しています。テキストだけでなく実際の画面要素と指示を完全に統合することで、指示の行き違いによる修正のやり直しをゼロにすることを目指しています。
現在の開発状況
現在はMVP段階として、URLおよびHTMLからの画面取り込み、ビジュアルピン留め機能、およびステータス追跡機能を中心に実務での検証を進めています。
| 項目 | 詳細情報 |
|---|---|
| Status | MVP |
| Category | Visual Feedback & Review Tool |
| Primary Focus | Webビジュアルレビュー / 画面上コメントピン / 修正指示の一元管理 / 検収効率化 |
