WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： デザイン >フォント

かっこいいフォントやおしゃれなフォントを見つけた時にいざ制作物に取り入れてみよう！と思っても「このフォントって一体何てフォントなんだろう？」と、悩んでしまうことってありませんか？
同じフォントを使いたい場合や、類似フォントを探したいといったときに参考になるサイトや機能をご紹介したいと思います。

画像からフォントを探したい時

まず、画像内に入っているフォントを調べたい時に検索できるサイトからの紹介です。

Adobeフォント

Adobe Fonts

Adobeフォントでは、「フォント名」「デザインー」「フォントメーカー」「キーワード」で検索するの他に「画像検索」が備わっています。
画像検索をするときは、検索ボックスのエリア内にあるカメラアイコンをクリックするか、調べたいフォントが含まれている画像をアップロードしましょう。

アップロードが完了すると「ビジュアルサーチ」という画面に切り替わります。調べたいフォントを囲み（注意点として日本語は非対応とされているので、ローマ字で試してみてくださいね）、次のステップをクリックして進めていくと・・・

最後に類似のフォントを探して提案してくれます！画像をアップロードするだけで、近いものを表示して提案してくれるのは手間が掛からず便利ですね。

What The Font

こちらも画像検索機能が備わっているフォント検索サービスです。
What The Font

まずトップページにある検索ボックスから画像をアップロードをすると、調べたい画像内のフォントを囲めるようになるので、適宜調整をしましょう。

検索したい箇所を囲み終えたらIdentify fontをクリックすると、類似フォントが表示されます。

使い方としてはAdobeフォントと同じで直感的に使用することができますね。
精度の高さについては体感ではありますが、What The Fontのほうが良いように感じました！

拡張機能を使ってフォントを探したい時

拡張機能にある「WhatFont」は、見ているWebサイトから直接フォントを調べることができます。拡張機能をインストールしたらWebサイトにあるテキストに、カーソルを合わせるだけで使用されているフォントを見ることができます。
また、フォントが表示されている状態からクリックをしてみると、さらに詳細な情報も出てくれます！

「WhatFont」の拡張機能は下記から
Chrome版
Firefox版
ブラウザ上でテキストの詳細を一目でわかるようにする拡張機能は他にもあるので、自分に合ったものを入れてみてくださいね。

まとめ

よく使うフォントであれば段々見慣れてきて覚えていくようになりますが、ふとWebサイトを見ていた時に気になったものは、このようなサイトやツールを使ってみると時短になりますね。
また複数ツールを使える手段があると効率的になりますので、紹介したサイトをぜひ使ってみてください。