Pixfit

デザインカンプをWebページに重ねて、実装とのズレを確認できるWeb制作向けオーバーレイツール

デザインカンプを、実装中のWebページにそのまま重ねて確認できる Web制作向けの Chrome 拡張です。 画像をドロップするだけで、見出しの位置・余白・ボタン幅などの「数px のズレ」がひと目でわかります。 ■ こんな方に ・コーディング中に、カンプとの差分をすばやく確認したいフロントエンドエンジニア ・実装の検品をするデザイナー・ディレクター ・レスポンシブ対応の PC / SP 表示をまとめてチェックしたい方 ■ 主な機能 ・Viewport 幅に自動フィット 　1800px のカンプも、1440px の画面なら 80% で自動表示。倍率の手計算はいりません。 ・PC / SP を自動切替 　PC・SP それぞれ 2 枚までカンプを登録でき、ブレイクポイントに合わせて表示を切り替えます。 ・パーツ単位のフィット 　セクションやカードなどの局所カンプを、ページ上の要素を選ぶだけでその幅に合わせます。 ・LOCK で重ねたまま DevTools 　Overlay を透過して、ページ操作・右クリック・Element Picker がそのまま使えます。 ・細かな位置調整 　ドラッグ、矢印キー（1px / Shift で 10px）、X・Y の直接入力で位置を合わせられます。 ・Opacity 調整と表示 ON / OFF ・Scale は Auto / Original / Custom（10〜300%）から選択 ・設定はページごとに自動保存 ■ 使い方 1. 確認したいページで Pixfit のアイコンをクリック 2. カンプ画像（PNG / JPG / WebP）を選択、またはページにドラッグ＆ドロップ 3. Opacity を下げて、ズレを確認 ■ ローカルファイルで使う場合 file:// のページで使うときは、拡張機能の詳細から「ファイルの URL へのアクセスを許可する」を ON にしてください。 http:// / https:// / localhost では追加設定なしで動作します。 ■ プライバシー 登録した画像と設定は、お使いのブラウザ内（chrome.storage.local）にのみ保存されます。 外部サーバーへの送信は一切行いません。