masaca（@masaca_dApps）です。
Webデザインを学ぶならフォントの知識は欠かせません。フォントが変わるだけでユーザーに与えるイメージもガラッと変わりますし、デザインのクオリティもフォントによって大きく左右されます。
「Webデザインの95%はタイポグラフィである」という言葉もあるほど、Webデザインの中でフォントは最も重要な要素です。
フォントの知識を身につければ、効果的なフォントの使い方ができるようになりWebデザインのレベルも上がります。
今回は代表的なフォントの種類や、使い方について紹介します。
masaca
目次
和文フォント
和文フォントとは日本語のフォントのことです。
代表的な「ゴシック体」、「明朝体」、「筆書体」、「ディスプレイ体」の特徴について紹介します。
ゴシック体
ゴシック体は、明朝体と並んでよく使われる主要なフォントのひとつです。
すべての線が同じ太さで設計され、直線的なため小さくしても読みやすい（可読性）といった利点があります。
そのため駅名や標識など、どんな場面でも見やすさが必要な公共性のあるデザインに使われています。Webサイトの本文がゴシック体であることがほとんどなのは可読性を重視しているためです。
文字のウェイトをあげると力強いイメージをあたえることができます。
私がWebデザインでよく利用するゴシック体のおすすめフォント
- AXIS font
- ゴシックMB101
- 游ゴシック体
明朝体
明朝体は、ゴシック体と並んでよく使われる主要なフォントのひとつです。ゴシック体とは違い、線の太さが一定ではありません。
雑誌や新聞の本文でよく見かけます。印刷物でじっくり読ませる文章には、目に負担がかかりづらい細めの明朝体が使用されています。
和のイメージを強めたいときや、女性らしさを出すときなども有効です。
私がWebデザインでよく利用する明朝体のおすすめフォント
- A1明朝
- 丸明オールド
- リュウミン
筆書体
筆書体とは「篆書」、「隷書」、「行書」、「草書」、「楷書」などの筆文字のことです。
伝統や歴史を感じさせるものに使うと相性が良いです。
和風や中国風の演出にも使えます。
私がWebデザインでよく利用する筆書体のおすすめフォント
- 正楷書CB1
- 勘亭流
- DFP金文体
デザイン書体
デザイン書体はディスプレイ体ともいいます。文字そのものの特徴やインパクトが強いため、ロゴや見出しなどに利用されます。クセが強いので、本文に使用するには不向きですので注意しましょう。
文字だけで楽しさや怖さなどさまざまな印象を与えることができるので、使い勝手の良いデザイン書体をもっていると役に立ちます。
私がWebデザインでよく利用するデザイン書体のおすすめフォント
- TA-キリギリス
- ラグランパンチ
- コーポレート・ロゴ
欧文フォント
欧文フォントとは「アルファベット主体の言語に使用するフォントの総称」です。
日本語が含まれない、英数字・記号のフォントと思ってもらえれば大丈夫です。
代表的な「サンセリフ体」、「セリフ体」、「スクリプト体」、「デザイン書体」について紹介します。
サンセリフ体
サンセリフ体とは和文フォントでいうとゴシック体に属するものです。
ゴシック体と同じく、線の太さが一定のため視認性が求められる場面で使われます。
使い勝手がよく、クールで都会的な印象を強める際にも使えます。
私がWebデザインでよく利用するサンセリフ体のおすすめフォント
- Helvetica
- Avenir
- Century Gothic
セリフ体
セリフ体とは和文フォントでいうと明朝体に属するものです。
和文フォントの明朝体と同じく、線の太さが一定ではありません。
文字の先端にある飾りを「セリフ」といいい、セリフがあるフォントをセリフ体といいます。
伝統や歴史、クラシックなイメージを出したいときに使えます。
私がWebデザインでよく利用するセリフ体のおすすめフォント
- Georgia
- Didot
- TRAJAN
スクリプト体
スクリプト体とは筆記体フォントのことで、文字同士がつながっており連続性があるものです。
大きく分けて、フォーマルなものとカジュアルなものがあります。
高級感を出したり、手書き風のイメージを演出したいときなどに使われます。
私がWebデザインでよく利用するスクリプト体のおすすめフォント
- Snell Roundhand
- Brush Script
- Jellyka Saint-Andrew’s Queen
デザイン書体
デザイン書体については和文フォントと同様です。文字そのものの特徴やインパクトが強いため、ロゴや見出しなどに利用されます。クセが強いので、本文に使用するには不向きですので注意しましょう。
欧文フォントのデザイン書体についてはWebサイトの飾りとして使う場面も多いです。
私がWebデザインでよく利用するデザイン書体のおすすめフォント
- Rosewood
- Cooper
- Stencil
フォントを学ぶためにオススメの本
フォントの知識を深めるなら本の知識が必須です。一度身につければWebデザインでずっと役に立つ強力な武器になります。
私がこれまで読んだフォントの本で、「間違いなくおすすめできる本」を紹介します。
masaca
タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-
Webサイトの見出しやキャッチコピーのデザイン力が身につきます。サイトロゴのデザインの考え方も身につきます。
フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？
フォントで人に与える印象は大きく変わります。狙ったイメージ通りのフォント選びができるようになります。
欧文書体―その背景と使い方
どういう雰囲気を出したいかによって書体を使い分けるヒントがわかりやすく解説されています。
欧文書体 2 定番書体と演出法
効果的な欧文書体の使い方をより実践的に解説しています。さらに欧文フォントの知識を深められます。
まとめ
和文フォントと欧文フォントの種類と使い方を把握すれば、Webデザインでユーザーに与えたいイメージをコントロールすることができるようになります。
適切な場面と上手な使い方を知ることでWebデザインのクオリティアップにつながります。
フォントの知識を学ぶなら本で身につける方法が確実です。Webサイトの模写で感覚的に身につけることはできますが、しっかりとした知識があれば今後ずっと使える武器になります。
masaca
現役のWebデザイナーが仕事でよく使う日本語フリーフォント5選 
【永久保存版】Webデザイン初心者でもわかる！フォントの選び方を5つの事例で解説
コミュニティではWebデザイン勉強中のあなたにもっと役立つ情報を発信中！
SPONSORED LINK
コメントを残す