優れた広告やホームページは、デザインの参考にしたいところです。
ですが、利用されているフォントがわからずに、似たようなフォントで代用してしまったことはありませんか?

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

目次

  1. フォントの形状を見分ける方法
  2. 形状からフォントを検索するツール
    1. Identifont [欧文 フォント版]
    2. Identifont [和文 フォント版]
    3. Font Map
  3. 画像からフォントを検索するツール
    1. What Font is
    2. WhatTheFont!
  4. ホームページに利用されている フォントを検索するツール
    1. WhatFont
  5. まとめ:フォント検索をデザイン作成に活用しよう

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

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

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

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

https://ferret.akamaized.net/images/59af84af7f58a84e63000024/original.png?1504674990

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

参考:
[書体を選ぶ(1)書体を見分ける | 株式会社モリサワ] (http://www.morisawa.co.jp/culture/japanese-typesetting/08/)
[書体を選ぶ(2)和文書体を見分ける | 株式会社モリサワ] (http://www.morisawa.co.jp/culture/japanese-typesetting/09/)

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

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

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

https://ferret.akamaized.net/images/59af84b27f58a84e63000025/original.png?1504674992
http://www.identifont.com/

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

Identifont___Identify_fonts_by_appearance__find_fonts_by_name_のコピー.png

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

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

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

https://ferret.akamaized.net/images/59af82e07f58a84e4300002e/original.png?1504674525
http://www.identifont.jp/

「Identifont」は和文フォント向けのツールとしても提供されています。
質問に答えていくことでフォントを特定する形状別検索のほかに、丸ゴシックや角ゴシックのようなスタイルの違いでの検索も可能です。

基本的な使い方は欧文フォント向けの「Identifont」と同じで、上部のタブを切り替えることで、形や名称での検索が行えます。

3.Font Map

https://ferret.akamaized.net/images/59af84b1fafbd82d1c000030/original.png?1504674991
http://fontmap.ideo.com/

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

Font_Map_·_An_AI_Experiment_by_IDEO_のコピー.png

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

参考:
Font Map by Kevin Ho|AI Experiments

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

ネット広告や特定のサービスで用いられているフォントなどは、確認できる文字数も少なく、形による検索だけでは特定できない場合もあるでしょう。
画像検索はテキストが含まれる画像をアップロードし、解析を加えることで一文字ずつのフォントを特定するツールです。精度が下がりますが、断片的な情報しかない場合は重宝するでしょう。

4.What Font is

https://ferret.akamaized.net/images/59af82e07f58a84e63000020/original.png?1504674525
https://www.whatfontis.com/

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

What_Font_is___WhatFontis.com_のコピー.png

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

2.png

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

5.WhatTheFont!

https://ferret.akamaized.net/images/59af82e07f58a84e53000027/original.png?1504674526
http://www.myfonts.com/WhatTheFont/

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

WhatTheFont__«_MyFonts_のコピー.png

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

WhatTheFont_Character_Selection_«_MyFonts.png

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

WhatTheFont_Search_Results_«_MyFonts.png

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

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

6.WhatFont

https://ferret.akamaized.net/images/59af82e0fafbd82d1c000029/original.png?1504674525
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

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

スクリーンショット_2017-09-06_14.24.43.png

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

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

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

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

この記事を読んだ方におすすめ

保存版!和風な日本語のフリーフォント38選

保存版!和風な日本語のフリーフォント38選

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

シンプルで簡単!無料ロゴジェネレーター「Online logo maker」の使い方

シンプルで簡単!無料ロゴジェネレーター「Online logo maker」の使い方

コーポレートサイトやLP、バナーなど、様々なシーンで必要となるロゴ作成。Webデザイナーではないけれども、ちょっとしたものであれば自分で作成したいシーンも多いのではないでしょうか。そんなときに便利なのが、無料で使えるロゴジェネレーターサービスです。今回は、無料のツールを駆使してロゴを簡単に作成できる「Online logo maker」で実際にロゴを作る方法を紹介します。