※記事内に商品プロモーションが含まれる場合があります
- Webデザインを学び始めたけど、フォントの選び方がよくわからない
- どのフォントサービスを使えばいいか迷っている
- タイポグラフィの基礎を知りたい
- WebデザインのフォントはDTPと違って、デバイスでの表示を加味する必要があるよ
- 基本は、無料のWebフォントサービス「Google Fonts」を使うのがおすすめだよ
- フォントの種類（ゴシック体・明朝体・サンセリフ体など）と、定番フォントのおすすめリストも紹介するよ
はじめに
先生、Webデザインってどのフォントを使えばいいんですか？Illustratorで使ってたフォントをそのままWebでも使えばいいんすかね？
Webのフォントは、DTPとは仕組みがまるで違う。自分のPCに入っているフォントを使っても、サイトを見る全員に届くわけではないのじゃよ。
え、そうなんですか…？どうしたらいいんすか？
Webデザイン初学者の場合は、とりあえずGoogleフォントに頼るのがおすすめじゃ。
使い方も簡単だし、高品質なフォントが揃っていて使い勝手が良いぞ。
ふむ
Webデザインを始めたばかりだと、フォントの扱い方がよく分からず、「？？」となると思います。
Webデザインでフォントを選ぶとき、「このフォントかっこいいから使おう！」だけで決めると、ちょっと危険です。
WebはDTPと違い、一般的に、GoogleフォントなどのWebフォントサービスを使い、
APIでフォント情報を読み込ませ、表示させる必要があります。
つまり、Webフォントサービスにあるかどうかが、フォント選択の前提条件になります。
この記事では、Webデザイン初心者の方に向けて、Webフォントの仕組みから、
無料・有料のフォントサービス、実際のCSS記述テンプレートまでまとめました。
よければご参考ください。
WebデザインのフォントはDTPと根本的に違う
Webサイトは端末内のフォントデータに依存する
IllustratorやInDesignなどのDTPツールでは、自分のPCにフォントをインストールすれば使えます。
印刷物はフォントデータをアウトライン化（オブジェクト化して、フォント情報をなくすこと）して入稿するので、
デバイスの環境に関わらず、全ての人に同じフォントを見せることができます。
一方、Webサイトは、Mac・Windows・iPhone・Androidなど、様々な端末で表示されますが、
自分のPCにあるフォントが、見る人の端末にも入っているとは限りません。
cssでフォントを指定してても、そのフォントが端末に存在しない場合、
ブラウザはデフォルトのフォントで代替表示してしまいます。
つまりWebデザインのフォント選びは、「見た目が好き」だけでなく、「ユーザーにきちんと表示できるか」まで、セットで考える必要があります
Webフォントの3つの仕組み
Webでフォントを指定する際、方法は大きく3つあります。
① デバイスフォント（システムフォント）
ユーザーの端末にあらかじめインストールされているフォントを使う方法です。
MacやWindows、iPhone、Androidには、それぞれ大体決まったフォントデータ一式が入っています。
（MacだとSF Proやヒラギノなど、AndroidだとRobotoやNoto Sansなどが入っています。）
メリットは、余分なデータ通信がなく、表示速度が速い点です。
デメリットは、全員に同じフォントで表示することができない点です。
一般的に、CSSのfont-familyに複数のフォントを優先順位付きで指定して対応します（後述のテンプレートを参照）。
② Webフォント（フォントサービスのAPI配信）
フォントデータをサーバーから配信してくれるサービスを活用し、API経由で取得し表示する方法です。
埋め込みコードをHTMLに貼るだけで、ユーザーの端末にフォントがなくても正確に表示できます。
現在のWebデザインで最も主流の手法です。
メリットは、全ユーザーに対し同じフォントでWebサイトを表示できる点です。
デメリットは、データ通信が発生し、サイトの表示速度が遅くなる点です。
大体は、HTMLの<head>タグ内に指定のコードをコピペし、CSSでフォントを指定してあげるだけで、適用されます。
Google FontsやLET’Sなど、有名なサービスが多数あり、高品質なフォントが多数使えるのも魅力です。
Google Fontsは無料で使える、安心安全なWebフォントなので、かなりおすすめです。まずはGoogle Fontsを試しに使ってみると良いでしょう。
LET’SやMorisawa Fontsなど、有料のWebフォントサービスもあります。Google Fontsで扱っていないフォント、高品質な日本語フォントを使えるのが魅力ですが、お金がまあまあかかるので、お財布と要相談です。
③ サーバーへの自己ホスティング
フォントファイル（woffなど）を自分のサーバーに置いて、CSSで@font-faceを使って読み込む方法です。
外部サービスに依存しない分、安定しますが、フォントのライセンスをきちんと確認する必要があります。
メリットは、全ユーザーに対し同じフォントでWebサイトを表示できる点、独自で開発したフォント（自社フォントなど）も扱える点です。
デメリットは、コストがかなりかかる点です。
自己ホスティングはやや上級者向けなので、初めのうちは①か②で進めていくのが良いかもしれません。
楽天は「Rakuten Font」という自社フォントを開発し、自社のコーポレートサイトなどで使用していますが、おそらく自己ホスティングで適用させているのではないかと思います。
ヒラギノなどの一部有名フォントも、自己ホスティングでサイトに適用させることが可能ですが、Webフォントで適用させるのとは別で、別途ライセンス契約料（けっこう多額）が必要です。
あと、「PCにインストールする時のフォントファイル（otfファイルなど）をサーバーに置いて、それを読み込めばいいんじゃね？」と思うかもですが、ぜんぜん別物なのでムリです（woffという専用の形式に変える必要があります）し、勝手に改変したらライセンス違反なので、それはやめましょう。
デバイスフォントのCSS記述テンプレート
デバイスフォントは、「iOSならこれ」「Androidならこれ」というのが大体決まっています。
デバイスフォントは、あまりガラッと変わることはありません。
例えばiOSではヒラギノが使われていますが、急にヒラギノを使わなくなったりすることは基本ないです。
なので、CSSの記法も大体パターンが決まってきます。
よく使われるCSS記述のテンプレートを載せておくので、
もしデバイスフォントを指定したければ、とりあえずこれを使ってみてください。
▼ゴシック体（Mac・iOS：ヒラギノ / Windows：游ゴシック・メイリオ / Android：Noto Sans JP）
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Yu Gothic", "YuGothic", Meiryo,
"Noto Sans JP", sans-serif;▼明朝体（Mac・iOS：ヒラギノ明朝 / Windows：游明朝）
font-family: "Hiragino Mincho ProN",
"Yu Mincho", "YuMincho", "HG明朝E",
serif;デバイスフォント指定は、Yahoo!ニュースのような、SEOで表示速度を意識しているサイトで使われている印象があります。
「Yu Gothic」と「YuGothic」の両方を指定しているのはWindows・Mac両方への対応のためです。
指定の順番で優先度が決まるので、コピペで使えるテンプレートとして覚えておくと便利です。
まずはGoogle Fontsを使おう【無料・高品質】
Google Fontsとは？なぜ初心者に最適か
Googleが提供するWebフォントサービスで、1,900種類以上のフォントを完全無料・商用利用可能で使えます。
日本語フォントも充実しており、初心者からプロまで幅広く使われている、まさにWebフォントのスタンダードです。
特に嬉しいのが、ライセンスを気にしなくていい点です。
有料フォントサービスでは「商用利用OKか？」「Webサイトへの埋め込みはどのプランから？」といった確認が必要ですが、Google Fontsはすべてオープンライセンスで提供されています。
使い方（埋め込みコードをコピーするだけ）
使い方はとてもシンプルです。
- Google Fontsのサイトで使いたいフォントを選ぶ
検索窓でフォント名を探すか、「Japanese」フィルターで日本語フォントに絞れます。 - 「Get font」→「Get embed code」をクリック
使いたいウエイト（太さ）を選んでから埋め込みコードを取得します。 - HTMLの<head>内にコードを貼る
生成された<link>タグをコピーして、HTMLの<head>内に貼り付けます。 - CSSでfont-familyを指定する
Google Fontsのページに書いてあるfont-familyの記述をCSSにコピーすれば完了です。
フォントはたくさんありますが、迷ったらとりあえずNoto Sans JPを試してみるのがおすすめです。癖がなく読みやすいフォントなので、色々な場面で活躍できます。
Google Fontsはとても便利ですが、デメリットもあります。
未経験からWebデザインをするのであれば、ここまで気にしなくても良いかもですが、頭に入れておくと良いでしょう。
① 読み込み速度への影響
外部サーバーからフォントデータを取得するため、デバイスフォントと比べると初回表示が少し遅くなります。使うウエイト（太さ）やフォントの種類が多いほど影響が大きくなるので、Regular・Boldの2種類程度に絞るのがおすすめです。
② Core Web Vitals（SEO）への影響
Googleの検索ランキングの評価基準にはページ速度（Core Web Vitals）が含まれており、フォントの読み込みがLCP（主要コンテンツの表示速度）に影響することがあります。埋め込みコードのURLに display=swap パラメータを加えると、フォントが読み込まれる前に代替フォントで先に表示してくれるので体感速度が改善します。ウエイト数を絞ることと合わせて対策しておくと安心です。
有料フォントサービス3選
Google Fontsで十分なケースがほとんどではありますが、
もっと別の書体を使いたい！
クライアントのブランドに合わせた書体がGoogle Fontsにない！
…という場面では、有料フォントサービも選択肢に入ってきます。
有料フォントサービスもいくつかありますが、ここでは代表的なものを３つご紹介します。
Morisawa Fonts（モリサワ）
モリサワが提供するフォントサブスクリプションサービスで、Webフォントにも対応しています。
新ゴ・リュウミン・UD新ゴなど、コーポレートサイトや高品質メディアでよく見かけるモリサワの定番書体を、月額・年額制で手軽にWebフォントとして使えます。
埋め込みコードをHTMLに追加するだけのシンプルな導入方法が特徴です。
書体の品質はモリサワブランドが保証しており、印刷・広告業界でも通用するフォントをWebに使いたい場合の選択肢としておすすめです。
FONTPLUS（フォントワークス / Monotype）
フォントワークス（現・Monotype傘下）が提供するWebフォント配信サービスで、筑紫シリーズ・ロダンNTLKなど高品質な和文書体を使えます。
JavaScriptタグをHTMLに1行埋め込むだけでWebフォントが適用できるのが特徴で、設定のしやすさも好評です。
無料プランあり（一部書体制限）で、有料プランは用途・PV数に応じて選べます。
まず無料プランで試してから必要に応じてアップグレードできるのは、初めて有料Webフォントを検討する人にとって入りやすいポイントです。
フォントワークスには「LETS」というデスクトップ向けの年間定額のフォントサービスもあります。モリサワでは扱っていない、超有名なフォントがたくさん入っているので、おすすめです。
Adobe Fonts
Adobe Creative Cloudのサブスクリプションに含まれるフォントサービスで、
CCユーザーであれば追加料金なしで、35,000種類以上のフォントをIllustratorやPhotoshopなどで使えます。
日本語フォントも多数ありますが、どちらかというと欧文フォントが充実しており、Caslon・Futura・Minionなど印刷業界でも定番の書体を使えるのが魅力です。
使い方は簡単で、Adobe Fontsのフォントのカセットにある</> ボタンをクリックし、プロジェクトを作成した後、埋め込みコードが表示されるので、それをweb サイトの <head> タグに追加すればOKです。
ただ、注意点として、クライアントのWebサイトでAdobe Fontsを使う場合、
そのWebサイトの所有者（クライアント）がAdobeライセンスを持っている必要があります。
デザイナー自身のAdobe IDで発行した埋め込みコードを、クライアントのサイトで使うことは、ライセンス違反になる可能性があります。
実は、日本語に対応した有料Webフォントサービスはそれほど多くありません。現状、実務で使われているのはMorisawa FontsとFONTPLUSが主な選択肢で、日本語書体にこだわりたい場合はこの2つを軸に検討するのがおすすめです。
定番おすすめフォント【日本語・欧文】
日本語フォント
日本語フォントは大きくゴシック体と明朝体の2種類に分けられます。
Webサイトの多くはゴシック体ですが、ブランドサイトや読み物系では明朝体も選択肢になります。
ゴシック体
線の太さが均一でシンプル・クリアな印象。可読性が高くWebの本文フォントとして最もよく使われます。
- Noto Sans JP（Google Fonts・無料）
「No more tofu」をコンセプトに作られた書体。Tohuとは「豆腐」、いわゆる文字データがなくて「〼」となってしまうやつのこと。つまり、文字の対応幅が圧倒的に広く、本文などで文字が欠ける心配がほとんどない。書体としても癖がなく使いやすいのが特徴。個人的にも、クワイアントワークでWebサイトを作る時は、まずはNoto Sans JPをおすすめしています。 - 游ゴシック（デバイスフォント）
字游工房という老舗書体メーカーが設計したフォントで、MacとWindowsの両方にデフォルト搭載されている。繊細で上品なデザインが特徴で、コーポレートサイトや格調あるメディアによく使われる。ただしWindowsではウエイトの扱いに癖があり、意図した太さで表示されないことがあるため、CSSでの指定に少し工夫が必要。 - ヒラギノ角ゴシック（デバイスフォント・Mac/iOS）
Mac・iPhone・iPadにデフォルト搭載されているApple御用達の書体。字形が整っていてRetinaディスプレイとの相性が特に良く、細かな文字もつぶれにくい。Windowsには入っていないため、CSS指定の際は游ゴシックなどとセットで書くのが基本。ぼくはバナーのデザインとかでフォントに迷ったら、とりあえずまずヒラギノで組んで様子を見たりしてます。 - M PLUS 1p（Google Fonts・無料）
Google Fontsから配信されるWebフォントなので、デバイスに依存せず全ユーザーに同じ見た目で表示できる。やや丸みを帯びた字形がゴシック体でありながら堅すぎない親しみやすさを演出してくれる。サービス系Webサイトやアプリのような、フレンドリーさを出したいシーンによく合う。
明朝体
横線が細く縦線が太い伝統的な書体。上品・高級感のある印象を与え、ブランドサイトや読み物系メディアに向いています。
- Noto Serif JP（Google Fonts・無料）
Noto Sans JPと同じGoogle製書体で、設計思想とスケールが揃っているため、同じサイト内でゴシックと明朝を使い分けるならこの組み合わせが最も自然にまとまる。横線が細く縦線が太い伝統的な明朝体の造形で、ブランドサイトや読み物系メディアに格調と高級感を与えてくれる。 - Shippori Mincho（Google Fonts・無料）
明治時代の活版印刷所・東京築地活版製造所の活字をベースに現代向けにアレンジした明朝体。Noto Serif JPより線のコントラストが強く、文学的・和風な雰囲気が出る。読み物系メディアやブランドサイトで使うと一段と格調が増す印象で、日本語フォント好きのデザイナーの間でも人気が高い。 - BIZ UDPMincho（Google Fonts・無料）
モリサワが開発したUD（ユニバーサルデザイン）明朝体で、誰でも読みやすいことを重視した設計が特徴。小さいサイズでも文字がつぶれにくく、コーポレートサイトや行政・教育系のサイトなど、信頼感と読みやすさを両立させたいシーンに向いている。「BIZ」の名の通り、ビジネス用途に強い書体。
欧文フォント
欧文フォントはサンセリフ体とセリフ体に大別されます。日本語のゴシック体・明朝体と考え方はほぼ同じです。
サンセリフ体
文字の端に飾り（セリフ）がなくスッキリしており、モダン・クリーンな印象。Webでは圧倒的に多く使われています。
- Noto Sans（Google Fonts・無料）
Noto Sans JPの欧文版（ラテン文字版）で、デザインの思想・スケールが揃っているため一緒に使うと日本語と英数字が自然に馴染む。日本語サイトでありがちな「英数字だけ浮いて見える問題」を解消するのにとても相性が良い組み合わせ。 - Roboto（Google Fonts・無料）
Google Androidの標準フォントとして開発された書体で、Google FontsのダウンロードランキングでNo.1を誇る超定番。幾何学的なシンプルさと自然な曲線を両立した設計で、本文・見出し・UIなどあらゆる用途に使いやすい。Googleのマテリアルデザインの標準書体でもある。 - Montserrat（Google Fonts・無料）
20世紀初頭のブエノスアイレスの街角看板から着想を得て作られたフォント。整然とした幾何学的な字形が特徴で、見出しやロゴタイプに使うとブランド感が出る。本文で使うと少し読みにくさが出ることもあるため、見出し・キャッチコピー用として使うのがおすすめ。 - Inter（Google Fonts・無料）
デジタル画面での視認性を最優先に設計されたオープンソースフォントで、Figmaの標準書体として有名。大文字のIと小文字のl（エル）が見分けやすい字形になっていたり、0（ゼロ）にスラッシュが入っていたりと、UIにおける誤読防止が細かく考えられている。
セリフ体
文字の端に飾りがあり、格調・伝統・信頼感を与える。高級ブランドや読み物系メディアに向いています。
- Playfair Display（Google Fonts・無料）
18世紀後半の活版印刷時代に流行したネオクラシカルな書体スタイルを現代にアレンジしたフォント。縦線と横線の太さの差（コントラスト）がとても大きく、それが独特の美しさと高級感を生み出している。本文には向かず、見出しやキャッチコピーなど大きなサイズで使うのが基本で、ファッション・ホテル・レストランなどのブランドサイトによく見られる。
その他（手書き・スクリプト体）
意外と使う機会のある、筆記体や手書き風の書体。
大きく見出しに使ったり、アクセントとしてちょっと入れたり。
ブランドの個性・温かみ・高級感を一点で演出したいときに効果的です。
- Dancing Script（Google Fonts・無料）
手書きスクリプト系の中で最も使いやすさと上品さのバランスが取れた一本。流れるような筆致はカジュアルすぎず、カフェ・ウェディング・ハンドメイド系ブランドの見出しやロゴに自然に馴染む。4種類のウエイトがあり、細めをサブタイトルに・太めをメインビジュアルに使い分けられるのが実用的。 - Pacifico（Google Fonts・無料）
1950年代のアメリカのサーフカルチャーから着想を得た、太くて丸みのある手書き風フォント。陽気さとエネルギーを感じさせる字形で、フードブランドや子ども向けサービス・アウトドア系サイトのロゴやキャッチコピーによく使われる。ウエイトが1種類のみなので、サイズを大きく取って使うのが基本。 - Great Vibes（Google Fonts・無料）
ペンカリグラフィーの優雅な筆致を再現した、高級感のあるスクリプト体。ウェディング・ラグジュアリーブランド・高級レストランのヒーロービジュアルやタイトルに使われる。可読性が低く本文には絶対に向かないが、装飾として使うことで、他では出せない美しさを演出できる。 - Charmonman（Google Fonts・無料）
タイの書体デザインスタジオCadson Demakが手がけたスクリプト体で、タイ語と欧文の両方に対応している。コントラストの効いた細い線と流れるような曲線が独特の装飾性を生み出しており、アジアンテイストを取り入れたブランドや、ファッション・ビューティー系サイトのタイトルに合わせやすい。欧文スクリプトにはない異国的な華やかさが欲しいときの選択肢になる。
よくある質問
- Google Fontsは本当に無料で商用利用できますか？
- はい、完全無料で商用利用できます。Google FontsのフォントはすべてOFLやApacheなどのオープンライセンスで提供されており、個人・商用を問わず自由に使えます。
- フォントの読み込みが遅くなることはありますか？
- あります。Webフォントはフォントデータを外部から読み込むため、デバイスフォントと比べると初回の読み込みに時間がかかります。対策としては、使うウエイト（太さ）を必要最低限に絞る、font-display: swapを指定して表示を優先させる、といった方法があります。Google Fontsはサーバーが高速で最適化されているため、1〜2種類の使用であれば大きな問題になることは少ないです。
- Figmaでフォントを使う場合、Webで使えるフォントと同じを選んだ方がいいですか？
- はい、できる限り合わせることをおすすめします。FigmaではGoogle Fontsがそのまま使えるので、デザイン段階からNoto Sans JPやRobotoなどのWebフォントを選んでおくと、実装時のズレが少なくなります。デザインと実装で異なるフォントを使うと、フォントの太さや字形の違いでレイアウトが崩れることがあります。
まとめ
- Webデザインで使うフォントは、Webフォントサービスから選ぶと安心。
- まず使うべきはGoogle Fonts。無料・商用OK・コード1行で使えて初心者に最適
- デバイスフォントはCSSのfont-familyに複数OS対応の優先順位リストを指定する
お疲れ様でした。どうもありがとさん
