Pixfit

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

Pixfitは、Web制作向けのデザインオーバーレイChrome拡張です。 PNG / JPG / JPEG / WebPのデザインカンプを現在のWebページ上に重ね、実装とのズレを視覚的に確認できます。 PC/SPのレスポンシブ確認、位置・倍率・不透明度の調整、パーツ単位の比較まで、コーディング中の確認作業をブラウザ上で行えます。 主な機能 ・ブレークポイントに応じてPC / SPデザインを自動切り替え ・PC 1/2、SP 1/2、パーツ 1/2の複数スロット ・PNG / JPG / JPEG / WebPのファイル選択とDrag & Drop ・登録画像の変更・削除 ・Viewport幅に合わせるAuto Scale ・Original / Custom Scale ・パーツ画像を選択したページ内要素の幅に合わせる「要素に合わせる」 ・MOVEでデザイン画像をドラッグして位置調整 ・X / Yを1px単位で微調整 ・LOCKでWebページやDevToolsの操作を優先 ・Opacity調整 ・ページごとの設定保存 ・ローカルHTML（file://）に対応