現役WEBデザイナーが選ぶおすすめのフリーフォント178選

「良いデザイン・反応が取れるデザイン・結果を出せるデザイン」
これらをあなたが作り上げるために重要なことがあります。

それは、レイアウト・配色・書体・写真・図解の5つです。

この中でどれか1つが大事とかではなく、それぞれが最高であれば最高のデザインが出来上がるのです。

今日は、そのうちの「書体」のお話。

どんなに綺麗なレイアウトで、おしゃれな配色になっていたとしても、フォントがダサかったり、全体のテイストにあっていなければ、デザインのクオリティは下がってしまいます。

では、どうやってフォントを選べばいいのでしょうか？

いち早く、プロレベルのスキルを身に付けたいのであれば、現役のデザイナーが実際にどうしているかを知るのが近道です。

そこで、今回は現役のWEBデザイナーが現場で使っているフォントを厳選してまとめました。

現役デザイナーが選んだフォントと照らし合わせて、ご自身のデザインに活かしてもらえればと思います。

フリーフォントの使い方

おすすめのフリーフォントをお伝えする前に、フォントをダウンロードした後に、実際に使用するための手順をご説明します。

Windows

1.フォントのデータをダウンロードすると、Zip圧縮フォルダがお使いのパソコンにダウンロードされます。（パソコンの設定によってダウンロード先が異なるので、ダウンロードフォルダやデスクトップフォルダを探してみてください）

2.圧縮フォルダを右クリックまたはダブルクリックをして展開（解凍）します。

3.展開（解凍）したフォルダをダブルクリックして開きます。

4.フォルダ内にある、フォントファイルを右クリックして、インストールを選択します。

Mac

1.ファイルをダウンロードすると、Finderのダウンロード内に圧縮フォルダが保存されます。

2.ダウンロードした圧縮フォルダをクリックして解凍します。

3.解凍したフォルダーをダブルクリックしてフォントフォルダを開きます。

4.フォルダ内にあるttfファイルをクリックすると、フォントの見本が開くので、フォントをインストールをクリックします。

カテゴリ別おすすめフリーフォント

ゴシック

装飾性があまりないゴシック体は、
視認性が高くWEBデザインから紙媒体や看板まで様々なシーンで使われています。

ただし、太めのゴシック体は文章に使うと、読みにくくなってしまうので、目的に応じて適切にフォントを使い分けることが重要です。

源ノ角ゴシック

https://forest.watch.impress.co.jp/library/software/source_hansan/

Photoshopなどで有名な、Adobeが製作するオープンソースフォントで、ExtraLight・Light・ Normal・Regular・ Medium・Bold・Heavyの7つのウェイトが用意されています。

現場では奇をてらったフォントよりも、シンプルで読みやすいフォントが重宝されています。
その点、このフォントは綺麗で読みやすく、対応している漢字がとても多いので、様々な用途に合わせて幅広く使うことができるでしょう。

とりあえず入れておくことをおすすめしたい、非常にポピュラーなフリーフォントです。

Mgen+

http://jikasei.me/font/mgenplus/

先ほど紹介した源ノ角ゴシックとフリーフォントの「M+OUTLINE FONT」をベースに、旧漢字から地名などの固有名詞など、14,000字以上の漢字を網羅したフリーフォントです。

こちらもシンプルかつ読みやすいフォントなので、
文字サイズの大小問わず、様々なシーンで活用できるでしょう。

源柔ゴシック

http://jikasei.me/font/genjyuu/

源ノ角ゴシックから派生した、丸系ゴシック体です。
丸みの強さが3段階に分かれていて、源ノ各ゴシック同様7つのウェイトに分かれています。

丸ゴシックは角ゴシックに比べ優しい印象を持っているため、あまりビジネスの場で使われないフォントですが、LPのヘッダーや書籍タイトルなどで使えば個性的かつ可愛い印象を与えられます。

明朝

明朝体はゴシック体に並んで、非常にポピュラーなフォントです。
ゴシック体は縦横線の太さがほとんど同じで装飾がないのに対して、明朝体は横線に対して縦線が太く、トメハネなどの装飾があるのが特徴です。

シンプルでクセのない書体で、文字サイズの大小問わず読みやすいので、見出しなどのデザインはもちろん、レポートや企画書でもよく使われます。

うつくし明朝体オールド

https://www.flopdesign.com/freefont/utsukushi-mincho-font.html

柔らかで優しい雰囲気を感じさせられる、女性が好むような綺麗なフォントです。
実は、日本語は元々縦書きが主流だったため、文字の形としても縦書きで並べた方が綺麗に見えるようになっています。

ですが、このフォントは横書きが主流になっている今を意識して、横に並べても繋がりを感じさせるような現代的な作りになっているので、横書きの見出しなどでも非常に綺麗なデザインが作れるでしょう。

はれのそら明朝

はんなり明朝

https://typingart.net/

もじどおり、柔らかではんなりとした雰囲気のある、ひらがなとカタカナが特徴的な明朝体フォントです。うつくし明朝と少し似た雰囲気のあるフォントですが、こちらの方が比較的シンプルな書体でできているので、見出しだけでなく本文でも有効活用できます。

手書き風

ゴシック体や明朝体に続いて、よく使われるのが手書き風フォントです。
ナチュラルでラフな手書きフォントは見出し文字の装飾から本文まで様々なシーンで使うことができます。

ふい字

https://hp.vector.co.jp/authors/VA039499/

手書き風フォントの中でも代表的な存在なのが「ふい字」です。
サインペンで書いたような書体が特徴で、アルファベットから漢字まで幅広い文字をカバーしています。
ゆるく可愛らしい印象と可読性が両立されているので。バナーからLPまで様々な場所で手書き風なデザインを演出することができます。

こども丸ゴシック

https://typingart.net/

チョークやクレヨンでこどもが書いたような、丸っこい書体が特徴の手書き風フォントです。小学校3年生までに習う漢字が収録されています。
これだけでかなり存在感のあるフォントなので、バナーなどで使えばガラッとデザインのイメージを変えることができるでしょう。

仕事メモ書き

http://font.sumomo.ne.jp/shigoto.html

こちらもふい字のように、ボールペンで手書きしたような印象の手書き風フォントです。
実際にメモ書きしたようなこじんまりとした書体が特徴的で、文字詰めで文字間に緩急をつけることで、より手書き感を出すこともできます。

現役デザイナーが選ぶ！定番フォントランキング

「現役デザイナーはどんなフォントを使っているんだろう？」

デザインの勉強をされている方なら一度は疑問に思ったことがあるのではないでしょうか？
もちろん、ここまででご紹介したフリーフォントも無料とは思えないクオリティで現場でも重宝しています。

ですが、現場のデザイナーはこれらのフリーフォントだけで、デザインをすることはほとんどありません。
そこで、実際に現役デザイナーが選ぶフォントTop5をまとめました。
一部、有料フォントも入っていますが、AdobeCCに加入している方であれば全て無料で使うことができます。

5位ふい字

https://hp.vector.co.jp/authors/VA039499/

無料フォントでもご紹介したふい字がランクインです。
主にランディングページなどのお客様の声で、使用されることが多く、誰かが話していたり手で書いているような雰囲気を題したいときに重宝しています。

4位秀英角ゴシック

https://fonts.adobe.com/fonts/dnp-shuei-gothic-kin-std

秀英角ゴシックは100年以上にわたり開発が続けられているゴシック体で、ゴシック体特有の視認性の高さはそのまま、本文としても使いやすい可読性の高さを両立しています。
余談ですが、このフォントを出しているモリサワの明朝体は「君の名は。」でも使われています。

3位筑紫A丸ゴシック

https://fonts.adobe.com/fonts/fot-tsukuardgothic-std

筑紫A丸ゴシックは、丸みがあって温かさを感じるフォントです。
可愛いだけでなく、大人っぽさも兼ね備えていているので、女性向けのデザインや柔らかい雰囲気を表したいときに、おすすめです。

2位小塚明朝

https://fonts.adobe.com/fonts/kozuka-mincho-pro#fonts-section

Adobeが開発し、Photoshopや Illustratorにデフォルトで入っているフォントです。
「Adobe製品に付属しているから」という理由で使っている方もいますが、シンプルで親しみやすい書体から、幅広いシーンで使えると現役デザイナーからも重宝されています。

1位ヒラギノ角ゴシック

https://www.morisawa.co.jp/fonts/specimen/1844

現役デザイナーが選ぶ定番フォント第1位に輝いたのはMacユーザーならおなじみのヒラギノ明朝です。

デザインでまず最初に押さえておかなければいけないことは、伝えたいことがきちんと伝わるデザインになっているかということです。
その点、ヒラギノ明朝は可読性の高さと書体の綺麗さが両立していて、バナーやLPのデザインから、プレゼン資料の作成までプロ・素人かかわらず効果的に使用できるフォントです。

【2023年版】フリーフォントまとめ

ゴシック系

源ノ角ゴシック（Source Han Sans）

https://github.com/adobe-fonts/source-han-sans

源ノ角ゴシック Code（Source Han Code JP）

https://github.com/adobe-fonts/source-han-code-jp

M+ Type-1, Type-2

https://mplus-fonts.osdn.jp/about.html

東青梅ゴシック / 東青梅ゴシック C

源真ゴシック

http://jikasei.me/font/genshin/

Japan Sans

https://webfontfan.com/japansans/

koruri

https://koruri.github.io/

やさしさゴシック

http://www.fontna.com/blog/379/

やさしさゴシックボールド（太め）

http://www.fontna.com/blog/736/

やさしさゴシック手書き

http://fontna.com/freefont/?p=40

ロゴたいぷゴシック

http://www.fontna.com/blog/1226/

ロゴたいぷゴシック-コンデンスド

http://www.fontna.com/blog/1345/

JKゴシックL

http://font.cutegirl.jp/jk-font-light.html

JKゴシックM

http://font.cutegirl.jp/jk-font-medium.html

スマートフォントUI+

https://www.flopdesign.com/freefont/smartfont.html

フロップデザインフォントM+

https://flopdesign.com/349/

ざっくりゴシック

https://fontbear.net/zakkuri/

インビジブルゴシック

https://fontbear.net/invisible/

木漏れ日ゴシック

http://modi.jpn.org/font_komorebi-gothic.php

せのびゴシック

http://modi.jpn.org/font_senobi.php

超極細ゴシック体

http://font.websozai.jp/

なごみ極細ゴシック

http://font.websozai.jp/line-font2-mihon.html

略字フォント

https://booth.pm/ja/items/134190

略字GSゴシック

https://booth.pm/ja/items/450272

刻ゴシックフォント

http://freefonts.jp/font-koku-go.html

ぼくたちのゴシック

https://fontopo.com/?p=164

梅フォント

https://ja.osdn.net/projects/ume-font/wiki/FrontPage

MigMix

https://mix-mplus-ipa.osdn.jp/migmix/

Migu

https://mix-mplus-ipa.osdn.jp/migu/

Nasu

http://itouhiro.hatenablog.com/entry/20140917/font

Kazesawa フォント

https://fontfree.me/1547

Cicaフォント

https://github.com/miiton/Cica

押出Mゴシック

https://tanukifont.com/oshidashi-m-gothic/

源ノ等幅（Source Han Mono）

https://forest.watch.impress.co.jp/docs/news/1186980.html

プログラミングフォント白源 (HackGen)

https://github.com/yuru7/HackGen

Kinto

https://good-web-design.com/webdesign/kinto

小杉フォント

https://fonts.google.com/specimen/Kosugi?selection.family=Kosugi

丸ゴシック系

Rounded Mgen+

http://jikasei.me/font/rounded-mgenplus/

自家製 Rounded M+

http://jikasei.me/font/rounded-mplus/

源柔ゴシック

http://jikasei.me/font/genjyuu/

源泉丸ゴシック

https://github.com/ButTaiwan/gensen-font

まるがめ本丸ゴシック

https://www.flopdesign.com/marugothic/marugame-font.html

かなざわ本丸ゴシック

https://www.flopdesign.com/marugothic/kanazawa-font.html

あさご本丸ゴシック

https://www.flopdesign.com/marugothic/asago-honmaru-gothic.html

うずまさ本丸ゴシック

https://www.flopdesign.com/marugothic/uzumasa-font.html

しらさぎ本丸ゴシック

https://www.flopdesign.com/marugothic/shirasagi-font.html

くまもと本丸ゴシック

https://www.flopdesign.com/marugothic/kumamoto-font.html

ひこね本丸ゴシック

https://www.flopdesign.com/marugothic/hikone-font.html

ほのか丸ゴシック

http://font.gloomy.jp/honoka-maru-gothic-dl.html

ほのかアンティーク丸

http://font.gloomy.jp/honoka-antique-maru-dl.html

タイムマシンわ号

http://modi.jpn.org/font_timemachine-wa.php

小杉丸フォント

https://fonts.google.com/specimen/Kosugi+Maru?selection.family=Kosugi+Maru&sidebar.open=true#glyphs

明朝系

源ノ明朝（Source Han Serif）

https://source.typekit.com/source-han-serif/jp/

はれのそら明朝

https://fontopo.com/?p=377

はんなり明朝

https://typingart.net/?p=44

しっぽり明朝v2

https://fontdasu.com/1081

さつき源代明朝

https://fontdasu.com/1604

幻ノにじみ明朝

http://www.fontna.com/blog/1912/

あおぞら明朝

https://fontfree.me/471

刻明朝フォント

http://freefonts.jp/font-koku-min.html

刻丸明朝かな

http://freefonts.jp/font-koku-marumin.html

ほのか明朝

http://font.gloomy.jp/honoka-mincho-dl.html

源様明朝

https://github.com/ButTaiwan/genyo-font

源流明朝

https://github.com/ButTaiwan/genryu-font

廻募（エモ）

https://flopdesign.com/blog/font/7163/

うつくし明朝体

https://www.flopdesign.com/freefont/utsukushi-mincho-font.html

源界明朝

https://flopdesign.com/blog/font/5146/

装甲明朝

https://flopdesign.com/blog/font/5228/

アプリ明朝

https://flopdesign.com/blog/font/5852/

花園フォント

http://fonts.jp/hanazono/

さわらびフォント

https://sawarabi-fonts.osdn.jp/index.html

ロゴ系

機械彫刻用標準書体 M

http://font.kim/

GL-築地初号

https://www.fontmatome.com/gl-tsukiji-1/

GL-築地二号

https://cute-freefont.flop.jp/tsyukiji-2go.html

GL-築地三号

https://cute-freefont.flop.jp/tsyukiji-3go.html

GL-築地四号

https://cute-freefont.flop.jp/tsyukiji-4go.html

GL-築地五号

https://www.fontmatome.com/gl-tsukiji-5/

むつき

https://mandel59.github.io/mutsuki/

TR大正明朝体R

https://fontdasu.com/2451

大正活字っぽい？フォントT5

https://booth.pm/ja/items/738177

コーポレート・ロゴ

https://logotype.jp/corporate-logo-font-dl.html

フォント: コーポレート明朝

https://logotype.jp/osusume-font-corpmin.html

コーポレート・ロゴ（ラウンド）

https://logotype.jp/font-corpmaru.html

まなびや　さくら＆いちょう

http://modi.jpn.org/font_manabiya.php

いろはマル

http://modi.jpn.org/font_irohamaru.php

いろは角クラシック

http://modi.jpn.org/font_irohakakuc.php

いろはマルみかみ

http://modi.jpn.org/font_irohamaru-mikami.php

かんじゅくゴシック

https://www.flopdesign.com/freefont/kanjyukugothic-freefont.html

ほのかアンティーク角

http://font.gloomy.jp/honoka-antique-kaku-dl.html

バナナスリップ

http://ymnk-design.com/%E3%83%90%E3%83%8A%E3%83%8A%E3%82%B9%E3%83%AA%E3%83%83%E3%83%97/

ぱぐのみんちょmini

http://ymnk-design.com/pugnomincho/

こまどりmini

http://ymnk-design.com/%E3%81%93%E3%81%BE%E3%81%A9%E3%82%8A/

ユニーク系

焔明朝フォント

https://fontgraphic.jp/fg-homura

棘ゴシックフォント

https://fontgraphic.jp/togegothic

棘薔薇フォント

https://fontgraphic.jp/fgtogebara

FGミディアムオールド半角

https://fontgraphic.jp/fgmediumoldhankaku

FGゼロラバウル

https://fontgraphic.jp/fg_zerorabaul

トガリテ

https://moji-waku.com/togalite/

マキナス 4 Flat

https://moji-waku.com/makinas/

マキナス 4 Square

https://moji-waku.com/makinas/

ポプらむ☆キュート

https://moji-waku.com/poprumcute/

ピグモ00

https://moji-waku.com/pigmo/

ピグモ01

https://moji-waku.com/pigmo01/

廻想体

https://moji-waku.com/kaiso/

ロンドB

https://moji-waku.com/ronde/

数式フォント

https://fontfree.me/1309

数式フォント難解

http://sapphire.hacca.jp/font/sushiki_ub.html

みつバッチフォント

http://sapphire.hacca.jp/font/mitubachi.html

どくむぎ

https://aramugi.com/?page_id=5640

叛逆明朝

https://freefont-search.com/hangyakumincho/

モッチーポップ

https://fontdasu.com/1750

スナップP

http://rooms.webcrow.jp/font/snap_p.html

Fontopo にほんご

https://fontopo.com/?p=89

ふぉんとうは怖い明朝体

http://www.fontna.com/blog/1371/

にくまるフォント

http://www.fontna.com/blog/1651/

Cheekふぉんと

https://nonty.net/font/freefont/cheek-font/

しろくまフォント

https://fontdasu.com/935

棘丸ゴシック

https://fontdasu.com/2728

黒薔薇ゴシック

http://modi.jpn.org/font_kurobara-gothic.php

黒薔薇シンデレラ&赤薔薇シンデレラ

http://modi.jpn.org/font_amemuchi-cinderella.php

トゲトゲロック

https://fontbear.net/togetoge/

ミウラLinerJr

https://fontnavi.jp/zakkuri/103-free_fonts.aspx

チェックポイント

https://fontdasu.com/941

チェックポイント★リベンジ

https://fontfree.me/2426

チェックポイント．（ピリオド）

https://marusexijaxs.web.fc2.com/quizfont.html

ほそふわフォント

https://huwahuwa.ff-design.net/%E3%81%BB%E3%81%9D%E3%81%B5%E3%82%8F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/

うたミンフォント小2版

https://fontfree.me/1403

うたミン「ほし0」

https://booth.pm/ja/items/318510

ニコモジ＋（プラス）

http://nicofont.pupu.jp/nicomoji-plus.html

ニコ角＋フォント

http://nicofont.pupu.jp/nicokaku-plus.html

ニコカ

http://nicofont.pupu.jp/nicoca.html

和音Joyo-R（試用版）

https://fontfree.me/2481

勢蓮呉竹トライアル-EL

https://booth.pm/ja/items/1156361

勢蓮明朝トライアル-EL

https://booth.pm/ja/items/1156375

えれがんと平成明朝（無料お試し版）

https://www.type-labo.jp/Hanpuelega.html

ルイカ（無料お試し版）

https://www.type-labo.jp/Hanpuruika.html

わんぱくルイカ（無料お試し版）

https://cute-freefont.flop.jp/typelabo_wanpakuruika.html

あられ（無料お試し版）

https://www.type-labo.jp/Hanpuaralet.html

アニト（無料お試し版）

https://www.type-labo.jp/Hanpuanito.html

キャパニト（無料お試し版）

https://www.type-labo.jp/Hanpu.html

セプテンバーN（無料お試し版）

https://www.type-labo.jp/HanpuseptN.html

ハッピールイカ（無料お試し版）

https://www.type-labo.jp/Hanpuhappy.html

墨東ルイカ（無料お試し版）

https://www.type-labo.jp/Hanpubokuruika.html

えれがんと（無料お試し版）

https://www.type-labo.jp/Hanpuelega.html

あいでぃーぽっぷふとまる

https://cute-freefont.flop.jp/id_pophutomaru.html

懐雲体

https://jikkyofont.com/2020/09/17/%E6%87%90%E9%9B%B2%E4%BD%93/

DiaPro

https://but.tw/font/

GD-高速道路ゴシックJA

https://forest.watch.impress.co.jp/library/software/gdhighway/

イマジン・ヨコハマフォント

https://www.city.yokohama.lg.jp/kanko-bunka/miryoku/openyokohama/process/torikumi/font.html

Ikaho（伊香保）フォント

http://mksd.jp/ikaho.html

Minakami（水上）フォント

http://mksd.jp/minakami.html

Holiday

http://www2.wind.ne.jp/maniackers/Holiday_Kanji.html

切絵文字

https://fontfree.me/500

水面字

https://cute-freefont.flop.jp/minamoji.html

モフ字

https://www.fub-koubou.work/

イバラ字

https://fontdasu.com/2624

自由の翼フォント

https://tanukifont.com/jiyu-no-tsubasa/

エセナパＪ

https://tanukifont.com/esenapaj/

FZイモケンピ

http://zone108.main.jp/font/fz-imokenpi.html

手書き系

瀬戸フォント

梅干フォント

http://font.xxenxx.net/umeboshifont.html

Kゴシック

https://k-gothic-font.hatenablog.com/

仕事メモ書き

http://font.sumomo.ne.jp/shigoto.html

遊びメモ書き

http://font.sumomo.ne.jp/asobi.html

殴り書きクレヨン

http://font.sumomo.ne.jp/font_2.html

こども丸ゴシック

https://typingart.net/?p=40

りいてがき筆

http://aoirii.babyblue.jp/font/riitf/index.html

りいてがきN

http://aoirii.babyblue.jp/font/riitn/index.html

りいポップ角

http://aoirii.babyblue.jp/font/riipopkk/index.html

りいもなか

http://aoirii.babyblue.jp/font/riimnk/index.html

りいクッキー無料お試し版

http://aoirii.babyblue.jp/font/riick/index.html

ぎゃーてーるみねっせんす

じゆうちょうフォント

https://fontfree.me/1541

にゃしぃフォント改二

https://fontfree.me/2341

ちはや純

https://welina.xyz/font/tegaki/%E3%81%A1%E3%81%AF%E3%82%84%E7%B4%94/

ちはやフォント+

https://fontfree.me/1042

ちはやゴシック

https://fontfree.me/1050

ちはやチョーク

https://welina.xyz/font/tegaki/page-1150/

ちはやクレヨンRE

https://welina.xyz/font/tegaki/%E3%81%A1%E3%81%AF%E3%82%84%E3%82%AF%E3%83%AC%E3%83%A8%E3%83%B3re/

ちはや角

https://fontfree.me/1046

無心　-むしん-

https://cute-freefont.flop.jp/modi_mushin.html

おつとめフォント

フォント選びを極めてデザインスキルをアップさせよう！

実際に現役デザイナーが使っているフォントから、今使えるフリーフォントをご紹介してきましたが、お気に入りのフォントは見つかりましたか？

くりかえしになりますが、フォント選びはデザインのクオリティに大きく関わる要素の一つです。

最初はフォント選びに時間がかかってしまうと思いますが、現役デザイナーが使っているフォントを駆使して目をこやしていけば、どんどんあなたのスキルも伸びていくので、ぜひ楽しみながらデザインにトライしてみてくださいね。