WEBデザインで誰もが使う 和文フォント24選

WEBデザイン

WEBデザインで誰もが使う和文フォント24選!基礎知識もご紹介

更新日 2022年10月19日

フォントって沢山あって何を使えばいいかわからない

プロのWEBデザイナーはどんなフォントを使ってるんだろう?

WEBサイトを制作する上で、フォントは非常に重要なウェイトを占めます。
フォントはそのサイトの印象を大きく変える要素でもあります。
それだけにフォントの知識やフォント選びは慎重になる必要があります。

フォントは種類が無数にあり、どれを選べばいいのか、どのフォントがスタンダードなのか思う方も多いと思います。
今回はWEBサイト制作において、現場で使うフォントや種類などをご紹介できればと思います。
ぜひ制作の参考にしてもらえたらと思います

関連記事大阪で格安のホームページ制作会社を10選!Web制作会社を比較!

関連記事信頼あるフリーランス(個人)のホームページ制作者へ依頼する。費用相場も紹介

WEBデザイナー必見の定番フォント

新ゴ(ゴシック系)

新ゴシック

デザイナーの必需品であるモリサワフォントは一般の人には知られていないゴシックフォントです。
デザイナーであればグラフィックデザイナー、WEBデザイナー問わず必ず持っておかないと困るフォントです。
遠くから見ても見やすく、ポスターや看板などにもよく使われます。WEBよりもDTPのほうが重宝されるかもしれませんがWEBデザイナーも必ず持っておきましょう。

ヒラギノ角ゴ(ゴシック系)

ヒラギノ角ゴ(ゴシック系)

くせが少なくすっきりとした印象のゴシックフォントです。
特長は文字の太さのバリエーションが多いことです。
ヒラギノ明朝との組み合わせも良く、テレビやポスターなど様々な媒体で見かけます。
つぶれにくく細い文字でもうまく印刷されます。

Noto Sans CJK JP(ゴシック系)

Googleが開発したフォントファミリーのひとつです。
Webフォントとしても無償で利用できて、他言語ともデザインが統一され使い勝手の良いフォントになります。
WEBフォントとして見出しなどで使う方も多いですね。

游ゴシック体(ゴシック系)

游ゴシック体(ゴシック系)

本文などで使われるデバイスフォントです。
スタンダードなゴシック体で、文字を組んだ時も文字同士が干渉せず、一文字の識別が優れています。
サイトの閲覧時、WindowsとMacでは通常表示されるフォントが異なるのですが、Webフォントを設定すればほぼ同じような見た目にすることが可能。游ゴシックはWindowsとMac共に標準搭載

リュウミン(明朝系)

明朝系のフォントといえばリュウミンです。このフォントを見ない日はないと言っても良いくらい町中にあふれてます。モリサワ新ゴと同じくらい有名なフォントとなります。

縦組でも横組でも同様に美しく見やすい組みが再現できます。くせもなく明快な印象を活かして、書籍や雑誌の本文、ビジネス文書などでよく使われます。

ヒラギノ明朝(明朝系)

ヒラギノ明朝

伝統的な筆文字の美しさで上品な書体です。 とめ、はね、はらいなどの各部に美しい筆づかいを取り入れつつ、日常的に使えるベーシックな明朝体。デジタルならではの緻密さと一貫したデザイン性を持つ。リュウミンよりも少しシャープにしたい場合に使用するのをオススメです。ビジュアル雑誌やパンフレット用でよく見かけます。

あまり知られてないオススメの和文フォント

デラゴシック(ゴシック系)

デラゴシック(ゴシック系)

ロゴや見出しなどに使える極太で個性的なフォントです。
英語、日本語ともに個性的です。

さわらびゴシック(ゴシック系)

さわらびゴシック(ゴシック系)

フォントが小さくても文字がはっきりしていて、小さな文字でもくっきりと表示してくれます。

源暎ラテミン(ゴシック系)

源暎ラテミン(ゴシック系)

漫画向けの使用を想定した書体で、普通のゴシック体と横細・縦太な仮名が組み合わせたフリーフォント。

源暎Nuゴシック(ゴシック系)

源暎Nuゴシック(ゴシック系)

漫画の強調セリフに使える、フリーな特太モダンゴシック体です。

はんなり明朝(明朝系)

はんなり明朝(明朝系)

ふんわりとした、ひらがなとカタカナをデザイン。漢字と英数字、記号などは「源ノ明朝」で補完できます。

うつくし明朝体オールド(明朝系)

うつくし明朝体オールド(明朝系)

基本的に縦書きの美しい流れを重視して丸いフォルムが綺麗なフォント

IPAex 明朝(明朝系)

IPAex 明朝(明朝系)

文字の美しい「はらい」が特長のやや太めの明朝体フリーフォントです。

刻明朝(明朝系)

刻明朝

ひらがな・カタカナが本来持っている柔らかで主張しすぎない落ち着いたデザインです。
案内状、CDジャケットなどにもオススメです。

殴り書きクレヨン(手書き系)

殴り書きクレヨン(手書き系)

実際にクレヨンで書いたものをフォントにしたもので、クレヨンのリアルな表現を再現してます。

851マカポップ Ver 0.01(手書き系)

851マカポップ Ver 0.01(手書き系)

マジックペンで書いたようなフインが表現されてるフォントです。常用漢字500文字ほどに対応しています。

ダーツフォント(手書き系)

ダーツフォント(手書き系)

子供が細いボールペンで書いたようなフォントです。

えり字(手書き系)

えり字(手書き系)

若い女性が書いたようなかわいい文字を表現したフォントです。

ユニバーサルデザイン(UD)フォントについて紹介

ユニバーサルデザインフォントに厳密な字形の定義はありません。一般的に、視力に関係なく誰もが読みやすく、小さくても判別しやすいデザインが施された書体が各メーカーからリリースされています。

お年寄りや障害者の方、外国人の方など皆が「便利だな、使いやすいな」と思えるデザインです。

特徴としては、
・濁点が離れている
・明朝体の横の線が比較的太めに設定されている

などがあげられます。

視認性に優れるユニバーサルフォントは学校教育などでも採用されております。
UDフォントを提供してるモリサワフォントが奈良県の小学校で児童に通常のフォントとUDフォントどちらの文章が読みやすいか?を実験したところ、UDフォントの読みやすい結果になったそうです。
この結果は学力向上にもつながると言われてます。
2020年以降で一部の教科書ではUDフォントが採用されたみたいで、今後さらに増えると予想されます。

注意点!フリーフォントは利用規約をしっかり確認

フリーフォントをダウンロードする際に注意して確認する必要があるのですが、
「商用利用」と「個人利用」があることです。
これらを詳しく説明していければと思います。

商用利用

以下のような点が商用利用に当てはまります。

・企業サイトでの利用
・個人で制作した商品の売買を目的としたサイト・ブログでの利用
 (売買時期が不定期であっても該当します)
・活動内容報告による集客やサービス提供・宣伝を目的としたブログやサイトでの利用
・成果物の作成を目的とした利用

個人利用

個人利用とは商用利用とは逆の、営利を目的とせずに個人で使うことを言います。
例えば以下のような場合を指します。

・フリーフォントを使った作品を個人のサイト・ブログで紹介する
・フリーフォントを使った作品の売買取引をしない

フリーフォントは手軽に使用できる一方、上記のように使用制限や注意点もあり、活用が難しい場合もあります。
Google Fontsなどデザイン性が高く、利用規約などが分かりやすい大手企業が提供しているため安心して使用できおすすめです。

関連記事信頼あるフリーランスのホームページ制作者へ依頼する。

関連記事【2022年】大阪:IT導入補助金・助成金を利用してホームぺージ作成・制作 を詳しく解説!

関連記事WEBデザイナーがFREENANCE(フリーナンス)の評判!メリット・デメリットと、口コミを調べてみた。

制作依頼ホームページ制作、ランディングページ制作はフリーランスのグローバーデザインへ

この記事を書いた人

GROVERDESIGN

濱賢治

大阪でフリーランスとして働くWebディレクター/デザイナー。主にWEBの企画・ディレクション・デザイン・SEO対策、コンテンツ編集、など発信してます。
趣味はゲーム、音楽、ジムでトレーニングです。
座右の銘は泣いて馬謖を斬る

ホームページ制作・LPデザイン制作会社へ無料お問い合わせ
お電話(06-4977-9974)でも承っております。

※現在、デザイナー、コーダーの募集はしておりません。

()に該当するひらがなを1文字入力ください(迷惑メール防止のため)

ピックアップ記事

  1. 大阪でランディング ページ制作(LP)が得意なWEB制作会社 オススメ5選
  2. WEBデザインで誰もが使う和文フォント24選!基礎知識もご紹介
  3. 2022年ホームページ制作の外注失敗あるある!こんな業者は駄目!失敗しないためのc
  4. 【2022年】ランサーズとクラウドワークスの違いは?どっちが稼げる?数字と評判でc
  5. 信頼あるフリーランス(個人)のホームページ制作者へ依頼する。費用相場も紹介

関連記事

  1. 実績のないフリー ランスWEBデザイナーでも仕事獲得できる方法
  2. WEBデザイン

    大阪でランディング ページ制作(LP)が得意なWEB制作会社 オススメ5選

    大阪でランディングページを制作してるお客様も多いかと思います。しかしc

  3. WEBデザイン

    昨今のWEBデザインの流行り?ミニマルデザインは気持ちいい!

    ミニマルデザインって聞いたことありますか?ミニマルデザインとは、構c

  4. WEBデザイン

    WEBサイトにおけるカラーについて

    WEBデザインを制作するにいたって、まず初めにメインカラーは決めます。c

  5. WEBデザイン

    手書き風な可愛いホームページまとめ5選

    最近ですね、ツイッターで料理研究家のリュウジさんのレシプを見て実際に作c

  6. ホームページ制作の 外注失敗あるある!

グローバーデザインのHPはこちら>>>

お仕事のご依頼はこちら>>>

最近の記事

  1. WEBデザインで誰もが使う 和文フォント24選
  2. ホームページ制作の 外注失敗あるある!
  3. 40代未経験でもフリーwebデザイナーで食べていく!成功するコツを紹介!
  4. 実績のないフリー ランスWEBデザイナーでも仕事獲得できる方法
  5. フリーランスの ホームページ制作者へ 依頼する
  6. ホームページ制作に使える補助金と助成金(大阪版)
  7. 大阪で格安の ホームページ制作
  8. WordPressランディングページ
PAGE TOP