「このサイトで使われているフォントは何だろう？」「もっと簡単にmeta情報を見る方法はないかなあ…」「開いてるタブのURLを1つずつコピペするの面倒だなあ」と、WEBサイトを確認する上で不便に感じたことはありませんか？
今回はそんなWEBディレクターが入れておくと便利なChrome拡張機能を10個ご紹介します！
CSS Peeper
「CSS Peeper」は現在開いているページのフォントやカラー、画像等のアセットを一覧で表示してくれる拡張機能です。
問題
・開いているフォントやカラーを知りたい
・画像を一つずつダウンロードするのが面倒
・要素の余白を知りたい
解決
・開いているフォントやカラーを調べられる
・表示されている画像を一括ダウンロードできる
・要素の余白を調べられる
Wappalyzer
「Wappalyzer」はサイトで使われている技術、フレームワーク、サービスなどを一覧表示してくれる拡張機能です。（読み方は「ワッパライザー」「ワパライザー」など呼び名が複数あるようです）
問題
・サイトで使われている技術を知りたい
解決
・1クリックで使用されているソフトウェアやサービスなどを確認できる
・使用されているサービスの概要、公式サイトへ遷移することもできる
WhatFont
「WhatFont」はサイト上のフォント情報を確認できる拡張機能です。
問題
・手軽に何のフォントが使われているか確認したい
・フォントサイズやウエイトも知りたい
解決
・マウスカーソルをかざすだけでフォントが確認できる
・フォントに設定されているCSSの属性や属性値も確認できる
ColorPick Eyedropper
「ColorPick Eyedropper」はサイト上の色を簡単に確認できる拡張機能です。
問題
・手軽にサイト上で表示されているカラーを知りたい
解決
・1クリックでカラーコードやRGB値を確認できる
・取得した色を履歴に残してくれる
Alt & Meta viewer
「Alt & Meta viewer」は画像のALT属性やタイトル属性が確認できる拡張機能です。
問題
・画像のALT属性やタイトル属性を確認するのに検証ツールを開くのが面倒
・画像のALT属性を直観的に確認したい
解決
・画像のALT属性やタイトル属性を開いている画面上に表示しれくれる
・画像のALT属性を各画像にフォーカスを当てて表示してくれる
Copy All Urls
「Copy All Urls」は複数のURLを一度にコピーまたは開くのに便利な拡張機能です。
問題
・複数のURLを一つずつ開くのが面倒
・複数開いているタブを一つずつコピペするのが面倒
解決
・コピーしたURLを1クリックで一度に複数開いてくれる
・複数開いているタブのサイトを1クリックで一度にコピー&ペーストできる
Clear Cache
「Clear Cache」はサイト上に溜まったキャッシュデータを1クリックで削除することができる拡張機能です。
問題
・都度設定画面を開いてキャッシュデータを削除するのが面倒
解決
・1クリックで開いているサイトのキャッシュを削除できる
・拡張機能の設定画面で履歴やCookieなど削除する項目を複数選べる
PerfectPixel
「PerfectPixel」はアップした画像をサイト上に重ねることができる拡張機能です。
問題
・デザイン通りにコーディングされているか画面を行き来して見比べるのが面倒
解決
・デザイン画像を拡張機能にアップするだけでサイト上にデザイン画像を重ねることができる
Google Chrome用スクリーンレコーダー
「Google Chrome用スクリーンレコーダー」は動画キャプチャを撮ることができる拡張機能です。
問題
・アカウント登録せずに拡張機能を使いたい
・ブラウザや画面全体など用途に合った収録をしたい
解決
・完全に無料で使える
・タブ、ウィンドウ、画面全体の3つから収録範囲を選べる
ウェブページ全体をスクリーンショット – FireShot
「ウェブページ全体をスクリーンショット – FireShot」はサイトのスクリーンショットを撮ることができる拡張機能です。
問題
・ページ全体や表示部分など用途に合ったスクショを撮りたい
・画像ファイル以外の形式でも保存したい
解決
・ページ全体、表示部分、選択範囲など複数のキャプチャ方法がある
・画像ファイルの他にPDFやクリップボードコピーなど複数選べる
まとめ
いかがでしたでしょうか？
今回はWEBディレクターが入れておくと便利なChrome拡張機能を10個ご紹介しました。
ただここで紹介したのはほんの一部で、同じ目的であっても様々な種類の拡張機能があり日々新しい拡張機能も増えています。
手軽さで選ぶのも良し、UIの好みで選ぶのも良し、自分に合った拡張機能を探してみてください。
また、ENT+ではコーディングに役立つ拡張機能も紹介していますので是非こちらの記事も読んでみてください！
