Webデザインが学べるコミュニティを作りました!

【永久保存版】Webデザイン初心者でもわかる!フォントの選び方を5つの事例で解説

masaca(@masaca_dApps)です。

Webデザインをしているとき、「フォントがなかなか決まらずにデザインが完成しない・・・。」ということはよくあります。

私自身、どのフォントを選んだら良いのかよくわからず「手当たり次第フォントを試してもイマイチ自信を持って選べない」ということがよくありました。

フォントに関する基礎知識を身につければある程度、使うフォントの候補が浮かぶようになります。

今回はWebデザイン初心者の方でも、フォント選びに迷わないようにフォント選びの実例と使い方のポイントを紹介します。

masaca

フォントについて基本的な知識とポイントがわかればフォント選びに迷わなくなるよ。

男性らしさ・力強さを出すときのフォントの選び方

ゴシックMB101

男性らしさや、勢いや強さを出したいときは「大きく太いゴシック体を文字間を詰めて使う」ことで表現できます。

右上に傾けると、さらに勢いが強化されます。作例のように文字にグランジ(かすれ・汚れ)加工をするのも相性が良いです。

男性らしさ・力強さが出せるフォントの例

Futura

Gill Sans

男性らしさ・力強さを出すポイント

  • フォントはゴシック体で大きく・太くする
  • 文字間を詰める
  • 右上に傾ける
  • 枠からはみ出させる
  • グランジ(かすれ・汚れ)加工をする

女性らしさ・繊細さを出すときのフォントの選び方

筑紫オールド明朝 + Snell Roundhand

女性らしさや、繊細さ、やわらかさを出したいときは「細い明朝体を文字間を空けて使う」ことで表現できます。

女性らしさの表現は細めの明朝体を使うと相性が良いです。少し丸みを帯びた明朝体を使うとやわらかさを出すこともできます。
スクリプト体(筆記体フォント)と組み合わせてエレガントさをポイントで加えたりするとバッチリです。

かわいい・キュート・エレガント・ポップなどをフォントによってコントロールすることを意識しましょう。

女性らしさ・繊細さが出せるフォントの例

筑紫B丸ゴシック

游明朝体

女性らしさ・繊細さを出すポイント

  • 細身の明朝体や丸みのある明朝体を使う
  • 文字間を空ける
  • スクリプト体(筆記体フォント)を使う

子どもらしさ・元気さを出すときのフォントの選び方

新丸ゴ

子どもらしさや、元気さを出したいときは「丸みのある太いフォントや手書き風のフォントを使う」ことで表現できます。

文字にランダムな動きをつけたり、原色を使うと元気な印象が強化されます。

子どもらしさや、元気さが出せるフォントの例

じゅん

Gill Sans

子どもらしさや、元気さを出すポイント

  • 太くて丸みのあるフォントを使う
  • 手書き風のフォントを使う
  • 文字にランダムな動きをつける
  • 原色を使う

歴史や伝統を感じるフォントの選び方

Snell Roundhand + Trajan Pro + 游教科書体

歴史や伝統を感じさせるには、「楷書体や行書体を使ったり、明朝体でもオールド感があるフォントを使う」ことで表現できます。

文字間・行間には余裕を持たせて、飾り罫を使うとより伝統的な雰囲気を出すことができます。

歴史や伝統を感じさせるフォントの例

筑紫明朝

Optima

歴史や伝統を感じさせるポイント

  • 楷書体や行書体を使ったり、明朝体のオールド感があるフォントを使う
  • 文字間・行間は余裕を持たせる
  • 飾り罫を使う

スタイリッシュ・都会的なフォントの選び方

AXIS

スタイリッシュ・都会的なイメージを出すなら、「直線的で細いゴシック体や斜体フォント、サンセリフ体を使う」ことで表現できます。

くせのないシンプルなフォントを選び、ソリッドな印象を作ることでスタイリッシュに近づきます。

スタイリッシュ・都会的なフォントの例

ヒラギノ角ゴ

DIN

スタイリッシュ・都会的なイメージのポイント

  • 細身のゴシック体を使う
  • サンセリフ体を使う
  • 斜体フォントを使う

フォントを学ぶためにオススメの本

フォントの知識を深めるなら本の知識が必須です。一度身につければWebデザインでずっと役に立つ強力な武器になります。
私がこれまで読んだフォントの本で、「間違いなくおすすめできる本」を紹介します。

masaca

フォントの知識はこの本でバッチリ!

タイポグラフィの基本ルール -プロに学ぶ、一生枯れない永久不滅テクニック-

Webサイトの見出しやキャッチコピーのデザイン力が身につきます。サイトロゴのデザインの考え方も身につきます。

フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか?

フォントで人に与える印象は大きく変わります。狙ったイメージ通りのフォント選びができるようになります。

欧文書体―その背景と使い方

どういう雰囲気を出したいかによって書体を使い分けるヒントがわかりやすく解説されています。

欧文書体 2 定番書体と演出法

効果的な欧文書体の使い方をより実践的に解説しています。さらに欧文フォントの知識を深められます。

まとめ

5つの事例でフォントの選び方とポイントを紹介しました。Webデザインのテイストにあわせてフォント選びをすれば、デザインに統一感が生まれます。

自信を持ってフォント選びができるとデザイン時間の短縮とクオリティアップにつながります。

フォントについては本で知識を学ぶことで、使い方や選び方が上達しますのでさらに知識を深めるならオススメです。

masaca

自信をもってフォント選びができるようになるとデザインにも根拠が生まれるね。
Webデザインを学ぶなら必ず理解しておきたいフォントの種類と特徴 現役のWebデザイナーが仕事でよく使う日本語フリーフォント5選

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA