BLOG
Web サイトのフォントを調べて読み解く — 使われている書体を特定し、なぜその印象になるかを分析する
「このサイトの文字、素敵だな。何ていう書体だろう？」——参考にしたいサイトを見て、そう思ったことはないでしょうか。でも、いざ調べようとすると、使われているフォントの名前も、なぜその印象になるのかも、分からない。文字はサイトの見た目を大きく左右するのに、フォントは「なんとなく」で見過ごされがちな要素です。
世の中には「おすすめ Web フォント◯選」「フォントの選び方・実装方法」といった、これから 選ぶ・実装する 人向けの記事があふれています。役に立ちますが、この記事の切り口は違います。お伝えしたいのは、フォントを選ぶことではなく——あるサイトで使われているフォントを「特定」し、「なぜその書体が選ばれ、どんな印象を作っているのか」を読み解く 力です。参考サイトのフォントを知り、その効果を理解できれば、自分の制作に活かせます。
この記事は、フォントの「読み解き方」を深く解説します。書体の系統と印象、太さやサイズが印象をどう変えるか、可読性の考え方、そして「サイトで使われているフォントの調べ方」まで。この記事は長めです。フォントを「なんとなく」から「読み解ける」へ、じっくり変えていきましょう。
フォントは、サイトの印象を大きく左右する
まず押さえたいのは、フォントが、サイトの印象に与える影響の大きさ です。サイトを構成する要素のうち、文字が占める面積は非常に大きく、しかも最初に目に入ります。同じレイアウト・同じ配色でも、書体を変えるだけで、サイトの印象はがらりと変わります。上品にも、力強くも、親しみやすくもなる。フォントは、サイトの「声のトーン」のようなもので、内容を語る"話し方"を決めているのです。
だからこそ、フォントを読み解く力は、デザインを見る目を一段引き上げます。「なんとなくおしゃれ」を、「細い明朝を使っているから、繊細で上品に見える」と言語化できると、その効果を自分のサイトに持ち込めます。この記事は、フォントを「選ぶ」前に、まず「読み解く」ことを扱います。良い書体使いを読み解けるようになることが、良い書体を選べるようになる近道だからです。
なお、フォントが作る印象は 傾向 であって、絶対ではありません。同じ書体でも、配色やレイアウト、文脈によって印象は変わります。この記事で読み解くのは「その書体が、どんな印象を作りやすいか」です。また、ここで扱うのは 見た目のデザイン の話で、CVR やアクセス数を見る アクセス解析とは別の領域 です。yorunoma も、「このフォントで売れる」といった成果の話ではなく、「なぜその印象に見えるのか」を読み解くことに絞ります。
フォントを読み解く、4 つの視点
ここが、この記事の心臓部です。サイトのフォントは、次の 4 つの視点で読み解けます。
1. 書体の系統と印象 — 明朝・ゴシック・丸ゴシック
まず、書体を大きな 系統 で捉えます。系統ごとに、生まれる印象の傾向があります。明朝体（欧文ならセリフ体） は、線に強弱があり、上品・繊細・信頼・格調という印象を生みます。金融や高級ブランド、和の世界観でよく使われます。ゴシック体（欧文ならサンセリフ体） は、線の太さが均一で、親しみ・視認性・モダンという印象。IT やスタートアップ、読ませたい本文で定番です。丸ゴシック体 は、角が丸く、柔らかい・親近感という印象で、子ども向けや親しみやすいサービスに合います。まず「このサイトの書体は、どの系統か」を見分けるだけで、印象の"なぜ"が半分見えてきます。系統ごとの印象は 日本語フォントで、サイトの印象はどう変わるか でさらに深く掘り下げています。
2. 太さ・サイズ・ジャンプ率で、印象は激変する
同じ系統・同じ書体でも、太さ（ウェイト）・サイズ・ジャンプ率 で、印象はまるで変わります。繊細な明朝も、太いウェイトにすれば力強くなり、ゴシックも細くすれば上品になります。とくに ジャンプ率（見出しと本文の大きさの差）は重要で、ジャンプ率が大きいと元気・インパクト、小さいと落ち着き・上品、という印象になります。だから「書体名」だけでなく、「どの太さで、どのサイズで、どれくらいのジャンプ率で使っているか」まで見ると、印象の正体が正確に掴めます。書体は"何を使うか"だけでなく"どう使うか"で決まるのです。
3. 可読性と個性のバランス
フォントには、読みやすさ（可読性） と 個性 という、時に相反する二つの軸があります。個性的な書体は印象に残りますが、長文には読みにくいことも。良いサイトは、この二つを使い分けています。見出しには個性のある書体で印象づけ、本文には可読性の高い書体を、十分なサイズ・行間で使う——という役割分担が定番です。本文が読みにくいと、それだけでサイトの信頼が下がるので、可読性は軽視できません。フォントの可読性が見づらさにつながる仕組みは ホームページが見づらい原因と、その見つけ方 でも扱っています。
4. フォント数を絞る意味
良いサイトは、たいてい 書体を 2 種類程度に絞っています。フォントを増やすと、統一感が失われ、まとまりが崩れるからです。見出し用に 1 つ、本文用に 1 つ——この最小構成で、多くの上質なサイトは成り立っています。「このサイトは何種類のフォントを使っているか」を数えるだけでも、まとまりの良し悪しが読み解けます。
サイトのフォントの、調べ方
「この書体、何だろう？」を実際に調べるには、ブラウザの 検証ツール（デベロッパーツール） が使えます。文字を右クリックして「検証」を開き、その要素の CSS や「Computed（算出値）」の中の Rendered Fonts（実際に描画されている書体）を見ると、使われているフォント名が分かります。ただし、これは要素を一つずつ選んで確認する必要があり、見出し・本文・ボタンと調べていくと、それなりに手間がかかります。しかも、フォント名は分かっても、「その書体がどんな印象を作っているか」までは、自分で言語化しなければなりません。この「手間」と「言語化」を助けるのが、後で紹介する自動での読み解きです。使われている書体を特定する専用の方法は Web サイトのフォントを調べる方法 にまとめています。
実際のサイトでフォントを読み解く
4 つの視点が分かると、気になるサイトのフォントを、自分で読み解けるようになります。実際にサイトを開いて、次の順で見てみてください。
- 書体の系統は何か — 明朝／ゴシック／丸ゴシックのどれか。それだけで印象の傾向が掴めます。
- 太さ・ジャンプ率はどうか — 見出しは太く大きいか、本文とのメリハリはどうか。元気寄りか、落ち着き寄りか。
- 本文は読みやすいか — 十分なサイズ・行間で、ストレスなく読めるか。
- 何種類のフォントを使っているか — 絞られているか、散らかっていないか。
- サイトの印象と合っているか — 書体が、そのサイトの目的や世界観に合っているか。
この視点で 1 つのサイトを読み解くだけでも、「なんとなく良い文字」が「なぜ良いか」に変わります。ただ、検証ツールで一つずつフォントを調べ、さらに印象を言語化するのは、正直、手間がかかります。そこで、次の選択肢が出てきます。
yorunoma でフォントを調べると
ここからは、実際に yorunoma でフォントを調べるとどう読み解けるのかを、実データ で見ていきます。
URL を入れると、使われているフォント（書体）が特定され、その印象つきで読み解かれます。「見出しは明朝系で上品な格調を、本文はゴシック系で読みやすさを担っている」というように、書体の系統・役割・印象が言語化されます。検証ツールで一つずつ調べていた「この書体は何か」が、まとめて手に入り、しかも「どんな印象を作っているか」まで言葉になります。
さらに、見出し別の文字サイズ・行間・字間 といった数値も読み解かれます。太さやジャンプ率が、印象にどう効いているかが、具体的な数字で見えてきます。手作業なら要素ごとに検証ツールで確認するしかなかった情報が、URL を 1 つ入れるだけでまとまる——これが、フォント特定を看板とする yorunoma の違いです。しかも読み解けるのはフォントだけではありません。同じ手軽さで配色なども確かめられます（フォントとあわせて配色を調べる手順は フォントとあわせて配色も調べる方法 にまとめています）。ただし、フォント特定は、サイトが指定している書体を読み取るものです。閲覧環境によって表示が変わるフォント（デバイスフォント）などもあり、すべての環境での見え方を完全に保証するものではない点は、正直にお伝えしておきます。
こんな使い方
フォントを読み解く力は、次のような場面で役立ちます。
- 参考サイトのフォントを調べて学ぶ — 「素敵」と感じるサイトの書体を特定し、系統・太さ・使い分けがどう印象を作っているかを言語化します。丸写しでなく、書体使いの原理を理解して自分のサイトに活かします。真似でなく理解する姿勢は サイトのデザインをパクリにせず参考にする方法 もどうぞ（分析は全プランで使え、登録なしの無料体験でも試せます）。
- 自分のサイトのフォントの印象を確かめる — なんとなく選んだ書体が、狙った印象になっているか・本文が読みやすいか・書体が多すぎないかを、客観的に確かめます。優先度つきの改善提案まで欲しいときは「診断」（Pro プラン以上）が向いています。
- 目指すサイトと、フォントを比べる — 「こうなりたい」というサイトと自分のサイトの書体を見比べ、差を掴みます。2 つを並べて差分を出す「比較」は Premium プランの機能です。
フォントの読み解きは、才能ではなく「視点」です。系統と使い方で見る目を持てば、どんなサイトの書体からも学べます。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは気になるサイトの URL を 1 つ入れて、使われているフォントを読み解くところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
どんなフォントも特定できますか。
yorunoma は、サイトが指定している書体（CSS で指定されたフォント）を読み取ります。ただし、閲覧する端末や OS によって表示が変わるフォント（デバイスフォント）や、特殊な指定の場合など、すべての環境での見え方を完全に保証するものではありません。「サイトが意図している書体と、その印象」を読み解く道具、とお考えください。過不足なく正確を期すため、大事な判断では実際の表示もあわせてご確認ください。
CVR やアクセス数などの成果も分かりますか。
いいえ。yorunoma は 見た目のデザインの印象 を読み解くツールです。CVR（コンバージョン率）・アクセス数・売上といった成果や数字は、測りません。それらはアクセス解析ツールの領域です。yorunoma が扱うのは、フォントなどデザインの中身で、「このフォントで売れる」といった成果はお約束しません。
自分のサイトのフォントも調べられますか。
はい。自分のサイトの URL を入れれば、同じように使われているフォントと印象を読み解けます（分析は全プランで使え、無料体験でも試せます）。自分のサイトについて優先度つきの改善点まで出す「診断」は Pro プラン以上、2 つのサイトを並べて見比べる「比較」は Premium プランの機能です。
目指すサイトとフォントを比較できますか。
はい。2 つのサイトを並べて、フォントを含む 5 要素の差分を出す「比較」は Premium プランの機能です。まずはサイト単体の「分析」を、全プランで使える無料体験で試してみてください。
まとめ
Web サイトのフォントは、サイトの「声のトーン」を決める、印象の大黒柱です。書体の系統（明朝・ゴシック・丸ゴシック） で印象の傾向を掴み、太さ・サイズ・ジャンプ率 で正確な印象を読み、可読性と個性のバランス、フォント数の絞り を見る——この視点があれば、どんなサイトの書体も読み解けます。フォントは「選ぶ」前に「読み解く」。良い書体使いを読み解けるようになることが、良い書体を選べるようになる近道です。検証ツールで一つずつ調べる手間も、印象の言語化も、気になるサイトの URL を 1 つ入れるだけで、まとめて手に入ります。フォントを「なんとなく」から「読み解ける」へ。今日から、文字を見る目を変えていきましょう。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。