無料で簡単に使える！デザイン作成ツールCanvaの使い方基礎
非デザイナーでも無料で簡単に高品質なデザインを作成できる！
デザインツール「Canva」を使いこなす方法を画像入りで解説します
Webサイトでよく使われるフォントは2種類
Webサイトでよく使われているフォントには、「システムフォント（デバイスフォント）」と「Webフォント」の2種類があります。それぞれの主な特徴とフォントの例は下表のとおりです。
|
|
主な特徴 |
フォント例 |
|
システムフォント |
OSにあらかじめインストールされているフォント。 |
游ゴシック |
|
Webフォント |
サーバーにアップロードされているフォント。 |
Google Fonts |
フォントの種類ごとのメリット・デメリット
システムフォントとWebフォントのメリット・デメリットはそれぞれ次のとおりです。
システムフォント（デバイスフォント）
システムフォントのメリットとして、ライセンスを気にする必要がない点が挙げられます。ユーザーが使用している端末のOSにインストールされているフォントのため、利用に際して料金が発生しません。また、デバイス内のフォントを使用してWebサイトを表示することから、サーバー上のフォントデータを読み込む必要がなく、表示速度が速いというメリットもあります。
一方で、システムフォントにはデメリットもあります。表示されるフォントは端末にインストールされているフォントに依存するため、Webサイト作成者が意図したとおりのフォントで表示されるとは限りません。表示されるフォントをデバイス間で統一できない点がデメリットです。
また、フォントの選択肢が少ないという弱点もあります。フォントにこだわりたい方にとっては、意図するデザインを十分に表現できないと感じるケースもあるでしょう。
Webフォント
Webフォントのメリットとして、デバイスを問わず統一されたフォントを表示できる点が挙げられます。サーバーにアップされているフォントを読み込んでWebサイトを表示するため、デバイス内のフォントデータの有無にかかわらず、意図したとおりのデザインにすることが可能です。また、フォントの選択肢が多くデザイン性の高いフォントを使用できるというメリットもあります。
デメリットとして、ページの読み込みに時間がかかる可能性があります。Webフォントそのもののデータサイズが大きい場合や、システムフォントからWebフォントへの切り替えに時間を要する場合があるからです。また、日本語のWebフォントは欧文フォントと比べて種類が限られていることや、利用料金がかかるフォントもあるといった点もデメリットとして挙げられます。
よく使われているシステムフォント6選
システムフォントには具体的にどのような種類があるのでしょうか？一般的なものをご紹介します。
1. 游ゴシック
「游ゴシック」は、2008年に有限会社字游工房（じゆうこうぼう）が発売した、プロフェッショナル向け独自書体「游書体」シリーズの和文ゴシック体フォントです。「ゆうごしっく」と読みます。
長文での表現を前提に組まれた細身のフォントで、プレゼン資料よりは報告書などのドキュメント向きです。
こちらは現在WindowsとMacに標準搭載されています。
2. 游明朝
「游明朝」とは、先述の游ゴシックと同じ字游工房が、2002年に発売した和文の独自書体で、「ゆうみんちょう」と読みます。「時代小説が組めるような明朝体」というキーワードのもと、書籍で小説を読むのを目的に開発された「游明朝体 R」を核としたフォントシリーズです。文字の大きさがそろった現代的な漢字と、伝統的な字形を生かしたスタンダードな仮名の組み合わせが特徴となっています。
こちらは現在WindowsとMacに標準搭載されています。
3. ヒラギノ
「ヒラギノ」も字游工房がデザインした書体で、画像を多く使うビジュアル雑誌での使用を想定して開発された和文フォントシリーズです。日本語書体としては、UD書体、角ゴシック、丸ゴシック、明朝体、行書、仮名、デザイン書体があり、この他に中国語書体として簡体中文、繁体中文があります。
オーソドックスでベーシックな雰囲気を保ちつつ、明るくシャープで、かつ現代的でクールなイメージをデザイン要素として加味している点が特徴です。
こちらは現在Macに標準搭載されています。
4. メイリオ
「メイリオ」は、2006年にリリースされたWindows Vistaのシステムフォントとして開発された和文フォントです。日本語の「明瞭（めいりょう）」から来ています。
とくにパソコンなどのディスプレイ表示において、遠くからでも読みやすい視認性と判読性に優れている点が特徴です。
もともとはWindowsシリーズ用フォントでしたが、現在はWindowsとMacに標準搭載されています。
5. Times New Roman
「Times New Roman」は、1932年に英タイムズ紙が新聞用書体として開発したセリフ欧文書体です。セリフとは、 フォント線の端につけられる線・飾りのことで、「うろこ」や「ひげ」とも呼ばれています。なお、セリフのない書体は「サンセリフ」といいます。
もともと新聞用に開発されたフォントだけあって、見出しから本文まで、印字物を中心に幅広く使用されているフォントです。セリフも太くなく主張が少ないため、長文であっても可読性は下がりません。
こちらは現在WindowsとMacに標準搭載されています。
6. Arial
「Arial」は、米IBMが1982年に発表した業務用レーザープリンター「IBM3800」に向けて開発されたサンセリフ欧文書体です。上述のTimes New Romanと、セリフの有り無しを見比べてみてください。
シンプルなデザインゆえに使い勝手が良く、世界中で多くのデザインに使用されています。日本でも、トヨタやパナソニックなどで採用されています。
こちらは現在WindowsとMacに標準搭載されています。
よく使われているWebフォント3選
次に、Webフォントのうち一般的なものをご紹介します。
1. Google Fonts
Google Fontsとは、米Google 提供の完全無料でWebフォントを使用できるサービスです。画面内の「Language」プルダウンで「Japanese（日本語）」を選択すると、和文Webフォントのみが表示されます。
現在（2024年5月時点）は60以上の和文WebフォントがGoogle Fontsで利用でき、今回はその中から3つをご紹介します。（※一部ひらがなのみ使用可能なフォントも含む。）
Noto Sans JP
「Noto」という頭文字がつくWebフォントは、Google とAdobeの2社が、「文字化けしないフォントを作る」という命題のもとで共同開発したものです。
コンピューターで表示不可の文字がある場合、文字の代わりに小さい四角（□）が表示されることがあります。この四角は世界共通で「トーフ（豆腐）」と呼ばれています。両社はこのトーフを解消して、すべての言語が自然に表示されるフォントを開発すべく「No more tofu」から「Noto」と命名しました。
その中でも「Noto Sans JP」は、和文Google Fontsにおいて最も基調となるWebフォントの1つで、ゴシック体の和文Webフォントです。
特別大きな特徴があるフォントではありませんが、游ゴシックがデバイスによっては表示されないなど、システムフォントの運用で不便を感じた時に重宝します。
Noto Serif JP
先ほどのNoto Sans JPがゴシック体だったのに対し、「Noto Serif JP」は明朝体の和文Webフォントです。
こちらもNoto Sans JPと同様、游明朝などのシステムフォントの運用代替としてよく利用されます。
M Plus 1p
「M Plus 1p」は、2018年に新たに正式サポートが開始されたWebフォントです。ゆとりのあるデザイン構成となっています。
2. Adobe Fonts
「Adobe Fonts」は、アドビ システムズ社が提供するサブスクリプション形式の有料フォントライブラリサービスです。
日本語では、「源ノ角ゴシック/明朝」「小塚ゴシック/明朝」「TB新聞ゴシック/明朝」など、2024年2月現在で650以上の和文Webフォントがあります。もちろん先ほどお話ししたNotoシリーズも、たとえば「Noto Sans CJK JP」といった名称で利用可能です。
3. TypeSquare
フォント一覧 | Webフォント TypeSquare [タイプスクウェア]
「TypeSquare」は、株式会社モリサワが提供する有料Webフォントサービスです。こちらも月額課金型のサブスクリプションモデルです。
日本の企業によるフォントサービスのため、和文フォントが900件以上あり非常に充実しています。
他社サイトで使われているフォントを調べる方法
さまざまなWebサイトを回遊していると、「このフォントが見やすくて素敵だな」と思うタイミングがあると思います。その際、フォント名を気軽に調べられるとよいでしょう。ここでは、自社以外のWebサイトで使われているフォントを調べる方法を解説します。2つご紹介するので、ご活用ください。
1. ブラウザのデベロッパーツールを使う
私たちが使うブラウザには、デベロッパーツール（開発者ツール）が用意されています。これを使うことで、サイトで使われているフォントも調べられるのです。今回はChromeとFirefoxでの調べ方について、それぞれ解説します。
Chrome
まずは対象サイトをChromeで開き、調べたいフォントを範囲選択。右クリックして「検証」を選択します（ここではAppleのサイトを事例にします）。
すると、以下のようなChromeのデベロッパーツールが開きます。
ここで「CTR + F」を押して検索ウィンドウを開き、そこに <body> と入力して「Enter」を押し検索してください。フォント情報は一般的に「bodyタグ」で設定されているため、このように検索します。
すると検索結果が緑色に網掛けされて表示されるので、そこをクリックしましょう。
クリック後に表示される右側画面内に「font-family :」という表記があり、その右側に書かれている情報が使用されているフォント情報となります。
「SF Pro JP」が記載されていることがわかりますね。
Firefox
まずは対象サイトをFirefoxで開き、画面上部より「Tools ⇒ Web Developer ⇒ Inspector」の順に選択してください。
するとFirefoxの開発者ツールが開きます。その画面上右側に「Fonts」と表示された箇所があるので、クリックするとフォント情報を確認できます。
Chromeの時と同様、「SF Pro JP」が記載されています。
2. Chrome拡張機能を使う
Chromeを使用している場合、拡張機能「WhatFont」を使えば、より簡単にサイトのフォントを調べられます。
まずはChromeウェブストアから、WhatFontをChromeに追加しましょう。
追加されたら、ブックマークバーの上に「f?」のマークが表示されます。
これでセッティングは完了です。
フォントを調べたいサイトに行って、上記のボタンを押しましょう。すると以下のような表示ボックスが出現します。
この状態になったら、あとは調べたいテキストの上にマウスを移動させるだけです。各文字の上に、フォント情報が表示されるようになります。
Webフォントを選ぶ際の3つの注意点
Webフォントを選ぶにあたって、注意しておきたい3つのポイントを紹介します。
注意点1：使用するフォントの種類を増やしすぎない
Webフォントには多くの種類がありますが、実際にWebサイトに使用するフォントの種類は増やしすぎないよう注意しましょう。フォントの種類が増えるほどサーバーから読み込まれるデータ量も大きくなるため、ページの表示速度が遅くなりかねません。Webサイトの表示速度は検索エンジンの評価に影響する可能性があるほか、ユーザーの離脱を招く原因にもなるため注意が必要です。
また、フォントの種類が多いとデザインの統一性が損なわれやすく、全体として落ち着きのない印象を与えるページになりがちです。すっきりと統一されたデザインにするためにも、使用するフォントの種類を絞っておくことをおすすめします。
注意点2：ウエイト（太さ）を統一する
ウエイトとは、フォントの太さのことです。同じ種類（ファミリー）のフォントでも、ウエイトが異なれば別ファイルとして扱われます。ウエイトが異なるフォントを数多く使用すると、その分だけサーバーから読み込むデータ量が増加するため、読み込み速度が遅くなりかねません。ウエイトはできるだけ統一し、不必要に種類を増やしすぎないように注意しましょう。
注意点3：ライセンスを必ず確認する
Webフォントは有料・無料を問わず、さまざまな利用条件が定められています。有料で契約しているからといって、どのように使用しても問題ないわけではありません。月間PVなどの条件によって料金が変動するものや、商用利用などにおける利用制限が設けられているものもあるため注意しましょう。
Webフォントを使用する際には必ずライセンスや契約内容を確認し、適切な用途で活用する必要があります。
はじめはスタンダードなフォントの使用がおすすめ
Webサイトで使われるフォントにはシステムフォントとWebフォントの2種類があり、とくにWebフォントに関しては多くの種類が提供されています。今回紹介したような一般的なフォントは、多くのユーザーにとって読みやすく、受け入れられやすいフォントといえるでしょう。
デザインに特段のこだわりがない限り、はじめはスタンダードなフォントを選んで使用するのがおすすめです。今回紹介したフォントの例や選び方の注意点を、自社のWebサイトに使用するフォントを検討する際に役立ててください。
