画像からフォントを調べる！雑誌やホームページのフォントを検索して特定する方法

「このフォントが使いたいけど、フォントの名前がわからなくて使えない…」と利用されているフォントがわからずに似たようなフォントで代用してしまったことはありませんか？この記事では、フォントを調査・検索できるツールを紹介します。

これらのツールを利用すれば、ホームページや広告に使われている文字のフォントを、形状の名前や画像からの検索が可能になります。ぜひ気になる広告やフォントがあったらフォントを調べて、自分のデザインの参考にしてみましょう。

目次

1. フォントの形状を見分ける方法
2. ホームページに利用されているフォントを検索するツール
3. 形状からフォントを検索するツール
4. 画像からフォントを検索するツール
5. スマホのカメラでフォントを検索できるツール
6. フォント検索をデザイン作成に活用しよう

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

フォントの形状を見分ける方法

印刷業界やWebにおいて使われているフォントは無数にあります。FSI FontShop Internationalが発行している『FontBook』という見本帳に収録されているだけでも32,000以上もの欧文フォントが掲載されており、いかに多くのフォントが存在するのかがわかります。

では、これらのフォントは、どのように分類されているのでしょうか。フォントを見分ける際にもっとも基本となるのは形状の違いです。

例えば欧文フォントの場合、セリフと呼ばれる突起があるものがローマン体、セリフのないものが「Sans serif（サンセリフ）」と呼ばれています。

セリフの有無はフォント調査ツールで調べる際にも押さえておいた方がいいポイントなので、覚えておきましょう。また、和文の場合は明朝体やゴシック体といった文体が存在しますが、セリフのような見分けるポイントはありません。

参考：書体を選ぶ(1)書体を見分ける | 株式会社モリサワ
書体を選ぶ(2)和文書体を見分ける | 株式会社モリサワ

ホームページに利用されているフォントを検索するツール

ホームページやWebサービスで用いられているフォント名は、ソースコードをチェックすることでわかります。しかし、プログラミングの知識がなければ、ソースコードを開いてチェックすることは難しい場合もあるでしょう。そんな時には、フォント特定用の専用ツールを利用するのも一手です。

1.WhatFont

出典：WhatFont

「WhatFont」はホームページごとフォントを調べられるGoogleChromeの拡張機能です。ホームページにマウスを重ねると、フォントの名称が表示されるというシンプルな機能なので、詳しいプログラミングの知識は不要です。

Chromeの上部に表示されるアイコンをクリックして、ホームページの文字にかざすと上記のようにフォントが表示されます。自分の気になったホームページでどういったフォントが利用されているのが素早くチェックできるので、特に新人のWebデザイナーにとって重宝するでしょう。

形状からフォントを検索するツール

ホームページや雑誌などに掲載されている文字の特徴から検索するツールを紹介します。一問一答式で絞り込むことで、正確なフォントを特定できるのが特徴です。

2.Identifont [欧文フォント版]

出典：Identifont

「Identifont」は形状や名称からフォントを検索できるツール。形状での検索の場合、セリフがあるかないか、文字のベースラインより下に文字が突き出ているか、$はどのように表記されるかといった質問に答えていくだけでフォントが特定できます。

(1)形から探す…一問一答式でフォントを特定します。画面上に表示されるパネルをクリックして答えていきます。
(2)名称から探す…検索ボックスにフォント名を入力し、検索します。
(3)類似したフォントを探す…検索ボックスに入力したフォントと似たフォントを検索します。
(4)特定のアイコンや記号を含むフォントを探す…絵文字や記号のフォントを検索できます。
(5)デザイナー/パブリッシャーで探す…デザイナーまたはサービスごとに提供しているフォントを検索できます。

上記のように、「Identifont」では複数の機能が提供されています。なかでも「(5)デザイナー/パブリッシャーで探す」では、AppleやMicrosoft、Googleなど主要なWebサービスで利用できるフォントが一覧で確認できます。自分の使っているサービスでどういったフォントが使えるのかを手軽にチェックできるので、デザインの参考にもしやすいでしょう。

3.Font Map

出典：Font Map

「Font Map」は、AIを用いて、750以上のフォントをマッピングしているのが特徴的であり、基準となるフォントに類似しているフォントの検索を行えます。

例えば「Arial」と検索した場合、上記のように類似したフォントが近い距離で表示されているのがわかります。画面左には検索したフォントと類似したフォントの例が表示されるので、デザインに悩んだ際に参考にしてみてください。

参考：Font Map by Kevin Ho｜AI Experiments

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

画像からフォントを検索するツール

ネット広告や特定のサービスで用いられているフォントなどは、確認できる文字数も少なく、形による検索だけでは特定できない場合もあるでしょう。

ここからは、画像検索はテキストが含まれる画像をアップロードし、解析を加えることで一文字ずつのフォントを特定するツールを紹介します。精度が下がりますが、断片的な情報しかない場合は重宝するでしょう。

4.What Font is

出典：What Font is

「What Font is」はJPEG画像からフォントの検索が行えるツール。画像をアップロードするだけで、画像に含まれる文字を1つ1つ分解してフォントを特定します。

上記ページにて、画像をドラッグ＆ドロップ、またはURLを入力し「FIND THE FONT」をクリックすると、フォントの検索が始まります。画像が複雑な場合、画像中の文字数を絞るように表示されるので注意してください。

検索が終了すると、上記のように画像から推測されるフォントが表示されます。外部のダウンロードサイトへアクセスすれば、そのフォントを気軽にダウンロード可能です。

5.WhatTheFont

出典：WhatTheFont

「WhatTheFont 」は画像からフォントを特定できるツール。PNG、GIF、およびJPEGに対応しており、50文字までの解析が可能です。

ファイルを選択し、アップロードすると文字の解析が始まり、解析が終了すると、一文字ずつの解析結果が表示されます。表示されているアルファベットが画像のアルファベットとずれている場合は修正しましょう。

解析が終了すると、下記のように画像から推測されるフォントが表示されます。
アップロードした画像と見比べられるので、簡単に画像のフォントかどうか確認できます。

スマホのカメラでフォントを検索できるツール

スマートフォンのカメラを利用して、形状からフォントを検索できるアプリもあります。

6.Adobe Capture（アドビキャプチャー）

App Store
Google play

Adobe（アドビ）が提供しているデザインアプリです。フォントの識別機能を搭載していて、スマートフォンカメラで撮影したフォント・ロゴから似ているフォントを抽出してくれます。フォント検索の精度は完璧とまでは言えませんが、ある程度絞り込めるだけでも役に立つでしょう

【Adobe Capture

「Adobe Capture CC（アドビキャプチャー）」でフォントを検索する方法を紹介します。「Adobe Capture CC」はスマートフォンのカメラ機能を使ってフォントの検索や、画像を元にしたブラシの作成が行える加工アプリです。FacebookアカウントやGoogleアカウントがあれば無料で利用できるので気になる方は試してみましょう。

フォント検索をデザイン作成に活用しよう

ここまで紹介してきたフォント調査ツールを利用すれば、形状の名前や画像からフォントを特定できます。どれも会員登録などは不要で手軽に利用できるツールなので、自分の気になったフォントがあったら調べてみるといいでしょう。

また、セリフやサンセリフといったフォントの基本知識や、明朝体・ゴシック体といった代表的なフォントを覚えておけば、似たような形のフォントも素早く調べられるようになります。クライアントからデザインの修正を求められた時でも最適なフォントを身につけられるよう最低限の知識は身につけておきましょう。

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

日本語のフリーフォントを知ろう

すべて無料！和風な日本語のフリーフォント38選

個人・商用で無料利用できる和風の日本語フリーフォントを集めました。「和風」には繊細なものから力強いものまで、いろいろなテイストがあります。今回は、計38種類を7つのカテゴリに分けて紹介します。

ストックしておいて損はなし！ユニークな日本語フリーフォント10選

あらゆるデザインにすぐに対応できるよう、フォントのバリエーションは多ければ多いに越したことはありません。 無料フォントをストックしておけば、どのような依頼がきても対応しやすくなります。特に日本語のフォントは重宝するのではないでしょうか。 今回は、ユニークな日本語のフリーフォントを10個厳選してご紹介します。

フリーフォント

今回は、日本語フリーフォントをたっぷり88個まとめてご紹介します。探すのに一苦労しがちな日本語対応＆商用もできるフォントだけをピックアップしましたので、ぜひ目をとおしてみてください。