独学デザイン入門

Webデザインの出来を左右するおすすめの【フォント】と選び方を解説

この授業は次のような方におすすめです。

・Webデザイン初心者でどんなフォントがあるのかを知りたい方

・Webデザインの出来を左右するフォントの選び方を知りたい方

・フォントについて苦手意識を持っている方

この授業を受けていただくことで、これらの疑問や悩みを持っている方の助けになって、Webデザインを作る際に上手なフォントの選び方ができるようになりますよ。

どうぞ最後までご覧になってください。

Webサイト上で表示される2種類のフォント

先生
先生
まずはフォントの種類の説明の前に、Webサイトに表示されるフォントについてお話ししてくね。

デザイニャー
デザイニャー
自分で設定したフォントが、Webサイトではどんな風に表示されるか、知ってるかニャン?

先生
先生
Webサイトの上でみられるフォントは、Webサイトの仕組みの関係で、自分で設定した通りのフォントで表示されるとは限らないんだ。

デザイニャー
デザイニャー
それってどういうことなのかニャン。

先生
先生
そこでまずはフォントがWebサイト上に表示される仕組みについて説明していくね。Webサイト上でテキストを表示する方法は次の2通りがあるんだ。

・システムフォント(デバイスフォント)

・Webフォント

先生
先生
詳しく説明すると次の通りなんだ。

・システムフォント ⇨ 元々ユーザー側のデバイスにインストールされているフォントを利用する。

・Webフォント ⇨ サーバー上にあるフォントファイルを読み込んで表示する。

デザイニャー
デザイニャー
Webデザイナーは、Webサイトの閲覧上、今紹介しているシステムフォント(デバイスフォント)とWebフォントのどちらを使うのかを考える必要があるんだ。

先生
先生
それでこれからは次の4つのことについてお話ししていくね。

・システムフォント(デバイスフォント)のメリット

・システムフォント(デバイスフォント)のデメリット

Webフォントのメリット

・Webフォントのデメリット

システムフォント(デバイスフォント)のメリット

先生
先生
システムフォント(デバイスフォント)のメリットは次の2つだよ。

・サイトの表示速度が速い

・ライセンス料がかからない

先生
先生
システムフォント(デバイスフォント)を使った時にサイトの表示速度が速いのは、インストールされているフォントを表示させるだけだからなんだ。

デザイニャー
デザイニャー
ライセンス料がかからないのも、OSにデフォルトにインストールされているからなんだニャン。

システムフォント(デバイスフォント)のデメリット

先生
先生
その一方、システムフォント(デバイスフォント)のデメリットは次の通りなんだ。

・OSフォントの標準フォントは種類が少ないから選択肢が限られてくる。

先生
先生
パソコンのOSやバージョンによってもインストールされているフォントが違うことも多いから、Webサイト上では、指定したフォントで表示されなくて、その代わりに大替フォントといって、替わりにちがフォントが表示されてしまうことがあるんだ。

デザイニャー
デザイニャー
例えば、ヒラギノというフォントは、Macでは標準フォントだけれど、Windowsにはないフォントだから、Windowsでみると、大変えフォントで表示されてしまうのが、その例かニャン。

Webフォントのメリット

先生
先生
Webフォントのメリットは次の7つだよ。

・デバイスに関係なく指定したフォントが表示できる

・思い通りの印象を与えることができる

・たくさんの選択肢から選ぶことができる

・拡大しても美しい

・簡単に情報の修正や更新ができる

・SEO対策ができる

・レスポンシブデザインとも相性が良い

デバイスに関係なく指定したフォントが表示できる

デザイニャー
デザイニャー
Webフォントのメリットは、サーバー上のフォントでーたを読み込ませることで、どんなパソコンでも関係なく指定したフォントで表示されることがまず第一だニャン。

先生
先生
さらに、ライセンス規定に従うことで、デザイン性が高いフォントを使うこともできるんだ。

思い通りの印象を与えることができる

デザイニャー
デザイニャー
Webサイトにフォントを表示するのに、閲覧者の端末を問わないので、Webサイトを制作する人が狙った通りの表示になるんだニャン。

先生
先生
そうだね。だから、デザイン上の見た目がどのパソコンでもと移されて表示されるから、閲覧者全員に同じ印象を与えることができるんだ。

たくさんの選択肢から選ぶことができる

デザイニャー
デザイニャー
システムフォント(デバイスフォント)と比べて、Webフォントはフォントの種類が圧倒的に多いんだよニャン。

先生
先生
そうだね。だから、Webサイトのイメージに合ったフォントを選ぶことができて、他者との差別化やWebサイトのイメージを文字で表現することができるんだ。

拡大しても美しい

先生
先生
画像は拡大したらギザギザに荒れてしまうけれど、Webフォントはベクター形式だから、いくら拡大しても美しいんだ。

簡単に情報の修正や更新ができる

デザイニャー
デザイニャー
これまでは、印象的に伝えたい文や目立たせたい部分に好みのフォントを指定する場合には、一つ一つ画像を作成していたけれど、文字に変更がで出てきたりするたびに、画像を作り直す必要が出て面倒だったニャン。

先生
先生
その点、Webフォントだったら、そういった修正や更新の時に簡単に対応できて、工数削減にもなってぐっと便利なんだ。

SEO対策ができる

デザイニャー
デザイニャー
従来行われているような、画像を作成して配置した方法だと、文字情報じゃなくて、画像として認識されるから、alt属性を入れていないとSEOで不利になるニャン。

先生
先生
alt属性というのは、何かの問題が発生して画像が表示されないときに、表示されるテキストのことで、「代替テキスト」とも呼ばれているんだ。

デザイニャー
デザイニャー
代替テキストがあると、画像が表示されなくても、どんな内容の画像なのかということをユーザーも理解できるようになっているんだニャン。

先生
先生
そうだね。話は戻って、Webフォントはテキストだから、文字情報として認識されるため、SEOにも効果的なんだよ。

デザイニャー
デザイニャー
自動翻訳や音声読み上げソフトとも連携することができるから便利だニャン。

レスポンシブデザインとも相性が良い

デザイニャー
デザイニャー
Webフォントはレスポンシブデザインとも相性がとても言いそうだニャン。

先生
先生
そうだね。画像で表現する時には拡大縮小しかできないけれど、テキストだと、折り返し位置が変わることで対応できるから、パソコン、スマートフォン、タブレットなど様々な端末があるけれど、それぞれに応じて自動で調整できるから、レスポンシブデザインと相性が良いと言えるんだ。

Webフォントのデメリット

先生
先生
その一方、Webフォントには次の3つのようなデメリットがあるんだ。

・表示速度が遅くなる

・費用がかかる

・ブラウザやOSによって表示位置が変わることもある

表示速度が遅くなる

デザイニャー
デザイニャー
Webフォントは、フォントデータの読み込みが必要だから、そのことから表示速度が遅くなるというデメリットがあるんだニャン。

先生
先生
特に日本語のひらがなやカタカナ、漢字などは文字の数が膨大でフォントデータが重くなるから、表示速度が遅くなりがちになるんだ。

デザイニャー
デザイニャー
でも、Webフォントが登場したばかりの頃と比べれば、今は随分改善されていて、ページの表示速度がとても早くなっているようだニャン。

費用がかかる

デザイニャー
デザイニャー
GoogleフォントやAdobeフォントなど、主要サービスのほとんどが無料で使えるけれど、有料の場合もあるんだニャン。

先生
先生
買い切りタイプのものもあるけれど、安価には従量課金(PV数依存)のものもあって、閲覧されればされるほど費用がかかる仕組みになっているんだ。

デザイニャー
デザイニャー
PV数を増やすことを目的としたメディアサイトでWebフォントを使ったりすると、PVすうが伸びるほどランニングコストが増えてしまうから、注意するようにしなくちゃニャン。

ブラウザやOSによって表示位置が変わることもある

デザイニャー
デザイニャー
フォントによっては、文字のベースラインがずれてしまうこともあるから、全ての閲覧環境で検証作業をするのが大変だったりもするニャン。

先生
先生
この現象を軽減する機能が用意されたWebフォントサービスもあるから、チェックしてみると良いよ。

書体とフォント

先生
先生
Webデザインで文字を使うのに、「書体」や「フォント」という言葉を耳にすることが多いけれど、この2つは同じものだと思われがちだけれど、厳密には次のように違うものなんだ。

・書体 ⇨ 特定されるデザインで統一されている文字のこと。明朝体やゴシック体のことを指す。

・フォント ⇨ 書体の太さや形などを表示するデータのこと。レギュラー、ボールド、イタリック、というように特徴で区別されている。

デザイニャー
デザイニャー
このように、本来は違う意味のものだったけれど、今では同じように扱われていることもあって、Webデザインでは同じ意味で使われることが一般的になっているニャン。

先生
先生
だから、ここでは同一のものとして考えていこうね。書体には大きく次の2種類があるよ。

・和文書体

・欧文書体

グラフィックデザインに欠かせないフォントの特徴と選び方の3ポイントこの記事は、こんな方におすすめです。 グラフィックデザイナーになりたくて、勉強しているんだけれど、フォントの種類が多すぎて、どれに...

Webフォントの選び方

先生
先生
Webフォントを探すには、Google Fontなどを使うのが定番だよ。

デザイニャー
デザイニャー
日本語のフォントだけでなく、欧文書体から特殊なフォントまで豊富に揃えられていて、幅広いデザイン表現に使えるニャン。

先生
先生
Webフォントを選ぶ時には次の2つのことを考えて選ぶようにしよう。

・ブランドや内容に合ったものを

・視認性で選ぶ

ブランドや内容に合ったものを

デザイニャー
デザイニャー
Webページは、そのページ全体で使われているフォントを変更するだけで全体の印象をガラッと変えることができるんだニャン。

先生
先生
そうだね。そのフォントの方向性によって使われているフォントの傾向は次のように限定されることが多いんだ。

・明朝体 ⇨ リッチ、高級感、伝統、和風など

・丸ゴシック体・太めのゴシック体 矢印 ⇨ 可愛い、ポップなど

デザイニャー
デザイニャー
明朝体やゴシック体の中でもフォントの太さによってさらに雰囲気が変わるニャン。

先生
先生
タイトルの文字をウェイトが細いフォントで文字を開けて配置することで、知性や品格、ゆとりを感じるデザインになるし、太めのゴシック体を車体にすることで、勢いやスピード感が出てスポーティな雰囲気になるね。

視認性で選ぶ

デザイニャー
デザイニャー
Webサイトには、見た目が綺麗だったりかっこよかったりすることも、もちろん大切なんだけれど、その以前に情報の見やすさ、つまり視認性というのは必須だよニャン。

先生
先生
そうだね。デザインを制作する時には、情報が見やすくて、デザインとの相性が良いフォントを選ぶために、デザインに当てはめながら何度も検証してフォントを決めているんだ。

デザイニャー
デザイニャー
フォントを選ぶ時に視認性を考える点で注意するべきことは何なのかニャン?

先生
先生
それは、文章などに使う小サイズのフォントをどうするのかという部分なんだ。例えば、高級感を演出したいからと言って、Webページ全部のフォントを明朝体にしてしまうと、細かい文章が読みにくくなるのは、パソコンやスマートフォンなどの媒体によって表示方法が違ってくるということが原因なんだ。

ディスプレイではピクセルという小さい四角の点が集まって、画像や文字を表示しています。その中で1pxよりも小さかったり細かったりするものは、欠けたりに滲んでしまって、綺麗に表示しにくくなってしまいます。

先生
先生
明朝体は、横ラインが細いので、文字サイズが小さいとその部分が表示しにくくなって視認性が悪くなることが多いというわけなんだ。

Webデザインにおすすめのシステムフォント(デバイスフォント)

先生
先生
ここでは、Webサイトを作る時に使う定番のおすすめフォントを紹介するね。

・ヒラギノ角ゴシック

游ゴシック

・メイリオ

・ヒラギノ明朝

・游明朝

・リュウミン

・GEORGIA

・Helvetica

・Arial

ヒラギノ角ゴシック

先生
先生
ヒラギノ角ゴシックは、MacOSとiOSにインストールされているフォントだよ。

デザイニャー
デザイニャー
かっちりとして安定感があるし、とても読みやすいフォントだニャン。

先生
先生
だから、テキストとしても本文から見出しまで色々なものに使われているんだ。Windowsで使う場合は、ダウンロード製品を購入するか、モリサワのフォントライセンスを購入することで使うことができるよ。

游ゴシック

先生
先生
游ゴシックは、Windows8以降のWindowsとMacOSにインストールされているフォントだよ。

デザイニャー
デザイニャー
ヒラギノ角ゴと比べてみると、ちょっと字面が小さくて、ゆったりした上品な印象だニャン。

先生
先生
最近のWeb業界内でよく使われていて、デザインにもコーディングのどちらにも使われているんだ。

デザイニャー
デザイニャー
迷ったら游ゴシックを使えば間違いはなしという感じかな。

メイリオ

先生
先生
メイリオは、Windows Vista以降のWindowsOSにインストールされているフォントで、Macには標準搭載されていないけれど、ダウンロードすることで使うことができるよ。

デザイニャー
デザイニャー
懐が広めでやや横に長い感じで明るい印象のフォントだニャン。

先生
先生
メイリオは、綺麗で読みやすいところが特徴で、名前の由来は「明瞭」から来ているよ。

ヒラギノ明朝

先生
先生
ヒラギノ明朝は、Mac OSとiOSにインストールされているフォントだよ。

デザイニャー
デザイニャー
字面が大きくて流れるような筆遣いで、とても読みやすくて、色々な要素に使われているフォントだニャン。

先生
先生
Windowsで使いたいなら、ダウンロードするか、モリサワのフォントライセンスを購入することで使うことができるよ。

游明朝体

先生
先生
游明朝は、Windows8.1OSとMac OSにインストールされているフォントだよ。

デザイニャー
デザイニャー
文字間にゆとりがある落ち着いていて上品な印象だニャン。

先生
先生
時代小説が組めるような明朝体として作り出された書体で、雰囲気が品が良いフォントだね。

リュウミン

先生
先生
リュウミンは、森川龍文堂明朝体をベースにして作り出されたフォントだよ。

デザイニャー
デザイニャー
横線の右端や右肩のうろこには柔らかさが感じられて、親しみやすい雰囲気だニャン。

先生
先生
バランスがとれた文字だから、テキストとして本文にも見出しなど幅広い要素に使われているよ。

GEORGIA

先生
先生
GEORGIAは、WindowsとMacにインストールされているフォントだよ。

デザイニャー
デザイニャー
紙媒体ではなくて、パソコンように開発されているフォントで、画面で見ても文字が潰れにくく設計されたフォントだニャン。

先生
先生
本文に合うように細かいところまで考えて作られているんだ。

Helvetica

先生
先生
Helveticaは、Macにインストールされているフォントだよ。

デザイニャー
デザイニャー
シンプルな書体なんだけれど、力強さを感じて、視認性が高いニャン。

先生
先生
タイトルや本文や見出しなど幅広い要素に使われているフォントだよ。

Arial

先生
先生
Ariaiは、WindowsとMacんびインストールされているフォントだよ。

デザイニャー
デザイニャー
Helveticaと似ているから、代用フォントとしても使われていているんだニャン。

先生
先生
文字間がやや広くて、シンプルで使いやすいし、読みやすいから、テキストの本文や見出しの他、ボタンのデザインなど、幅広く使われているよ。

おすすめのWebフォント

デザイニャー
デザイニャー
日本語のWebフォントは、欧文書体のものとは違って、閲覧上の理由でなかなか普及していないようだニャン。

先生
先生
でも、利便性は上がってきているんだよ。Googleが無料で提供しているおすすめの和文と欧文のWebフォントには次のようなものがあるよ。

・Noto Sans

・Noto Serif

・M Plus 1

・Roboto

・Oswald

・Montserrat

Noto Sans

デザイニャー
デザイニャー
Noto Sansは、和文のWebフォンで、よく游ゴシックの代わりに使われることがあるニャン。

先生
先生
少し丸みがあって優しい印象を与えてくれる読みやすいゴシック体で、テキストの本文や見出しの他、キャッチコピーなど色々なものに使われているんだ。

Noto Serif

デザイニャー
デザイニャー
Noto Serifは、明朝体の和文Webフォントで、游明朝の代わりに使われることがあるニャン。

先生
先生
Noto Sansと同じで、さまざまな場面で使われている明朝体だよ。こちらもNoto Sansと同様に万能で使いやすい明朝体なんだ。

M Plus 1

先生
先生
M Plsus 1は、ほとんどの漢字に対応している、和文のWebフォントで貴重なんだ。

デザイニャー
デザイニャー
M Plsus 1は、ゆとりがあって読みやすいニャン。

先生
先生
数種類あるウェイトを利用することで、テキストの本文や見出し、そしてキャッチコピーにも使える、ゴシック体だよ。

Roboto

先生
先生
Robotoは、Googleのデザイナーが開発したサンセリフ体のWebフォントで、AndroidやChrome OSのサービスでよく利用されているんだ。

デザイニャー
デザイニャー
Robotoは、6種類のウェイトが用意されていて、italicのパターンもウェイトごとに用意されているところが嬉しいニャン。

Oswald

デザイニャー
デザイニャー
Oswaldは、長体のような細長いサンセリフ体のWebフォントだニャン。

先生
先生
すっきりとシャープな印象でスタイリッシュな印象を与えるから、デザイン性の高いWebサイトやキャッチコピーなどにも使われているよ。

デザイニャー
デザイニャー
DINという有料フォントが人気があるんだけれど、それに似ているニャン。

先生
先生
だから、DINの代わりに使われることも多いんだよ。

Montserrat

デザイニャー
デザイニャー
Montserratは、平体のようにどっしりとした安定感を感じるフォントだニャン。

先生
先生
そうだね。だから、小さい文字でも読みやす猪が特徴で、おしゃれな印象も与えるんだ。

デザイニャー
デザイニャー
見出しなどにも使いやすそうだニャン。

画像制作でおすすめのフォント

先生
先生
デザイン性が高くて愛されている、おすすめフォントは次の2つだよ。

・コーポレートロゴ

・うつくし明朝体

コーポレートロゴ

先生
先生
コーポレート・ロゴは、やや縦長でシンプルでモダンな印象を与える書体で視認性の高い、人気のあるフリーフォントだよ。

デザイニャー
デザイニャー
コーポレート・ロゴ、という名前の通り、会社のロゴを作るのにおすすめのフォトのようだニャン。

先生
先生
ロゴ以外にも、タイトルや見出しにも使われているよ。

デザイニャー
デザイニャー
幅が少し狭く作られているから、ちょっと長めの文章でも一文に収められるし、それでいて読みやすさを損なわない使い勝手がいいフォントのようだニャン。

うつくし明朝体

デザイニャー
デザイニャー
うつくし明朝体は、横書きの繋がりが滑らかなのが特徴な美しいフリーフォントだニャン。

先生
先生
文字の先には丸みを持たせてあるから、柔らかい印象を与えてくれる書体で、Webサイトだけでなく、お菓子のパッケージのロゴにも使われていたりして、人気があるんだ。

デザイニャー
デザイニャー
優しさや上品さが欲しい時に使うと活躍してくれそうなフォントだニャン。

フリーフォントは利用規約をよく確認して利用しよう

デザイニャー
デザイニャー
フリーフォントは、利用規約でWebでの埋め込みができない場合もあるから、チェックが必要だニャン。

先生
先生
フリーフォントをWebフォントとして使うには、フォントをウェブサーバーに丸ごとアップする必要があるんだ。

デザイニャー
デザイニャー
アップしたデータはダウンロードができるから、フォントの再配布となってしまうんだニャン。

先生
先生
また、軽量化するためにフォントをサブセットする場合は、データの改変になってしまうこともあるから注意が必要だよ。

フリーフォントをWebフォントとして使いたい場合は、ライセンスや利用規約をよく読んで確認してから使うようにしましょう。

先生
先生
ライセンスや利用規約で、再配布や改変をすることを禁止されていたり、Webフォントとしての埋め込みが許可されていない場合は、画像データとして作るようにすると良いよ。

デザイニャー
デザイニャー
フリーフォントの配布サイトでは、Webフォントの使用について書かれていることがほとんどだから、そう心配しすぎずに確認するニャン。

先生
先生
それで問題がないようだったら、サブセット化などしてしっかり軽量化して使ってみるといいよ。

まとめ

先生
先生
この授業では次のようなことをお話ししてきたよ。

Webサイト上で表示される2種類のフォント

・システムフォント(デバイスフォント)のメリットとデメリット

・システムフォント(デバイスフォント)のメリット

・システムフォント(デバイスフォント)のデメリット

・Webフォントのメリットとデメリット

・Webフォントの7つのメリット

・デバイスに関係なく指定したフォントが表示できる

・思い通りの印象を与えることができる

・たくさんの選択肢から選ぶことができる

・拡大しても美しい

・簡単に情報の修正や更新ができる

・SEO対策ができる

・レスポンシブデザインとも相性が良い

・Webフォントのデメリット

・表示速度が遅くなる

・費用がかかる

・ブラウザやOSによって表示位置が変わることもある

書体とフォント

・フォントの選び方

・ブランドや内容に合ったものを

・視認性で選ぶ

・Webデザインにおすすめのシステムフォント(デバイスフォント)

・ヒラギノ角ゴシック

游ゴシック

・メイリオ

・ヒラギノ明朝

・游明朝

・リュウミン

・GEORGIA

・Helvetica

・Arial

・おすすめのWebフォント

・Noto Sans

・Noto Serif

・M Plus 1

・Roboto

・Oswald

・Montserrat

・画像制作でおすすめのフォント

・コーポレートロゴ

・うつくし明朝体

・フリーフォントは利用規約をよく確認して利用しよう

私たちは頑張るあなたを応援しています。