検証ツールとブラウザ拡張機能でWebページのフォントを特定する方法

Webサイトの成功は、その見た目に大きく左右されます。適切な配色やテーマを選ぶことで、訪問者をサイトに長く留まらせることができます。サイトのカラーパレットや構成だけでなく、選択したフォントも、オーディエンスの関心を引きつける上で重要な役割を果たします。

Webを閲覧しているときに、魅力的なデザインのサイトに出会い、「このサイトはどんなフォントを使っているのだろう?」と思ったことはありませんか。オンラインの拡張機能やブラウザに内蔵された検証(Inspect)ツールを使えば、フォントの特定は簡単かつスピーディーに行えます。

検証ツールを使ってフォントを調べる方法

ご存じない方のために説明すると、ブラウザに内蔵されている「検証(Inspect Element)」ツールを使うと、Webサイトのソースコードを調査できます。CSSやHTMLなどの情報を確認することで、サイトのデザイン要素を理解でき、自分のサイトをデザインする際のインスピレーションを得るのに最適な方法です。

検証ツールでフォントを特定する手順はとてもシンプルで、コーディングの知識は一切必要ありません。このツールは市販のすべてのブラウザに搭載されており、操作性もほぼ共通しています。

以下の手順で、ブラウザの検証ツールを使ってフォントを特定してみましょう。

1. 調べたいWebサイトを開きます。
2. 特定したいフォントが使われているテキストをドラッグで選択し、右クリックします。
3. コンテキストメニューから「検証(Inspect)」をクリックします。
   
4. 検証パネルが開いたら、「Computed(計算済み)」タブをクリックします。
5. 下にスクロールして「Font-Family(font-family)」セクションを探します。ここでフォント名やスタイル、サイズなどの情報を確認できます。
   

検証ツールのその他の活用方法

検証ツールでもっと手軽にフォントを調べたい場合は、次の方法がおすすめです。

1. 調べたいWebサイトを開きます。
2. Ctrl + Shift + C(MacではCmd + Shift + C)を押します。
3. テキストにマウスカーソルを合わせると、フォントのスタイル、サイズ、カラーコード、余白などがポップアップ表示されます。
   

また、検証ツールを使えば、Webページで使用されているフォントの一覧を確認することもできます。手順は以下の通りです。

1. 対象のWebページにアクセスします。
2. Ctrl + Shift + I(MacではCmd + Shift + I)を押してソースコードを開きます。
3. 「Network(ネットワーク)」タブをクリックし、続いて「Font(フォント)」タブを選択します。
4. ここで、そのWebページで使われているすべてのフォントの一覧が表示されます。
   

なお、リアルタイムで最新のフォント一覧を取得したい場合は、Webページを再読み込みするとよいでしょう。

ブラウザ拡張機能でフォントを特定する方法

もっと便利にフォントを特定したいなら、フォント識別用のブラウザ拡張機能をインストールするのがおすすめです。Web上のフォントを検出できる拡張機能は複数ありますが、特に人気が高いのはWhatFontとFont Finderの2つです。

それでは、それぞれの拡張機能を使ってフォントを特定する手順を見ていきましょう。

1. WhatFont

WhatFontは、複数のフォントを一度に素早く検出できることで広く人気のあるツールです。使い方は以下の通りです。

1. ブラウザでWhatFontを有効にすると、テキストにマウスカーソルを合わせるだけでフォント名が表示されます。
   
2. テキストをクリックするとポップアップウィンドウが開き、フォントサイズ、カラー、スタイルなどの詳細情報も確認できます。
   
3. さらに、同じページ上の複数のテキスト部分を同時に選択して、異なるフォントを比較することも可能です。
   

2. Font Finder

Font Finderも、Webサイト上のテキストにマウスカーソルを合わせるとフォントの詳細を表示してくれます。ただし、非常に技術的な情報まで表示されるため、Webデザインに不慣れな人には少し分かりにくいかもしれません。

その一方で、Font Finderは、既存のフォントをリアルタイムで新しいフォントに置き換えたいWeb開発者にとって最適なツールです。実際に変更を加える前に、さまざまなフォントを試せるのが大きな魅力です。

Font Finderでフォントを試す手順は以下の通りです。

1. Webページから任意のテキストを選択します。
2. 右クリックし、コンテキストメニューから「Font Finder」を選択します。
   
3. 「Replace font with(フォントを置き換え)」を選択し、フォント名を入力します。例としてCalibriを指定すると、プレビューでフォントがどのように変化するかを確認できます。
   
4. 元のフォントに戻したい場合は、ページを再読み込みすればリセットできます。
   

画像内のフォントを調べるには?

画像の中で使われているフォントを特定したい場合、ブラウザ拡張機能や検証ツールでは対応できません。しかし、WhatFontIs、FontSquirrel、Fontspring、WhatTheFontなど、オンラインの画像解析ツールを利用すれば解決できます。

画像からフォントを特定する手順は、どのツールでもほぼ共通しています。ここでは、WhatTheFontを使って画像内のフォントを特定してみましょう。

1. まだダウンロードしていなければ、解析したい画像を保存します。
2. 画像をWhatTheFontにアップロードします。
   
3. WhatTheFontが自動的に画像内のテキストを検出します。切り抜きボックスを縮小または拡大して、特定したいフォント部分を囲み、矢印ボタンをクリックします。
   
4. WhatTheFontが画像内のフォントとライブラリ内のフォントを照合し、類似度の高いフォントを表示してくれます。
   
5. すぐに良い候補が見つからない場合は、「Show more results(結果をもっと表示)」をクリックし続けることで、より多くの関連フォントを確認できます。
   

Web上のフォントを見つけて、自分のデザインに活かそう

フォントは、Webサイトやグラフィックデザインの成功において重要な要素です。Webを閲覧中に魅力的なフォントに出会ったら、今回紹介した方法を使えば簡単に特定できます。ぜひ活用して、あなただけのデザインに取り入れてみてください。