webデザインの勉強

【Google fonts】webサイトに使えるおすすめ日本語フォント(無料)〜10選〜

【Google fonts】webサイトに使えるおすすめ日本語フォント〜10選〜の画像

こんにちは!webデザイナーのshioです^^

webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使えばいいか迷いますよね・・・

webフォントは基本的にGoogle fontsの中から使うのがおすすめなのですが、種類が沢山あり(2022年7月時点で50種類以上)、中には癖があってwebサイトの本文に適さないフォントも多数あります。

そこで今回は、様々なジャンルのwebサイトをデザインしてきた私が、良くwebサイトに使っているおすすめのGoogle fontsをご紹介します!

フォントもTPOに合わせた選択が必要なので、

  • どんな場面で使えるか
  • フォントが与える印象

もあわせてお伝えします。

shio
shio
特にwebデザイン初心者フォント迷子の方におすすめの記事です!

▼欧文フォントにお困りの方はこちら

【Google fonts】webサイトに使えるおすすめ欧文フォント〜20選以上〜の画像
【Google fonts】webサイトに使えるおすすめ欧文フォント(無料)〜20選以上〜こんにちは!webデザイナーのshioです^^ webサイトのデザインで、フォント選びはデザインを左右する重要な工程ですが、何を使...

ゴシック体

Noto Sans JP

Noto Sans JP(GoogleFonts)の画像

「Noto Sans JP」は癖がないので、読みやすく使いやすいフォント◎
どんなジャンルのデザインにも馴染むので、人気の定番フォントです!

少し丸みがあって、優しい雰囲気がしますね。

定番!| 優しい | 馴染みやすい

shio
shio
ウェイトが7種類と豊富なので、私もよく使います!
デザイナーなら誰でも知ってるのでは・・・

▼Canvaのテンプレートで使用しました。
Canvaにも入ってるフォントです。

「Oswald」を使ったCanvaのテンプレート※テンプレートはCanvaのこちらのページからダウンロードして使用できます。

M PLUS 1p

M PLUS 1p(GoogleFonts)の画像

「M PLUS」シリーズはフリーフォントで有名で、
ウェイトが7種類あるので、webサイトで使いやすい!

「M PLUS 1p」は丸っこいですが、直線と曲線でデザインされててバランスの良いフォントです。
「ゴシック体使いたいけど、少し親しみやすさを入れたいな〜」という時におすすめです^^

日本語でも欧文でも可読性がありますね!

かわいい| 読みやすい| 明るく伸びやか

M PLUS Rounded 1c

M PLUS Rounded 1c(GoogleFonts)の画像

「M PLUS Rounded 1c」は、ひとつ前にご紹介した「M PLUS 1p」の丸ゴシックバージョン。

懐が広くて、曲線が優しくかわいい雰囲気のフォントです。

かわいい| 優しい

ちなみに・・・
フォント名の最後に付いている「1c」や「1p」は「M PLUS」フォントのデザインの種類のことです。
「c」は文字組みの時のまとまりの良さを意識して再設計されたそうです。

shio
shio
私は子ども向けwebサイトで良く使用しました。
柔らかく、ウェイトが多く、太文字でデザインしやすいので、採用しました!

Zen Kaku Gothic New

Zen Kaku Gothic New(GoogleFonts)の画像「Zen Kaku Gothic New」は、2021年にGoogleFontsに追加され、これから活躍しそうなフォントです!

モダンで少し癖がありますが、使いやすく読みやすいです。

シンプル | 洗練 | モダン | さっぱり | 少し癖あり

Zen Kaku Gothic Newは、現代の日本のゴシック(サンセリフ)書体ファミリーです。このフォントを使用すると、専門的な詳細な配置なしで細かい植字を表現できます。ユニークでありながらシンプルなデザインのため、自然に高い読みやすさを提供します。使いやすく、読みやすい。

by Google fonts

Zen Maru Gothic(丸ゴシックバージョン)も
個人的に好きです!

Zen Maru Gothicの画像

Kiwi Maru

Kiwi Maru(GoogleFonts)の画像

「Kiwi Maru」は、マメロンをベース文字の内側部分を少し丸めた加工が施されており、主にWEBフォントなどデジタルデバイスで使用されることを意識して制作された日本語フリーフォントです。

フォントウエイトは3種類ありますが、基本細めです。
筑紫A丸ゴシックに雰囲気似てますね♪

かわいい | 親近感 | 手書き風

  Kiwi Maru Regularは、デジタル時代の日常の表現やスラング表現を視覚化して共有するための書体です。現在、2020年には、ミンチョとゴシックの書体がスマートフォン、タブレット、PC環境でのみ使用されています。丸いフォントの導入により、アナログやデジタルの世界には欠けていた感情や感情の表現方法や、フォントに漢字が多すぎるという苦痛な気持ちが変わることを願っています。

by Google fonts

shio
shio
私は文字が少なめで、イラストメインのwebサイトに使用しました!
「M PLUS Rounded 1c」じゃ可愛すぎちゃうけど柔らかい印象にしたいときに使えます!
個人的に好きなフォントです♡

※文章の量が多くフォントサイズを小さくした状態で使うには、少し読みにくいかもしれないので注意です。

▼Canvaのテンプレートで使用しました。

DotGothic16

DotGothic16(GoogleFonts)の画像

「DotGothic16」はで作られているデジタル風なデザインフォントです。

デジタル風 | 楽しい感じ

Dotgothic 16は、古いビデオゲーム、携帯電話、コンピューター画面のピクセルフォントの感触を印刷した古い16×16ゴシックビットマップフォントに基づいています。読みやすさの高さから、このフォントは、ピクセルアートの人気の高まりにより、近年人気が高まっています。

by Google fonts

明朝体

Noto Serif Japanese

Noto Serif Japanese(GoogleFonts)の画像

「Noto Serif Japanese」は「Noto Sans JP」の明朝体バーションです。
丸みがありますが、綺麗で可読性の高いフォントです。

癖がなく綺麗

▼就活で使用した私のポートフォリオでは
日本語「Noto Serif Japanese」、欧文「Lora」を使用しています。
「Lora」もGoogle fontsです。
綺麗で優しい印象になりました。

Noto Serifとloraを使ったshioのポートフォリオの画像

実際のポートフォリオサイトはこちら

Shippori Mincho

Shippori Mincho(GoogleFonts)の画像「Shippori Mincho」は綺麗で美しく上品で、信頼感を与えたいシチュエーションで使えます。
はねが綺麗でしなやかさがあり、女性らしさを感じます。

美しい|上品|信頼感|スタイリッシュ

しっぽりみんちょうは、日本の小説作家に美しいみんちょうスタイルを無料で提供するために作られた昔ながらのみんちょうスタイルです。

レギュラーはもともと小説の長いテキスト設定用に設計され、エクストラボールドはもともとタイトルと見出し用に設計されました。最終的には、レギュラーからエクストラボールドまでの5つのウェイトのファミリーになりました。

by Google fonts

shio
shio
私は弁護士事務所のwebサイトに使用しました。
弁護士事務所は信頼感を与えることが重要になるのと、webサイトがスタイリッシュな世界観だったので、「Shippori Mincho」が1番マッチしました。
最初に紹介した「Noto Sans JP」と合わせて使いました。

その他のフォント

Kaisei Opti

Kaisei Opti(GoogleFonts)の画像

「Kaisei Opti」はデザイン性が高いので、webサイト全体に使用するのは避けた方が良いです。
webサイトの見出し・バナー等のデザインと相性が良いフォントです!

横棒の右上に丸が付いてるのが可愛いですよね♡

かわいい | おしゃれ| 楽しい

Kaisei Optiは、モダンな和文書体です。タイプセットすると、陽気でさわやかな印象を与えます。

by Google fonts

shio
shio
webサイトでWebフォントを使う場合、ウェイトは2~3種類程度にするのが、デザインする際に迷わないし、フォントの読み込む量としておすすめです。

▼Canvaのテンプレートで使用しました。

もう一つのフォントは「Zen Maru Gothic」です。

最後に

気になるフォントは見つかりましたか?
Google fontsには素敵なフォントがたくさんあるので、TPOに合わせて使ってみてくださいね^^

▼Adobe fontsのおすすめフォントの記事はこちら

【Adobe font】webデザイナーおすすめ日本語フォントまとめ〜26選〜のブログのバナー
【Adobe fonts】webデザイナーおすすめ日本語フォントまとめ〜26選〜デザインをしている時に「フォントどうしよ〜」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts」か...
【Adobe font】webデザイナーおすすめ欧文フォントまとめのブログのバナー
【Adobe fonts】webデザイナーおすすめ欧文フォントまとめ〜20選以上〜デザインをしている時に「フォント何使おう。。。」って誰もが悩むところだと思います。 デザインをしている方は「Adobe Fonts...

 

▼インスタグラムでは使うシーン別にご紹介しています^^

webデザイナー|Canva公式クリエイター
shio
webデザイナーshioのアイコン
*月7000人が読んでるデザインブログ運営 *ナチュラルな婚姻届を心を込めて制作 webデザイナーを目指したい方向けに、 【勉強方法|転職活動|ポートフォリオ制作|制作会社で働いてからのこと|webサイト制作 etc... 】について発信しています。 このブログとともにwebデザイナーとして成長していきます!
\ Follow me /
webデザイナーの就職活動で使うポートフォリオのバナー