Design Tracer - Overlay for Coding【画像を重ねてコーディング】
engineering.webstudio168.jp · Developer Tools
Media
2 items
Description
HTMLにデザイン画像を重ねてCSSの位置調整をサポート。スマホ表示対応。 デザインカンプをブラウザに重ねて実装精度を上げるChrome拡張。 Differenceモードで1pxのズレを可視化、オーバーレイを表示したまま DevToolsで要素を検証可能。URL・画像ごとに設定を自動保存。 類似ツールを使っていましたが、使い勝手が悪かったので自分好みに作成しました。 よろしかったら是非是非おつかいください。今のところ無料しか考えていません。 『Design Tracer – Overlay for Coding』 デザインカンプをブラウザに重ねて、コードとデザインの「ズレ」を ゼロに近づける Chrome 拡張機能です。 目視確認・スクショ比較・定規ツールといった手作業を、画像オーバーレイ という一元的な手法に置き換えます。開発中の画面にデザイン画像を半透明で 重ね、透明度・位置・スケールをリアルタイムに調整しながら実装精度を 高めることができます。 ■ オーバーレイを表示したまま DevTools で要素を検証（Inspect モード） 本ツール最大の特徴です。 通常のオーバーレイツールは、要素を検証するたびに「非表示 → 検証 → 再表示」という往復操作が必要です。Design Tracer の Inspect モード （Alt+I）を有効にすると、画像を重ねた状態のまま背後の HTML 要素を DevTools で選択・確認できます。確認と修正のサイクルを同一画面で シームレスに回せるため、検証作業のストレスを根本から取り除きます。 DevTools のデバイスモード（スマートフォン幅シミュレーション）との 併用にも対応しています。「画面幅に自動合わせ」を有効にすると オーバーレイがビューポート幅に自動フィットするため、モバイルの デザインカンプを重ねながらレスポンシブ実装をそのまま検証できます。 PC・スマートフォン問わず、同一の操作感でコーディングに集中できます。 ■ Difference モードで 1px 単位の差分を可視化 ブレンドモードを「Difference」に切り替えるだけで、実装とデザインの 差分が色反転として浮かび上がります。「なんとなく合っている」ではなく 「完全に一致している」を数値・視覚の両面で確認できるため、 検品・修正作業の時間を大幅に短縮できます。 ■ URL × 画像ごとに設定を自動保存 透明度・表示位置・スケールは、閲覧中の URL と画像の組み合わせごとに 自動保存されます。ページを再読み込みしても、翌日作業を再開しても 前回の状態が即座に復元。複数ページを並行開発する場合も設定が 混在しません。 ※外部URLを指定すると画像の読み込みに少し時間がかかります。ご了承ください。 ■ キーボードだけで主要操作が完結 ・Alt+O：オーバーレイ表示切替 ・Alt+I：Inspect モード切替 ・Alt+, / Alt+.：登録画像の切替 ・矢印キー：1px 移動 ／ Shift+矢印：10px 移動 ・座標の直接入力・横中央揃え・上端揃えにも対応 パネルを開閉せずに操作が完結するため、コーディングの集中を 途切れさせません。