こんにちは。
WEBディレクター2年目のカレーパン太郎と申します。
普段はクライアントのサービスサイトの運用業務を行っています。

今回は私がWEB制作時にチェックツールとして使用するChromeの拡張機能をご紹介します。
私は1年前にWEBの知識ゼロの状態で入社しました。
そもそも「拡張機能？何それ知らん」状態だったのですが、これまで多くの拡張機能と出会い、今や使わない日はありません。

特に新卒1年目・未経験のWebディレクターの方にとっては、とりあえずこれをいれとけばOK！といった拡張機能になります。

業務全般で便利

1.複数のページを一括で開きたい

「Pasty」
複数のURLを全選択でコピーすることで一括で開くことができます。
数十ページの確認が必要なときに、ひとつひとつ開くととてもめんどくさいですよね。
私はコーダーの先輩にpastyの存在を教えてもらったとき感動した記憶があります。

2.スマホの実機でページを確認したい

「簡単なQR（The QR Extension）」
PCで表示しているページを一瞬でQRコード生成します。
手元のスマホで読み込むことで、簡単に実機で表示確認ができます。
新しくページを制作したときのスマホ実機での確認はマストです。
（ところでQRコードを発明したのは日本人って最近知りました・・）

3.ページ全体をスクリーンショットしたい

「FireShot」
ページ全体のスクショを取得することができます。
任意の範囲を選択することもでき、クリップボードにコピーすることも可能です。
画面の表示範囲でもスクショできるため、FVの見え方をクライアントや社内で共有するときに便利です。

4.文字化けを解消したい

「テキストエンコーディング」
インクルードファイルや古いページを閲覧するときにたまに文字化けしていることがありますよね。
右クリックで文字コードを指定できるメニューを出すことができ、文字化けを解消して見ることができます。

表示やコードの検証に便利

5.ソースエラーがないか確認したい

「HTMLエラーチェッカー」
コードのタグの閉じ忘れなど検知できる拡張機能です。
表示自体は問題ないけど記述にミスが・・・なんてこともあるので注意です。

6.リンク切れがないか確認したい

「Check My Links」
ページ内のデッドリンクの有無や、デッドリンクとなる箇所を確認できます。
拡張機能を使用し、ページ内にリンク切れが発生しないようにしましょう。

7.altを確認したい

「Alt & Meta viewer」
altとは、画像の代わりとなる代替テキストのことです。
SEOに効果的で、目の不自由な方が読み上げ機能を用いて画像の内容を把握することもできるため、基本的に画像にはaltを設定しましょう。
こちらの拡張機能は、ロゴやバナーなどそれぞれの画像に設定されたaltがツールチップで表示されます。

8.TDKを知りたい

「tdk」
Title、Description、keywordを確認したいときに便利です。
SNSでシェアしたときに表示されるOGP画像も確認できます。

9.SEO対策できているか知りたい

「SEO META in 1 CLICK」
SEO対策に特化した拡張機能です。
見出しの構造や画像数などのページの概要だけでなく、noindexやカノニカルなどSEOに必要な情報を確認できます。

10.カラーコードを確認したい

「ColorPick Eyedropper」
調査したい部分にカーソルを合わせるとカラーコードを確認できます。
また、画面をクリックすることで簡単にカラーコードをコピーできます。
デザインデータのカラーの再現性を確認するときなどに便利です。

まとめ

いかがでしたでしょうか。
拡張機能はご紹介したもの以外にもたくさんあるので、ぜひご自身に合ったものを探してみてください。
ちょっと面倒だな・・と思う作業もどんどん効率化していきましょう！