🕒 読了目安：約 3 分
💬 この記事で解決できること
- デザインカンプ再現時の「数ピクセルのズレ」へのストレス
- 色指定やフォント確認でデザインファイルを行き来するタイムロス
- 実機確認時の「URL共有めんどくさい問題」
💻 開発環境 / 前提条件
- フロントエンドエンジニア1年目
- 現在の使用技術：Vue.js
- 以前の環境：ウォーターフォールでコーダーとしてweb制作
- 現在の環境：スクラム開発
0. はじめに
Web制作をしていて、一番神経を使うのが 「デザインの完全再現」 です。
今回は、私が「これなしではコーディングしたくない！」と断言できる、デザイン再現度を爆上げするChrome拡張機能を2つ（＋番外編）紹介します。Web制作に関わる皆さんの参考になれば嬉しいです！
1. 【PerfectPixel】デザインを「透かして」重ねる
💎 概要：1pxのズレも許さない答え合わせ
「だいたい合ってる」を「完璧に合ってる」に変えてくれる神ツールです。
🚀 活用術
- 解決したこと:「目分量」を卒業し、コーディングに自信を持てるようになりました。
- 使い方:
-
開発しているサイトを開く
-
拡張機能をONにし、デザイン画像をブラウザにドラッグ＆ドロップ
-
実装画面の上に半透明で重ね、位置を調整する
🛠 主要な機能説明
コントロールパネルを使いこなすとさらに便利です。
- 目のアイコン: 透過度の調整や、画像の表示/非表示を切り替え
- 錠前のアイコン: 表示位置を固定（誤操作でズレるのを防ぎます）
-
一番右のアイコン: 画像の色を反転（背景が暗いサイトで見やすくなります）
2. 【ColorZilla】ブラウザ上の「色」を秒でコピー
🎨 概要：デザインツールを開く手間をゼロに
「このボタンのグラデーション、正確には何色？」をゼロ秒にします。
🚀 活用術
- 解決したこと: FigmaやAdobe XDなどの重いデザインツールをいちいち開き直す手間がなくなりました。
- 使い方:
- 拡張機能を開いて、「ページからカラーを選択」をクリック
- スポイトツールで画面上の色をクリックするだけ。カラーコードが自動でクリップボードにコピーされます！
3. 【番外編】QR Code Generator
📱 概要：実機テストをサボらなくなる魔法
実機（スマホ）での表示テストを爆速にするツールです。
PCで開いているURLをスマホに送る際、Slack等で自分宛てに送るの、地味にストレスですよね。
-
解決策: 拡張機能のアイコンを押して、出たQRコードをスマホのカメラで撮るだけ。
サイトURLだけでなく、こんなに長いパスワードや文章も...
選択したら右クリックでQR Code Generatorを選べばQR化されて読み取るだけ！
⚠️ ローカルの実機確認で表示されない！を防ぐ4ステップ
ローカルサーバーのURLをQRコードを読み取っても「スマホで画面が開かない」という事象を解決するための最短ルートです！
① サーバーを「外部公開モード」で起動する
開発サーバー（Viteなど）は、初期設定では外部からのアクセスを拒否しています。起動コマンドに --host フラグを付けて、「外からのアクセスも許可するよ！」という状態にします。
npm run dev -- --host
② 「Network:」側のURLを確認する
起動後、ターミナルに表示されるURLのうち、Local ではなく Network: で始まるURLに注目します。これがPCの「ネットワーク上の住所（IPアドレス）」です。
➜ Local: http://localhost:5173/
➜ Network: http://192.168.xx.xx:5173/ # ←これを確認！
③ PCとスマホを「同じWi-Fi」につなぐ
PCとスマホが同じルーターに繋がっている必要があります。
④ そのURLでQRコードを生成する
PCのブラウザで Network 側のURLを開き、その画面で QR Code Generator を起動してQR化。あとはスマホでスキャンするだけです！
4. まとめ：ツールは「こだわり」を支える味方
1年目のうちは、どうしてもロジックの実装に必死で「見た目」の細部が後回しになりがちです。
でも、これらのツールを使い始めてから、 「デザイナーさんの意図を汲み取る余裕」 が少しずつ生まれてきました。
「1pxにこだわる」のは大変ですが、便利な道具を使って、賢く楽しく開発していきましょう！
📣 最後に
「他にもこんな拡張機能が便利だよ！」というおすすめがあれば、ぜひコメント欄で教えてください。