デザイナーが厳選！本当に使えるChrome拡張機能25選

Google Chromeには、便利な拡張機能がたくさんあります。しかし、数が多すぎてなにを使うべきなのか決められないデザイナーも多いのではないでしょうか。

今回は、デザイナーである筆者が10年間をかけて集めた、本当に使えるChrome拡張機能をご紹介します。

1. ColorZilla

▲マウスカーソルの下に色が表示される

デザイナーはかならず入れておきたい、ベーシックなChrome拡張機能。画面上に表示されている色のカラーコードを読み取れます。

スポイト機能のほか、過去に読み取った色の履歴を参照することも可能です。

ColorZilla

2. WhatFont

▲WhatFontによると、MediumのAboutページにはGT Super Text Bookが使われている

画面上に表示されているフォントが何であるかを教えてくれるChrome拡張機能です。

2011年にリリースされて以来、デザイナーのあいだで人気を博しています。

WhatFont

3. Google Font Previewer

▲Abril Fatfaceフォントが利用されている

Google Font APIのディレクトリからフォントを選び、閲覧中のWebサイト全体、または特定のCSSにフォントを適用することができます。

フォントを素早く試したいときに便利です。フォントをお気に入り登録することもできます。

Google Font Previewer

4. Dimensions

▲Dimensionsextensionによると、google.comの検索バーは上から376ピクセルのところに位置している

DOM要素間の距離を測定できるChrome拡張機能です。

引越しをするときにん部屋の広さを測るような感覚で、要素間の距離を測れます。

Dimensions

5. Page Ruler Redux

▲要素のサイズが一目でわかる

ブラウザ上に、要素の幅や高さ、位置を測定出来るルーラーが現れます。閲覧していたWebサイトで使われている画像の大きさを知りたいとき、自分が縮めたブラウザの幅を知りたいときなどに便利です。

ピクセル単位までこだわるデザイナーには欠かせないツール！

Page Ruler Redux

6. SVG Gobbler

▲SVG GobblerがMediumのWebサイトから抽出したSVG

WebサイトからSVGを抽出できるChrome拡張機能です。

ハードドライブ内を探すよりも簡単なので、筆者は自サイトのアイコンデータが必要な時もSVG Gobblerを使っています。

SVG Gobbler

7. CSS Peeper

▲FedExのWebサイトのカラーパレットが右上に表示されている

WebサイトのCSSファイル上で使われている色を検出し、表示してくれる拡張機能です。

Webサイトのカラーパレットを参考にしたいデザイナーにはぴったり！

CSS Peeper

8. View Image Info

▲画像を右クリックすると、画像の情報を閲覧できる

ファイルパスやサイズ、拡張子など、画像ファイルの基本情報を表示してくれる、シンプルな拡張機能です。

最終更新は2016年ですが、いまでも問題なく使えます。

▲「View Image Info（画像の情報を閲覧）」を選択すると、基本的な情報が表示される

View Image Info

9. Window Resizer

▲レスポンシブデザインをテストするための幅広いオプションを提供

Web制作の現場でレスポンシブサイトの表示確認を行うときに便利な拡張機能です。

ブラウザの画面サイズをPC ・タブレット・スマホなど、各デバイスごとのサイズに変更できるほか、カスタマイズした設定を保存することも可能です。

Window Resizer

10. VisBug

▲ブラウザに表示された要素を直接編集できる

ブラウザに表示したページのデザインやコンテンツを検証・編集できるChrome拡張機能です。デザインアプリのように、簡単にWebページを編集できるのが特徴です。

Webページのテキスト変更や画像入替えだけでなく、エレメント移動やCSS情報取得など、幅広い編集が可能です。

VisBug

11. Live editor for CSS, Less & Sass — Magic CSS

▲Wikipediaの背景色をサイケデリックなシアンに変更

CSSのライブ編集をするなら、この拡張機能を使ってみましょう。CSSコードを書き留めるためのポップアップ・コンソールが現れます。

ツールの名前が長すぎること以外は、とても優秀です。

Live editor for CSS, Less & Sass — Magic CSS

12. Daltonize

▲色盲の人がサイトをどのように見ているか可視化できる

ダルトナイゼーション（Daltonization）とは、デザインが色盲のユーザーにどのように見えるのかを可視化する技術のことです。

色盲と呼ばれる視覚障害（CVD）をもつ人は、人口の約5%（男性8%／女性0.5%）と言われており、あなたのWebサイトを訪れる20人に1人にあたります。

Daltonize

13. SEO Pro Extension

▲SEOデータを簡単に確認できる

プロダクトデザイナーやUXデザイナーにおすすめの拡張機能です。

自分が管理しているWebページのSEOデータを、簡単に手早く確認できます。

SEO Pro Extension

14. Lighthouse

▲Google公式のWebページ健康診断ツール

Googleが提供している強力なChrome拡張機能です。Core Web Vitalsの指標や、Webサイトのレンダリング性能、アクセシビリティスコア、SEO性能を一度にチェックすることができます。

競合分析やリサーチを頻繁にするなら、入れておいて損はないでしょう。

Lighthouse

15. Momentum

▲いつものタブが、スタイリッシュに返信

新しいタブを、ToDoリスト付きのスタイリッシュなダッシュボードに変えてくれます。

一度この拡張機能を使いはじめると、手放せなくなるはずです。

Momentum

16. Earth View from Google Earth

▲時間を忘れて眺めてしまうような、魅力的な画像が表示される

地球そのものに興味がある人はもちろん、抽象的なイラストが好きな人にもおすすめしたいのが、Google Earthの『Earth View』です。

地球の意外な一面を見ることができ、作業する手を止めていつまでも眺めていたくなるほど魅力的です。

Earth View from Google Earth

17. Muzli 2 — Stay Inspired

▲インスピレーションを得るのにぴったり

インスピレーションや新鮮な情報を得たいデザイナーにおすすめのChrome拡張機能。

新しいタブが、インスピレーション溢れるクリエイティブな場に変わります。

Muzli 2 — Stay Inspired

18. Responsive Web Design Tester

▲デバイスごとのデザイン表示を簡単に確認できる

レスポンシブWebデザインが、スマートフォンやタブレットに対応するか、簡単にテストすることができます。わざわざデバイスを変えて確認する必要がなくなります。

Responsive Web Design Tester

19. Dimensions

▲オブジェクト間の距離を簡単に計測できる

Webサイト内のスクリーンの長さを測ることができ、ページ内の各要素の距離などを計測することができます。レイアウト設定に役立ちます。

Dimensions

20. TypeWonder

▲かんたんに確認しながらフォントを選択できる

指定したフォントでWebサイトを表示させることができます。制作したWebサイトに、どのフォントがマッチするかを確かめられます。

TypeWonder

21. UX Check

▲UXデザインの効果を検証できる

Webサイトのヒューリスティック評価を簡単に行うことができます。かんたんにUXデザインの効果を検証でき、サイトのブラッシュアップに役立ちます。

UX Check

22. Corporate IpsumDesign Tester

▲かんたんにダミーテキストを生成できる

ダミーテキストを生成できるツールです。日本語なら、Lorem ipsumも便利です。

Corporate Ipsum

23. PerfectPixel by WellDoneCode

▲サイト上でかんたんに画像サイズの確認ができる

制作した画像をブラウザ上で半透過に表示し、Webサイト上でピクセルサイズがあうかを確認できます。

PerfectPixel by WellDoneCode

24. Lightshot

▲スクリーンショットの編集やサーバーへのアップロードができる

スクリーンショットをそのまま編集して、サーバーにアップロードすることができます。

Lightshot (screenshot tool)

25. Code Cola

▲直感的な操作でCSS編集ができる

表示中のWebサイトのCSSスタイルを、視覚的に操作可能なインターフェースで編集することができます。コーディングが苦手な方には特におすすめです。

Code Cola

おわりに

実用的なものからインスピレーショナルなものまで、Google Chromeの拡張機能はさまざまな体験を提供してくれます。

用途に合った拡張機能を使って、より便利にChromeを使いこなしましょう。

（執筆：Chan Young Park　翻訳：Asuka Nakajima　編集：少年B　提供元：Muzli）