こんにちは！新人デザイナーの門川です！
もう少しでハロウィンですね！毎年特に何もしていませんがついワクワクしてしまいます。不思議です。

今回はGoogle chromeの拡張機能「Fonts Ninja」について書いていこうと思います。Fonts NinjaとはWebサイト上で使われているフォントをサーチするGoogle chromeの拡張機能です。フォントって星の数ほどあるので一期一会だったりするんですよね…「このフォントいいな！」「なんていうフォントなんだろう？」の先を叶えてくれるのがこのFonts Ninjaなわけです。早速使っていこうと思います！

まずはGoogleのchrome ウェブストアのFonts Ninjaにアクセスして、Fonts Ninjaをchromeに追加します。
chromeの拡張機能は便利なものがたくさんありますが、すべてが安心安全というわけではありません。開発元やユーザーレビュー、権限やプライバシーなど信頼できるツールかどうかを確認の上、追加を行ってください。

では、手始めにフィラメントのサイトで試してみます！
目当てのサイトを開いてFonts Ninjaを呼び出します。初めはメニューバーの拡張機能欄に格納されているので、開いてピンで止めておきます。するとミントグリーンのまったく忍ぶ気のない忍者がメニューバーに現れます。これがFonts Ninjaです。

早速Fonts Ninjaでこのサイトで使われているフォントをサーチしていくわけですが…ものすごく簡単で、ワンクリックで済みます。先ほどの忍者アイコンをクリックするだけで今画面上に映っているフォントのリストが出てきます。どうやらこのページでは「Segoe Ui（游ゴシック）」というフォントが使われているようですね。（こちらシステムフォントなのでMacでは違う結果になるかも知れないです）

正しく読み取れているのかデベロッパーツールでCSSコードを確認してみました。フォントファミリーの項目を確認してみると「Segoe Ui（游ゴシック）」が設定されていることがわかります。ちゃんと読み取れているようですね！

調べたところによると正しく読み取れない場合もあるようですが…フォントを楽しむ分には十分かなと思います！

また一覧だけでなく、フォント部分にカーソルを合わせるとフォント情報だけでなく値設定やカラーコードも表示してくれるようです！優秀ですね〜、他にも試し打ちやスタイル変更のサンプル生成もできるようです。

気に入ったフォントがあればブックマークして保存もできます。とても便利ですね！一部のフォント（システムフォント・バリアブルフォントなど）は保存できなかったり…ですが自分でいくつかやってみた限りは大体保存できました。また、そのフォントに似たフォントをAIがおすすめしてくれます。時間が溶けそうですね…

さて、今回使ったGoogle chromeの拡張機能「Fonts Ninja」についての感想ですが…無料でここまでできちゃうのはすごいですね！正直に言うとCSSコードを見ればフォント名がわかっちゃうのですが、ワンクリックで済みますしすごく時短になりそうです。精度は100％完璧というわけではありませんがフォントを探して知る分には十分すぎると思いました！