ITツール Webディレクターの仕事

Web担当者にオススメする14個のGoogle拡張機能

webtan-14-osusume-chromeapp

今日はWebディレクターとして日々仕事をしている私が愛用している、Google Chrome 拡張機能をまとめてご紹介します。

全部で14個。特にWebデザイナー・フロントエンジニアなど、Web制作に関わる人にとって役立つものを中心に集めました。

ColorPick Eyedropper

Webページ内のカラーコードを取得・コピーできるツール。

拡張機能のアイコンをクリックすると、カラーピッカーが起動。調べたい箇所にピッカーを移動させて、クリックすれば、その場所のカラーコードを取得できる。

過去に取得したカラーコードを履歴として残してくれる。パレット機能もあるので、取得したカラーコードを一覧にして保存することもできる。

ColorZilla

こちらもカラーピッカーアプリ。Webページで使用しているカラーコードを取得できる。

先ほどの「ColorPick Eyedropper」は、ある1点をピックアップして、その場所のカラーコードを取得できた。この「ColorZilla」も同様のことはできるが、本領はそこじゃあない。

「ColorZilla」は、Webページのカラーコードを一気に取得できる。

ページ内のCSSを分析し、カラーパレットを生成。しかも、そのカラーコードが使われているパーツまで教えてくれる。

What Font - find font

マウスカーソルを当てた箇所のフォントを分析してくれるアプリ。

使われているフォントはもちろん、font-family、style、weight、font-size、line-height、font-color といった情報まで表示してくれる。

サイトで使用されているフォントを調べたいときには、非常に強力なアプリだ。

Awesome Screenshot

Webページのスクリーンキャプチャを撮れるアプリ。

表示されている画面ではなく、ページ全体のキャプチャを撮ることができるのが非常に便利。

また、動画のキャプチャも可能なので、動きのあるページを他人と共有するのにも役立つ。

CSSViewer

選択した箇所のCSSを分析して、表示してくれるアプリ。そのパーツを構成しているあらゆる要素の数値を調べてくれる。

マウスオーバーするだけで、その要素の分析結果をポップアップで表示してくれる。Fを押すとポップアップが固定され、数値などをコピーできるようになる。

Design Mode

Webページ内のテキストが編集できるようになるアプリ。制作途中のWebページのチェックに重宝している。

「想定されていたテキストよりも文字数が多くなったとき、周りの要素が表示崩れを起こさないか」などのチェックに
役立つ。

このアプリが無いときは、わざわざ要素検証をして、HTML内のテキストを編集していたが、このアプリのおかげでその手間がなくなった。

Window Resizer

ウインドウのサイズを変更するためのアプリ。

スマホやパソコンでよく使われるウインドウサイズに、ワンクリックで変更できる。また、ピクセル単位で変更することも可能だ。

ブラウザの要素検証でも同様のことは可能だが、ワンクリックでできる手軽さが良い。

Page Ruler Redux

Webページ上に「ものさし」が表示され、サイズをピクセル単位で計測できるアプリ。

要素のサイズを調べたいなら「CSSViewer」などで十分だが、このアプリは自分の好きな場所でサイズが測れるのが良い。

「こっからここまでの長さは何ピクセルだ?」「この要素の幅を調べたい」といったときに重宝する。

Image Downloader

いま表示しているWebページ上に存在する、すべての画像を一括でスキャン。そしてダウンロードできるアプリ。

「横幅300px以上の画像のみをダウンロード」など、画像のサイズによる絞り込みができるので、自分の欲しい画像を狙ってダウンロードできるのが嬉しい。

Copy All Urls

いまChromeで開いてるタブのURLを一括でコピーできるアプリ。「とりあえずリンクを開きまくって、最後にURLを一括でコピー」という使い方が便利。

また、逆に、コピーしたURLをすべていっぺんに開くこともできる。

制作したテストページのURLを全部コピーして、このアプリの「Paste」を使うだけで、すべてのページを一気に開ける。検証をするときに便利だ。

The QR Code Extension

いま開いているページのQRコードを生成してくれるアプリ。「このページをスマホの実機で確認したい」というときに便利。

Lighthouse

クリックするだけで、いま開いているページを Lighthouse で計測してくれるアプリ。

Lighthouse は Google が提供しているフリーのパフォーマンス分析ツール。

ページの表示スピードやSEO評価、アクセシビリティなどを、点数で評価してくれる。サイト改善の指標となる重要案ツールだ。

SEO META in 1 CLICK

ワンクリックで、いま開いているページのSEO情報をまとめて教えてくれるアプリ。

titleやdescriptionなどはもちろん、Canonical、OG系のデータの確認や、noindexのチェック、h1・h2などの見出し構造のチェック、画像の alt チェックなどなど、SEOに関する項目を網羅的に調べてくれる。

Meta Getty

複数のページの meta 情報を一括で取得できるアプリ。取得したデータはExcelなどに貼り付けることもできる。

制作したページの一覧を用意して、それに Meta Getty を使用すれば、meta 情報の一括チェックができる。

一瞬でページリストを作ることも可能。非常に便利なアプリだ。

あとがき

最後になりましたが、この記事でご紹介したもののいくつかは、以下のTwitterのツイートを参考にさせていただきました。この場を借りてお礼申し上げます!ありがとうございました!

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール, Webディレクターの仕事
-, ,