Webデザインでよく使うフォント

July 3, 2024July 5, 2024

URLをコピーしました！

デザインするときフォント悩むんだけど。。。おすすめありますか？

あるよ！では見てみよう♪

ゴシック体

ベーシックなゴシック体（ゴシックたい、英語: Gothic、ゴチック体とも）は、縦横の太さが均等に見えるようデザインされた書体の呼称

起筆・終筆点にかざりがない、あるいは控えめなことから、欧文書体におけるsans serif（サンセリフ）書体に相当

Webデザインではディスプレイでの可読性から読みやすいゴシック体の方が多く使用される傾向にあると思います

Macならヒラギノ角ゴシック

とても読みやすく、スライドやポスター向きで、太さも10種類用意されています
太さに迷う場合は、プレゼン資料ではW4を基本にして、細字にW2、太字にW7を使っていくとよいでしょう

Winならメイリオ/游ゴシック

メイリオ

遠くからでも読みやすい視認性と判読性に優れたフォントで、RegularとBoldの２種類の太さ

スクリーン上では本来の力を発揮するものの、印刷物は少し苦手
字面が大きいためWord書類などの文字が小さくなる資料には不向き
メイリオは字面が大きいため、字間が窮屈になり、読むときに読み手にストレスを与えがち

游ゴシック

Windows 8.1以降のPCやMac OS 10.9以降では、游ゴシックというフォントが標準搭載

非常に綺麗で読みやすいフォントで、太さのバリエーションも豊富ですので、使い勝手がよいでしょう
メイリオよりクラシックで大人っぽい印象のフォントです
プレゼン資料で使う場合には、游ゴシックMediumくらいがちょうどよい太さです

その他のおすすめゴシック

Noto Sans JP

日本語フォントの定番中の定番
個人的には、明るさ、親しみやすさのあるデザインによく使用

ZEN丸ゴシック

角の深い丸みによってソフトでナチュラルな印象を与える丸ゴシック体
ウエイトは5種類で、細くても太くても読みやすく使いやすいフォント
可愛らしい、優しい、ポップ、ナチュラルなデザインにぴったり

M PLUS 1

ほとんどの漢字が使えてしまう、貴重な和文のWEBフォント
ゆとりがあって読みやすい設計
数種類あるウェイトを利用して、テキスト本文から見出し、キャッチコピーにまで使えるモダンタイプのゴシック体

明朝体

漢字の書体の一種で、セリフ書体に分類される
「縦は太く、横は細く」という強弱がつけられ、印刷紙面に適度な余白を生み出すため、他のフォントに比べて画数の多い文字でもクリアに見えやすく、特に印刷物での文章に適しています
横線の終端部分には「ウロコ」と呼ばれる三角形の装飾がつけられ、視覚的なアクセントになるだけでなく、印刷品質が今ほど良くなかった時代には、横線がかすれて見えなくなることを防ぐ補助の役割
中国語では一般に宋体といい、明体とも呼ばれる
日本語の明朝体は活字技術の導入期以来ひらがな・カタカナを含むが、漢字とは様式が異なる

Macならヒラギノ明朝

字面が大きく流れるような筆使いの字形が、現代的で華やかな印象を与える書体
とても読みやすくさまざまな用途に使える人気のフォント

Winなら游明朝

文字間にゆとりがあり、上品で落ち着いた印象を与えてくれる書体
「時代小説が組めるような明朝体」として作り出された書体で、品のいい雰囲気
明朝体のフォントに比べて丸みがあり、文字の空間が均一に見えるように設計
上品でありつつも明るい印象があるので、美容系やコーポレートサイトのデザインにおすすめ

その他のおすすめ明朝

Noto Serif JP

「Noto Serif JP」はGoogleとAdobeが協力して制作したフォント
名前にある「Noto」とは「No more tofu（ノーモア豆腐）」の略
文字化けしたフォントが「□」と表示されることの見かけが豆腐に似ていることから、俗称として「トーフ」と呼ばれています
つまり、文字化けすることなく使用できるWebフォント
文字サイズが小さくても読みやすく、幅広いデザインに合うベーシックな明朝体フォント

しっぽり明朝

しっぽり明朝は、石井中明朝体OKLやリュウミンKO、A1明朝、筑紫Aオールド明朝等に影響を与えた、東京築地活版製造所の名作書体である五号系活字を下敷きに、物静かで上品で、見ているだけでうっとりするような明朝体を目指して制作した、オールドスタイル明朝体フリーフォント
ウエイトも5種類あり使いやすく、可読性も高いので、見出しから本文組みまで使用可能
クラシック・上品、誠実・信頼感、和風なデザインなどによく合うフォント
しっぽり明朝といえばフォントダスさん