Chrome拡張機能「WhatFont」の使い方とサイトで使用しているフォントの調べ方

2024-08-29 2024-09-08

ippon

ウェブデザインや開発において、サイトで使用されているフォントを特定することは非常に重要です。適切なフォントを選ぶことで、ユーザーエクスペリエンスが大きく向上し、ブランドの一貫性を保つことができます。

この記事では、Chrome拡張機能「WhatFont」を使ってサイトで使用されているフォントを簡単に調べる方法を詳しく解説します。

1. WhatFontとは？

WhatFontは、Google Chromeの拡張機能で、ウェブページ上のテキストに使用されているフォントを迅速かつ簡単に特定するためのツールです。

この拡張機能を使えば、デザインの一貫性を保つために必要なフォント情報を瞬時に取得できます。そしてデザイナーや開発者にとって不可欠なツールとなっています。

さらに、WhatFontは使いやすいインターフェースを持っているため、初心者でも簡単に操作できます。特に、ウェブデザインの学習者や新規プロジェクトに取り組むデザイナーには最適なツールと言えるでしょう。

2. WhatFontのインストール方法

まずは、WhatFontをChromeにインストールする方法を説明します。

Chromeウェブストアを開きます。
「WhatFont」を検索します。（※スペースに注意）
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。

3. WhatFontの使い方

次に、WhatFontのインストールが完了したら、実際に使用してフォントを調べてみましょう。

WhatFontの起動: Chromeのツールバーに表示されているWhatFontのアイコンをクリックします。すると、アイコンが黒くなり、WhatFontが起動します。
フォントを調べたいページに移動: フォントを調べたいウェブページにアクセスします。例えば、気になるデザインのブログや企業の公式サイトなどが良いでしょう。
テキストにマウスオーバー: 調べたいテキストにマウスを移動させると、そのテキストに使用されているフォント名が表示されます。また、フォント名はポップアップで表示されるため、視認性も抜群です。
詳細情報の取得: フォント名の表示だけでなく、クリックすると詳細な情報（フォントファミリー、サイズ、ウェイト、カラーなど）も表示されます。これにより、デザインの微調整に役立つ具体的なデータを簡単に取得できます。

4. WhatFontの利点と注意点

利点

簡単操作: マウスオーバーするだけで瞬時にフォント情報が取得できるため、誰でも簡単に使えます。特に、技術的な知識が少ない人でも直感的に操作できます。
詳細情報: フォント名だけでなく、サイズやカラーなどの詳細な情報も取得可能です。これによって、デザインの統一感を保つための参考にすることができます。
多様なフォント対応: Google Fontsをはじめとする多くのウェブフォントにも対応しており、幅広いフォント情報を取得できます。これによって、最新のウェブデザインにも対応可能です。
無料で利用できる: WhatFontは無料で提供されており、コストをかけずに高機能なフォント調査ツールを利用できます。

注意点

ブラウザ依存: WhatFontはChromeの拡張機能であるため、Chromeブラウザでのみ使用可能です。そのため、他のブラウザを使用している場合は、別のツールを検討する必要があります。
動作環境の影響: 一部のウェブサイトでは、JavaScriptやCSSの特殊な設定により、正確なフォント情報が取得できない場合があります。その場合は、他の方法やツールを併用することをお勧めします。
セキュリティリスク: 拡張機能はブラウザの動作に影響を与えるため、信頼できるソースからインストールすることが重要です。そのため、公式のChromeウェブストアからダウンロードすることで、このリスクを最小限に抑えることができます。

5. 他のフォント調査ツールと比較

WhatFont以外にも、フォントの調査に役立つツールは複数存在します。ここでは、いくつかの代表的なツールを比較してみましょう。

FontFace Ninja: WhatFontと同様に、ウェブページ上のフォントを特定するChrome拡張機能です。そして、UIが洗練されており、フォントのダウンロードリンクや購入リンクも表示されるため、デザイナーにとって便利です。
Typekit（Adobe Fonts）: Adobeが提供するフォントサービスで、膨大な数のフォントライブラリにアクセスできます。また、フォントの詳細情報や使用例も豊富に提供されており、特にプロフェッショナルなデザイナーに向いています。
Google Fonts: 無料で利用できるフォントライブラリで、様々なウェブサイトで広く使用されています。さらに、フォントのプレビューやカスタマイズも簡単に行えるため、初心者から上級者まで幅広く利用されています。

6. まとめ

WhatFontは、ウェブデザインや開発において、サイトで使用されているフォントを迅速かつ簡単に特定するための強力なツールです。さらに、Chrome拡張機能として無料で提供されており、操作も非常に簡単です。フォント名だけでなく、詳細な情報も取得できるため、デザインの一貫性を保つために非常に役立ちます。

ただし、ブラウザ依存や動作環境による制限があるため、他のツールと併用することでより正確な情報を得ることができます。また、FontFace NinjaやGoogle Fontsなどの他のツールも活用しながら、自分のニーズに最適な方法を見つけてください。

ウェブデザインの質を向上させるためには、適切なフォントの選定が欠かせません。WhatFontを活用して、デザインに最適なフォントを見つけ、ユーザーエクスペリエンスを向上させましょう。