画像からフォントを調べる方法|無料ツールと精度を上げるコツ

画像からフォントを調べる方法|無料ツールと精度を上げるコツ
塾長 尾上

こんにちは!ぬるま湯デザイン塾の尾上です。

メモりす

こんにちは!Webデザイナーのメモりすです。

気になるWebサイトやチラシを見て、「このフォント、何ていう名前だろう」と気になったことはありませんか?参考サイトを分析していても、フォント名が分からないと

「自分にはまだ知識が足りないのかも」
「聞くのも恥ずかしい」

と感じてしまう方は少なくありません。

でも、フォントについては正しい調べ方の手順があり、知識や経験がなくても調べられます。

この記事では「フォント 検索 画像」「フォント検索 画像から」で調べている方に向けて、画像からフォントを特定する具体的な方法を解説しますので、順番に読み進めてください。

目次

画像からフォントを調べる方法は大きく2つ

画像からフォントを特定する方法は、大きく分けて2つあります。

  • 無料のオンラインフォント検索ツールを使う方法
  • Photoshopのマッチフォント機能を使う方法

どちらを選ぶかは、次の2つを基準に考えるとシンプルです。

Photoshopの有無と調べたい文字が日本語か英語かで、マッチフォントとオンラインツールを使い分ける基準

1、Photoshopの有無
Photoshopを持っている→マッチフォント
Photoshopを持っていない→オンラインツール

2、日本語か英語か
調べたいフォントが和文(日本語)→マッチフォント
調べたいフォントが欧文(英語)→オンラインツール

次の章から、それぞれの具体的な手順を見ていきましょう。

無料オンラインツールで画像からフォントを調べる手順

Photoshopを持っていない方でも、無料のオンラインツールを使えば画像からフォントを調べられます。代表的なツールのひとつがWhatFontIsです。

フォントを知りたい画像をアップロードすると、近いフォントの候補が一覧で表示される仕組みです

whatfontis
https://www.whatfontis.com
WhatFontIsとは
  • 1日5回まで検索が可能
  • 無料プランには広告が表示される
  • PROプランでは検索結果が最大100件まで表示され、広告は非表示

注意したいのは日本語フォントへの対応です。WhatFontIsの公式サイトには日本語フォントへの対応可否が明記されていません

看板やチラシなど日本語の画像を調べる場合は、期待どおりの結果が出ないことがある前提で使うのがおすすめです。日本語フォントを重点的に調べたい方は、次に紹介するPhotoshopのマッチフォント機能のほうが向いています。

塾長 尾上

日をまたいで使うか、次に紹介するPhotoshopと使い分けるといいよ。

Photoshopの「マッチフォント」機能で調べる手順

メモりす

フォント調べでかかっていた時間を短縮できるのか!

Photoshopを使っている方には、標準機能の「マッチフォント」がおすすめです。手順は次のとおりです。

マッチフォント
マッチフォントの使用手順
  1. Photoshopでフォントを調べたい画像を開く
  2. メニューの「書式」から「マッチフォント」を選ぶ
  3. 「欧文」か「和文(日本語)」かを指定する
  4. 検索したい文字部分を選択する
  5. 自動で検索が始まり、候補のフォント一覧が表示される

マッチフォントの大きな特徴は、日本語フォントにも対応している点です。欧文と和文をあらかじめ指定できるため、オンラインツールでは判定しづらい日本語の画像も調べやすくなります

ただし限界もあります。マッチフォントが検索できるのは、パソコンにインストール済みのフォントとAdobe Fontsに収録されているフォントの範囲だけです。

Photoshopのマッチフォントが検索できる範囲は、インストール済みフォントとAdobe Fontsであることを示す構造

それ以外の(未インストールで、Adobe Fontsにも収録されていない)フォントは、候補として表示されません。また、似たフォントが手元にあっても、必ず正しく検索できるとは限らないともされています(自動検索のため精度は保証されていません)。

Photoshopの料金プランは変動するため、最新のプランはAdobe公式サイトでご確認ください。

フォント検索の精度を上げるコツ

塾長 尾上

判断基準を決めておくと、毎回迷わず作業できるよ。

1、文字部分だけをトリミングする
背景やイラストが写り込んでいると、文字の輪郭を正しく認識しにくくなります

画像からフォントを検索するときに精度を上げる、トリミング・ノイズ除去・高解像度・複数結果比較の4項目

2、ノイズを減らす
影・装飾・グラデーションなど文字以外の要素はできるだけ除いた画像を用意します

3、解像度の高い画像を使う
文字がぼやけていると誤認識の原因になります

4、1つのツールの結果を鵜呑みにしない
オンラインツールとPhotoshopの両方で候補を出し、共通して挙がるフォント名を目視で見比べて絞り込みます

こうした準備をすると結果を左右することがあります。同じ画像でも、トリミングやノイズ処理をする前と後とで、検索結果に表示される候補が変わることも珍しくありません

見つけたフォントを使うときの注意点(商用利用・ライセンス)

メモりす

名前が分かったら、もうそのまま使っていいんだよね!

塾長 尾上

メモりす、ストップ。フォント名が分かったからといって、そのまま案件やポートフォリオで使ってよいとは限らないんだ。

フォントには1つずつライセンス(利用規約)があり、無料で使えるフリーフォントもあれば、商用利用に別途契約が必要な有料フォントもあります。Web用途で使えるか、埋め込みが許可されているかといった条件もフォントごとに異なります。

見つけたフォントを実際に使う前には、必ずそのフォントの配布元や販売元が公開している利用規約を確認してください。特にWeb制作では、

見つけたフォントを使う前に、利用規約・商用利用・Web埋め込み・ライセンス購入の要否を確認するチェックリスト
  • サイトに埋め込んで表示する用途が許可されているか
  • 商用サイトでの使用が可能かどうか

を個別に確認する必要があります。

フォントによっては個人利用のみ無料で、商用利用には別途ライセンス購入が必要なケースもあります。「無料で配布されている=どんな用途にも自由に使える」とは限らない点を押さえておきましょう。

まとめ

画像からフォントを調べる方法は、無料オンラインツールとPhotoshopのマッチフォント機能の2つが軸になります。持っているツールと、調べたいフォントが日本語か欧文かで使い分けましょう。

フォントの調べ方は、Web制作で身につけたい基礎スキルのひとつにすぎません。学ぶ順番に迷っている方は、以下の関連記事で全体の流れを確認してみてください。

独学で進めるかどうかで迷っている方は、こちらの記事が判断の参考になります。

Webデザインの学び方に関する情報を受け取りたい方は、ぬるま湯デザイン塾のLINEにご登録ください。5日間チャレンジ(無料体験)も実施中です。

5日間チャレンジ

5日間チャレンジの内容や案内時期などの詳細については、LINEでご案内します。

\ LINEのお友達登録はこちらから /

Webデザイン5日間チャレンジ

参考情報源

塾長 尾上

次のブログでもまたお会いしましょう!

メモりす

バイバイ!またね!

この記事を書いた人

1986年生まれ。茨城出身。7歳の時に父親の会社が倒産し、借金地獄のホームレスとなる。
その後、祖父母に引き取られ12歳の時にWindowsパソコンをイチから組み立て、WEBサイト制作を独学で始める。
16歳から印刷業界を経験し、その後WEB業界に転身。WEBマーケティングを実践で学び、反応率にフォーカスした売上重視のデザインを得意とする。
2020年にデザイン塾を創業し、世界23ヵ国、延べ64,000人にデザインセミナーや講座を開催。
2022年には熊本県熊本市と立地協定を締結し、地方創成プロジェクト開始。
2023年からは法務省の委託事業として、全国少年院の職業訓練として民間初となるWEB制作講座を開始し、子供たちの社会復帰支援にも尽力している。

目次