MD-Blog_Web Creative

6月に上京して、7月に入社をしたばかりのOYMです。まだ東京に慣れず、四苦八苦しています。主にビルの高さに戸惑ったり、地下鉄の満員電車に押し込まれたりと慣れないことがたくさんです。

そんな中でも、業務をこなしていかないといけないのが社会人です。
そして、良いエンジニアは良いツールをたくさん使っているものだと思います...恐らく...

日々業務をこなしていても、時間は有限ですし手ぶらで仕事をしても時間が過ぎていくばかりで勿体無い！

そこで今回は、記事を読まれている皆さんも自分なりの環境があるとは思いますが、私自身が普段から利用しているWebエンジニアのおすすめChromeプラグインを紹介していきたいと思います！

Firefoxはあまり利用しないため、今回プラグイン紹介は省かせていただきます！（ｺﾞﾒﾝﾅｻｲ）

wappalyzer

基本的に作られたページに、どんなライブラリが使われて、どういった環境で動いているかは外からあまり見えないものです。

複雑な動きをしていたり、サクサク動くサイトはどうやって作られているのかを、このプラグインでは読み取ることができます！

使用されているライブラリから、フレームワーク、稼働しているサーバーまでも読み取れたりするので割と重宝します。これがあるだけで、実装されているものを把握した上でどういった処理がなされているか分かるため、解読しやすかったり自分の力になったりします。

ダウンロードはこちら

Lighthouse

業務で制作したサイトのスピードやSEO周りが気になってしょうがない... そういった時は今プラグインがオススメです。

パソコンかモバイルか選択してボタンをクリックするだけで、そのサイトのパフォーマンスやSEOの不足情報など様々なフィードバックを得ることができます。

どのコンテンツが読み込みに影響しているのか、アクセシビリティに考慮されていな要素があるなど、見落としがちな部分を洗い出してくれる良き相棒です！

ダウンロードはこちら

ColorZilla

Webサイトで用いられている色を気軽にスポイトできるプラグインです。

何が便利かと言いますと、このスポイト機能はWeb上の "画像" からも色を吸いとることができるのです！

データが画像しかない場合などでも、このプラグインを使えば作業の効率化にもつながるかと思います！（デザイナーに直接聞ける時は正確な色を聞きましょう）

ダウンロードはこちら

DeepL翻訳

言わずと知れた翻訳サイトのChromeプラグインになります。

なぜ自分がこれをよく用いているのかというと、Google翻訳などの場合、どうしても機械的な翻訳になるため文章や言い回しに違和感が出てきます。

DeepL翻訳は、文章を翻訳する場合などにすごく重宝します。すごくわかりやすい日本語に翻訳されるため、ググって海外のフォーラムを覗いたり、英語のドキュメントを見るときなどはすごく分かり易く翻訳してくれます。

ダウンロードはこちら

おまけ

ひよこフィルター

これは最近自分が見つけたジョーク系のプラグインです。

任意のワードを全て"ぴよぴよ🐤"に差し替えてくれるというプラグインです。

仕事に疲れていたり、見たくないワードが出てきた時はこういったプラグインを使うことで少しは笑顔になればとも思います。

ダウンロードはこちら

さいごに

他の人が使っているものを知るのも、また新しい発見になるかと思います。時代は移り変わりますので、すぐ新しいものが出てきては、別の新しいものに取って代わります。

これを読まれて、自分の愛着あるツールを見つけたり、使っているツールをもっと愛でたりしてみてはどうでしょうか。私自身も、もっとツールを探してみたくなりました！