Webデザインにおいてフォント選びは欠かせない要素の1つです。使用するフォントスタイルによってWebサイト全体のブランドイメージやユーザーの利便性が大きく変わってきます。
最近は、様々な種類のWebフォントが登場し、どれを使えばいいのか、どこで使えばいいのかなど悩むことも多いのではないでしょうか。今回は、このWebフォントの基礎知識をまとめるとともに、書体別におすすめのWebフォントを紹介します。
ぜひ今後のWeb制作の参考にしてみてください！
Webフォントの種類について
Webサイトで使用するフォントには、大きく分けてシステムフォント（デバイスフォント）とWebフォントの2種類があります。
システムフォントとは
システムフォントは、パソコンやスマートフォンなどのデバイスにインストールされているフォントのことを指します。このシステムフォントは、閲覧ユーザーが使用するデバイスのOS環境（Windows、macOS、iOS、Androidなど）によって異なります。
そのため、ユーザーのデバイスにWeb制作者が指定したフォントスタイルがない場合、閲覧ユーザーが持っている別のフォントが代用されてしまうため、制作者が意図しないデザインとなってしまう場合があります。
Webフォントとは
この問題を解消するために登場したのがWebフォントです。Webフォントは、Webサーバー上にあるフォントデータを読み込んで表示させたフォントのことを指します。
以前は、見出しやキャッチコピーにデザイン性の高い文字を使用する場合、画像として挿入するしかありませんでした。しかし、Webフォントを利用することで、閲覧ユーザーのOS環境に依存することなく指定した文字を表示できるようになりました。また、画像化したデータとは異なり、テキストの選択やコピーもできるため、ユーザーにとって使い勝手のよいサイトにすることができます。
Webフォントのメリット
Webフォントを使用する具体的なメリットは、以下のものがあります。
- デザイン性とSEO対策の両立
- メンテナンス性の向上
- レスポンシブ対応
- ユーザビリティの向上
Webフォントを使用するメリットについて詳しく解説します！
デザイン性とSEO対策の両立
文字を画像化する場合、コーディング時にalt属性で代替テキストを記述しなければ検索エンジンに文字判別されず、SEOの評価が下がってしまいます。しかし、Webフォントはデザイン性を保持したままテキストデータとして表示できるためSEOの効果を保つことができます。
メンテナンス性の向上
テキストの内容を変更したい場合、画像データで作成した箇所は再びオリジナルのデータを編集し画像化するという作業が発生していました。Webフォントの場合、テキストを編集するだけでよいため、作業労力を大幅に削減することができます。
レスポンシブ対応
パソコンやスマートフォン、タブレットなど多様なデバイスがある中、表示される画面サイズも様々です。Webフォントはテキストデータなので、画面幅に合わせて自動で改行やサイズ調整をすることができます。また画像表示のように、文字が拡大縮小表示されて読みづらくなるといった心配もありません。
ユーザビリティの向上
Webサイトには、テキストの音声読み上げ機能や自動翻訳機能など多様な人たちが閲覧できる機能があります。画像ではなくWebフォントを使用することで、これらのバリアフリー機能にも対応することができます。また、テキストの選択やコピーも容易にできるようになるため、ユーザーの利便性もより高くなります。
Webフォントのデメリット
次に、Webフォントを使用するデメリットには、以下のものがあります。
- 表示速度が遅くなることがある
- 日本語フォントの種類が少ない
- ライセンス料が発生する場合がある
Webフォントを使用するデメリットについて詳しく解説します！
表示速度が遅くなることがある
Webフォントを使用した場合、Webサイトを表示する際にサーバーからフォント情報を読み込むため表示に時間がかかることがあります。特に、日本語フォントは、アルファベットと比べてひらがなやカタカナ、漢字など文字の種類が多いため膨大なデータ量となり、表示するまでにタイムラグが発生してしまいます。
日本語フォントの種類が少ない
欧文フォントに比べて日本語に対応したフォントはまだまだ種類が少ないです。前述した通り、日本語の場合、使用する文字の種類が多いため開発に時間がかかってしまいます。随時Webフォントのデータは追加されているので、定期的に最新情報をチェックするようにしましょう。
ライセンス料が発生する場合がある
Webフォントには無料で使えるものも多いですが、なかには費用が発生するものもあります。買い切りからサブスクリプションまで料金のシステムも様々なので確認が必要です。また、ライセンス条件によってWebフォントの利用に制限がある場合もあるため、使用前に利用規約を確認することが重要です。
よく使うWebフォントサービス
次にWebデザインを行う上で、よく使用するサービス4つについて紹介します！
- Google Fonts
- Adobe Fonts
- TypeSquare
- fonts.com
Google Fonts
Google Fontsは、Googleが提供しているWebフォントサービスです。1500種類以上のフォントがあり、全て無料で使用でき、商用利用も可能です。日本語フォントも50種類以上揃っているため、デザインに合わせた選択が可能です。
Adobe Fonts
Adobe Fontsは、Adobeが提供しているWebフォントサービスです。有料会員と無料会員があり、Adobe Creative Cloudの有料会員であれば25,000種類以上のフォントを使用できます。全て商用利用可能です。日本語フォントは600種類以上揃っています。無料会員の場合でも、1,000種類以上のフォントが使用でき、日本語フォントも約200種類使用可能です。
Adobe Fontsは、クライアントのWebサイトに使用する際、クライアント側でAdobeアカウントに契約する必要があります。また、Adobeとの契約を解除するとフォントが表示されなくなる等の規約があります。使用する際は十分にライセンス規約を確認しましょう。
TypeSquare
TypeSquareは、株式会社モリサワが提供するWebフォントサービスです。日本の会社が提供しているため日本語フォントが豊富に揃っています。無料から有料までのプランがいくつかあり、商用利用可能です。いずれのプランでも1,800種類以上のフォントを使用でき、日本語フォントは1,000種類以上揃っています。無料プランの場合、一度に1つの書体を使用でき、月に1,000ページビューまで表示され、これを超過すると翌月までフォントが配信されない等といった制限があります。
パンフレットなどの印刷物とフォントを揃える場合、モリサワのフォントを基本にしておくと合わせやすいです。
fonts.com
Monotypeが提供しているWebフォントサービスです。海外で有名なWebフォントサイトで、無料から有料まで様々なプランがあり、プラン内容によって利用規約が異なるため使用する前に確認が必要です。25,000種類以上のフォントが使用でき、商用利用可能です。日本語フォントも取り扱っています。
Webフォントの使い方
基本的な使い方
Webフォントの主な使い方には、Webフォントを提供するサービス会社から随時フォントデータを読み込むホスティングサービスを利用する方法と、自身のサーバーにフォントデータを保存し読み込むセルフホスティングする方法の2つがあります。
今回は、手軽に利用できるホスティングサービスをご紹介します。
特に使われる頻度が高いGoogleフォントを例に説明します！
Google にログインした状態でGoogle Fontsのサイトにアクセスし、使用したいフォントを選択します。
選択したフォントデータのCSSファイルを読み込みます。読み込むコードはフォントを選択した際に表示されるため、それをコピーしてHTMLのheadタグなどに記述します。
フォントを適用させたい要素に対してCSSに記述します。記述するCSSのコードもフォントを選択した際に表示されるため、これをコピーして記述します。
Webフォントを使う際の留意事項
前述した通り、Webフォントには様々メリットがある一方でデメリットもあります。特に、Webフォントを多用しすぎるとWebサイトの表示が遅くなり、ユーザビリティが低下し、閲覧ユーザーの離脱率が上昇してしまいます。これを避けるためにも、日本語フォントやウエイトの重いフォントを必要以上に多用するのは避けましょう。
使用するWebフォントを絞ったにもかかわらずWebサイトの表示速度が遅い場合は、サブセット化によってフォントデータを軽くする等、読み込むフォントデータを軽くする対策が必要です。
ゴシック体のおすすめWebフォント3選
それでは、おすすめWebフォントを紹介していきます！
まずは、ゴシック体から！
- Noto Sans JP
- M PLUS 1p
- 筑紫A丸ゴシック
Noto Sans JP
Noto Sans JPは、AdobeとGoogleが開発したフォントで、日本語Webフォントの定番となっています。癖もなく可読性に優れており様々なサイトで使用されています。ウエイトも豊富に揃っているため、シーンに合わせた使い分けが可能です。
デジタル庁のロゴやWebサイトで使用されていることでも有名です。Google Fonts 、Adobe Fontsで使用することができます。
M PLUS 1p
M PLUS 1pは、森下浩司 氏によってデザインされたオープンソースの日本語フォントです。視認性が高く、小さい文字でも読みやすいです。ふところが広く、直線と曲線のメリハリが強いため、ポップでやわらかい印象を与えます。ウエイトのバリエーションが広いのも特徴です。Google Fonts 、Adobe Fontsで使用することができます。
筑紫A丸ゴシック
筑紫A丸ゴシックは、FontWorks株式会社で人気の筑紫フォントシリーズの1つです。丸みのある温かくて優しい印象を与えるフォントです。ウエイトも揃っておりロゴやタイトル、見出しなどで利用されていることが多いです。Adobe Fontsで使用することができます。
明朝体のおすすめWebフォント3選
次に、明朝体のおすすめWebフォントを３種類紹介します！
- Noto Serif JP
- 筑紫Aオールド明朝
- さわらび明朝
Noto Serif JP
Noto Serif JPは、Noto Sans JPと同じく AdobeとGoogleが開発したフォントです。可読性が高くスタンダードな明朝体ですが、やや丸みを帯びており親しみやすい印象を与えます。ウエイトも豊富に揃っており様々なシーンで使われています。Google Fonts 、Adobe Fontsで使用することができますが、Adobe Fontsでは源ノ明朝として掲載されています。
筑紫Aオールド明朝
筑紫Aオールド明朝は、FontWorks株式会社で人気の筑紫フォントシリーズの1つです。伸びやかなハネ、ハライが美しいオールドスタイルの明朝体です。古風でありながらも文字幅が狭いためスタイリッシュでモダンな印象も持ち合わせています。タイトルや見出しなどに使われることが多いです。Adobe Fontsで使用することができます。
さわらび明朝
さわらび明朝は、Google Fontsで提供されているスタンダードな明朝体です。程よい太さがあり可読性に優れています。小さい文字でも読みやすいため様々なシーンで利用できます。Google Fontsで利用することができます。
サンセリフ体のおすすめWebフォント4選
続いて、サンセリフ体のおすすめWebフォントを4種類紹介します！
- Open Sans（オープン サンス）
- Roboto（ロボト）
- Lato（ラト）
- Montserrat（モントセラト）
Open Sans（オープン サンス）
Open Sansは、「欧文フォントの王様」Helveticaの代用として使えそうな、読みやすく汎用性の高いフォントです。多数のウエイトとスタイルが揃っています。Google Fonts 、Adobe Fontsで使用することができます。
Roboto（ロボト）
Robotoは、Open Sansと同様に可読性の高い文字として人気があり、こちらの方がややスタイリッシュな印象です。AndroidやChrome OSのシステムフォントとして組み込まれているとともに、Googleが提唱した「マテリアルデザイン」でもRobotoの使用が推奨されています。Google Fonts 、Adobe Fontsで使用することができます。
Lato（ラト）
Latoは、GillSansの代用として使えそうな可読性の高く、柔らかい印象のあるフォントです。游ゴシックのような日本語フォントとの相性も良いです。Google Fonts 、Adobe Fontsで使用することができます。
Montserrat（モントセラト）
Montserratは、Gothamの代用として使えそうな、やや横幅のあるフォントです。親しみやすくポップな印象があります。Google Fonts 、Adobe Fontsで使用することができます。
セリフ体のおすすめWebフォント4選
最後に、セリフ体のおすすめWebフォントを4種類紹介します！
- Garamond（ガラモンド）
- Baskerville（バスカヴィル）
- Clarendon（クラレンドン）
- Bodoni（ボドニー）
Garamond（ガラモンド）
Garamondは、16世紀にフランスで生まれた古典的なフォントです。癖がなく可読性に優れているため雑誌や書籍によく使用されています。Google Fonts 、Adobe Fontsで使用することができますが、Google Fontsの場合はCormorant Garamondを使用します。
Baskerville（バスカヴィル）
Baskervilleは、18世紀のイギリスで生まれた伝統的なフォントです。しっかりとした線幅と細いセリフが特徴的で優雅な印象を与えます。Google Fonts 、Adobe Fontsで使用することができますが、Google FontsではLibre Baskervilleという名称で掲載されています。
Clarendon（クラレンドン）
Clarendonは、19世紀初頭にイギリスで生まれた古典的なスラブセリフ体のフォントです。直線的で太めなセリフがあり、力強い印象を与えてくれます。可読性も高く、書籍の見出しなどに使われます。Adobe Fontsで使用することができます。
Bodoni（ボドニー）
Bodoniは、18世紀にイタリアの印刷工場で誕生したモダンセリフ体のフォントです。均整のとれた形で、高いコントラストと大胆なセリフが特徴的です。通常のセリフ体よりも細くて繊細な線が使われているため、大きなサイズでの使用に適しています。Google Fonts 、Adobe Fontsで使用することができますが、Google Fontsの場合Prataという類似フォントを使用します。
まとめ
使用するフォントによって、閲覧するユーザーに与える印象は大きく変わります。同じゴシック体であっても、文字の縦横比や丸みの帯び方、ウエイトなどによって雰囲気が変わってきます。
また、フォントの組み合わせ方もデザインするうえで重要なポイントとなります。一番収まりの良い組み合わせは、同じフォントスタイルを使用することです。見出しと本文で目立たせたい箇所に、コントラストがつくようフォントを組み合わせることで読みやすさや安定感が生まれます。
いくつかのフォントパターンを見比べながら最適な組み合わせを探してみてください！
