【2022年】Web 制作で使っている Google Chrome 拡張機能まとめ

Column

Posted  Updated 

主に Web デザイナー、Web ディレクター、コーダーを案件に応じて適宜やっています。

メインブラウザも Firefox から Google Chrome に変わったので、いま業務で酷使している拡張機能をリストアップしておきます。

共通

crxMouse Chrome™ Gestures

https://chrome.google.com/webstore/detail/crxmouse-chrome-gestures/jlgkpaicikihijadgifklkbpdajbkhjo

マウスジェスチャの拡張機能。

リンクを右にドラッグで新しいタブでアクセス、リンクを上にドラッグで URL をコピー辺りは業務に関係なく酷使しています。ろくにカスタマイズしていません。

Gyazo

https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo?hl=ja

キャプチャサービス「Gyazo」を使うための拡張機能。

コーダーに「これ直して」って言うときや、クライアントに「ココはこうなります」って言うときなど、色々なタイミングで使います。有料会員です。

Bitwarden – 無料パスワードマネージャー

https://chrome.google.com/webstore/detail/bitwarden-free-password-m/nngceckbapebfimnlniiiahkandclblb

「LastPass」から乗り換えたパスワードマネージャ。無料、マルチプラットフォームです。

Window Resizer

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja

ウィンドウサイズを変更できる拡張機能。

弊社のプロジェクト管理者はAM(営業)であり、AMのPCサイズでどう見えるかでカンプを先方提出できるかが決まるため、基本AM対策。

Workona

https://chrome.google.com/webstore/detail/workona/ailcmbgekjpnablpdkmaaccecekgdhlh?hl=ja

タブ魔向けのタブマネージ拡張機能。

案件ごとにウィンドウを作りがちなので、大体10個ほどウィンドウがあるのが普通でした。CMS だと実表示+管理画面 *2 + ステージング + 本番 で5タブは最低でもありますしね。デザイナーなので+参考サイト。弊社は最低10案件は並行するので100タブはザラ。

元は「One Tab」使いでしたが、落ち着いたらこっち一本でいいかなと思っています(落ち着かないだけで)

ブックマークサイドバー

https://chrome.google.com/webstore/detail/bookmark-sidebar/jdbnofccmhefkmjbkkdkfiicjkgofkdh?hl=ja

Chrome の貧弱なブックマーク周りを補間してくれる拡張機能。ツールバー以外のものもすぐに呼び出せる。

どの役回りでも使いますが、写真素材・アイコン・参考サイトと遷移が多いデザイン時に使うことが特に多いです。ショートカットキーは Ctrl + B にしています。

Stylus

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

独自 CSS を当てられる拡張機能。
Googleカレンダーの表示に拡張機能「G-calize」を使っていましたが、他にも色々と使うためこちらに乗り換えました。

ついでにGoogleカレンダーの土日を色分けする CSS は以下。

[role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='row']>[role='presentation']>[role='columnheader']:nth-child(7), [role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='row']>div>ul>li:nth-child(6),
[role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='presentation']>[role='row']>[role='gridcell']:nth-child(8), [role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-date-key]>[role='presentation']>[role='presentation']>[role='row']>[role='gridcell']:nth-child(7) {
  color: #004cb4;
  background-color: #eaf4FF;
}
[role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='row']>[role='presentation']>[role='columnheader']:nth-child(8), [role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='row']>div>ul>li:nth-child(7),
[role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-start-date-key]>[role='presentation']>[role='presentation']>[role='row']>[role='gridcell']:nth-child(9), [role='main']>[data-view-heading]>[role='grid']>[role='presentation'][data-date-key]>[role='presentation']>[role='presentation']>[role='row']>[role='gridcell']:nth-child(8) {
  color: #b40000;
  background-color: #ffeaea;
}

Webディレクション

Alt & Meta viewer

https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=ja

alt 属性、つまり画像の代替テキストが記入されているかをチェックする拡張機能。

Black Menu for Google™

https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke

Google 各種サービスへのリンク先、またはページ遷移なしでちょっと調べたいときに使う拡張機能。

QRコードジェネレータ

https://chrome.google.com/webstore/detail/one-click-qr-code-generat/nemjnnkkejjhmchniimmmmbnelpcdnfl?hl=ja

開いているページの URL を変換し QR コードにして表示してくれる拡張機能。

スマートフォン実機で表示確認するときなどに使っています。Pushbullet も使っていましたが、iPhone 使いなので通知センターに登録しているカメラをかざすだけなのが個人的に合ったので。

Webデザイン

ColorZilla

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

ブラウザ上でカラーピッカーが使えるようになる拡張機能。

Image Downloader

https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja&

画像ダウンローダーとして使っている拡張機能。表示しているページの画像を一括または選択してダウンロードできます。

Adobe XD ではまだ面倒くさい、コテコテめなデザインカンプでなければ通らない弊社。撮影の参考カットとして Instagram から写真を拝借するときなどに使います。

Speed Dial 2

https://chrome.google.com/webstore/detail/speed-dial-2-new-tab/jpfpebmajhhopeonhlcgidhclcccjcik?hl=ja

第2のブックマークのような拡張機能。新しいタブに指定のブックマークをサムネイル式で表示できます。

クライアントとのキックオフ時に競合他社として出た名前が出たページ、参考サイトなどをワンクリックで置いておくために使っています。

コーダー

headingsMap

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi

見出しレベルを視覚的に確認するのに使う拡張機能。


卒業した拡張機能

G-calize

https://chrome.google.com/webstore/detail/g-calize/piiljfhidimfponnkjlkecnpjhdijfde

Google カレンダーの土日祝を色付けしてくれる拡張機能。自分で CSS を当てることにしたので削除。

Lighthouse

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

Google の Page Speed Insight をブラウザで起動する拡張機能。Chrome 自体にマージされたので削除。

LastPass: Free Password Manager

https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd?hl=JA

パスワードマネージャ。制限がきつくなり乗り換えたので削除。

EverSync – Sync bookmarks, backup favorites

https://chrome.google.com/webstore/detail/eversync-sync-bookmarks-b/iohcojnlgnfbmjfjfkbhahhmppcggdog?hl=ja

ブックマークをサーバ同期する拡張機能。

いろいろなモニタサイズチェックに有料ブラウザ「Blisk」を使ってたとき、Chrome と Blisk でブックマークを同期するのが主な使い道。でしたが、2021年に Blisk を卒業したので削除しました。