Web制作に便利なChrome拡張機能27選
はじめに
私はWeb制作会社で働いていて、主にデザインと実装を担当しています。
そんな私が普段の業務で使用している、作業効率を上げてくれる便利なChrome拡張機能をご紹介いたします！
デザイン・実装の両視点で、実務での活用方法も交えてご紹介いたします！
TDK Meta Checker
meta情報のチェック用。
これ以外にもmeta情報確認用の拡張機能はたくさんありますが、必要最小限の情報かつ、UIが見やすく気に入っています。
設定がない項目があると、エラーっぽく赤く表示してくれるのが良き。
ページリストの作成や、実装チェック時のtitle・descriptionやOGPの設定漏れが無いかなどの確認に便利です。
SEO META in 1 CLICK
より詳細なmeta情報の収集に使用します。
私はcssやscript情報にサクッとアクセスしたい時や見出しタグの確認で使用します。
Copy All Urls
選択した複数タブのURLを一括でクリップボードにコピーします。
複数URLの共有時などにサクッとできてコピペできて便利です。
Pasty
コピーした複数のURLをワンクリックで一括で開けます。
複数URLを共有された際に、これまではいちいちコピー→ペーストして開いていましたが
ワンクリックで開けるようになりストレスフリー。
The QR Code Extension
開いているページをQRコード化してくれます。
メニューバーからでもQRコード表示できますがワンクリックでサクッと開けるので気に入っています。
Fonts Ninja
サイトで使用されているフォントを教えてくれます。
アカウント登録(無料)しておくとフォントのブックマークもできるので、あのフォントなんだっけ？の解消に役立ちます。
使用されているフォントを自由にウェイトやサイズ、カーニング調整してその場で試せるのも気に入っています。
カラースポイトツール
カラースポイトツールです。
以前はColorZillaを使用していたんですが、
こちらの方が機能が必要最低限で、UIも良く気に入っています。
PerfectPixel by WellDoneCode (pixel perfect)
実装後のサイト表示をデザインのjpg,pngと照らし合わせられます。
デザインと実装に大きな乖離がないか確認する際に使用しています。
Responsive Viewer
複数の異なる画面幅でサイトを表示してくれます。
レスポンシブ確認用に使用しています。
予めデバイスに応じた画面幅が用意されているので選択するだけでよく、カスタマイズもできます。
PC,TB,SPを一括でサクッと確認できるのが便利です。スクロールが全画面連動してるのも良き。
DeepL翻訳
翻訳ツール。
精度高く翻訳してくれます。英語の公式ドキュメントや記事を読むのに便利。
ブラウザでテキストを選択すると翻訳のツールチップがでてくるのでアクセスも良く便利。
テキストエリアのリサイズUI部分に被るのでたまに邪魔です。
全文翻訳は有料です。
Google 翻訳
翻訳ツール。
DeepLに比べると翻訳精度は落ちますが、こちらは全文翻訳してくれるので重宝します。
個別翻訳→DeepL
全文翻訳→Google翻訳
という感じで使い分けて使用しています。
JSONView
JSONをシンタックスハイライトして表示してくれます。
var_masterpiece
PHPでvar_dumpで吐き出したデータを綺麗に整形してくれます。
主にWordPressの開発で大いに役立ちます。必須ですね。
Wappalyzer - Technology profiler
観覧しているサイトの技術スタックを確認できます。
何使って実装してるんや？をサクッと確認できるので気に入っています。
Stylebot
サイトごとに自分で設定した個別CSSを適用することができます。
Gmailやメディアサイトなどで文字サイズやカラー、コンテンツエリアを大きく調整したい時に使っています。
Acid Tabs
予め設定しておいたドメインごとにタブを自動でグループ化してくれます。
開発でかなり役立ちます。
ローカル、STG、本番など開発環境が複数あるときに、今開いているページがどの環境なのかを自動グループ化することでわかり易くできます。
STGだと思ってたら本番だった...というミスを根絶できます。
私は
ローカル環境：緑
STG環境：黄
本番環境：赤
という風に自分ルールを設けて使用しています。
Mark tab manager
こちらはAcid Tabsと同じ様な拡張機能で、同一ドメインのタブを自動で1つのタブグループにグルーピングしてくれます。
Acid Tabsは任意の名前でタブ名を設定できるので便利ですが、設定が必要になるので
サクッとひとまとめにしたい方などはこちらの拡張機能の方が設定不要で便利かもしれません。
Muzli - Design inspiration hub
新規タブを開いた時の画面がデザイン系の情報収集に画面になります。
意識せずともデザイン観覧できるので、キャッチアップに役立ちます。
dribbbleやAward系のサイトもあり、気に入っています。Awwwardsをよく見ます。
Check My Links
リンクチェッカーです。
リンク切れがないか実装後のチェックで使用します。
VisBug
観覧しているサイトをGUIで自由にカスタマイズできルようになります。
や要素のちょっとした変更や自由配置などがサクッとできるので、実装FBのときなんかに便利です。
Lighthouse
Lighthouseの診断をワンクリックサクッと出来ます。
ato-ichinen
Active状態にしている時にGoogle検索が1年以内のものに限定されます。
最新の技術情報をキャッチアップしたい時に有効化すると古い情報を省けて便利です。
Keepa - Amazon Price Tracker
Web制作にあんまり関係ありません。
Amazonで商品の価格遷移がわかるようになります。
欲しいガジェットなんかはチェックしておいてできるだけ最安値で買いたいですよね。
ツール専用の拡張機能
ツール専用の拡張機能について紹介します。
ChatGPT Ctrl+Enter Sender
ChatGPT専用の拡張機能
プロンプトで誤ってEnterを押してしまい、書き途中のテキスト投げちゃった...を解決してくれます。
Cmd + Enterが送信のキーになります。(デフォルトはEnter)
Notion Web Clipper
Notion専用の拡張機能
観覧サイトをNotionに送れます。
WebClip用のデータベースを予め作成して、気になったサイトや後で見たいサイトなんかをとりあえずNotionで保存しておくのに使用しています。
Chatwork Quick Info Input
ChatWork専用の拡張機能
[info]タグや[title]タグなんかをショートカットで呼び出せるようになります。
デスクトップアプリ版にはショートカットが効かないので、デスクトップアプリが使用できない体になります。
Eagle for Chrome
Eagle専用の拡張機能
観覧しているサイトの画像収集がかなり楽に便利になります。
Eagleが素材収集・管理に優秀過ぎるので布教したいです。
おわりに
この中にはない、便利な拡張機能もたくさんあると思います。
ぜひ、皆さんが使用されている拡張機能もコメントで教えて頂けると嬉しいです！
今後も便利な拡張機能を見つけたらどんどん追記していきます！
最後までお読み頂きありがとうございました。
Discussion