サイトで使われているフォントと文字色を調べる方法|Fontface Ninjaなら画像内の文字も特定可能!

[TheChamp-Sharing]

ブログやWEBサイトを見ていると「このフォントかっこいいな」とか「何のフォントを使っているのかな」と疑問に思うことってありますよね。

対象となるページを右クリックして「検証」をすればページソースを見ることができ、使用しているフォントを特定することができます。

サイト内のフォントを検証から調べている画面

しかし、

  • ちょっとだけ手間がかかる
  • 画像内に使われている文字のフォントがわからない

という問題点があるのも事実。そこでもっとお手軽で便利なツールがないかと探していた時に出会ったのが、Chromeの拡張機能である「Fontface Ninja」というツールです。

このツールを使えば、サイト内の気になる個所にカーソルを合わせるだけで使用しているフォントを特定することができます。

拡張機能「Fontface Ninja」をインストールしよう!

まずChromeウェブストアを開き「Fontface Ninja」を検索します。

Facefont Ninja

注意

Chrome以外のブラウザでは拡張機能を使えないため、Safariなど他のブラウザを使っている場合はChromeを使うようにしましょう。

「Chromeに追加」をクリックすると確認のポップアップが出るので「拡張機能を追加」をクリックします。

拡張機能を追加

次のように表示されたらFontface NinjaのChromeへの追加は完了です。

Fontface Ninja

続いてはFontface Ninjaを使って気になるサイトのフォントを実際に調べていきましょう。

「Fontface Ninja」を使って気になるサイトのフォントを調べよう!

使い方はとても簡単です。(しかもあっという間…!)

サイト内の文字フォントを調べる方法と、画像内の文字フォントを調べる方法の2パターンを紹介いたします。

サイト内の文字フォントを調べる方法

まず使用フォントを確認したいサイトを開いたら、Chromeのツールバーから拡張機能をチェックします。。Chrome拡張機能の追加画面でも表示された黒い忍者が跳んでいるアイコンをクリックしましょう。

Fontface Ninja

その次は、実際にフォントを調べたい文字にマウスカーソルを合わせます。すると、使われているフォントや文字色、文字サイズ、文字の高さと行間幅の情報が表示されます。

Fontface Ninjaでフォントと文字色を調べた画像

また画面右上には、ページ上で使われているフォントの一覧が表示されます。

Fontface Ninjaのフォント表示画面

既にダウンロード済のフォントは「Infos」と表示され、クリックするとGoogleの検索結果画面に飛びます。持っていないフォントは無料でダウンロードできる場合は「Free」と、有料のフォントの場合は「Buy」と表示されますが、クリックするとそれぞれダウンロードページ、販売ページに飛びます。

Sunday Monday

必要な場合はダウンロード(あるいは購入)しましょう。

サイト内の画像に使われてる文字フォントを調べる方法

画像内のフォントを調べたい場合は、まず先ほどの流れと同様に拡張機能よりFontface Ninjaを選択します。

フォントを調べたい画像の上にマウスカーソルを合わせると、このように薄緑色のアイコンが表示されます。

Fontface Ninjaで画像内フォントを調べる画面

そのまま画像をクリックすると、10数秒の解析時間がスタートします。「WhatTheFont」と連携して画像を解析してくれます。

FontfaceNinjaで画像をクリックした後の画像

解析が終了後、画像内の文字の部分にマウスカーソルを合わせると、使用しているフォントが表示されます。(文字色やフォントサイズは表示されません)

Fontface Ninjaで画像内のフォントを調べた画像

点線で囲まれた部分は画像の中で使われている文字ですが、このようにズバッとフォントを示してくれます。企業の公式サイトやアーティストのホームページを参考にしたい時に非常に便利です。

Fontface Ninja使用時の画面

また画面右上には先ほど同様に画像内で使われているフォントが一覧で表示されます。ダウンロードや購入が必要な時はこちらからリンクをたどると便利ですね!

FontFace Ninjaを使えば、他のサイトで使われているフォントがすぐに判明します。

フォントの使い方次第でサイトのイメージも大きく変わるので、自分のブログを「憧れのあのサイト」のように洗練されたものにするためにも、ぜひ参考にしてみてください。それでは!