WebデザイナーやWeb制作関連の方におすすめのChrome拡張機能7選をご紹介します。
画像ダウンロード機能やスマホ画面表示（レスポンシブ）など、これを入れておけば間違いなし！の拡張機能をまとめました。
実際の制作現場で聞いた採用率や使用頻度が高い順にランク付けしています。
今回ご紹介するツールをまだ使ったことがない方は、ぜひ試してみてください。
1.Awesome Screenshot（素晴らしい画面の並べ替えとスクリーンショット）｜サイト丸ごと保存
ウェブページのキャプチャと編集、画面録画までこの機能で全て完結！
実用度5.0
無料で使える画面キャプチャツール
ウェブページ全体・表示画面のみ・特定領域のスクリーンショット＆画面録画も可能！
多様な保存形式に対応
JPG・PNG・PDFなどの書き出し形式に対応。
ワンクリックでクリップボードにコピー
FigmaやXDなどのデザインツールやチャットツールなどへの貼り付けがスムーズ。
私が以前まで使用していたスクリーンショットツールは「ウェブページ全体をスクリーンショット-FireShot」です。
画面録画機能はないですが、操作もシンプルでおすすめです。
以下の記事で「素晴らしい画面の並べ替えとスクリーンショット（旧Awesome Screenshot）」機能を紹介をしています。
インストール前に気になる方は、ぜひ参考にしてみてください。
Chrome ウェブストア：「Awesome Screenshot – 素晴らしい画面の並べ替えとスクリーンショット」
2.Image downloader – Imageye｜サイトの画像を一括ダウンロード
サイトに使っている画像を一括ダウンロードできる！【Image downloader -Imageye（イメージダウンローダー – イメージアイ）】
実用度4.5
サイトリニューアル時に便利
既存ページから使いたい画像だけを流用できる！
画像の選択＆絞り込みが可能
JPG・PNG・SVG・GIF・ICO・WEBPなどのフォーマット別に抽出できる！
ファイル形式の変更も対応
ダウンロード時に別の形式へ変換できるので、用途に合わせて使いやすい。
Chrome ウェブストア：「Image downloader – Imageye」
3.SEO META in 1 CLICK｜SEOチェックに最適
OGPやメタタグを一瞬でチェックできる！【SEO META in 1 CLICK】
実用度4.5
チェックできる項目
タイトル、説明文、キーワード、OGP情報など、SEOに関連する重要なメタデータがサクッと表示されます。
SEO対策や競合サイトのキーワードチェックに便利
シンプルで見やすく、必要な情報だけを素早く確認できる。
Chrome ウェブストア：「SEO META in 1 CLICK」
4.Responsive Viewer｜レスポンシブデザインチェック
複数デバイスの画面サイズを同時にチェックできる！【Responsive Viewer（レスポンシブビューアー）】
実用度4.5
対応デバイス
iPhone・Android・iPad・MacBookなど、デスクトップからスマートフォンまで幅広く対応。
便利な使い道
一度に異なる画面サイズを表示できるので、デザインの調整ポイントがすぐに見つかる。
Chrome ウェブストア：「Responsive Viewer」
5.ColorZilla｜サイトに使われている色を瞬時にキャッチ
ウェブページ上の色を簡単に抽出できるカラーピッカー。【ColorZilla（カラージラ）】
実用度4.0
主な機能
カラーピッカー（スポイトツール）で特定箇所の色コードを抽出できる！
便利な使い道
サイトの色を調べたいときや、デザインの統一性を保つための色調整に！
Chrome ウェブストア：「ColorZilla」
6.CSS Peeper｜デザインの裏側を確認
デザインの裏側を一瞬でチェックできる！ CSSPeeper（シーエスエス ピーパー）。
実用度3.5
特徴
コードを調べなくても、配色・余白・フォント・ボタンサイズなどのデザイン要素を簡単に確認できる！
chrome ウェブストア：「CSS Peeper」
7.Wappalyzer – Technology profiler｜サイトの技術スタックを一目で把握
実用度2.5
ウェブサイトの技術スタックを一目で確認できる！Wappalyzer（ワプアラザー）。
主な機能
サーバー・CMS・プログラミング言語・フレームワークなどの使用技術を自動検出！
便利な使い道
競合サイトの技術トレンド把握や、既存サイトの技術調査に活用できる。
Chrome ウェブストア：「Wappalyzer – Technology profiler」
まとめとお知らせ
以上、WEB制作の現場で役立つGoogle Chrome拡張機能7選をご紹介しました！
これらのツールを活用すれば、作業効率が今より上がります。
WEB業界はとにかく動きが早いものです。
今は使いやすいと思っているツールも、数か月後や数年後にはさらに高性能なものが登場することもあるため、出来る限り最新の情報や役立つツールをお届けしていきます。
日々の業務で、トレンドや新機能を試す時間がない皆さんの手助けに少しでもなれれば幸いです。
もちろん、拡張機能のアップデートやサポート終了、ディスコン（提供終了）の際にはその都度更新していきますので、ぜひこの記事を参考に試してみてくださいね。
またお会いしましょう！
コメント