ホームページや雑誌、ポスターで見かけたフォントを知る方法をご紹介

このフォントでクリエイティブを作りたい。でも、フォント名がわからなくて似たもので妥協してしまった経験はないでしょうか？
そんなときに便利なフォントを調べられるツールを紹介いたします。

これらのツールを活用すれば、ホームページや広告バナー、画像といったウェブ上で出会ったフォントデータからの特定だけでなく、チラシやポスター、書籍で利用されているフォントも検索することができます。

気に入っているけど名前のわからないフォントがあるのなら、ぜひ活用して自分のクリエイティブにも活用していきましょう！

そもそもフォントって何？

コンピューターで使う文字のデザインのこと。活字の時代には、同じ書体で同じサイズの活字セットを指す言葉であったが、電算写植やDTPではひとつのフォントで拡大や縮小、変形ができるため、太字や斜体などのスタイルを含めてフォントと呼ぶようになった。明朝体、ゴシック体、毛筆体、楷書体、ポップ体など、さまざまな種類がある。

引用元：コトバンク

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

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

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

セリフ（ローマン体）

セリフは、文字の端に小さいな飾りを意味する「セリフ」があるもので、ローマン体といいます。上の画像でもわかる通り、文字の端に、日本語の書道の「はね」や「留め」のような飾りがあります。

ローマン体は、大きく次の4つに分けられます。「ヴェネチアン・ローマン」
「オールド・ローマン」「トランジショナル・ローマン」「モダン・ローマン」。

セリフがあるローマン体の場合、ソフトなイメージ・伝統的・保守的なイメージがあるかもしれません。新聞・経済誌・科学誌など、お堅いメディアの本文では、ローマン体を使用することが一般的です。

Sans serif（サンセリフ）

サンセリフは、文字の端に小さいな飾りの「セリフ」がないフォントを指します。上の画像のサンセリフフォントでは、文字の端に、日本語の書道の「はね」や「留め」のような飾りがありません。

サンセリフはセリフがないという特徴のほかにも、線の太さが一定で同じ太さで作られているなどの特徴があります。このように線が同じ太さでセリフがないことから、直線的で力強いため、見出しやタイトルで使われることが多いです。ウェブ上やスクリーン上でも文字がぼやけず読みやすい、視認性に優れるというメリットがあります。そのためウェブ上の長文表現ではサンセリフ体や和文の場合はゴシック体が用いられることが多いです。また、視覚を重視するファッション誌などでは、本文でもサンセリフを使用することが多いようです。

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

ホームページ上のフォントを調べるツール

ホームページやWebサービスで用いられているフォント名は、ソースコードをチェックすることでわかりますが、フォントの記述がされているCSS内を確認する必要があり、プログラミングの知識がなければ調べることが難しい場と思います。そこで、詳しい知識が無くても簡単に調べることができるツールをご紹介いたします。

WhatFont

Chromeウェブストア

「WhatFont」は、web上のフォントをワンクリックで簡単に調べることができるGoogleChromeの拡張機能です。ホームページにマウスを重ねると、フォントの名称が表示されるというシンプルな機能です。

Chromeの上部に表示されるアイコンをクリックして、「Exit WhatFont」のボタンが出てきたら機能している状態になります。マウスをホームページの文字にかざすと上記のようにフォントが表示され、自分の気になったホームページでどういったフォントが利用されているのが素早くチェックすることができます。

Chromeデベロッパーツール

Chromeデベロッパーツールとは、Google Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成やデバイスごとの表示、表示スピード、通信状況などを確認することができます。また、テスト的に自分が見ている画面上だけで記述を変更してサイトに修正を加えることも可能です。

ブラウザのみで手軽に利用でき、プロのエンジニアもWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。

フォントの確認をするには、まず「fn」+「F12」、もしくは右クリック「検証」でデベロッパーツールを起動させます。

すると画面右にソースコードが記載された画面が表示されます。

表示された上部の一番左にある矢印マークをクリックし、アイコンが青色になったら調べたいフォントの上にマウスを持っていくとフォントのサイズとフォント名が表示されます。

フォントの形状から特定するツール

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

Identifont

「Identifont」は、フォントの特徴を選んでいくだけで、お目当てのフォントを探せるサイトで、形状や名称などからフォントを検索することができます。

形状での検索の場合、セリフがあるかないか、文字のベースラインより下に文字が突き出ているか、$はどのように表記されるかといった質問に答えていくだけでフォントが特定できます。
以前は日本語版のIdentifontが存在していましたが、閉じてしまったので現在は欧文フォントしか検索できません。

「Identifont」では５つの機能が提供されています。Google翻訳のままの直訳ですが、「外観別フォント」「名前によるフォント」「類似性によるフォント」「画像によるフォント」「デザイナー/出版社によるフォント」という機能があり、なかでも「デザイナー/出版社によるフォント」では、AppleやMicrosoft、Googleなど主要なWebサービスで利用できるフォントが一覧で確認できます。自分の使っているデバイスやサービスでどういったフォントが使用できるのかを確認することができるので、デザインの確認をする時の参考にできます。

Font Map

「Font Map」は、グローバルに展開するデザインコンサルティング会社IDEOが機械学習を用いて開発したフォント検索ツールです。750以上のフォントがマッピングされており、地図のような画面上に、字形の類似しているフォントが分類されているので、基準となるフォントに類似しているフォントの検索を行うことができ、テイストの近いフォントを見比べながら選ぶことができます。