> 記事 > ウェブ制作 マメ知識 雑談 > 画像からフォントを検索する4つの方法まとめ

画像からフォントを検索する4つの方法まとめ

2015.06.11.(Thu)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

パースは秋です。先日3連休を利用してマーガレットリバーにキャンプに行ってきました。寒い時期だからそれほどキャンプ客も居ないかと思ったのですが、意外とにぎわっていました。ここパースもこの時期は朝晩冷え込みます。もちろん日本ほどではないのですが、それでも5度以下になることもあります。それでも日中は20度くらいとかなり過ごしやすく、40度近くまで気温の上がる夏に比べればキャンプ向きのシーズンなのかもしれません。

Margaret River の Gnarabup Beach

Margaret River の Gnarabup Beach



Sponsored Link

フォントの話


今日はフォント検索サービスについて紹介します。フォントというのは、パソコンで表示される書体データのことを指します。ゴシック体や、明朝体といった、形の違いや、サイズ。ボールド(太字)、イタリック(斜字体)といった、その書体を使用した変化があったりします。

Web上のフォントを調べるには?


Firefoxであれば、フォントを調べたい部分を右クリックし「要素を調査」します。
弊社ブログの見出し文章のフォントが何であるか調べてみます。

Inspect Element

「我が家」と書いてあるあたりを右クリックし、「要素を調査」を選択します。英語版では「Inspect Element」です



 

画面の下側に2つのウィンドウが現れるので、その右側のウインドウの「フォント」タブを選択します。

右側のウインドウから「フォント」タブを選択します。

右側のウインドウにフォント情報が表示されます。



すると、この部分はMeiryoというフォントが使われて表示されているということが分かります。

確認のため、ワードファイルに同じ文章を入れて、フォントをMeiryo(メイリオ)にしてみたものを上に並べてみました。見比べてみると同じフォントであることが分かると思います。特に「な」の形、特徴がありますね。このように、ウェブ上に書かれている文章であれば、どのようなフォントが使われているのか簡単に調べることが出来ます。

上がワードファイルで作成したもの、下がWebサイトです。

上がワードファイルで作成したもの、下がWebサイトです。





画像になっている場合


ウェブ上では、テキストをフォントで装飾して表示している場合と、あらかじめ絵などと組み合わせて画像になっている場合があります。画像になっている場合には、先ほどのように「要素を調査」しても画像のサイズなどしか知ることが出来ません。

こういうときにどのフォントを使われているか、調べる方法を紹介したいと思います。

WhatTheFont


まず最初に紹介するのが、WhatTheFontというサービスです。こちらは無料で使えるサービスで、ウェブ上でフォント情報を調べることが出来ます。調べたいフォントが入っている画像ファイル(出来ればピンポイントで切り抜いたもの)を使用します。

今回は、仕事で大変お世話になっているサービス、chatworkのロゴを調べてみました。

chatworkのロゴの文字部分

chatworkのロゴの文字部分



調べるためにはこれをファイルとして保存します。

http://www.myfonts.com/WhatTheFont/ を訪れ、参照ボタンを押して、先ほど保存したファイルを選択し、continue ボタンを押します。

ファイルを指定し、continueボタンを押します。

ファイルを指定し、continueボタンを押します。



そうすると、画像に含まれている文字情報を自動的に抽出し、それぞれの文字に区切ってくれます。右上のaだけはoと誤認されているので、下のエディットボックスをaに直します。

この画像から文字情報を抽出するところがすごいですね。

この画像から文字情報を抽出するところがすごいですね。



さらにcontinueボタンを押します。

WhatTheFontの結果

WhatTheFontの結果



結果はこのような感じになりました。2番目の Proxima Nova A Bold はかなり近い感じですが、微妙に違いますね。tの横棒が斜めに切れている部分は隣のwとあわせるようなデザインが入っている可能性が高いですね。

ちなみにこちらに出てくるフォントを気に入った場合、その場で購入することも出来ます。

サイトをあちこち見てみたのですが、何種類くらいのフォントから検索しているのかは
残念ながら分かりませんでした。

WhatFontis.com


次に紹介するのは、WhatFontis.comです。同じくウェブでフォントが検索できるサービスで、名前も似ていますね。同じファイルを利用してフォントの調査をしてみます。

Browseボタンでファイルを指定し、continueボタンを押します。

Browseボタンでファイルを指定し、continueボタンを押します。



これが次の画面です。こちらのサイトでは文字は自分で入力する必要があります。

文字データ抽出結果

文字データ抽出結果



こちらではこのような結果になりました。

WhatFontis.comの結果

WhatFontis.comの結果



こちらの結果を見ると Zona Pro otf (700) という5番目に表示されているフォントがかなり近く感じました。こちらも必要があれば商用フォントをその場で買うことができます。
*フォント名の表示はユーザー登録をする必要があります。

フォント自動判定 ver3.2


次に紹介するのは フォント自動判定 です。これはパソコンにインストールするためのソフトです。zipファイルをダウンロードし、解凍するとすぐに実行できます。

フォント自動判定初期画面

フォント自動判定初期画面



これ以上シンプルに出来ないほどのシンプルな画面です。先ほどの画像を指定して、「次」を押します。

フォント自動判定オプションの指定

フォント自動判定オプションの指定



オプションを指定します。特に変更する必要はないかと思います。次を押すと、画像が読み込まれ、文字を区切る画面が出てきます。

文字を区切ります。ちょっと面倒。

フォント自動判定の文字を区切る画面



マウスで、文字を区切ります。ウェブでは自動でカッティングされてきたのでちょっと面倒ですけど。
さらに、それぞれの文字が何であるかをカンマ区切りで記入もします。
次へを押すと、フォントの検索が始まります。
このソフトでは自分のパソコン内にインストールされているフォントから検索が出来るようになっています。

フォント自動判定 検索中画面

フォント自動判定 検索中画面



フォント自動判定 検索結果

フォント自動判定 検索結果



結果はこのような画面になります。文字ごとに画像とフォントを同じサイズにしたものを並べて表示し、どのフォントが近いかを確認することが出来ます。実際に使ってみると、全ての文字が並んでいるわけではないので、一部は良くても一部がまったくダメな場合などの判断が難しかったり、自分のPCにインストールされているフォントのみしか検索対象に出来ないので、変わったフォントなどを調べるのはちょっと難しいかなと思いました。
ただ、日本語フォントも対応しているところは強いです。

MM Font Reports


最後に紹介するのはMM Font Reportsです。こちらは、いままで紹介したものとはちょっと違いますが、文字列を入力すると、インストール済みのフォント全てでその文字列を表示してくれるというものです。横に画像をおいてつらつらと眺めてみると、インストールされているフォントであれば見つけられるかもしれません。私は結構使っています。

MM Font Reports

MM Font Reports



まとめ


今回は画像になっているフォントを調べる4種類の方法を紹介しました。ウェブのサービスについては残念ながらローマ字にしか対応していないので、日本語のフォントを調べたい場合には、フォント自動判定か、MM Font Reportsを使うしか方法はないようです。
他にまた便利なサービスが出てきたらまた紹介したいと思います。


Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
  • facebook
  • twitter