-1.jpeg?width=48&height=48&name=DSC_2387%20(1)-1.jpeg){kind=small}
Webサイトにどのようなフォントを採用するか。細かい部分に感じるかもしれませんが、どのフォントにするかで読者に与えるイメージが変わってきます。どのようなときにどのフォントを使えば良いのかを考える前に、まずはフォントの基本をおさえましょう。
初心者でも手軽なデザインが可能なCanvaを体験しませんか？
本ガイドではテンプレートの選び方やデザイン編集を画像入りで紹介。無料で使えて、インストールは不要のCanvaを使えば、ブログ画像やプレゼン資料、パンフレットなど、幅広い素材が作成可能です。
おしゃれで多彩なテンプレートを使って、簡単に洗練されたデザインを完成させましょう。
本記事ではフォントの種類や種類ごとのメリット・デメリットのほか、よく使われる定番フォント、気になったフォントの調べ方を解説します。
無料で使える！デザイン作成ツールCanvaの使い方基礎
非デザイナーでも無料で楽にデザインを作成できる！ デザインツール「Canva」を使いこなす方法を画像入りで解説します
- 無料で使えるCanvaの始め方
- テンプレートの選び方
- 外部リンクの設置方法
- デザインの共有方法
今すぐダウンロードする
全てのフィールドが必須です。
Webサイトでよく使われるフォントは2種類
Webサイトの一般的なフォントは、「システムフォント」と「Webフォント」に大別されます。システムフォントだと「游ゴシック」や「ヒラギノ」などが、Webフォントだと「Google Fonts」や「Noto Sans JP」などが有名です。一度は聞いたことのある方も多いのではないでしょうか？
以下、各フォントの特徴やメリット・デメリットについて見ていきます。
システムフォント（デバイスフォント）とは？
「システムフォント」とは、コンピューターのOS（オペレーティングシステム）に最初からインストールされているフォントのことです。閲覧者の端末（デバイス）内にあるフォントを使用して文字を表示するので、「デバイスフォント」とも呼ばれます。
システムフォントのメリット
システムフォントのメリットは以下の2点です。
フォントのライセンスを気にしなくてよい
OSにあらかじめ組み込まれているので、個別にフォントデータをサーバーにアップロードする必要がなく、ライセンスも気にする必要がありません。皆さんもOSインストール済みのパソコンやスマホを使い始める際、Webサイトを参照するためにわざわざ個別にライセンス料を支払われたことは一度もないはずです。
表示速度が速い
Webサイト閲覧の時、閲覧者のデバイス内にあるフォントを使用して文字を表示するので、サーバーにあるフォントデータを読み込む必要がなくその分表示が速くなります。
システムフォントのデメリット
一方、デメリットとしては以下2点が挙げられます。
表示されるフォントをデバイス間で統一できない
Webサイトの文字フォントを端末ごとのシステムフォントに依存させると、指定したフォントデータが閲覧者の端末にインストールされていない場合、代わりに別のフォントが代用されます。
例えば上図のケースだとデザイナーがホームページで「ヒラギノ明朝」フォントを使ってサイトを制作しても、端末によってはヒラギノ明朝フォントがインストールされておらず、結果として游ゴシックなどすでに入っているもので代替表示されてしまいます。
このように、表示されるフォントがデバイス間でバラバラになってしまうリスクがあります。
フォントの選択肢が少ない
OSにあらかじめインストールされているフォントなので拡張性がなく、選べるフォントの数も多くありません。フォントにこだわりたい方にとっては不十分だと感じるかもしれません。
よく使われているシステムフォント
それでは、具体的にどんなシステムフォントがあるのでしょうか？一般的なものをご紹介します。
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フォントとは？
「Webフォント」はWebサーバーやクラウドサーバー等に置かれたフォントサーバーからフォントを読み込み、サイトの文字を表示する仕組みです。
多くのWebフォントサービス事業者が独自フォントを多数提供しており、それらのライセンスを購入しフォントサーバーにインストールして利用します。
Webフォントのメリット
Webフォントのメリットは以下の2点です。
デバイスに関係なくフォントを統一できる
サーバーにあがっているフォントを読み込ませるので、デバイスでのフォントデータの有無にかかわらず、ほとんどの端末で意図した書体を表示させられます。
上の例だとサーバーでヒラギノ明朝を指定しているので、デバイスに関係なくヒラギノ明朝フォントで表示を統一できるというわけです。
デザイン性の高いフォントを使える
Webフォントには大抵ライセンス料がかかりますが、その分デザイン性の高いフォントを使用できます。選択肢が多く、好みにあったフォントをじっくり探せます。
Webフォントのデメリット
対してWebフォントのデメリットは以下3点があります。
読み込みに時間がかかる
最近はだいぶ改善されたようですが、主に以下の理由からWebフォントは読み込みに時間がかかります。
- Webフォントそのものが重い
- システムフォントからWebフォントへ切り替えるのに手間取る
日本語のフォントが少ない
先ほど色々なフォントを使えるとお伝えしましたが、和文フォントに関しては種類がそれほど多くありません。「欧文フォントだと希望のデザインがあるけれど、日本語版がない」といったことがしばしば発生します。
利用料金がかかるフォントもある
特に和文フォントの場合、有料のものがほとんどです。また年額支払などのサブスクリプションモデルが多いので、ランニングコストがかかる可能性があります。
よく使われているWebフォント
それでは具体的にどんなWebフォントがあるのでしょうか？よく見かける、一般的なものをご紹介します。
1.Google Fonts
Google Fontsとは、米Google提供の完全無料でWebフォントを使用できるサービスです。画面内の「Language」プルダウンで「Japanese（日本語）」を選択すると、和文Webフォントのみが表示されます。
現在（2020年5月9日時点）は8つの和文WebフォントがGoogle Fontsで利用でき、今回はその中から3つをご紹介します。
Noto Sans JP
「Noto」という頭文字がつくWebフォントは、GoogleとAdobeの2社が、「文字化けしないフォントを作る」という命題のもとで共同開発したものになります。
コンピューターで表示不可の文字がある場合、文字の代わりに小さい四角（□）が表示されることがあります。この四角は世界共通で「トーフ（豆腐）」と呼ばれています。両社はこのトーフを解消して、全ての言語が自然に表示されるフォントを開発すべく「No more tofu」から「Noto」と命名しました。
その中でも「Noto Sans JP」は、和文Google Fontsにおいて最も基調となるWebフォントの一つで、ゴシック体の和文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 Typekit）
「Adobe Fonts」は、アドビ システムズ社が提供するサブスクリプション形式の有料フォントライブラリサービスです。
日本語では、「源ノ角ゴシック/明朝」「小塚ゴシック/明朝」「TB新聞ゴシック/明朝」など、2020年5月9日現在で合計107の和文Webフォントがあります。もちろん先ほどお話したNotoシリーズも、例えば「Noto Sans CJK JP」といった名称で利用可能です。
3.TypeSquare
フォント一覧 | Webフォント TypeSquare [タイプスクウェア]
「TypeSquare」は、株式会社モリサワが提供する有料Webフォントサービスです。こちらも月額課金型のサブスクリプションモデルです。
日本の企業によるフォントサービスということで、和文フォントが900件以上と非常に充実しています。
外部のWebサイトで使われているフォントを調べる方法
様々な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拡張機能「WhatFont」を使う
Chromeを使用している場合、拡張機能「WhatFont」を使えば、より簡単にサイトのフォントを調べられます。
まずはChromeウェブストアから、WhatFontをChromeに追加しましょう。
追加されたら、ブックマークバーの上に「f?」のマークが表示されます。
これでセッティングは完了です。
フォントを調べたいサイトに行って、上記のボタンを押しましょう。すると以下のような表示ボックスが出現します。
この状態になったら、あとは調べたいテキストの上にマウスを移動させるだけです。各文字の上に、フォント情報が表示されるようになります。
まずはスタンダードなフォントを覚えておこう
WebデザイナーでなくともWebサイト制作に携わるのであれば、よく使われるフォントの種類は覚えておきましょう。よく使われるフォントというのは、つまりは多くの方にとって読みやすい、受け入れてもらいやすいということです。
フォントで最も重要なのは読みやすさであり、その次にWebサイトの雰囲気に合うデザインかどうかを確認するべきです。今回ご紹介したフォント群は、読みやすさで言えば問題ないため、まずはこの中から自社Webサイトに合うものを選定してみるといいかもしれません。
いろいろなフォントの使い方を見て、表現の幅を広げていきましょう。
