Figmaでデザインを直し、ブラウザで実装を確認し、クライアントにスクショを送る——この往復が多い日、Chromeのタブだけでは足りない場面があります。私もWebディレクションとコーディングを兼ねているので、Chrome拡張機能 Web制作向けの定番を、用途ごとに絞って使っています。入れすぎるとブラウザが重くなるので、今回は「毎日開く7つ」に整理しました。
先に結論
- 向いている人: Figmaとブラウザを行き来するWeb制作・コーディング担当、在宅でクライアント確認用のスクショを撮る人、レスポンシブの見た目を素早くチェックしたい人
- 向いていない人: ブラウザをメール閲覧だけに使う人、社内で拡張インストールが禁止されている環境、すでに専用アプリ（PixelSnap等）で代替している人
- 私のおすすめ: まず ColorZilla・Dimensions・Window Resizer の3つを入れ、デザインカンプとの突き合わせが増えたら PerfectPixel を足す
この記事には、Google AdSense による広告およびアフィリエイトリンクが含まれる場合があります。紹介経由で購入や申し込みがあると、私に紹介料が入ることがあります。
Chrome拡張機能はチームの合意が取れるかどうかで価値が変わると感じています。
拡張機能一覧（用途と向く人）
Web制作でよく使う拡張を、予算・作業場所・権限の広さで比較しました。いずれも無料版で始められます。
| 拡張機能 | 向く人 | 予算 | 作業場所 | 注意（権限・騒音） |
|---|---|---|---|---|
| ColorZilla | 色コードを素早く拾いたいデザイナー | 無料 | 自宅デスク・カフェどちらも可 | 全ページ読み取り権限あり |
| WhatFont | 参考サイトのフォントを調べたい人 | 無料 | 調査メインの作業 | フォント名は近似表示のことも |
| Dimensions | 余白・要素サイズをピクセルで測る人 | 無料 | 実装確認が多い日 | ホバー操作が必要 |
| Window Resizer | ブレークポイントごとに幅を変えたい人 | 無料 | 在宅の1台モニター環境 | プリセットは手動で追加推奨 |
| PerfectPixel | カンプを重ねてズレを見たい人 | 無料 | デスク固定・大画面向き | 画像の準備が手間 |
| GoFullPage | ページ全体のスクショを撮る人 | 無料 | クライアント報告が多い日 | 長いLPは処理に時間 |
| Lighthouse | 表示速度・SEOの簡易チェック | 無料（Chrome標準） | 納品前のセルフチェック | スコアは参考値 |
デザインの正本はFigma側に置き、実装はエディタで行う流れが多いです。エディタ選びはCursorの制作向け設定もあわせて読んでください。
選び方の3つの軸
拡張を入れる前に、次の3点だけ決めます。
- デザイン寄りか実装寄りか: 色・フォント・寸法が主なら ColorZilla / WhatFont / Dimensions。コードとDevToolsが主なら Lighthouse を優先
- 確認の相手: 自分用なら Window Resizer で十分。クライアントに見せるなら GoFullPage で全体キャプチャを残す
- ブラウザの重さ: 同じ役割の拡張は1つに絞る。スクリーンショット系は GoFullPage かブラウザ標準のどちらか一方
具体例をひとつ足します。先月、クライアントから「ヘッダーの余白がカンプと違う」と指摘が入った案件がありました。Figmaの値は合っているのに、ブラウザでは2pxずれている——原因は、line-heightの計算とborderの含み方でした。Dimensionsでヘッダー要素をホバーし、paddingとborderを確認したあと、PerfectPixelで書き出したPNGを重ねて、ズレが上側のmarginにあったと特定できました。修正はCSSの1行で終わりましたが、拡張が無い状態だと「なんとなく違う」で終わりがちだったと思います。これは私の1案件の話で、環境によってはDevToolsだけで十分な場合もあります。
ColorZilla｜色コードを拾う定番
参考サイトや既存ページから色を拾うとき、スクリーンショット→画像ソフトの往復は遅いです。ColorZillaはページ上をクリックするだけで、HEXやRGBをコピーできます。Figmaに貼る前の仮拾いや、既存サイトのトーンを調べるリサーチ向きです。
向く人は、デザインカンプを作る前に競合の色感を素早くメモしたい人、実装時に「このボタン、公式サイトと同じ青にしたい」という場面が多い人です。カフェ作業でもマウス操作だけで完結します。
注意点は、拾った色がブランドの正式トークンかは別問題です。クライアント案件では、最終的にFigmaのVariablesやスタイルガイドに寄せてください。Figma Variablesの手順も参考になります。
WhatFont｜フォント名の確認
「この見出し、何フォント？」を調べる拡張です。テキストにホバーすると、フォントファミリー名とサイズが表示されます。Webフォントが読み込まれているページで使います。
向く人は、参考LPのタイポグラフィを調査する人、クライアントから「近い雰囲気に」と言われたときの仮調査です。予算をかけずにリサーチしたい在宅ワーカー向きです。
注意点は、表示名と実際のフォントファイルが一致しないことがあります。商用利用の可否は拡張では分からないので、採用前にライセンスを別途確認してください。私は調べた情報と、実際に採用したフォントをメモで分けて残しています。
Dimensions｜余白と要素サイズの測定
要素間の距離や、ボックスの幅・高さをピクセルで測れます。実装後の「カンプと合っているか」を目視より早く確認できます。
向く人は、HTML/CSSを自分で書く人、納品前にセルフチェックリストを回す人です。騒音の少ない自宅デスクで、マウスを動かしながら確認する作業に向きます。
注意点は、transformやscaleがかかっている要素では値がずれることがあります。ズレが大きいときはDevToolsのComputedタブも併用してください。
Window Resizer｜レスポンシブ幅の切り替え
ブラウザウィンドウの幅を、375px・768px・1280pxなどにワンクリックで変更できます。在宅で1台モニターしかないとき、スマホ幅の確認が楽になります。
向く人は、ブレークポイントが3つ以上ある案件、実機（iPhone/Android）を手元に無い日の仮確認です。予算をかけずに複数幅を試したいフリーランス向きです。
注意点は、プリセットがプロジェクトのブレークポイントと一致しないことがあります。案件開始時に、Figmaのフレーム幅をプリセットに登録すると後が楽です。DevToolsのデバイスモードと役割が重なるので、どちらを正とするかを決めて一方に寄せるのがおすすめです。
PerfectPixel｜デザインカンプの重ね合わせ
カンプ画像をページ上に半透明で重ね、ピクセル単位のズレを見つけます。ヘッダーやボタン位置の微調整に効きます。
向く人は、ピクセルパーフェクトを求められる案件、初回納品前の自分用チェックです。大きめのモニターがある在宅デスク向きで、カフェの小画面では操作が窮屈になりがちです。
注意点は、カンプの書き出し解像度とブラウザの表示倍率を揃える必要があります。Retina表示では2倍画像を用意するなど、ルールを決めてから使ってください。
GoFullPage｜ページ全体のスクリーンショット
縦に長いLPや、スクロール後の状態を1枚の画像にまとめて撮れます。クライアントへの進捗報告や、自分用のビフォーアフター記録に使います。
向く人は、Slackやメールで「全体を見せたい」報告が多い人、修正前後の比較を残したい人です。権限はスクリーンショット系なので、社内ポリシーを確認してください。
注意点は、固定ヘッダーやlazy loadの画像があるページでは、撮影結果が想定とずれることがあります。重要な納品物は、実URLを共有するか、動画キャプチャを併用する方が安全です。
Lighthouse｜表示速度とSEOの簡易チェック
Chromeに標準で入っている開発者ツールから、Performance・Accessibility・SEOなどのスコアを確認できます。拡張のインストールは不要ですが、Web制作フローでは「納品前の1項目」として毎回回す価値があります。
向く人は、WordPressや静的LPを納品する人、クライアントがスコア改善を依頼しがちな案件です。無料で始められ、在宅でもオフィスでも同じ手順で使えます。
注意点は、スコアは参考値です。画像最適化やフォント読み込みは、スコアだけで判断せず、実際の表示を目視で確認してください。納品チェックの全体像はWeb制作の納品前チェックリストにまとめています。
入れすぎを防ぐ運用ルール
拡張は便利ですが、10個を超えるとChromeの起動が重く感じることがあります。私は次のルールで運用しています。
- 同じ役割は1つ: スクリーンショットは GoFullPage か標準機能のどちらか
- 案件フォルダにメモ: その案件で使う拡張名をREADMEに3行書く
- 月1回の棚卸し: 3週間使っていない拡張は無効化
- 権限の確認: クライアントのステージングURLに入れる前に、不要な拡張を切る
Figma側の作業を整えるなら、Figma制作フローの入口から関連記事をたどると、拡張とデザインツールの役割分担がはっきりします。コーディング環境はCursorとVS Code系の記事もあわせて見てください。
失敗しやすい点・注意
- 拡張に頼りすぎてDevToolsを開かない: レイアウトの根本原因はElementsパネルで追う方が早いことが多いです
- クライアントサイトで勝手にPerfectPixel: ステージングの許可範囲を確認してください
- WhatFontの結果をそのまま採用: ライセンスと代替フォントの検討が別途必要です
- プライバシー: ログイン後の管理画面で拡張を有効にすると、権限の範囲でページ内容を読める拡張があります。本番の管理画面では最小構成に
価格やキャンペーンは執筆時点（日本時間）の情報です。変わることがあります。
よくある質問
Q. SafariやFirefoxでも同じことはできますか？
A. 色拾いや寸法測定は、Safari/Firefox向けの別拡張やDevToolsで代替できます。ただ、クライアント確認用に「Chromeで見てください」と言われる案件が多いので、制作用はChromeに寄せている人が多い印象です。私も検証はChrome、デザインはFigmaという分担です。
Q. 拡張を入れずにFigmaとDevToolsだけで回せますか？
A. 回せます。特にDimensionsやWindow Resizerの役割は、DevToolsのデバイスモードとComputedで代替可能です。拡張は「クリック数を減らす」ための道具で、必須ではありません。まずはDevToolsに慣れてから、足りない操作だけ拡張を足すのが失敗しにくいです。
Q. 会社PCでインストール禁止のときは？
A. ポータブルChromeや、許可されたブラウザプロファイルだけで検証用を分ける方法があります。それも難しい場合は、クライアントに「検証用ブラウザの指定」を依頼し、自分のマシンで確認するフローを契約に含めるのが現実的です。
私は実装直前の手戻りを減らすために、Chrome拡張機能の手順を短く固定しています。
まとめ
Web制作向けのChrome拡張は、色・フォント・寸法・幅・カンプ重ね・全体スクショ・Lighthouseの7分類で整理すると、入れすぎを防げます。在宅ワークでは、Figmaとブラウザの往復が多い日に効く道具として使ってください。
今日やること: 今のChrome拡張一覧を開き、3週間使っていないものを1つ無効化する。空いた枠に、足りない操作（色拾いか寸法測定）に対応する拡張を1つだけ入れる。
関連記事: Figma制作フローの入口 / Figmaデザインレビュー手順
デザインの正本を整えるなら Figma のVariablesとコンポーネント整理から。コーディング側を強化するなら Cursor のルール設定もあわせて検討してください。
