はじめに
この文書では、ホームページで使われているフォントの調べ方をやさしく丁寧に解説します。ブラウザの開発者ツールやChrome拡張機能を使う方法、画像内の文字を判別するサービスの使い方、そしてよく使われるWebフォントの例まで順を追って説明します。
何が学べるか
- ページ上の文字がどのフォントか見つける基本操作
- ブラウザだけで調べる手順
- 拡張機能でさらに手早く調べる方法
- 画像の文字フォントを判別する際のコツ
- よく使われるWebフォントの例と特徴
誰に向いているか
ホームページ制作やデザインに関心がある人、気になるサイトのフォントを知りたい人向けです。専門的な知識は不要で、普段使っているブラウザがあれば始められます。
準備するもの
- パソコンとインターネット接続
- Chromeなどの最新ブラウザ（手順で説明します）
次章からは実際の操作に沿って、具体的な手順を丁寧に紹介します。
開発者ツールで調べる方法
概要
ほとんどのブラウザには「開発者ツール」があり、ページ上の要素に実際に適用されているフォントを確認できます。操作は簡単で、ページを開いて調べたい文字を選べば確認できます。
手順（共通）
- 対象ページを開き、調べたい文字列を右クリックして「検証」または「要素を調査」を選択します。キーボードショートカット：WindowsはCtrl+Shift+I、Macは⌘+Option+I（Safariは事前に「開発」メニューを有効に）。
- 開発者ツールで該当の要素が選択された状態にします。
- 右側のパネルで「Styles（スタイル）」や「Computed（計算済み）」を確認し、font-familyプロパティを探します。
- Chrome/EdgeではElements内にある「Fonts」タブ（Rendered Fonts）で、実際にレンダリングされたフォント名が表示されます。Firefoxも右ペインの「Fonts」タブで確認できます。
詳しい確認ポイント
- CSSに複数のフォント名がある場合は、左から順に候補で、ブラウザが最初に使えるものを選びます。実際に使われた名前はRendered Fonts/Fontsタブで確認してください。
- @font-faceで読み込むWebフォントはNetworkタブでwoff/ttfなどのファイル名を探すと特定しやすいです。
- 文字が画像の場合は開発者ツールではフォント情報を得られません。画像かどうかはElementsでタグ（imgやbackground-image）を確認してください。
補足
疑問があれば、どのブラウザで調べたいか教えてください。具体的な画面の操作を丁寧に案内します。
Chrome拡張機能で調べる方法
概要
Chromeなどでは、フォント調査専用の拡張機能を使うと簡単にフォント名やサイズを確認できます。マウスを乗せるだけで表示されるため、デザイン確認に便利です。
インストールと基本操作
- Chromeウェブストアで「WhatFont」「Fontface Ninja」などを検索してインストールします。
- ブラウザの拡張機能アイコンをクリックして有効にします。
- 拡張機能のアイコンを押し、ページの文字にカーソルを合わせるとツールチップで情報が表示されます。クリックで情報を固定できるものが多いです。
表示される情報
- フォント名（使用中またはフォールバック）
- フォントサイズ、太さ（ウェイト）
- 行間や文字色
- 場合によってはフォントソース（Google Fontsなど）やCSSのコピー機能
使い方のコツ
- 動的に読み込まれるフォントは、ページ読み込み後に拡張を有効化して確認してください。
- 同じページで複数のフォントが使われることがあるため、要素ごとに確認すると正確です。
- モバイル表示を確認したい場合はChromeのデベロッパーツールのデバイスモードと併用すると便利です。
注意点
拡張機能には権限が必要な場合があります。信頼できる拡張機能を選び、レビューや提供元を確認してください。
画像内の文字のフォントを調べたい場合
画像の中の文字（スクリーンショットやバナー、ロゴなど）は、通常のHTMLテキストとは違うため、画像から近いフォントを探すサービスを使います。以下に手順と注意点をわかりやすくまとめます。
手順
-
画像を準備する：対象の文字部分を切り抜き、解像度を上げ、背景と文字のコントラストを強めます。余計な装飾はできるだけ取り除くと精度が上がります。
-
画像検索サービスにアップロード：代表例はAdobe Fontsの画像検索、MyFontsのWhatTheFont、Fontspring Matcherator、WhatFontIsなどです。日本語はMOJICITYのような日本語対応サービスを使うと良い結果が得られやすいです。
-
結果の確認：候補フォントが複数出ます。字体の細部（字幅、角の処理、ひらがな・カタカナの形）を比較して絞り込みます。
日本語フォントの注意点
-
漢字は種類が多く、似ている漢字で判別が難しい場合があります。見つからない時は、特に特徴的な文字一つを重点的に比較してください。
-
日本語対応サービス（MOJICITYなど）は、欧文向けサービスより候補が実用的な場合が多いです。
見つからない場合や最終手段
-
OCRで文字を抽出し、フォント名やデザイナー名で検索する。
-
フォントコミュニティやSNSで画像を共有し、詳しい人に聞く。
-
どうしても特定できない場合は、似たフォントを選んで代替する方法もあります。いずれの場合も、利用前にライセンスを確認してください。
ライセンス確認の重要性
フォントは著作物です。商用利用や埋め込み、改変の可否はフォントごとに異なります。候補が見つかったら、必ず配布元や販売サイトで利用条件を確認してください。
よく使われるWebフォントも知りたい場合
日本語サイトでよく使われるフォント名と、実際にどのように指定・確認するかを分かりやすく説明します。
よく見る日本語フォント
- 游ゴシック（Yu Gothic）：Windowsやmacで見かけます。見出しや本文によく使われます。
- Noto Sans JP：Googleが提供する日本語ゴシック。読みやすく、Webで人気です。
- ヒラギノ角ゴ（Hiragino Kaku Gothic）：mac環境で多く使われます。プロのデザインでもよく見ます。
- メイリオ（Meiryo）：Windowsでの可読性を重視したフォントです。
これらはCSSのfont-familyでそのまま名前が並ぶことが多く、例えば:
font-family: ‘Noto Sans JP’, ‘Yu Gothic’, ‘Meiryo’, sans-serif;
のように指定されます。左側ほど優先され、利用できない場合は順に代替されます。
Webフォント（Google Fonts / Adobe Fonts）
- Google Fontsでは「Noto Sans JP」「Noto Serif JP」「Kosugi」などを読み込めます。headにや@importで読み込まれることが多いです。
- Adobe Fonts（旧Typekit）でも日本語フォントを指定できます。管理画面で生成されたCSSが読み込まれます。
確認方法の具体例
– 開発者ツールの「Styles」や「Computed」でfont-familyを確認します。
– ネットワークタブでwoff/woff2などのフォントファイルや、fonts.googleapis.comやuse.typekit.netのCSSを探します。
– CSS内の@font-faceや外部を見れば、どのサービスから読み込んでいるか分かります。
注意点
– 日本語Webフォントは容量が大きく、表示速度に影響します。必要なウェイトや文字セットだけ読み込む工夫をしてください。
– 表示が期待どおりでないときは、フォントの読み込み順やキャッシュを確認すると解決しやすいです。
