企業のネット担当者必見 Google Chrome拡張機能2023年版

皆さんこんにちは! ウェブディレクターの堤です。
今回は、ネット担当者になったら使いたい、Google Chromeの拡張機能をご紹介します! 

そもそも拡張機能とは何を指すかご存知でしょうか?

拡張機能とは、「Chromeの機能を増やしたり強化したりする専用の追加プログラム」のことです。

拡張機能をインストールすることで、様々な便利機能を使えるようになります。

ウェブに関わる仕事をしている人は、必ずと言っていいほど、拡張機能を使用しています。
例として、弊社社員が投稿しているブログの中でChromeの拡張機能ランキングを紹介している記事があるので、一部をご紹介したいと思います! 

弊社ネクストページのディレクター、デザイナー、エンジニアが選んだGoogle Chrome 拡張機能ランキング2023年バージョンをご紹介します。
ブログはこちら

第3位(同率4票)
3つの拡張機能が同率で第3位にランクインしています。

・Alt & Meta viewer

■用途
・画像に設定された Alt または Title 属性をツールチップで表示することができる。
・ヘッダの Title、Meta 情報を一覧表示させることができる。

■弊社社員コメント
Altやdescriptionを確認する時に使います 。(ディレクター)

Alt, Title属性, Meta情報などはサイトの評価を上げてSEO対策を強化する方法として必要な要素が、これらの情報をソースを開いて自力で探すのは時間がかかります。
しかし、このツールを用いると一瞬で情報が提示されるので、コードが苦手な方には特におすすめです! 

・PerfectPixel by WellDoneCode (pixel perfect)

■用途
Webサイトと画像を重ねることでピクセル単位の精度でWebサイトを確認できる。

■弊社社員コメント
・コーディングCK時、自分の目で見ると何が正しいかわからない。デザント重ねてCKできるため、余白感や全体的なデザインの再現性をみれる!  (ディレクター)
・デザイン通りにコーディングされてるかチェック。(ディレクター)
・コーディングのときも使うし、コーディングチェックのときも使います。(デザイナー)

私もこの拡張機能を、デザインCK時によく使います。目視でデザインと差異がないか見比べるのには限界があるので、とても助かってます! 
重ねた画像の透過の度合いが微調整できる点も便利です。

・FireShot

■用途
Webサイトのスクリーンショットの撮影

■弊社社員コメント
・現行の状態を確認しつつCOしたいときや、キャプチャからデザインするときにサイト全体を1枚の画像したりして使っています。(デザイナー)
・キャプチャ撮るのに使っている。(ディレクター)

こちらは無料でありながらスクリーンショットを撮る範囲を「ページ全体」「目に見える部分」「選択した部分」から選べ、保存形式もjpgだけでなくpdfで保存することも可能です。
キャプチャをpdf化したいとき、わざわざ変換する手間がないのはとても便利ですね! 

第2位(5票)

・Check My Links

■用途
Webサイト内のリンクやaltのチェック

■弊社社員コメント
・リンク切れや、Altを確認できるから多用している。(ディレクター)
・エラー箇所がパッと見て色でわかるので便利。(ディレクター)
・リンク切れのチェックで使う。(エンジニア)

こちらはウェブサイトの本番反映前の最終CKで使うことも多いです。大量のリンクを一気にチェックにかけることができ、色でリンク切れが可視化できるので、大幅な作業の時短に繋がります。

第1位

・GoFullPage

■用途
Webサイトの画面キャプチャの撮影

■弊社社員コメント
・キャプチャとりたいけど一画面に収まらないときに使います。(ディレクター)
・画面全体のキャプチャをとる。仕様書を作成するとき、画面全体をとれるので便利。(ディレクター)
・構成案や仕様書作成時に使用 。(ディレクター)
・画面キャプチャをとるのに使っています。(デザイナー)

私もこのキャプチャツールを使っています。スクロールしなくてもページ全体をキャプチャしてくれるので、ディレクターには必須のツールともいえるかなと思います! 

このように、ウェブディレクター、デザイナー、エンジニアは紹介したようなツールを用いながら業務の効率化を実現しています。

今回は弊社のランキングをご紹介しました。その他にもおすすめできる拡張機能があるので、次回はも引き続きgooglechromeの拡張機能をご紹介していきます! 

ではまた次回の動画でお会いしましょう!