近い依頼 Client-use context
Chrome拡張、ブラウザ上の作業補助、デザインチェック、日英UI、公開前の権限説明やドキュメント整備に近い制作です。
DiffPixel
実装ページと参照画像を、同じ画面で重ねて見るための拡張機能。
ブラウザ上で視覚QAを行うChrome/Edge拡張。
ローカル画像をページ上に重ね、差分表示、グリッド、位置、スケール、不透明度、ブレンドモードを調整できます。日英UI、ローカル保存、公開用のマニュアル・プライバシーポリシーまで含めて整えています。
Overview
ブラウザ上で、実装と参照画像を直接比較。
デザイン確認のために、ブラウザ、画像ビューア、デザインツールを行き来しない。
Screenshot Slot
DiffPixel
拡張パネル、重ね合わせ状態、差分表示、ストア用スクリーンショットなどを配置できます。画像がない状態でも、機能範囲と公開実績が読めるようにしています。
実装範囲 Built scope
content script、フローティングパネル、レイヤー管理、画像追加、位置・倍率・不透明度・ブレンド調整、グリッド、テーマ、ローカル保存、日英ローカライズを実装しました。
AIを使った進め方 AI-assisted process
AIでChrome Web Store向けの説明、権限の伝え方、チェックリスト、UI文言の候補を整理し、最終的な機能範囲と公開文言は手で確認しました。
証明できること What this proves
ブラウザ拡張の設計、実務に近い視覚QA体験、ローカルファーストな保存、公開時に必要な説明責任まで含めて作れることを示しています。