🚀 新規事業

TERASU_フォント特定_調達ガイド

最終更新 2026年05月17日／ 40_新規事業/TERASU/TERASU_フォント特定_調達ガイド.md

TERASU フォント特定・調達ガイド

「このフォントいい！」→ 3秒で特定 → ライセンス確認 → 安全に採用。
参考HPのフォントを特定する方法と、HP制作事業として絶対外せないライセンス管理。

30秒で全体像

観点	一言
核心	フォント特定は WhatFont拡張でクリック1発。だが商用ライセンス確認が事業の生命線
キーワード	WhatFont / DevTools / WhatTheFont / Google Fonts縛り
使う人	TERASU HP制作担当 / 大串
読了目安	5分
最重要	TERASU=納品事業。フォント無断商用利用はクライアントごと法的リスク

フォント特定の3つの方法

方法1: WhatFont拡張（最速・推奨）

クリックするだけでフォント名表示。非エンジニア最適。

インストール:

Chrome Web Store →「WhatFont」検索 → Chromeに追加
https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

使い方:

1. ツールバーの WhatFont アイコンをクリック（ON）
2. 調べたいテキストにマウスを乗せる
3. フォント名がポップアップ
4. クリックで詳細（サイズ・色・行間・字間）も表示

方法2: ブラウザ開発者ツール（拡張なし）

1. テキストを右クリック →「検証」
2. 右パネル「Computed」タブ
3. 「font-family」を確認
   例: "Noto Sans JP", sans-serif

→ Chrome / Safari / Firefox 全部同じ手順。

方法3: 画像・スクショから特定（HP以外）

雑誌・ロゴ・チラシなど画像の場合：

ツール	URL	特徴
WhatTheFont	myfonts.com/WhatTheFont	画像アップ → AI判定（最強）
Font Squirrel Matcherator	fontsquirrel.com/matcherator	無料フォント候補も出る
Adobe Fonts 画像検索	fonts.adobe.com	Adobe CC契約あれば

最重要：商用ライセンス確認

TERASU = クライアントにHP納品する事業
フォントを無断商用利用すると、クライアントごと法的リスクを負う。
特定したフォントが「Webで商用利用していいか」を必ず確認する。

安全なフォント調達先

調達先	商用利用	日本語	備考
Google Fonts	完全無料	Noto Sans JP 等	TERASU標準推奨・最も安全
Adobe Fonts	CC契約内	豊富	契約必須・高品質
@font-face 商用配布	要確認	様々	ライセンス文を必ず読む
モリサワ / フォントワークス	有料契約	最高品質	大型案件向け

→ TERASUは「Google Fonts縛り」を基本ルールにすると事故ゼロ。

TERASU実務フロー

1. 参考HP発見
2. WhatFont でフォント特定
3. そのフォントが Google Fonts にあるか確認
   → ある: そのまま使える（無料・安全）
   → ない: 似た Google Fonts を探す
4. 日本語フォントは「読み込み速度」も確認（重いと離脱率増）
5. TERASU Lab のフォントリソース集に追加

「似たフォント」を探すツール

ツール	用途
Google Fonts の "Similar fonts"	公式の類似フォント提案
Fontjoy（fontjoy.com）	フォント組み合わせ自動生成
Typewolf（typewolf.com）	トレンドフォント実例集

日本語Webフォントの注意点

注意点	内容
重い	日本語は文字数多い → フォントファイル巨大 → 読み込み遅延
対策	サブセット化（使う文字だけ）/ Google Fonts の最適化版
離脱リスク	読み込み3秒超で離脱激増（UI/UX原則）
推奨	Noto Sans JP / M PLUS / Zen 系（Google Fonts・軽量化済み）

改訂履歴

日付	内容
2026-05-17	初版作成。HP制作事業でのフォント特定方法の質問をきっかけに、特定3手法 + 商用ライセンス管理を体系化