今回は、実際にWebデザイナーが普段から使用していて、使いやすく、作業効率が上がるChromeの拡張機能7選をご紹介したいと思います。

どれも基本機能は無料で使えるものばかりですで、気になるものがあればぜひお試しください！

おすすめChrome拡張機能 7選

① URLをまとめてコピー - Copy URLs

Copy URLsは、ブラウザで開いている複数のサイトのURLをまとめてコピーできる拡張機能です。

Copy URLsのアイコンをクリックし、「Copy to Clipboard」ボタンを押すと、URLをまとめてコピーすることができます。

ペーストすると、すべてのURLが一度にペーストされます。

この次に紹介する「Pasty」とセットで入れておくと効率化まちがいなしですよ！

ダウンロード：Copy URLs

② URLをまとめてペースト - Pasty

Pastyは、コピーした複数のURLをブラウザで一度にまとめて開くことのできる拡張機能です。

先ほどコピーした複数のURLを一気に開いてみましょう。

新しいウィンドウで、Pastyのアイコンをクリックします。

1クリックで複数サイトを一度に開くことができました。

エクセルやスプシのURL一覧などからもコピペできますので、大量のページを一度に開きたいときはとても便利です！

ダウンロード：Pasty

③ QRコードを表示 - The QR Code Extension

The QR Code Extensionは、開いているサイトのQRコードを表示してくれる拡張機能です。

The QR Code ExtensionのアイコンをクリックするとQRコードが表示されますので、スマホのカメラで読み取ってすぐに実機確認をすることができます。

「Download QR Code」ボタンを押すとQRコード画像をダウンロードすることもできますよ。

ダウンロード：The QR Code Extension

④ サイト全体をスクショ - FireShot

FireShotは、Webページ全体のスクリーンショットを撮影できる拡張機能です。

画面スクロールするような比較的縦長のWebページでも、画面分割することなく、一度にきれいに全体のスクリーンショットを撮ることができます。

FireShotのアイコンをクリックし、「ページ全体をキャプチャ」をクリックします。

このような縦長の画面全体のスクリーンショットを簡単に撮ることができるので、デザインや指示書作成などの作業が効率化できます。

ダウンロード：FireShot

⑤ PCとスマホを同時確認 - Responsive Viewer

Responsive Viewerは、様々な画面サイズのデバイスでの見え方を一度に並べて確認することができる拡張機能です。

ベンチマークサイトの閲覧や、実装後の表示崩れのチェックなどを効率的にすることができます。

表示させたい画面サイズの設定や複数画面の同時スクロール、画面全体のスクリーンショットを撮ることもできますよ。

ダウンロード：Responsive Viewer

⑥ フォント情報を確認 - WhatFont

WhatFontは、カーソルを合わせた箇所のフォント情報を見ることができる拡張機能です。

WhatFontのアイコンをクリックし、表示させたいテキスト箇所をクリックすると、フォントのサイズ、太さ、色、行送りなどが瞬時に表示されます。

デベロッパーツールよりも手軽に何か所でも見ることができるので、デザインやチェック作業の効率化が図れますよ。

ダウンロード：WhatFont

⑦ 様々な画面サイズに変更 - Window Resizer

Window Resizerは、任意のウィンドウサイズに1クリックで変更できる拡張機能です。

様々な画面サイズを切り替えて確認したい場合や、常に同じ画面サイズで表示させたい場合などに便利です。

お好みの設定もプリセットできますので、ぜひいろいろお試しください。

ダウンロード：Window Resizer

まとめ

Webデザインが捗る、おすすめのChrome拡張機能をご紹介しました。ぜひこれらの拡張機能を導入し、効率的で快適なデザイン環境を構築していきましょう。

この他にもおすすめの拡張機能がたくさんありますので、また次回ご紹介したいと思います！