皆さんこんにちは! ウェブディレクターの堤です。
今回は、ネット担当者になったら使いたい、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の拡張機能をご紹介していきます!
ではまた次回の動画でお会いしましょう!