その他

【最新版】現役エンジニアが推奨するGoogle Chrome拡張機能8選!〜仕事編〜

Google Chromeのおすすめ拡張機能を探している皆さん。

莫大な種類の中からとりあえずダウンロードするも、結局アンインストールするという経験を何度も繰り返しすぎて拡張機能選びに疲れていませんか?

今回は、ITプロフェッショナルチームフランジアの現役エンジニアがおススメするChrome拡張機能を8つ厳選しました。

日常的にPCを使って仕事をしているエンジニアだからこそ紹介できる、説得力強めの選ばれし機能たちです。

各機能の簡単な説明と共にそれを実際に使っている日本人・外国人エンジニアのコメントも添えましたので、ぜひ参考にしてみてください。

▼今回の記事はこんな人にオススメ!

・拡張機能オタク

・仕事や勉強を効率化させたい

・拡張機能選びに失敗したくない!

・海外で働く優秀なエンジニアが使っている機能を知りたい


①Autofill

毎回、同じサイト上で同じ情報を繰り返し入力していませんか?

それ、めんどくさくないですか? この手間が省けたらいいなと思いますよね。

そんな煩わしさを解決してくれるのが、"Autofill"という自動入力ツール。

事前に登録情報のテキストを入力しておくと、フォームに自動入力してくれるので同じサイトで再度入力する手間が省けるという優秀な拡張機能。

私が受けていたフランジアのIT留学の授業のWebページ開発を行う際に、ページのエラーを見つけたいだけなのに、フォームデータの入力を毎回行うと時間と手間がかかりました。そこで、Autofillの自動入力機能を使うことにより入力の手間が省くことができ本当に役立ちました!(2枚目の写真は私が実際に作成したWebページです。)

※住所・電話番号・クレジットカード番号などを含む個人情報の入力には気をつけてください

【コメント】ソフトウェアテストとかの際に、「フォームデータを何回も入力・送付」という作業が発生することってけっこうあるんですが、そういう際に特定のURLにおける特定の入力項目を記憶させ、2度目以降自動入力させることができる便利ツールです。

Autofillのダウンロードはこちら

②Chatwork Input Tools

仕事上、"Chatwork"というコミュニケーションツールを使っている方も多いはず。

Chatwork Input Toolsは、Chatwork専用の拡張機能で、使用頻度の高い絵文字や、引用や注釈などのテキストが装飾できるテンプレートがコメント入力欄に既に揃っており、[info]や[title]などの入力の手間が省けるのでオススメ。

【コメント】普段使っている文字の装飾をより少ないステップで使用できる為、重宝しています。当然ユーザーごとに表示する内容を変更することができるので、ある程度様々なポジションにフィットした使用が可能です。

Chatwork Input Toolsのダウンロードはこちら

③Color Zilla

Color Zillaは、ウェブ上で使われている色の詳細を確認できる拡張機能。

ウェブサイト上の色にカーソルをかざすと、 Webサイトで特定のカラーコードを探すのに苦労していたのですが、Color Zillaは気になった色の詳細がすぐにわかるので、デザイン関係の仕事をしている方にオススメです。

【コメント】This is a useful tool in identifying hexadecimal and RGB colors in the web, especially when you are a UI designer and you want to copy the colors you see in a website.

(ウェブ上の16進数やRGBの色を特定し、あなたがもしUIデザイナーならウェブサイトで見た色をコピーできる便利ツールだよ。)

RGB・・・ディスプレイ画面で色を表現するために用いられる、赤(Red)・緑(Green)・青(Blue)の3色のこと。

Color Zillaのダウンロードはこちら

④Tag Assistant (by Google)

Tag Assistant (by Google)は、Google Analyticsのタグが正常に動作しているか確認できる拡張機能です。
Googleがオフィシャルチェックツールとして無料で提供しており、この機能を使うことで簡単・確実にアナリティクスの動作確認をすることができます。

日常生活で活用する機会は少ないですが、マーケティング関連の仕事をしている方は必見です!

【コメント】ウェブページにタグマネージャーを埋め込んだときの動作チェックで必須。ページ内のどのタイミングでどのタグが発火して、その際にどんなパラメータが飛んでるか全部チェックできるので、マーケ系の仕事を多少やっているWebエンジニア・マーケターにとって必須のツール。

Tag Assistant (by Google)のダウンロードはこちら

⑤goo.gl URL Shortener

「一体これはどこまで続くんだろう?」と思ってしまう程、果てしなく長いURLを見つけたことや送られてきた経験はありませんか?
長いURLのまま相手に共有するのは正直、ダサい。

そんな長〜いURLを短くスマートにしてくれる拡張機能が"goo.gl URL Shortener"
友人や仕事上の取引先の方にメール・LINEでURLを送る時や、Twitter・facebook・InstagramなどのSNSでURLを共有したい時に役立つこと間違いなし!

【コメント】特定のファイルやサイトをシェアするときに長いURLがあるときとか気持ち悪いので、goo.gl URL Shortenerを利用。ただ、実はGoogleがオフィシャルサービスとして運用していないらしいので、いつまで使えるんだろうと不安は持ってるw

※米Googleは3月30日(現地時間)、2009年に開始したURL短縮サービス「Google URL Shortener」(goo.gl)の提供を終了すると発表した。
(出典: ITmediaNEWS)

goo.gl URL Shortenerのダウンロードはこちら

⑥Gyazo

Gyazoは、スクリーンショットをURLに変換し共有できる拡張機能です。

自動的にURLがコピーされるのでコピペしてすぐに画像共有が可能で、スクショした画像はファイルに保存されないのでPCのストレージを気にしなくていいというメリットからフランジア社内で多用されています。

画像として保存されないため、保存しておきたい資料などをスクショすることにGyazoを使うことは向いていないので注意してください

【コメント】スクショが簡単です。URLにカーソルを当てるだけで画像が表示されるのですぐ確認でき便利。一方、企業間でのやり取りの際にTPOの観点からちょっとお堅い企業には使いづらい時がある。

Gyazoのダウンロードはこちら

⑦Similar Web

フランジアはIT企業ですが、しっかりウェブマーケティング対策もしています。
そこで弊社のウェブマーケターが重宝しているのがSimilar Web

イスラエル出身のこのサービスは、競合他社のアクセス数、そのページの世界ランキング、流入元や類似性の高い他社サイトまで欲しい情報が一度に表示されるのでウェブマーケティング従事者にとって非常に役立ちます。

【コメント】仕事柄SEOリサーチとかで競合サイトのリサーチとかをするときにサクッと競合サイトのあらかたのPV、流入ソースなどを把握したり、どのワードを狙うか決めることに役立つので便利。

SimilarWebのダウンロードはこちら

⑧What Font

特に、フロントエンジニアやデザイナーにオススメしたいのがWhat Font

このイケてるおしゃれなフォントの種類は何だろう?と思った時、わざわざソースコードを確認しなくてもウェブ上のフォントの詳細を調べることができる拡張機能

私がフランジアのIT留学中に授業で出された課題の「オリジナルサイト作成」に取り組む際に使用し、非常に便利だと思いました。

CSSにフォントの種類を書く時、「このフォントすごくおしゃれで使いたいけど名前が分からない!」という状況がしばしば起きていたのですが、そんな時にWhat Fontを使うとそのモヤモヤした状況が一発で解決できました。自身でウェブデザインなどをする方には本当にオススメだと思います。

【コメント】Webサイト製作時に、設定したフォントが適用されてるか見ることができます。font-family:で設定しても、ブラウザのバグとかでたまに適用されていない時があるので、文字の太さやフォントサイズ、色も確認するのに便利です。

What Fontのダウンロードはこちら

編集後記

気になる拡張機能はありましたか?

フランジアのインターンとしてジョインした際にはEvernoteの拡張機能しか入っていなかった私のツールバーに、現在は18個の拡張機能が増えたと同時に作業効率も上がりました。また、Gyazoのおかげで私のデスクトップがスクリーンショットで埋まることもなくなりました(笑)

今回の記事作成を通して初めて知った機能もいくつかあり、Chromeの拡張機能は奥が深いと感じたと同時にもっと早く知っていればよかったと思いました。

この記事を読んでくれた方からの作業や仕事が楽になったという吉報を楽しみにお待ちしております。

「Awesome Ars Academia」へのお問い合わせはこちら => https://awesome-ars-academia.net/contact/