ホームページで利用されているフォントがわからずに、似たようなフォントで代用してしまったことはありませんか？
この記事では、フォントを調査・検索できるツールを紹介します。
これらのツールを利用すれば、ホームページや広告に使われている文字のフォントを、形状の名前や画像からの検索が可能になります。
ぜひ気になる広告やフォントがあったらフォントを調べて、自分のデザインの参考にしてみましょう。
Contents
フォントの形状を見分ける方法
印刷業界やWebにおいて使われているフォントは無数にあります。
FSI FontShop Internationalが発行している『FontBook』という見本帳に収録されているだけでも32,000以上もの欧文フォントが掲載されており、いかに多くのフォントが存在するのかがわかります。
では、これらのフォントは、どのように分類されているのでしょうか。
フォントを見分ける際にもっとも基本となるのは形状の違いです。
例えば欧文フォントの場合、セリフと呼ばれる突起があるものがローマン体、セリフのないものが「Sans serif（サンセリフ）」と呼ばれています。
セリフの有無はフォント調査ツールで調べる際にも押さえておいた方がいいポイントなので、覚えておきましょう。
また、和文の場合は明朝体やゴシック体といった文体が存在しますが、セリフのような見分けるポイントはありません。
ホームページに利用されているフォントを検索するツール
ホームページやWebサービスで用いられているフォント名は、ソースコードをチェックすることでわかります。
しかしプログラミングの知識がなければ、ソースコードを開いてチェックすることは難しい場合もあるでしょう。
そんな時には、フォント特定用の専用ツールを利用するのも一手です。
WhatFont
出典：WhatFont
「WhatFont」はホームページごとフォントを調べられるGoogleChromeの拡張機能です。
ホームページにマウスを重ねると、フォントの名称が表示されます。
シンプルな機能なので、詳しいプログラミングの知識は不要です。
Chromeの上部に表示されるアイコンをクリックして、ホームページの文字にかざすと上記のようにフォントが表示されます。
自分の気になったホームページでどういったフォントが利用されているのが素早くチェックできるので、特に新人のWebデザイナーにとって重宝します。
形状からフォントを検索するツール
ホームページや雑誌などに掲載されている文字の特徴から検索するツールを紹介します。
一問一答式で絞り込むことで、正確なフォントを特定できるのが特徴です。
Identifont [欧文フォント版]
![Identifont [欧文フォント版]のキャプチャ](https://ferret-akamaized-net.cdn.ampproject.org/i/s/ferret.akamaized.net/images/59acf7957f58a856e500036a/original.png?1504507794)
出典：Identifont
「Identifont」は形状や名称からフォントを検索できるツールです。
形状での検索の場合、①セリフがあるかないか②文字のベースラインより下に文字が突き出ているか③$はどのように表記されるかといった質問に答えていくだけでフォントが特定できます。
1.形から探す…一問一答式でフォントを特定します。画面上に表示されるパネルをクリックして答えていきます。
2.名称から探す…検索ボックスにフォント名を入力し、検索します。
3.類似したフォントを探す…検索ボックスに入力したフォントと似たフォントを検索します。
4.特定のアイコンや記号を含むフォントを探す…絵文字や記号のフォントを検索できます。
5.デザイナー/パブリッシャーで探す…デザイナーまたはサービスごとに提供しているフォントを検索できます。
上記のように、「Identifont」では複数の機能が提供されています。
なかでも「(5)デザイナー/パブリッシャーで探す」では、AppleやMicrosoftそしてGoogleなど主要なWebサービスで利用できるフォントが一覧で確認できます。
自分の使っているサービスでどういったフォントが使えるのかを手軽にチェックできるので、デザインの参考にもしやすいでしょう。
Identifont[和文フォント版]
出典：Identifont
「Identifont」は和文フォント向けのツールとしても提供されています。
質問に答えていくことでフォントを特定する形状別検索のほかに、丸ゴシックや角ゴシックのようなスタイルの違いでの検索も可能です。
基本的な使い方は欧文フォント向けの「Identifont」と同じで、上部のタブを切り替えることで、形や名称での検索が行えます。
Font Map
出典：Font Map
「Font Map」は、AIを用いて750以上のフォントをマッピングしているのが特徴的です。
基準となるフォントに類似しているフォントの検索ができます。
例えば「Arial」と検索した場合、上記のように類似したフォントが近い距離で表示されます。
画面左には検索したフォントと類似したフォントの例が表示されるので、デザインに悩んだ際に参考にしてみてください。
参考：
Font Map by Kevin Ho | Experiments with Google
Font selection is one of the most common visual choices designers make-and most fall back on old favorites, or search for a font within categories. By leveraging machine learning and convolutional neural networks to spot visual patterns, Font Map helps designers understand and see relationships across more than 750 web fonts.
画像からフォントを検索するツール
ネット広告や特定のサービスで用いられているフォントなどは、確認できる文字数も少なく形による検索だけでは特定できない場合もあります。
ここからは、画像検索はテキストが含まれる画像をアップロードし解析を加えることで一文字ずつのフォントを特定するツールを紹介します。
精度が下がりますが、断片的な情報しかない場合は重宝するでしょう。
What Font is
出典：What Font is
「What Font is」はJPEG画像からフォントの検索が行えるツールです。
画像をアップロードするだけで、画像に含まれる文字を1つ1つ分解してフォントを特定します。
上記ページにて、画像をドラッグ＆ドロップまたはURLを入力し「FIND THE FONT」をクリックすると、フォントの検索が始まります。
画像が複雑な場合、画像中の文字数を絞るように表示されるので注意してください。
検索が終了すると、上記のように画像から推測されるフォントが表示されます。
外部のダウンロードサイトへアクセスすれば、そのフォントをダウンロード可能です。
WhatTheFont
出典：WhatTheFont
「WhatTheFont 」は画像からフォントを特定できるツールです。
PNGやGIF、およびJPEGに対応しており50文字までの解析が可能です。
ファイルを選択してアップロードすると、文字の解析が始まります。
解析が終了すると、一文字ずつの解析結果が表示されます。
表示されているアルファベットが画像のアルファベットとずれている場合は修正しましょう。
解析が終了すると、下記のように画像から推測されるフォントが表示されます。
アップロードした画像と見比べられるので、簡単に画像のフォントかどうか確認できます。
スマホのカメラでフォントを検索できるツール
スマートフォンのカメラを利用して、形状からフォントを検索できるアプリもあります。
Adobe Capture（アドビキャプチャー）
Adobe（アドビ）が提供しているデザインアプリです。
フォントの識別機能を搭載していて、スマートフォンカメラで撮影したフォント・ロゴから似ているフォントを抽出してくれます。
フォント検索の精度は完璧とまでは言えませんが、ある程度絞り込めるだけでも役に立つでしょう。
好みのフォントを検索して特定する方法のまとめ
今回の記事では7つのフォント検索ツールを紹介しました。
フォント調査ツールを利用すれば、形状の名前や画像からフォントを特定できます。
どれも会員登録などは不要で手軽に利用できるツールなので、自分の気になったフォントがあったら調べてみるといいでしょう。
また、セリフやサンセリフといったフォントの基本知識や、明朝体・ゴシック体といった代表的なフォントを覚えておけば、似たような形のフォントも素早く調べられるようになります。