WEBデザイン基礎

フォントの種類と使い分け方まとめ

WEBデザイン基礎

そもそもフォントって何?

フォントとは「文字のデザイン」のこと。

同じ言葉でも、フォントが違うだけで雰囲気がガラッと変わります。

例:こんにちは

  • 明朝体 →「こんにちは」…上品・やわらか

  • ゴシック体 →「こんにちは」…力強い・はっきり


フォントの大きな分類

明朝体(Mincho)

  • 特徴:線に太さのメリハリがある。ひげやうろこがついている。

  • 印象:上品・繊細・女性的・伝統的

  • よく使う場面:雑誌・美容系・ブライダル・高級感のあるWeb

ゴシック体(Gothic)

  • 特徴:太さが均一でスッキリした形

  • 印象:力強い・シンプル・男性的・モダン

  • よく使う場面:ビジネス・IT系・バナー・見出し

手書き風・丸ゴシック・筆文字系など

  • カジュアル・親しみやすい印象

  • よく使う場面:保育系・飲食店・雑貨・SNS系など


フォント選びのポイント

  • 明朝体:女性向け/上品/落ち着いた雰囲気に

  • ゴシック体:男性向け/力強く/はっきり伝えたいときに

  • 見出しと本文でフォントを変えると読みやすい

  • 同じフォントでも**太さ(ウェイト)**を変えるだけで印象UP


よく使われている定番フォント(商用利用OK)

フォント名

種類

特徴

ダウンロードリンク

Noto Sans JP

ゴシック体

Googleフォント。シンプルで可読性◎

→ Download

Zen Kaku Gothic New

ゴシック体

やや丸みあり。あたたかく現代的

→ Download

Shippori Mincho

明朝体

柔らかく上品な印象

→ Download

はんなり明朝

明朝体

和風・女性的・しなやか

→ Download (Adobe Fonts)

さわらび明朝 / ゴシック

両方あり

フリー&すっきり読みやすい

→ Download

Kosugi Maru

丸ゴシック

親しみやすく柔らかい

→ Download

フォントが使える代表的サービス

Google Fonts(無料)

  • Webフォントとしても使える

  • STUDIO、WordPressにも対応

  • https://fonts.google.com/

Adobe Fonts(Creative Cloud契約者向け)

  • 高品質で日本語フォントも豊富

  • 商用利用OKが多く、デザイナー定番

  • https://fonts.adobe.com/

STUDIOで使えるフォント(一部)

  • Noto Sans JP

  • Shippori Mincho

  • Kosugi Maru

  • Zen Kaku Gothic

  • 游ゴシック体 / 游明朝体(デバイス依存)

STUDIOで「フォント設定」からGoogle Fontsを選択可能


まとめ:フォントで“雰囲気”が決まる!

  • 明朝体=繊細で上品、ゴシック体=はっきり力強く

  • 目的やターゲットに合わせて使い分けよう

  • Google FontsやAdobe Fontsを活用して、デザインに幅を!

タイトルとURLをコピーしました