更新日 2023年5月19日
フォントって沢山あって何を使えばいいかわからない
プロのWEBデザイナーはどんなフォントを使ってるんだろう？
WEBサイトを制作する上で、フォントは非常に重要なウェイトを占めます。
フォントはそのサイトの印象を大きく変える要素でもあります。
それだけにフォントの知識やフォント選びは慎重になる必要があります。
フォントは種類が無数にあり、どれを選べばいいのか、どのフォントがスタンダードなのか思う方も多いと思います。
今回はWEBサイト制作において、現場で使うフォントや種類などをご紹介できればと思います。
ぜひ制作の参考にしてもらえたらと思います
WEBデザイナー必見の定番フォント
新ゴ（ゴシック系）
デザイナーの必需品であるモリサワフォントは一般の人には知られていないゴシックフォントです。
デザイナーであればグラフィックデザイナー、WEBデザイナー問わず必ず持っておかないと困るフォントです。
遠くから見ても見やすく、ポスターや看板などにもよく使われます。WEBよりもDTPのほうが重宝されるかもしれませんがWEBデザイナーも必ず持っておきましょう。
ヒラギノ角ゴ（ゴシック系）
くせが少なくすっきりとした印象のゴシックフォントです。
特長は文字の太さのバリエーションが多いことです。
ヒラギノ明朝との組み合わせも良く、テレビやポスターなど様々な媒体で見かけます。
つぶれにくく細い文字でもうまく印刷されます。
Noto Sans CJK JP（ゴシック系）
Googleが開発したフォントファミリーのひとつです。
Webフォントとしても無償で利用できて、他言語ともデザインが統一され使い勝手の良いフォントになります。
WEBフォントとして見出しなどで使う方も多いですね。
游ゴシック体（ゴシック系）
本文などで使われるデバイスフォントです。
スタンダードなゴシック体で、文字を組んだ時も文字同士が干渉せず、一文字の識別が優れています。
サイトの閲覧時、WindowsとMacでは通常表示されるフォントが異なるのですが、Webフォントを設定すればほぼ同じような見た目にすることが可能。游ゴシックはWindowsとMac共に標準搭載
リュウミン（明朝系）
明朝系のフォントといえばリュウミンです。このフォントを見ない日はないと言っても良いくらい町中にあふれてます。モリサワ新ゴと同じくらい有名なフォントとなります。
縦組でも横組でも同様に美しく見やすい組みが再現できます。くせもなく明快な印象を活かして、書籍や雑誌の本文、ビジネス文書などでよく使われます。
ヒラギノ明朝（明朝系）
伝統的な筆文字の美しさで上品な書体です。 とめ、はね、はらいなどの各部に美しい筆づかいを取り入れつつ、日常的に使えるベーシックな明朝体。デジタルならではの緻密さと一貫したデザイン性を持つ。リュウミンよりも少しシャープにしたい場合に使用するのをオススメです。ビジュアル雑誌やパンフレット用でよく見かけます。
あまり知られてないオススメの和文フォント
デラゴシック（ゴシック系）
ロゴや見出しなどに使える極太で個性的なフォントです。
英語、日本語ともに個性的です。
さわらびゴシック（ゴシック系）
フォントが小さくても文字がはっきりしていて、小さな文字でもくっきりと表示してくれます。
源暎ラテミン（ゴシック系）
漫画向けの使用を想定した書体で、普通のゴシック体と横細・縦太な仮名が組み合わせたフリーフォント。
源暎Nuゴシック（ゴシック系）
漫画の強調セリフに使える、フリーな特太モダンゴシック体です。
はんなり明朝（明朝系）
ふんわりとした、ひらがなとカタカナをデザイン。漢字と英数字、記号などは「源ノ明朝」で補完できます。
うつくし明朝体オールド（明朝系）
基本的に縦書きの美しい流れを重視して丸いフォルムが綺麗なフォント
IPAex 明朝（明朝系）
文字の美しい「はらい」が特長のやや太めの明朝体フリーフォントです。
刻明朝（明朝系）
ひらがな・カタカナが本来持っている柔らかで主張しすぎない落ち着いたデザインです。
案内状、CDジャケットなどにもオススメです。
殴り書きクレヨン（手書き系）
実際にクレヨンで書いたものをフォントにしたもので、クレヨンのリアルな表現を再現してます。
851マカポップ Ver 0.01（手書き系）
マジックペンで書いたようなフインが表現されてるフォントです。常用漢字500文字ほどに対応しています。
ダーツフォント（手書き系）
子供が細いボールペンで書いたようなフォントです。
えり字（手書き系）
若い女性が書いたようなかわいい文字を表現したフォントです。
ユニバーサルデザイン(UD)フォントについて紹介
ユニバーサルデザインフォントに厳密な字形の定義はありません。一般的に、視力に関係なく誰もが読みやすく、小さくても判別しやすいデザインが施された書体が各メーカーからリリースされています。
お年寄りや障害者の方、外国人の方など皆が「便利だな、使いやすいな」と思えるデザインです。

- 読みやすさ:
UDフォントは、文字のクリアな表示と読みやすさを重視してデザインされています。文字の形状や間隔、文字の太さなどが最適化されており、視覚的なストレスを軽減します。 - 認知のサポート:
UDフォントは、文字の識別性を高めるために、文字の特徴や形状を工夫しています。文字の区別性を向上させ、読み間違いや文字の混同を減らすことで、認知的な負荷を軽減します。 - 言語のサポート:
UDフォントは、多言語のサポートにも配慮しています。異なる言語や文字セットにおいても、文字の表示や読みやすさを確保するための工夫がされています。 - バリアフリーなアクセシビリティ:
UDフォントは、視覚障害者や高齢者などの利用者を含め、幅広いユーザーグループに配慮したアクセシビリティを提供します。文字のクリアな表示や読みやすさは、情報の理解やコミュニケーションの改善に寄与します。
などがあげられます。
視認性に優れるユニバーサルフォントは学校教育などでも採用されております。
UDフォントを提供してるモリサワフォントが奈良県の小学校で児童に通常のフォントとUDフォントどちらの文章が読みやすいか？を実験したところ、UDフォントの読みやすい結果になったそうです。
この結果は学力向上にもつながると言われてます。
2020年以降で一部の教科書ではUDフォントが採用されたみたいで、今後さらに増えると予想されます。
注意点！フリーフォントは利用規約をしっかり確認
フリーフォントを利用する際には、利用規約をしっかり確認することが重要です。利用規約には、フォントの使用条件やライセンスに関する情報が記載されています。以下の手順を参考に、利用規約を確認してください。
- フォントのダウンロード元を確認する: フリーフォントは、多くの場合、オンラインのフォントデータベースやデザイナーのウェブサイトから入手できます。公式のダウンロード元を特定し、そこからフォントを入手します。
- WEBサイトやダウンロードページを探索する: フォントのダウンロード元のウェブサイトやダウンロードページには、通常、利用規約やライセンスに関する情報が記載されています。ページの下部やフォントの詳細情報のセクションなどを探索してください。
- 利用規約の確認: 利用規約やライセンスには、フォントの使用に関する制限や条件が明記されています。使用許諾範囲、商用利用の可否、改変や再配布の可否などが記載されていることがあります。これらの条件をよく読み、自分の使用目的に合致しているか確認しましょう。
- 商用利用に関する注意事項: 商用利用をする場合は、特に注意が必要です。一部のフリーフォントは、個人や非営利目的での使用に制限がない一方で、商用利用には有料のライセンスが必要な場合があります。商用利用の可否や条件を確認し、必要な場合は正式なライセンスを取得してください。
- クレジット表記の確認: フォントの作者や制作元がクレジット表記を要求している場合もあります。利用規約でクレジット表記について触れられているか確認し、必要な場合は適切なクレジットを表示してください。
商用利用
以下のような点が商用利用に当てはまります。
・企業サイトでの利用
・個人で制作した商品の売買を目的としたサイト・ブログでの利用
(売買時期が不定期であっても該当します)
・活動内容報告による集客やサービス提供・宣伝を目的としたブログやサイトでの利用
・成果物の作成を目的とした利用
個人利用
個人利用とは商用利用とは逆の、営利を目的とせずに個人で使うことを言います。
例えば以下のような場合を指します。
・フリーフォントを使った作品を個人のサイト・ブログで紹介する
・フリーフォントを使った作品の売買取引をしない
フリーフォントは手軽に使用できる一方、上記のように使用制限や注意点もあり、活用が難しい場合もあります。
Google Fontsなどデザイン性が高く、利用規約などが分かりやすい大手企業が提供しているため安心して使用できおすすめです。
＼デザインを制作する時間がない、人手が足りない方へ／
>>グローバーデザインへご相談を。見積もり＆ご相談は無料！
