サイトの使用フォントを簡単確認！FontNinjaの使い方を図解で解説

サイトの見やすさは表示されるフォントで決まるといっても過言ではありません。気持ちよく閲覧できるサイトはぜひ参考にしたいところですが、どういったフォントを使用しているのかスタイルシートをページごとに確認するのは大変です。そんな時にぜひ活用したいのがGooglechromeの拡張機能のひとつ、「FontsNinja」です。カーソルを文字の上に置くだけでフォントが確認できるこの便利な機能について詳しくご紹介します。

目次

任意のサイトの使用フォントを調べるFontsNijaとは

対応ブラウザ ダウンロードページ	Google Chrome ソフトウェア版
ユーザー数	600,000人以上 ※2022/12/12現在
導入難易度	簡単
ログイン	不要
有料版	なし
日本語対応	未対応

「FontsNinja」はサイトの文字情報を確認できる拡張機能です。使われているフォントの種類を確認できるだけでなく、購入やダウンロードも可能なので自サイトで活用するといった自由な使い方ができます。
完全無料でログインも不要といった使いやすさはありますが、英語のみに対応しており、スマホやタブレットには対応していないことに注意が必要です。

「FontsNinja」はGooglechromeの拡張機能に加え、PCにダウンロードして使うソフトウェア版の2種類が用意されていますが、今回はGoogleChrome版を基本として解説します。

【図解】FontsNijaの導入方法

FontsNinjaのダウンロード方法は簡単で、GoogleChromeのChromeウェブストアのダウンロードページにアクセスし、「Chromeに追加」をクリックするだけです。

ダウンロードが完了すると上記のようなサンクスページに自動的に移動します。表示される画像はマニュアルです(※英語のみ)。
使い方は次項で解説します。

【図解】FontsNijaの使い方をわかりやすく解説

今回は現在ご覧いただいているCMSproのトップページを例に解説を行います。

FontsNinjaの使い方は簡単で、フォントを調べたいサイトのページにアクセスしたうえでツールバーからFontsNinjaを開くと使用されているフォントの種類が自動的に表示されます(※上の画像右上)。表示項目の見方は以下の通りです。

フォント名 (赤枠)	そのサイト名で使用されているフォント名です。 画像で赤枠で囲んでいる個所になります。 複数ある場合は画像の赤・青・緑の枠の各項目が下に続いて表示されます。
種類ごとの見え方(青枠)	使用フォントに複数の種類がある場合に表示されます。 当サイトはNoto Sans JPを使用しているため、「Noto Sans Regular」や「Noto Sans Black」などが表示されています。 クリックで切り替えることで各フォントを設定した場合の見え方を確認できます。
使用されている文字(緑枠)	そのフォントが使用されている文字の種類が表示されています(画像の緑枠の部分です)。 アルファベット＝英語や日本語などの文字、数字＝数字です。

関連記事

• 
  Checker Plus for Gmailの使い方を図解で解説 Gmailは、Google Chrome上で画面を開いていないと新着メールが届いているかどうかわかりません。とくに複数のGmailアカウントを持っている場合には、別タブで複数画面を開いておく必要があります。 そんな手間を一気に解消し、Gmail画面を開かずにメールの確認や削除、送受信ができる効率化ツールが、Google Chromeの拡張機能「Checker Plus for Gmail」です。 ・・・
  
  
• 
  ページ全体のスクショを簡単に撮影！GoFullPageの使い方を徹底解説 気に入ったPCの画面を気軽に保存できるスクリーンショット（スクショ）。便利な機能ではあるものの、縦に長いホームページ全体をスクショするのは案外難しいのをご存じでしょうか。 ブラウザの拡張機能である「GoFullPage」を使えば、スクロールバーのある細長い画面のスクショも簡単です。インストール後、ワンクリックでページ全体のスクリーンショットを撮影できるので使い勝手も抜群です。拡張機能とは、インスト・・・
  
  
• 
  Chromeでネットのアーカイブが見られる？拡張機能”Wayback Machine(ウェイバックマシーン)” 使い方のやさしい解説 今は無くなってしまった競合の昔のWebサイトでも、簡単に閲覧できるサービスがWayback Machineです。 過去のWebサイトがWayback Machineに保存されていれば、現在はなくなってしまったサイトでも簡単に見ることができます。 知っていないと損をするWayback Machineの便利な利用方法も応用編で解説していきます！ Wayback Machine概要 Wayback Ma・・・
  
  
• 
  Chromeのタブを一つにまとめる拡張機能「OneTab(ワンタブ)」の特徴と使い方 パソコンでGoogle Chrome（グーグル・クロム）を利用していたら、いつの間にかタブの数がすごい量になっていたということはありませんか？閉じたくても、後で見返すことがあるかもしれないと思うと、なかなか閉じられないものです。 そんなときに活用したいのが、Chromeの拡張機能のひとつである「OneTab（ワンタブ）」です。 OneTabは、タブをまとめることで動作を軽くすることができる機能で、・・・
  
  
• 
  Wappalyzer（ワパライザー）？サイトで使われている技術を丸裸にできる！ Wappalyzer（ワパライザー）は、競合サイトとの比較や新たな機能との出会いに活用できる、とても便利なブラウザの拡張機能です。 ただし、利用する上では絶対に押さえておかなければならないこともあります。 最後まで読んで対策をしてみてください！ Wappalyzerでどんなことができる？ Wappalyzer(ワパライザー）はサイトで使用されている技術を表示するGoogle Chromeの拡張機能・・・