【2026年8月最新】Webサイトのフォントが読みにくいと言われたら？CSSのfont-family基本と非エンジニアでも直せる方法

「うちの会社サイト、なんかフォントがダサい」「スマホで見ると文字が変に見える」——そんな指摘を社内やお客様から受けて、この記事にたどり着いた方も多いのではないでしょうか。

サイトの見た目を左右する要素の中でも、フォント（書体）の指定は驚くほど軽視されがちです。しかし実際には、CSSのfont-familyというたった1行のプロパティの書き方次第で、同じサイトが「洗練された印象」にも「素人っぽい印象」にもなります。

この記事では、CSSのfont-familyの仕組みを非エンジニアの経営者・管理職の方でも理解できる言葉で解説しつつ、後半では弊社（株式会社GENAI）が実際にAIエージェント「Claude Code」を使って、こうした細かいサイト修正をエンジニアに依頼せず社内で完結させている実例を紹介します。

この記事を最後まで読むと、次の6つが明確になります。

01 WHY IT MATTERS 「フォントが読みにくい」は経営リスクである理由 見た目の些細な違和感が、成約率・信頼感に直結する

「フォントなんて細かい話、売上に関係あるの？」と思われるかもしれません。しかし、Webサイトの第一印象は0.05秒で決まるという研究結果もあるほど、見た目の印象は想像以上に早く、そして強く相手に伝わります。

特に、フォントが崩れて見える主なパターンには次のようなものがあります。

これらは全て、CSSのfont-family指定が不十分・不適切

1-1. フォントは「デザインの土台」

色やレイアウトと同じくらい、フォントはブランドイメージを左右する要素です。同じ文章でも、丸みのある柔らかい書体で表示されるか、シャープな書体で表示されるかで、読み手が受け取る印象は大きく変わります。

特に日本語サイトの場合、指定漏れ・クォートやカンマの記述ミス・対象OSに該当フォントが存在しないといった原因で「指定したつもりが反映されていない」という事故が頻発します（Webフォントを使う場合はファイルサイズの大きさが読み込み速度に影響することもあります）。この構造的な理由を理解しておくことが、次章以降の内容を正しく捉える土台になります。

02 THE BASICS font-familyとは何か——CSSの「フォント指定書」 ブラウザに「この順番で書体を試して」と伝える仕組み

font-familyは、Webサイトの文字をどの書体（フォント）で表示するかを指定するCSS（サイトの見た目を制御する言語）のプロパティです。難しく聞こえますが、仕組みは意外とシンプルです。

font-familyの最大の特徴は、1つのフォントだけでなく、複数のフォントを優先順位付きで並べて指定するという点です。これは、閲覧者が使っているパソコンやスマホに、指定した1つ目のフォントがインストールされていない可能性があるためです。

例えば、以下のように指定します。

指定例	意味
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;	まずHiragino角ゴを試し、なければYu Gothic、それも無ければブラウザ標準のゴシック体
font-family: "Noto Sans JP", sans-serif;	Webフォントの「Noto Sans JP」を優先し、読み込めなければ標準ゴシック体で代替

つまりfont-familyは、「理想のフォント→代替フォント→最終手段」という3段構えの指定書だとイメージすると分かりやすいです。1つ目が使えない環境でも、サイトの見た目が崩壊しないようにするための安全装置でもあります。

03 HOW TO WRITE font-family指定の書き方（実例つき） そのままコピーして使える指定パターン

ここでは、実際にCSSでfont-familyを指定する方法を、コピーしてすぐ使える形で紹介します。エンジニアに依頼する場合も、この内容を伝えれば意図がスムーズに通ります。

3-1. 全体（body）に指定する基本形

サイト全体のフォントを統一したい場合、CSSのbodyセレクタに指定するのが基本です。

body { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif; }

この1行を書くだけで、サイト内の見出し・本文など、個別に上書きされていない箇所にこのフォント優先順位が適用されます。ただし、ボタンや入力欄（button・input・select・textarea）は既定ではbodyのフォント指定を継承しないため、これらも揃えたい場合はbutton, input, select, textarea { font-family: inherit; }と別途指定する必要があります。

3-2. 見出しだけ別のフォントにしたい場合

見出し（h1やh2）だけ本文と違うフォントにして、メリハリをつけたいケースもよくあります。その場合はセレクタを分けて指定します。

h1, h2 { font-family: "游明朝", "Yu Mincho", serif; }

本文はゴシック体で読みやすく、見出しは明朝体で高級感を出す——といった使い分けも、指定するセレクタを変えるだけで実現できます。

3-3. よくある指定ミスとその影響

04 CROSS-PLATFORM OS・ブラウザで見え方が変わる問題と対処法 「自分のPCでは綺麗に見えるのに」が起きる理由

「自分のパソコンでチェックしたときは綺麗だったのに、お客様の環境だと崩れて見える」という相談は非常に多く寄せられます。これは、OSごとに標準搭載されているフォントが異なることが根本原因です。

OS	標準的な日本語ゴシック体	標準的な日本語明朝体
Windows	メイリオ / Yu Gothic	MS明朝 / 游明朝
Mac	ヒラギノ角ゴ ProN	ヒラギノ明朝 ProN
Android	Noto Sans CJK JP相当	端末依存
iOS	ヒラギノ角ゴ相当	ヒラギノ明朝相当

この差を吸収するために有効なのが、前章で紹介した「複数フォントを並べて指定する」書き方です。Windows用・Mac用・スマホ用の主要フォントをあらかじめリストに含めておけば、どの環境で見ても大きく破綻しない表示に近づけられます。

4-1. 確認すべき最低限の環境

全パターンを毎回目視確認するのは現実的ではありませんが、最低限この4パターンだけでも一度スクリーンショットを比較しておくと、致命的な崩れには気づきやすくなります。

05 WEB FONTS Webフォント活用でブランドイメージを底上げする OS標準フォントの限界を超える選択肢

OS標準フォントだけに頼ると、「どこにでもある普通のサイト」という印象を脱しにくいという課題があります。ここで選択肢になるのがWebフォントです。

特に日本語のWebフォントとしては、Googleが提供する「Noto Sans JP」が定番です。無料で商用利用も可能、視認性が高く、OSを問わず同じ見た目で表示できるという強みがあります。

選択肢	コスト	見た目の統一性	表示速度への影響
OS標準フォントのみ	無料	△ 環境によって変動	◎ 影響なし
Google Fonts（Noto Sans JP等）	無料	◎ 全環境でほぼ統一	△ 読み込み時間が発生
有料の商用Webフォント	月額/買い切り	◎ 独自性が高い	△〜○ サービス次第

5-1. 表示のちらつき（FOIT/FOUT）を理解しておく

Webフォントを導入すると、まれに「一瞬文字が表示されない」「一瞬別の書体で表示されてから切り替わる」という現象に気づくことがあります。これは専門的には次の2つの状態として説明されます。

現象	内容	対処法
FOIT（Flash of Invisible Text）	Webフォントの読み込み完了まで文字が一切表示されない	font-display: swap の指定で回避可能
FOUT（Flash of Unstyled Text）	代替フォントで先に表示され、後から指定フォントに切り替わる	ユーザー体験としてはFOITより許容されやすい

多くの現場では、「何も表示されない」より「見た目が一瞬変わる」方がユーザー体験として好ましいとされており、font-display: swapを指定してFOUT寄りの挙動にするのが実務上の定石です。この一手間を知っているかどうかで、ページの体感速度の印象は大きく変わります。

5-2. フォントファイルの軽量化という考え方

Webフォントの表示速度をさらに改善する方法として、使用する文字だけに絞り込んだフォントファイルを用意する（サブセット化）という手法もあります。日本語フォントは数千〜1万字以上を含むため、見出し用など使う文字数が限られる箇所ではサブセット化の効果が大きく出ます。ただし実装にはある程度の技術的な準備が必要なため、まずは「フォント数を絞る」「font-display: swapを指定する」という基本の2点から着手するのが現実的です。

06 QUICK REFERENCE 業種・目的別おすすめフォント設定 早見表 迷ったらこの指定をコピーすればいい

「結局どう指定すればいいのか」を、目的別にすぐ使える形でまとめました。

目的・業種イメージ	おすすめ指定の方向性	理由
士業・金融・BtoB企業	明朝体寄り＋Noto Serif JP	信頼感・堅実さを演出しやすい
IT・スタートアップ	ゴシック体＋Noto Sans JP	軽快さ・先進性が伝わりやすい
飲食・美容・生活サービス	丸みのあるゴシック体	親しみやすさ・柔らかさが出る
ECサイト・商品紹介	視認性重視のゴシック体	価格・スペックが読み取りやすい
迷ったらこれ	"Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif	環境差が出にくく無難にまとまる

特に「迷ったらこれ」の指定は、弊社でも新規サイト制作時のデフォルトとして採用している組み合わせです。OS標準フォントとWebフォントの良いところを両取りできるため、初めてfont-familyを見直す場合の出発点として推奨します。

6-1. 変更前にチェックすべきこと

07 GENAI CASE STUDY 【独自データ】GENAI社内のサイト微修正、AIにどこまで任せているか font-familyのような細かい修正こそAIが得意とする領域

ここからは、弊社（株式会社GENAI）の実運用データを紹介します。弊社ではClaude Max 20xプラン（月額$200・約30,000円）を契約し、経営・営業・広告・開発・経理・秘書業務まで全社的にAIエージェント「Claude Code」を活用しています。

項目	内容
契約プラン	Claude Max 20x（月$200 / 約30,000円）
利用開始	2025年後半〜
サイト関連の主な用途	LP・ブログのCSS修正、フォント調整、画像最適化、レイアウト崩れの検知修正
担当体制	専任エンジニアを新規に雇わず、既存メンバー＋Claude Codeで対応

本記事のテーマであるfont-familyのような「原因は単純だが、探すのに時間がかかる」類の修正は、実はAIエージェントが最も力を発揮する領域の1つです。人間が探すと「どのCSSファイルの何行目か」を特定するだけで時間がかかりますが、Claude Codeはコード全体を高速に読み込み、該当箇所を特定して修正案を提示できます。

7-1. 「小さすぎる修正」が溜まっていく問題

多くの会社で見られるのが、フォント崩れのような「小さすぎて後回しにされる修正」がリストに溜まり続けるという状態です。1件あたりの影響は小さくても、放置された違和感は積み重なり、サイト全体の「なんとなく古い」「なんとなく雑」という印象につながります。

外注のエンジニアやデザイン会社に依頼する場合、1件あたりの作業時間は数分〜数十分でも、見積もり・スケジュール調整・納品確認という周辺の手続きに数日かかることが少なくありません。結果として「言うほどでもないから」と後回しにされ、気づけば数十件の細かい違和感がサイトに残ったままになる、というケースを弊社でも数多く見てきました。

弊社では、こうした技術的負債になりがちな「小さな修正」こそAIエージェントに任せる方針を取っています。理由は単純で、Claude Codeにとっては修正の規模が大きくても小さくても、指示を出すコストがほぼ変わらないからです。人間の外注では発生する「見積もり」「スケジュール調整」の手間が、AIに依頼する場合は実質的に存在しません。

この一連の流れで、以前であればエンジニアへの依頼〜見積〜修正〜納品確認まで数日かかっていたような細かい修正が、肌感として数十分〜1時間程度で完結するようになりました。もちろん最終確認は人間が行いますが、「調査」と「修正コードの作成」というボトルネックだった部分をAIが肩代わりしてくれる効果は大きいと感じています。

08 FOR NON-ENGINEERS 【独自】非エンジニアでもフォント変更ができる3ステップ ターミナルもコードの知識も不要な進め方

「AIがCSSを直せるのは分かった。でも自分、エンジニアじゃないし無理では？」——そう感じる方のために、非エンジニアの経営者・管理職が実際にフォント変更を進められる手順を紹介します。

8-1. ステップ1：現状を言葉で伝える

最初のステップは、専門用語を使わずに「何が気になるか」を言葉で伝えることです。「トップページの見出しの字体が、他のページと違って見える」「スマホで見ると文字が読みにくい」といった、感覚的な表現で構いません。

8-2. ステップ2：Claude Codeのデスクトップ版で指示する

Claude Codeのデスクトップ版を使えば、ターミナル（黒い画面）を開かずに、チャット形式で「このサイトのフォントを直して」と指示できます。AIがサイトのコードを解析し、該当するCSSファイルの修正案を自動で提示してくれます。

8-3. ステップ3：見た目を確認して承認する

AIが提示した修正案は、いきなり本番サイトに反映されるわけではありません。プレビューやテスト環境で見た目を確認し、問題なければ承認するという人間のチェック工程を必ず挟みます。ここが、非エンジニアでも安心して進められるポイントです。

09 CONCLUSION まとめ ── エンジニアを呼ばなくても直せる時代に font-familyの理解が、サイト運用の自信につながる

この記事では、CSSのfont-familyの仕組み、OS・ブラウザによる見え方の違い、Webフォントの活用法、業種別のおすすめ指定、そして弊社GENAIがAIエージェント「Claude Code」を使ってこうした細かいサイト修正をどう社内で完結させているかを紹介しました。最後にポイントを振り返ります。

font-familyという1つのCSSプロパティを入り口に、「サイトの細かい違和感を、誰が、どうやって直すか」という運用体制そのものを見直すきっかけになれば幸いです。技術的な知識がなくても、AIエージェントを使えば「気づいたその日に直す」運用は十分に実現可能です。

サイトの「小さな違和感」、放置していませんか？

フォント崩れのような細かい修正から、業務プロセス全体の自動化まで。
Claude Codeを使った「自社で回せる運用体制」の作り方を、実例ベースでご提案します。

よくある質問

Q. font-familyを指定しないとどうなりますか？

A. ブラウザが持つデフォルトのフォント設定で表示されます。多くのブラウザは初期設定が明朝体（serif）系のため、意図せず古めかしい印象になったり、ページごとに表示が揺れたりする原因になります。

Q. Webフォントを使うとサイトが遅くなりますか？

A. OS標準フォントのみの場合に比べると、Webフォントの読み込み分だけ表示に時間がかかります。ただし、font-display: swapを指定して代替フォントを先に表示させる、使用書体数を絞るなどの工夫で影響を最小限にできます。

Q. スマホとパソコンでfont-familyを分けて指定する必要はありますか？

A. 基本的には同じ指定で問題ありません。メディアクエリ（画面幅による条件分岐）を使ってフォントサイズだけ調整するのが一般的で、フォントの種類自体を大きく変えるケースは多くありません。

Q. 無料で使えるおすすめの日本語Webフォントはありますか？

A. Googleが提供する「Noto Sans JP」が定番です。無料・商用利用可能で、視認性が高く、OSを問わず同じ見た目に近づけられるため、初めてWebフォントを導入する場合の第一候補としておすすめです。

Q. 既存サイトのfont-familyを変更すると、他のデザインが崩れることはありますか？

A. フォントの種類によって文字の横幅が変わるため、ボタンや見出しの折り返し位置がずれることがあります。変更後は主要ページをスマホ・パソコン両方で確認し、崩れがないかチェックすることをおすすめします。

Q. Claude Codeにサイトの修正を任せる場合、専門知識は必要ですか？

A. 不要です。「フォントが読みにくい」「このボタンの色を変えたい」といった感覚的な言葉で指示するだけで、Claude Codeがコードを解析して修正案を提示します。最終確認・承認だけ人間が行う運用で十分に回せます。

Q. font-familyの指定は何個まで並べていいのですか？

A. 明確な上限はありませんが、実務上は3〜5個程度に収めるのが一般的です。多すぎても最初の数個で表示が決まることがほとんどのため、優先度の高いフォント2〜3個＋汎用フォントファミリー1個、という構成で十分に機能します。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。