Webフォントとは？定番の日本語Webフォント23選
まずはじめに：AIでホームページ作成 →｜無料Webデザインツール →
Web サイトに使用するフォントは、Web ページの印象を左右する重要なポイントです。初めてホームページを作成する際に、おしゃれなフォントを使ってデザインしたにもかかわらず、「端末によって表示されるフォントが違う」「Web デザインに使用できないフォントだった」といった問題に直面することがあります。
そんな悩みを解決するべく、本記事では Web サイトを作成するときに知っておきたいフォントの基礎知識と、Web デザインに最適な日本語の定番 Web フォント 23 選を紹介します。Web フォントのメリットやデメリットを正しく理解して、UX や SEO に優れた Web デザインを目指しましょう。
ノーコードで自在にWebデザインを作成
Webフォントの基礎知識
Webフォントとは
Web サイトで使用できるフォントには、デバイスに元々インストールされている「システムフォント」と「Web フォント」に大別されます。どちらにもメリットとデメリットがあり、両方について理解する必要があります。
デバイスフォント（システムフォント）
デバイスフォントは、コンピュータにインストールされているフォントのことです。ユーザーが使用しているオペレーティングシステム（Windows、MacOS、Linux など）に標準で搭載されているフォントが含まれます。
たとえば、Windows には「Arial」や「Times New Roman」などのシステムフォントが搭載されています。システムフォントは、Web ページでの表示速度が早いというメリットがありますが、ユーザーが使用している端末に搭載されているフォントに依存しているため、環境によって異なるフォントが表示されることがあります。そのため、Web ページをデザインしたときの見た目と、表示されるときのデザインが一定でないというデメリットがあります。
Webフォント
Web フォントは、サーバーにアップロードされているフォントのことです。Web ページを表示する際にサーバーからフォントファイルをダウンロードするため、どの端末からページにアクセスしても同じフォントデザインが表示されるという特徴があります。
たとえば、Google Fonts やモリサワの TypeSquare のフォントリソースでは、サーバーに保存されている多数のフォントが提供されています。Web フォントは、Web デザインを一定に保つことができるというメリットがありますが、フォントファイルをダウンロードするためページの読み込み速度が遅くなるというデメリットがあります。
一般的に、Web サイトでは Web フォントが使用される傾向がありますが、Web フォントを正しく使うためには、デメリットを理解しページ読み込み速度の対策をすることで、 UX に優れた Web デザインを設計できます。
Web フォントを採用する場合は、フォントのデザインだけで選ばないようにしましょう。フォントファイルの大きさや閲覧するユーザーの端末の環境などを総合的に考え、フォントを検討することが大切です。
Webフォントのメリット
これまでは Web フォントを使用する可能性が低かったため、すべての端末で同じフォントデザインを表示させるために、テキストを画像化して挿入する方法が取られていました。
しかし近年、 フォントファイルの軽量化が進み、 Web フォントのメリットが生かせるようになりました。
Webフォントを利用するメリット3点
01. デザイン性とSEO効果の両立
Web フォントを使用すると、フォント表示が閲覧者の端末に依存することなく、デザインしたとおりにテキストを表示できるようになります。デザイナーは、デザイン性の高いフォントを使用してホームページの視覚的な魅力を高められます。また、Web フォントはベクター形式のため、拡大してもクリアで美しい状態を維持できます。
Web フォントの使用は、SEO 対策にもなると言われています。従来のように画像化した文字ではなく、Web フォントを利用することで検索エンジンがページ内容を認識しやすくなるためです。このように、ホームページの見た目にこだわりつつ、SEO 対策が可能になります。
02. レスポンシブデザインに適している
レスポンシブ Web デザインとは、Web ページが画面サイズに合わせて、ページ内の要素が最適になるよう再配置される流動的デザインのことです。ページのレイアウトを変更する際にも、Web フォントを使用することでコンテンツの見た目を維持できます。
03. 自動翻訳や音声読み上げのアクセシビリティ対応
Web フォントが設定されたコンテンツはテキスト形式で保存されているため、自動翻訳や音声読み上げソフトウェアなどで読み取ることができます。したがって、視覚障害者や日本語を読むことが難しい場合においても利用できる、アクセシビリティに配慮したコンテンツにできます。
日本語のWebフォントの基礎知識
近年、技術の向上により日本語 Webフォントの利用が急速に広まっています。2021 年 8 月に日本語フォントが Google フォントに追加され、計 31 種類の日本語 Web フォントが利用できるようになったことで、広く利用される草分けとなりました。現在、Google フォントではさらに利用できる日本語 Web フォントが増え、52 種類の日本語 Web フォントが提供されています。
日本語Webフォントの抱える課題
日本語 Web フォントの普及が遅れた理由に、「日本語の文字の種類の多さ」があります。欧文フォントは文字数が少ないため、およそ 200 KB ほどのかなり小さいファイルサイズになります。一方、日本語のフォントファイルは、ひらがな、カタカナ、および 3,000 文字近くある漢字を含むため、フォントデータが 20 MB ほどまで大きくなる場合が多くあります。
日本語 Web フォントを使うときの3つのコツ
日本語 Web フォントはフォントデータが大きい場合が多いため、フォントファイルサイズをできる限り小さくする工夫が大切です。サブセットフォントメーカーなどのツールを使用して、必要な文字だけを取り出したフォントファイルを作成することで、フォントサイズを軽量化できます。また、以下の Web フォントの使い方のコツを抑えて、ページの読み込み時間への影響を抑えましょう。
01. 多数のWebフォントを使用しない
Web ページに多数の Web フォントを読み込むと、ページの読み込み速度が遅くなることがあります。そのため、必要最低限の Web フォントのみを選択することが大切です。
02. 使用するウエイトを絞る
Web フォントには複数のウエイト（太さ）がありますが、必要最低限のものだけを選択することが望ましいです。日本語は特に、一つのウエイトでもファイルサイズが大きく表示速度に影響する可能性が高いため、注意しましょう。
03. ライセンスや契約内容を確認
Web フォントはライセンスが適用されています。使用する Web フォントに関連するライセンスや契約内容を必ず正確に確認し、適切な使用方法を遵守することが大切です。
基本の日本語Webフォント18選
和文フォントとして定番の Web フォントを紹介します。
すべて Wix エディタで無料で使用できるフォントになっています。これらのフォントを利用して Web デザインを作成したい人は、まず Wix のホームページ作成プラットフォームをお試しください。
ノーコードで自在にWebデザインを作成
01. MS Pゴシック
MS Pゴシックは、Microsoft 社が提供する日本語フォントです。フォント名に「P」が入ったシリーズは、文字幅が調節され美しく見えるように設定されたプロポーショナルフォントを意味しています。活字書体を基調とし、清潔感のあるシンプルで美しい形状が特徴です。
開発元: Microsoft
02.MS P明朝
MS P明朝も、上記と同じく Microsoft 社が提供するプロポーショナルの日本語フォントです。明朝書体を基調とし、読みやすさと美しさを両立しています。特に、文学的な表現を目的としたデザインとなっており、情報量の多い文章などに適しています。また、繊細な字体で線が細いため、複雑な漢字でも読みやすさを確保できます。
開発元: Microsoft
03. MS ゴシック
MS ゴシックは、Microsoft の日本語用フォントとして開発されたフォントの一つです。視認性が高い文字を特徴としています。MS Pゴシックとの違いは、等幅フォントであることです。シンプルなデザインで、Web ページのレイアウトなどに適しています。
開発元: Microsoft
04. MS 明朝
MS 明朝は、Microsoft によって開発された等幅の日本語フォントです。文字の角度が揃っていて美しいという特徴があります。また、明朝体をベースにしているため、明瞭で落ち着いた印象を与えます。書体的にも柔らかい表現が得意です。
開発元: Microsoft
05. UD明朝
UD明朝は明朝体のフォントで、独特の角デザインが特徴的です。文字の読みやすさに優れ、印刷活字のような印象を与えます。ユニークさと高いデザイン性を兼ね備えている点が評価されています。
開発元: UDフォント
06. UD角ゴ_ラージ
UD角ゴ_ラージは角ゴシック体のフォントで、UD明朝と比べて少し縦長の文字が特徴です。縦長なデザインにより、文字の間隔が広く見やすい印象を与えます。また、読みやすい角ゴシック体をベースとしており、文字幅が詰まっていてもバランスが取れています。
開発元: UDフォント
07. クックハンド
クックハンドは手書き風のフォントで、文字の太さや斜めの文字などかわいい手書き感を表現できます。手書き風のフォントは、暖かな手作り感を感じさせる表現や子供向けの情報発信に適しています。
開発元: コントラストグループ
08. スキップ (Skip)
ユニークなカーブが特徴のフォントで、硬さと柔らかさを併せ持った魅力的なフォントです。「明朝体のような、でも明朝体ではない新しいデザイン書体」として開発されました。明るい印象とユニークなデザイン性があり、イラストと組み合わせたときに魅力的な仕上がりになります。人間味ある文字形状や自然な流れが特徴です。小さい表示サイズでも読みやすい特徴があります。
開発元: フォントワークス
09. スーラ (Seurat)
現代的な印象を持っている丸ゴシック体のフォントです。洗練された文字形状とスタイリッシュなデザイン性があり、タイトルやロゴなどのタイポグラフィの使用に向いています。クリーンな文字形状と平滑なライン、そして明確な視認性とシンプルなデザインが特徴的です。
開発元: フォントワークス
10. ニューセザンヌ（New Cezanne）
「セザンヌ」の古典的なスタイルを、新鮮でフレッシュな書体にしたセリフゴシック体のフォントです。特に「かな」と英数字のデザインが変更されています。モダンでユニークなデザインは、タイトルやヘッダーなど文字面を大きく設定した使用方法に向いています。平滑なラインが特徴です。
開発元: フォントワークス
11. マティス
たっぷりとした筆と墨を連想させるインパクトのある明朝体フォントです。エヴァンゲリオンのフォントとしても有名で「エヴァフォント」としておなじみではないでしょうか。等幅とプロポーショナルの両方のタイプフェイスがあり、数字とアルファベットが独自のデザインとなっています。 数字のデザインが特に美しいことが特徴です。
開発元: フォントワークス
12. メイリオ
フォント名の由来である「明瞭」が意味する通り、メイリオは、高い可読性を目標に開発されたゴシック体のフォントです。読みやすく清潔感があり、堅実な印象を与えます。印刷物に使用しても美しく、汎用性の高さが魅力です。文字形状が整っていて見やすく、全角文字の読みやすさも魅力です。
開発元: Microsoft
13. ロダン L（Rodin L）
フォントワークスを代表するゴシック体のフォントです。直線的でありながらも丸みを感じる文字形状が美しいと評価されています。可読性が高く、ブログ記事の見出しやタイトル、本文への使用がおすすめです。
開発元: フォントワークス
14. ロダン M（Rodin M）
上記のロダンLに少し変更が加えられたデザインです。小さい画面でも視認性が高くなるよう、句読点の線が細くデザインされていることや、カッコなどの記号にデザインの違いがあります。こちらも、ブログ記事などの使用におすすめのフォントです。
開発元: フォントワークス
15. 筑紫Aオールド明朝
筑紫Aオールド明朝は、古典的な明朝体のフォントです。筆の流れを感じる、美しい打ち込みのデザインと流れるようなハライのデザインが特長です。日本語ならではの縦書きの Web デザインにおすすめです。相性の良い欧文フォントは、古典的でセリフのある Roman 系のフォントです。
開発元：フォントワークス
16. 筑紫A丸ゴシック
筑紫A丸ゴシックは、筑紫Aシリーズの丸ゴシックタイプのフォントです。角の丸さが他のフォントより大きいことが特徴です。女性らしさやかわいらしさの表現が得意です。丸ゴシックタイプのフォントの中でも視認性に優れており、ページのヘッダーやメニュー、ブログ記事の本文までさまざまな使い方ができます。
開発元：フォントワークス
17. 筑紫B丸ゴシック
上記の筑紫A丸ゴシックと比べ、ひらがな、カタカナ、英数字によりユニークなデザインを施したフォントです。漢字フォントは筑紫A丸ゴシックと共通しています。
開発元：フォントワークス
18. 筑紫ゴシック
筑紫ゴシックは、筑紫明朝のデザインを意識して作られた書体です。筆圧の変化を感じる伸びやかなデザインで、暖かな印象を与えます。漢字に比べて仮名がやや小ぶりになっており、和文のリズムを生かした美しいフォントです。ブログ記事の本文フォントとしての利用がおすすめです。
開発元：フォントワークス
おすすめ定番Googleフリーフォント5選
01. M PLUS 1p
M PLUS 1p は、清潔でシンプルな見た目が特徴のフォントです。数字や記号も鮮やかで読みやすくなっています。独自のグリフデザインも特徴的で、美しいタイトルテキストや見出しなどを作ることができます。また、数字の読みやすさも高いと評判です。
開発元: M PLUS
M PLUS Rounded 1c は、M PLUS 1p に比べて丸みのある美しいグリフが特徴です。このグリフ形状により、愛らしい印象を与えます。このフォントは、子ども向けのWebページや印刷物などにも適しています。また、M PLUS 1p に比べてより緩やかな印象を与えます。
開発元: M PLUS
03. さわらび明朝
さわらび明朝は、日本の明朝体をベースにしたフォントです。和文フォントの中でも、明瞭なグリフが特徴で、文章を読むことが簡単です。明朝体をベースにしているため、和文の書籍や新聞などにも適しています。
開発元: さわらびフォント工房
04. Noto Sans Japan
Noto Sans Japan は、日本語を表示するために特別に開発された清潔なサンセリフタイプフェイスです。美しいグリフと、幅広い使用用途に対応する柔軟なフォントサイズと太さが魅力です。
開発元：Google
05. Noto Serif Japan
Noto Serif Japan は、日本語を表示するために特別に開発されたエレガントなセリフタイプフェイスです。流れのあるグリフと、明瞭な文字形状が特徴です。また、本格的な書籍や雑誌のタイポグラフィにも適しています。
開発元：Google
まとめ
Web デザインを作成するときに知っておきたい Web フォントの基礎知識と、定番の日本語 Web フォントをまとめて紹介しました。読みやすさと美しさを兼ね備えた、本格的な Web サイト の作成にぜひ役立ててください。
効率的に Web サイトを作成し、デザインにこだわったホームページを作りたい場合は、Wix のホームページ作成プラットフォームがおすすめです。まずは無料で試してみてください。
ノーコードで自在にWebデザインを作成
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
