Webデザイナーが業務で使っているChrome拡張機能

最終更新：2026.03.03

Design Other

Web制作の現場では、デザインツールの操作だけでなく、リサーチや検証も欠かせません。
本記事では、こうした業務を効率化するChromeの拡張機能を3つ紹介します。

1.WhatFont

Webページ上に表示されているテキストのフォント情報を即座に取得できるChrome拡張です。

参考サイトを閲覧していると、「このフォント何だろう」と気になる瞬間がありますよね。
ただ、詳細を調べようとすると、検証モードを開いて該当箇所を探す必要があり、少し面倒です。

WhatFontは、有効にした状態でページ上のテキストをクリックするだけで、
現在適用されているフォント、フォントファミリー、フォントサイズ、フォントウェイト、行間、文字色を確認できます。

Webページを複数のデバイスサイズで同時に表示できる拡張機能です。

画面サイズを一つずつ切り替えながら確認していくと、各サイズの違いや変化が把握しづらいですよね。

Responsive Viewerは、有効にした状態でページを開くだけで、
PC、タブレット、スマートフォンなど、自由に指定した複数のサイズを横並びで同時に表示できます。
画面幅ごとのレイアウトの違いや、レスポンシブの切り替わり方を一覧で確認できる点が特徴です。

スマホを操作している感覚で、Webページを閲覧できる拡張機能です。

PC上でスマートフォン表示を確認する場合、デベロッパーツールの切り替えだけでは、実際の閲覧時の印象がつかみにくいですよね。
特に、画面サイズやスクロール時の見え方は、PC表示とは感覚が異なります。

モバイル電話シミュレーターは、有効にした状態でページを開くだけで、
スマートフォンに近い表示環境を再現できます。
画面サイズや縦横比を切り替えながら、スマホ表示時のレイアウトや情報量を確認できます。

前述の「Responsive Viewer」でも同様の確認は可能ですが、表示モードの切り替えが必要になるため、用途に応じて使い分けています。

普段の業務でよく使っている拡張機能の紹介でした。
よかったら試してみてください。