2018年にフリーランスから制作会社勤務に転生しました。現在は掲題の通り、主に We bデザイナー兼 Web ディレクター兼フロントエンドエンジニアです。

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

共通

crxMouse Chrome™ Gestures

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

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

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

EverSync – Sync bookmarks, backup favorites

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

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

いろいろなモニタサイズチェックには有料ブラウザ「Blisk」を使っています。その Blisk とブックマークを同期するのが主な使い道。

Go Back With Backspace

https://chrome.google.com/webstore/detail/go-back-with-backspace/eekailopagacbcdloonjhbiecobagjci?hl=ja

Backspace キーでブラウザの「戻る」」をしてくれる拡張機能。

むしろなぜデフォルトでないのか分かりません。多ボタンマウスを使っているので普段は使いませんが、Chrome 使いの嗜みとして入れっぱなし。

Gyazo

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

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

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

LastPass: Free Password Manager

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

パスワードマネージャ。1 password か Lastpsss かくらいメジャーな拡張機能。

インストールしているのに適当なパスワードにしてしまうのをやめたいです。

Lighthouse

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

Google の Page Speed Insight をブラウザで起動する拡張機能。

Window Resizer

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

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

弊社ではデザインカンプ・クオリティチェック共にPCビューがピクセル単位で決まっているので、その確認のために導入しました。

また、弊社のプロジェクト管理者は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 にしています。

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 使いなので通知センターに登録しているカメラをかざすだけなのが個人的に合ったので。

G-calize

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

Google カレンダーの土日祝を色付けしてくれる拡張機能。

幸か不幸か バカか? と思うくらい忙しいので、Google カレンダーで分刻みでタスクを整理しています。今日が土日なのか祝日なのか分からなくなることも多いので、この拡張機能でクライアントの休みをチェックしています。

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

見出しレベルの確認に使う拡張機能。ディレクターも使うのかもしれない。

 

ブラウザ