WhatFontというプラグインで出来ること

Webサイトを見ていると、

「このサイト、何のフォントを使っているんだろう？」

と思うことがあります。

そんなときに便利なのが、ブラウザ拡張機能の WhatFont です。

Web制作をしている人なら入れておいて損はない、かなりシンプルで便利なツールです。

今回は、WhatFontを使うと何ができるのかを紹介します。

WhatFontとは？

WhatFontは、Webサイト上で使われているフォントを簡単に調べられるブラウザ拡張機能です。

通常、フォントを調べようと思うと、

検証ツールを開く

対象の要素を選択する

CSSのfont-familyを探す

といった作業が必要です。

もちろんWeb制作者なら検証ツールでも確認できますが、フォント名だけ知りたい場合には少し手間です。

WhatFontを使えば、ページ上の文字にカーソルを合わせるだけで、どのフォントが使われているのかを確認できます。

Webサイトで使われているフォントを調べられる

WhatFontの一番基本的な機能です。

WhatFontを起動して、Webサイト上の文字にマウスカーソルを合わせると、

「Noto Sans JP」

「Roboto」

「Helvetica」

といったフォント名が表示されます。

他社サイトや参考サイトを見ていて、

「この見出しのフォントいいな」

と思ったときに、その場ですぐ確認できます。

デザインの参考サイトを見る機会が多いWeb制作者にはかなり便利です。

フォントサイズも確認できる

WhatFontでは、フォント名だけでなく、文字に関するさまざまな情報を確認できます。

たとえば、

font-family

font-size

font-weight

line-height

color

などです。

そのため、

「この見出しは何pxなんだろう？」

「本文の行間はどれくらい？」

といったことも確認できます。

特にデザインを参考にしながらコーディングするときには役立ちます。

font-weightも確認できる

同じフォントでも、文字の太さによって印象はかなり変わります。

たとえば、

400

500

600

700

などです。

「同じフォントを使っているはずなのに、なんとなく雰囲気が違う」

という場合、実はfont-weightが違っていることがあります。

WhatFontを使えば、この文字の太さも簡単に確認できます。

line-heightも確認できる

Webデザインでは、フォントそのものだけでなく、行間も非常に重要です。

たとえば本文で、

font-size: 16px

line-height: 1.8

なのか、

font-size: 16px

line-height: 1.5

なのかによって、読みやすさや見た目の余白感がかなり変わります。

WhatFontではline-heightも確認できるため、

「このサイト、なんで文章が読みやすいんだろう？」

と感じたときに、フォントサイズと一緒に行間も調べられます。

文字色も確認できる

サイトによっては、本文を完全な黒ではなく少し薄い黒やグレーにしていることがあります。

たとえば、

#333333

#444444

のような色です。

WhatFontでは文字色も確認できるため、フォントだけでなく細かいデザインの違いを調べるときにも便利です。

デザインの参考サイトを分析するときに便利

個人的にWhatFontが特に便利だと思うのが、参考サイトを見るときです。

Web制作では、

「このサイトの雰囲気いいな」

と思ったサイトを参考にすることがよくあります。

そのときに、

「フォントは何を使っているのか」

「見出しは何pxなのか」

「font-weightはいくつなのか」

「行間はどれくらいなのか」

といった部分を見ることで、単純に見た目を真似するのではなく、

なぜこのデザインが見やすく感じるのか

を分析できます。

これがかなり勉強になります。

Figmaでデザインするときにも使える

参考サイトを見ながらFigmaでデザインを作るときにも便利です。

たとえば参考サイトで、

見出し：Merriweather

本文：Noto Sans JP

見出しサイズ：40px

本文サイズ：16px

といった情報を確認しておけば、そこから自分のデザインに合うように調整できます。

もちろん、そのまま完全にコピーするのではなく、

「なぜこのフォントの組み合わせなのか」

を考えることが大切です。

検証ツールとの使い分け

フォントを確認するだけなら、WhatFontの方が圧倒的に早いです。

一方で、

margin

padding

width

height

display

position

CSS全体

などを詳しく調べたい場合は、Chromeの検証ツールを使った方が便利です。

なので、

フォント周りをサッと確認したい → WhatFont

レイアウトやCSS全体を詳しく調べたい → 検証ツール

という使い分けが分かりやすいと思います。

WhatFontを使って感じたこと

Web制作を始めたばかりの頃は、Webサイトを見ても、

「なんとなくオシャレ」

「なんとなく見やすい」

くらいで終わってしまうことが多いです。

ですが、WhatFontなどのツールを使うと、

「見出しは40px」

「font-weightは700」

「本文は16px」

「line-heightは1.8」

といった具体的な数字でデザインを見ることができます。

こうやって細かく分析する癖をつけると、Webデザインを見る力も少しずつ身についていきます。

まとめ

WhatFontは、Webサイトで使われているフォントを簡単に調べられるブラウザ拡張機能です。

フォント名だけでなく、

フォントサイズ

font-weight

line-height

文字色

なども確認できます。

Web制作では、参考サイトを分析する場面がかなり多いです。

そのたびに検証ツールを開くよりも、WhatFontを使った方が素早く確認できることもあります。

特に、

「このサイトの文字、なんか見やすいな」

「この見出しのフォントいいな」

と思ったときに、その理由を具体的に調べられるのが便利です。

Web制作をしている人なら、入れておくとかなり役立つツールだと思います。