Pixel Check

デザインどおりに組めているかを確かめるとき、デザインカンプと実装のページを見比べるのは手間がかかります。Pixel Check は、Web ページを実装する人のための Chrome 拡張機能です。デザイン画像を実装中のページにそのまま重ねて、ずれを 1px 単位で確かめられます。

すべての機能を無料で、制限なく使えます。広告やライセンス認証はありません。

デザインを重ねる

• PNG / JPG の画像を、選択またはドラッグ＆ドロップで追加します。追加した画像は一覧に残り、表示する画像を切り替えられます（1枚 10MB まで）
• 画像はドラッグで動かし、X / Y の数値で 1px 単位に合わせます。「水平中央に固定」で画面の中央に揃えることもできます
• 透過度と表示幅を変えられます
• 描画モードは、通常・差分・乗算・スクリーン・反転から選べます。差分にすると、デザインと実装の重ならない部分が浮かび上がります
• 「移動ロック」をオンにすると、画像はクリックを通すようになり、重ねたままページを操作できます

測る

計測モードでページ上をドラッグすると、範囲の幅・高さと対角の距離を表示します。

要素を調べる

要素選択モードでは、ポインターを重ねた要素の情報をその場に表示します。要素名と class、サイズと座標、display や position、margin と padding、フォント、背景色や枠線など。表示する項目は選べます。

ページ幅を合わせる

ページの幅を数値で指定すると、それに合わせて Chrome のウィンドウ幅を調整します。デザインと同じ幅で確かめたいときに使います。

ショートカットキー

操作	Windows など	Mac
オーバーレイの表示切替	Alt + Shift + O	Control + Shift + O
移動ロックの切替	Alt + Shift + L	Control + Shift + L
ページ内パネルの開閉	Alt + Shift + P	Control + Shift + P
デザイン / 計測 / 要素選択モードの切替	Alt + Shift + D / M / E	Control + Shift + D / M / E

D / M / E は、ページにフォーカスがあるときに使えます。操作パネルは、Chrome のサイドパネルとページ内のパネルのどちらからも開けます。

データについて

追加した画像と設定は、お使いのブラウザの中だけに保存します。外部への送信はしていません。詳しくはプライバシーポリシーをご覧ください。