画像越しに要素を検証！Design Trackerの「Inspectモード」がコーディングの常識を変える件
こんにちは、志乃です。
先日リリースしたChrome拡張機能『Design Tracker – Overlay for Coding』。おかげさまで「こういうのが欲しかった」という声をいただいています。
今回は、このツールの中でも私が特に「これだけは絶対に入れてやる……！」と執念を燃やして開発した、最強の時短機能「Inspect（インスペクト）モード」の魅力について語らせてください。
従来の「オーバーレイあるある」な絶望
Web制作でデザインカンプをブラウザに重ねて確認する際、こんなストレスを感じたことはありませんか？
- デザイン画像を重ねる
- 「あ、このボタンの余白がちょっとズレてるな」と気づく
- 要素を検証するために、一度画像を非表示にする（画像が邪魔でクリックできないから）
- DevToolsで要素を選んでCSSを調整する
- また画像を表示して、ズレが直ったか確認する
……この「表示・非表示」の往復、1日に何十回繰り返していますか？ この地味な往復ビンタのような作業、実はかなりの集中力を削いでいるんです。
Inspectモード（Alt+I）がもたらす「魔法」の体験
Design TrackerのInspectモード（ショートカット：Alt+I）を使えば、そのストレスは過去のものになります。
このモードをONにすると、デザイン画像を最前面に表示したまま、その下のHTML要素を「突き抜けて」選択できるようになります。
何がすごいの？
- 画像を見たまま検証： デザイン画像を半透明で重ねた状態のまま、DevToolsのセレクトツールで背後の要素をカチッと選択。
- リアルタイム修正： 画像越しに「あ、あと2px右だな」と確認しながら、DevToolsで数値をいじる。その変化が瞬時にデザインとの重なりで確認できる。
- 集中力が途切れない： 「検証のために画像を消す」という余計な思考スイッチが不要。
まさに、「透視能力を手に入れたようなコーディング体験」です。
モバイル実装でも威力を発揮
最近はモバイルファーストの現場がほとんどですが、このInspectモードはDevToolsのデバイスモード（スマホ画面シミュレーション）でも完璧に動作します。
「画面幅に自動合わせ」機能を併用すれば、スマホ用のカンプを重ねたまま、画像越しに要素をいじってレスポンシブの微調整が可能。1pxのズレも許されないシビアな現場でこそ、このシームレスな操作感が効いてきます。
差分（Difference）モードとの合わせ技で最強に
「どこがズレているか」を可視化するDifferenceモードで差分を浮き彫りにし、そのままInspectモードで要素を掴んで修正する。
このコンボを使えば、ピクセルパーフェクトの達成難易度は劇的に下がります。 「なんとなく合ってる」を「完璧に一致している」に変えるまでの時間が、これまでの半分以下になるはずです。
最後に：効率化の先に「こだわり」を
ツールを作る上で一番大切にしたのは、「開発者のリズムを止めないこと」です。
マウスでのポチポチ操作を最小限にし、キーボードショートカットでサクサクとモードを切り替える。この「指に馴染む感覚」をぜひ体験してみてください。
「もっとこういう使い方がしたい」「ここが惜しい」といったフィードバックもお待ちしています！
▼ 『Design Tracker』のダウンロードはこちらから [ウェブストアのURLを挿入]
https://chromewebstore.google.com/detail/design-tracker-%E7%94%BB%E5%83%8F%E3%82%92%E9%87%8D%E3%81%AD%E3%81%A6%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3/nkcldmbpjbhfhppcicdgmmimiablefdl?authuser=0&hl=ja
