「ピクセルを1pxずつ動かしながらズレを確認するの、地味につらい」
フロントエンドの実装確認って、細かい作業の積み重ねです。デザインカンプをオーバーレイして、ちょっとズレてるな…と思いながら矢印キーをカチカチ押し続ける、あの時間。
既存ツールをいくつか試してみたけど、どれも「もうちょっとここが…」という不満が残っていました。だったら自分で作ろうと思って作ったのが Pixel Checker です。
Pixel Checkerとは
デザインカンプ画像をWebページにオーバーレイ表示して、実装のズレをピクセル単位で確認できるChrome拡張機能です。
透明度・位置・サイズをその場で調整しながら、デザインと実装を重ねて比較できます。
ここが他のツールと違う
キーボードで10倍・100倍速で動かせる
1pxずつの調整だけでなく、ショートカットでまとめて動かせます。
- 矢印キー：1pxずつ移動
- Shift + 矢印キー：10pxずつ移動
- Command + Shift + 矢印キー：100pxずつ移動
「だいたいこのあたり」から「ここでピッタリ」まで、粗→細の2段階でサクッと合わせられます。カチカチ連打する時間がなくなりました。
複数カンプをクリックかショートカットで切り替え
SPとPC、複数ページのカンプをまとめてアップロードしておけます。サムネイルをクリックするか、Command + 左右キー で素早く切り替え可能。
ページをまたいで作業するときも設定が保持されるので、いちいち再設定する手間がありません。
邪魔にならないくらい小さくなる
確認パネルって、作業中ずっと画面に出っぱなしになりますよね。Pixel Checkerは縮小ボタンで限りなく小さなサイズにたためます。
「確認したいときだけ広げて、それ以外は邪魔にならない」状態で使えます。
スマホサイズでの確認って、折り畳めないメニューが結構邪魔になるんですよね。
折り畳んだ状態でも十字キーで操作できるので、ストレスなく作業ができます。
インストール方法
Chrome Web Storeで「Pixel Checker」と検索してインストールするだけです。
データはすべてローカル保存で、外部サーバーへの送信は一切ありません。
まとめ
「既存ツールの不満を解消するために自分で作った」ツールなので、実際の作業でひっかかる部分にフォーカスして作っています。
- 粗→細の2段階移動でピクセル合わせが速い
- 複数カンプの切り替えがシームレス
- 作業の邪魔にならない最小化
フロントエンドの実装確認をもう少しラクにしたい方、ぜひ一度使ってみてください。