日本語用WebサイトのCSSフォント設定（日本語フォント／游ゴシック／游明朝）

日本語対応のWebサイトを作る際は、ユーザーの環境に応じた日本語フォントをfont-familyで適切に指定することが重要です。特に「游ゴシック」「游明朝」「ヒラギノ」「メイリオ」などを組み合わせて、見やすさ・美しさ・可読性を高めることができます。

✅ 日本語向けおすすめfont-family設定例

① ゴシック体ベース（モダン・読みやすい）

body {
   font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
}
/* 上記の設定では、Mac では regular ウェイトがサポートされていないため、Mac 上では文字が太く見えてしまいます。*/
/* 下記の設定では、Windows 用フォントを medium に変更することで、デフォルトの文字の太さが両方のOSで同じように見えるようになります。*/
body {
    font-family: "-apple-system", BlinkMacSystemFont, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", Osaka, "sans-serif";
}

注意：上記の第2グループについて、Yu Gothic Mediumフォントを使用する際は、グローバルに適用するのは推奨されません。強調したい部分のみ個別に設定してください。

というのも、もしYu Gothic Mediumをfont-familyの先頭に指定し、かつ後のスタイルでfont-weight:700を使用した場合、ブラウザはMediumフォントを強引に太くレンダリングしてしまい、実際のYu Gothic Boldフォントとは異なる、違和感のある表示になります。

つまり、font-weight:700を指定しても、ブラウザはYu GothicのBoldフォントファイルを呼び出すのではなく、Yu Gothic Mediumを太らせて表示しているのです。

以下はその比較です：

② 明朝体ベース（伝統的・フォーマル）

body {
   font-family: Georgia, "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", HGS明朝E, "MS Mincho", serif;
}

「①と②の比較図」

🔍 解説

📝 注意点

• "游ゴシック体" などは日本語名のため、フォント名はダブルクォートで囲むようにします。
• フォント名の順番が重要：上にあるほど優先的に使用され、無ければ次のフォントへフォールバックします。
• 英字は自動的にそのフォントにある英数字で表示されるため、場面によっては英数字専用フォントの併用も検討してください。

💡 オプション：英数字を別フォントで指定（例：Roboto）

body {
   font-family: Roboto, "Yu Gothic", "游ゴシック体", Meiryo, sans-serif;
}

これにより、英数字はよりモダンな見た目、ひらがな・カタカナ・漢字は游ゴシックで表示されます。

❓ よくある質問（Q&A）

Q1：なぜフォントを複数指定するの？

A: ユーザーのOSや端末によってインストールされているフォントが異なるため、指定したフォントが無い場合に次の候補で代替表示されるようにします。

Q2：英数字の見た目が合わない時はどうすればいい？

A: RobotoやArialなどの英数字専用フォントを先に指定すると、英数字だけがスタイリッシュに表示されるようになります。

Q3：”游ゴシック体”などの日本語フォント名はなぜクォートが必要？

A: 日本語を含むフォント名はスペースや全角文字があるため、"（ダブルクォーテーション）で囲まないと正しく認識されません。

Q4：スマホでも問題ない？

A: iOSやAndroidでも、指定したフォントがなければ自動的に他のフォントにフォールバックするため問題ありませんが、モバイルの表示確認は必須です。

🧾 まとめ

font-family を正しく指定することで、日本語Webサイトの可読性とデザイン性が向上します。

OSごとのフォント差を考慮し、優先順位のあるフォールバック指定を行うのが基本。

ゴシック体と明朝体を使い分けることで、サイトの印象を自在にコントロールできます。

英数字と和文を別フォントにすることで、より洗練されたタイポグラフィが実現可能。