使い方
PixelPont の機能をひととおり説明します。初めての方は、パネルの中の案内から始めてください。
はじめる#
Chrome ウェブストアから追加する
Chrome ウェブストア で「Chrome に追加」を押します。無料です。追加したら、ツールバーのパズルのアイコンから PixelPont をピン留めしておくと便利です。カンプと比べたいページを開く
実装中のページ（localhost でも公開中のサイトでも）を Chrome で開きます。ツールバーの PixelPont アイコンを押す
そのタブに固定された操作パネルが開きます。カンプ画像をドロップ
PNG / JPG / WebP。複数枚をまとめて追加できます。位置を合わせてロックする
追加したカンプは動かせる状態で始まります。位置が決まったら、パネル上部のカンプ名の右にある鍵のボタンでロックすると、ページを操作できます。
位置と倍率#
上部の 4 つの数値（X・Y・倍率・不透明度）は、そのまま入力欄です。
- 数字を直接入力するか、↑ ↓ で 1 ずつ変更（Shift で 10。倍率は 0.01 ずつ、Shift で 0.1）
- パネルにフォーカスがあるとき、矢印キーでカンプ全体を 1px 動かす
- ページの上でカンプをドラッグして大まかに合わせる
- 「中央寄せ」をオンにすると X は「中央」に固定
- 「スクロール同期」でページと一緒にカンプも動く
1.0 / 0.5 / 幅に合わせる の 3 つ。Retina 用の 2 倍の書き出しは 0.5 を選びます。
不透明度と合成#
不透明度と合成（ブレンド）の組み合わせで、ずれの見え方が変わります。
| 合成 | 見え方 | 向いている場面 |
|---|---|---|
| Normal | そのまま重なる | 全体の雰囲気を見る |
| Difference（パネルでは Diff） | 同じ部分が黒く消え、ずれだけが残る | 1px 単位のずれ探し |
| Invert | 反転して重なる（既定） | 文字の位置合わせ |
| Multiply | 暗い部分が重なる | 余白の比較 |
合成ごとに不透明度を覚えます。初めて使うときは、Invert・Normal が 50%、Difference・Multiply・Overlay が 100% です（「調整」タブの「全カンプ共通」でオフにできます）。
複数のカンプ#
SP 用と PC 用、ページごとなど、何十枚でも登録できます。
- 上部の ‹ › で前後に切り替え
- カンプ名を押すと検索つきの一覧
- 「カンプ」タブでドラッグして並べ替え、ロック、削除
- カンプと設定はドメインごとに保存
計測#
「計測」タブで、カンプと実装のずれを要素ごとに測ります。AI に計測させた場合も、同じ結果がここに出ます。計測から修正までを AI に任せる方法は、AI 連携にあります。
| 結果 | 意味 |
|---|---|
| 位置のずれ | 要素の位置・大きさがカンプと違う。↓3px、w+4 のように表示 |
| 色の違い | 実装とカンプで色が違う。両方の色見本と色コード |
| 共通のずれ | ほとんどの要素が同じだけずれている。先にカンプの位置を直す |
| 信頼度が低いもの | ? つきで薄く表示。境目が曖昧で、誤検出の可能性がある |
カンプとページの文字の描き方の違いや、動く要素（スライダー・動画）は、ずれとして拾うことがあります。結果は必ず目でも確かめてください。
パネル#
- 幅：通常 400px ⇄ 拡大 720px。縁をドラッグすると 300〜720px で自由に変更
- 最前面に表示：パネルを常に手前に出す（対応するブラウザのみ）
- テーマ：ライト / ダーク
- 言語：自動 / 日本語 / English
キー操作#
| キー | 動き |
|---|---|
| ← ↑ ↓ → | カンプを 1px 移動 |
| Shift + 矢印 | カンプを 10px 移動 |
| H | カンプの表示 / 非表示 |
| L | ロック / 解除 |
| O | 不透明度を 25% ずつ切り替え |
[ ] | 倍率を 1% ずつ変更 |
| ↑ ↓（入力欄で） | 数値を 1 ずつ変更（倍率は 0.01 ずつ） |
| Esc | 入力欄から抜けて、カンプの操作に戻る |
困ったとき#
カンプが重ならない
ツールバーのアイコンを押したタブが「対象」です。パネル上部のサイト行に「適用中」と出ているか確かめてください。別のタブを見ているときは「このタブに切替」を押します。
計測できない
計測タブのエラーの案内に従ってください。ページ全体を測るときは「スクロール同期」をオンにする必要があります。
ローカルの HTML ファイルで使いたい
chrome://extensions で PixelPont の「詳細」を開き、「ファイルの URL へのアクセスを許可する」をオンにします。開発サーバー（localhost）ならそのまま使えます。
ダイアログの後ろにカンプが隠れる
「調整」タブの「重ね方」で「トップレイヤー」を選びます。
ここに無いことで困っている
問い合わせからお知らせください。不具合の報告には、デバッグ情報を添えてもらえると、原因を調べやすくなります。