webサイト を見ていて、この フォント 何を使っているんだろう！いい太さだな～と思うことありますよね。
特に、webクリエイター すなわち web制作に取り組む webディレクター webプロデューサー webデザイナー の方なら、気になる方も多いはず。
そんなときに使えるのが、今回ご紹介するchromeの拡張機能で、WhatFont と Fonts Ninja になります。どちらも、chromeにインストールしておくだけで、簡単に使えてしまう、優れものツールです！
この記事では WhatFont と Fonts Ninja を 比較 しながら、WhatFont と Fonts Ninja について、ご紹介していきます！
WhatFontとは
WhatFont chromeウェブストア 公式ページ
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
WhatFontとは、webページで使われているフォントの種類や、フォントのサイズをウィンドウの中で表示してくれるchromeの拡張機能です。
インストールは、上記のURLをgoogle chromeにてアクセスして、インストールするだけです。インストール完了後、Chromeの右上にWhatFontのアイコン「f」みたいな文字が表示されればOKです。
実際の利用方法のご紹介です！
WhatFontの使い方は、
- WhatFontのアイコンをクリック
- Exit WhatFontのボタンが登場
- あとは、対象の文字に、マウスを載せるだけ
簡単ですよね。
ホームページ上のテキストへマウスオーバーするだけなんです。
たったこれだけで、使用されている、webサイトのフォントが出てきます。
Exit WhatFontのボタンはWhatFontの機能を止めるときにクリックしてくださいね。なんでもかんでも、フォントが見えていると、気になって仕方ないですし。
そして、この表示されたフォント名をクリックすると、
- font-family
- font-weight
- font-Style
- font-size
- line-height
- font color
が見える、詳細が出てきます！
WhatFontの詳細動画です！
使いやすそうですよね、WhatFont。
Fonts Ninjaとは
Fonts Ninja 公式 ホームページ
https://www.fonts.ninja/
Fonts Ninja chromeウェブストア 公式ページ
https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh
Fonts Ninjaとは、こちらも、Google Chrome拡張機能 として、提供されているwebツールです。フォントを調べたい文字にマウスをのせるだけです。
Fonts Ninjaでも、WhatFont同様、フォントの名前、文字色、文字サイズ、文字の高さ、行間幅といった情報が表示されます。
Fonts Ninja 紹介動画
大きく、WhatFontと、Fonts Ninjaで、異なるのは、
Fonts Ninjaは、マウスオーバ、１回するだけで、詳細情報まで見れます。
それゆえ、作業効率を考えると、Fonts Ninjaの方が便利です。
さらに、Fonts Ninjaの場合、ページ内で使用されているフォントの一覧も見ることができます。
より、Fonts Ninjaの方が、情報量が多いので、便利です。
ただ、そういう利用シーンが多いかどうか、、、
さらに言うと、Fonts Ninjaは、ホームページ上のフォントの一覧だけではなく、そのフォントについての、PC内の属性も見てくれます。
簡単にまとめると、
- インストール済み
- 無料で買える
- 有料のフォント
という区別もしてくれます。
そして、それぞれダウンロードページ、販売ページへの導線も表示してくれます。
こういうところも、便利ですね。Fonts Ninjaは。
ちなみに Chrome拡張機能 とは
Chrome拡張機能 とは、Google chrome に 追加することで、使えるようになるアプリケーション、ツールのことです。
日本国内だけではなく、海外でも大量に開発されています。
そもそも、母体が、Google chromeなので、多くの人が開発していますね。
インストールも簡単で、Chromeに機能を追加するプログラムファイルなので、さくさく設定ができます。
インストールしすぎると、chromeが重くなることもありますが。。。
どのプログラムも、原則、Chromeのwebストアから無料でダウンロードできます。サードパーティのプログラム型なので、ワードプレスのプラグインなどに近いイメージですね。
ちなみにSafari機能拡張とかも、safariには存在します。
まとめ Fonts Ninja と WhatFont 比較
いかがでしたでしょうか？
情報量や業務効率を優先させるなら Fonts Ninja
WhatFontは、画面内操作が簡単になる
といった部分の違いがあります。
また、ページ内のフォント一覧も表示されるFonts Ninjaは、ページ全体のバランスを考えると、便利なんですよね。
どちらを利用するかは、皆さんの自由です！
御一考を。