GUIDE
Web サイトのフォントを調べる方法
「このサイトのフォント、何だろう」と思っても、書体名だけ分かれば真似できるわけではありません。見出しと本文でサイズが違い、行間や字間の取り方で印象は大きく変わります。開発者ツールなら 1 要素ずつ確認できますが、見出し別に整理するのは手間です。この記事では、手作業で調べる方法と、yorunoma で URL を貼るだけで書体名・サイズ・行間・字間を見出しごとに読み解く方法を、3 ステップで紹介します。
先に試したい人は → yorunoma でフォントを調べる
「フォントを調べる」で本当に知りたいこと
フォントを調べるというと、まず書体名が思い浮かびます。ただ、同じ書体でもサイズや余白の取り方で見え方は変わるので、あわせて知っておきたい用語を最初に押さえます。
- font-size — 文字の大きさ。見出しと本文で大きく違うことがほとんどです。
- line-height（行間） — 行と行の間隔。広いとゆったり、狭いと引き締まって見えます。
- letter-spacing（字間） — 文字と文字の間隔。詰めると硬い印象、空けると軽い印象になります。
- weight（太さ） — 文字の太さ。見出しは太く、本文は細め、といった使い分けがされます。
ポイントは、見出しと本文で設定が違う ことです。書体名が同じでも、見出しは大きく字間を詰め、本文は読みやすく行間を空ける——この差まで分かると、雰囲気を再現しやすくなります。
フォントを調べる 3 つの方法
サイトのフォントを調べる手段も、大きく 3 つあります。簡単に比較します。
方法 1: 開発者ツール（DevTools）で確認する
ブラウザの開発者ツールでも、フォントは確認できます。要素を選んで Computed（算出値）のパネルを開くと、その部分の font-family（書体名）や font-size、line-height などが見えます。
無料で使えるのが利点です。ただし 基本は 1 要素ずつ。見出し・小見出し・本文をそれぞれ選んで、サイズや字間を 1 つずつ控えて整理するのは手間がかかります。
方法 2: フォント判定の拡張機能を使う
ブラウザの拡張機能には、その場所に使われている書体名を判定してくれるものがあります。書体名だけ知りたいときは手早く分かります。
ただし、分かるのは書体名が中心です。見出し別のサイズや字間の整理、似た代替フォントの候補までは揃わないことが多くなります。
方法 3: yorunoma で「見出し別の設定ごと」読み解く
yorunoma は、URL を貼ると書体名だけでなく、見出しレベルごとの font-size / line-height / letter-spacing / weight を表でまとめて出します。その書体でのプレビューや、似た代替フォントの候補も一緒に確認できます。
yorunoma でフォントを調べる手順（3 ステップ）
流れは配色のときと同じ 3 ステップです。
調べたいサイトの URL を入力欄に貼って、解析をはじめます。コードの知識は要りません。
解析が終わると、使われている書体がカードで表示されます。カードには書体名と、その書体での実際のプレビュー（英文と和文）が出るので、雰囲気をその場で確かめられます。あわせて、特徴やこのサイトで効く理由も読めます。
詳細を開くと、見出しレベルごとに font-size / line-height / letter-spacing / weight を並べた表が出ます。見出しと本文の設定の違いがそのまま分かります。内容はコピーしたり、.md ファイルでダウンロードして手元に持ち出せます。
yorunoma のフォント解析で分かること
解析結果では、フォントについて次のような情報がまとまっています。実際に出力される範囲は以下のとおりです。
- 書体名 + プレビュー — その書体での英文・和文プレビュー
- 見出しレベルごとの数値表 — font-size / line-height / letter-spacing / weight
- このサイトで効く理由 — なぜその設定が機能しているか
- 似た書体 / 類似フォント代替候補 — フォント・特徴・採用ケースを並べた表
- 組み合わせ推奨本文フォント — 見出しと合わせやすい本文フォントの候補
なお、フォントの判定は AI 解析による結果 です。元サイトと完全に一致するとは限りませんが、書体名・サイズ・行間・字間・太さを見出し別に確認する手がかりとして使えます。
調べたフォントを「真似」でなく「応用」するコツ
yorunoma は、サイトを丸ごと再現するためのツールではありません。参考にしたフォントの設定を材料にして、自分の制作に応用するための道具です。
- 似た無料フォントで雰囲気を再現する — 元の書体が有料でも、代替候補の中から雰囲気の近い無料フォントを選べば近い印象を出せます。
- サイズより字間・行間を合わせる — 書体を変えても、letter-spacing と line-height の取り方を合わせると印象が近づきます。
- 設定の差だけ借りる — 「見出しは字間を詰めて太く、本文は行間を広く」といった設定の考え方だけ取り入れて、書体は自分の好みに替える方法もあります。
よくある質問（FAQ）
Q. 日本語フォントも特定できますか。 和文の書体についても解析結果に表示されます。プレビューには和文も含まれるので、雰囲気を確かめられます。判定は AI 解析による結果である点はご了承ください。
Q. font-size や行間も分かりますか。 見出しレベルごとに font-size / line-height / letter-spacing / weight を並べた表で確認できます。見出しと本文の設定の違いがそのまま見えます。
Q. 同じフォントが有料でした。代わりはありますか。 類似フォントの代替候補が、特徴と採用ケース付きで表示されます。その中から雰囲気の近いものを選べます。
Q. 開発者ツールと何が違いますか。 開発者ツールは基本的に 1 要素ずつ確認する形です。yorunoma は見出し別の数値や代替候補までまとめて一度に確認できます。
Q. 無料で使えますか。 プランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
まとめ
サイトのフォントは、開発者ツールで 1 要素ずつ確認することもできますが、見出し別にサイズや字間を整理するには手間がかかります。yorunoma なら URL を貼るだけで、書体名・サイズ・行間・字間・太さを見出しごとに読み解き、似た代替フォントの候補まで確認できます。
あわせて読みたい → Web サイト / LP の配色を調べる・抽出する方法
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。