ベーコンさんの世界ブログ

デザイナー&お菓子作ったり企画したりしています。北海道でふざけたブログ書いてます。

良質なデザインを作るため揃えるべき日本語フリーフォント10種類

スポンサーリンク

f:id:rororororo:20180922160826p:plain
フォント大好きデザイナーのベーコンです!

良質なデザインを作るには、良いフォントが欠かせません。

それでは、「良いデザイン」ってなんでしょう?

ちょっと頭に思い浮かべてみてください

例えば…

・かわいいデザイン?
・お客さんが使いやすいデザイン?
・意味が伝わりやすいデザイン?


こんな感じでしょうか?
じゃあ正解の発表です

正解は…

全部です!

というかデザインの正解は、状況によって変わるんですよね

なので、状況によって変わる「いいデザイン」に対応するためには「たくさんの種類のフォント」が必要になります
たくさんの種類のフォントで、表現の幅を広く持つことで、デザインを正解に導きやすくなります

この記事はデザイナーだけではなく

・イラストレーター
・エンジニア
・ブロガー
・プレゼン資料を作っている人
・学校やサークルでチラシを作る人


このような人たちに役立つ、フォントの使い方講座です
世の中に「具体的なフォントの使い方を説明している本」が少ないのは、フリーフォントばかり紹介してしまうと有料フォントが売れなくなるからです

有料フォントはハイクオリティですし、フリーフォントより一括ダウンロードができて便利だったりします(手間も少ない)

でもね、無料でもある程度デザインはできるんですよ
しかもここ数年、日本語フリーフォントのレベルはかなり上がっています

もしデザインがうまくなりたいと思っているのなら、今回紹介するフォントを手に入れてからデザインを作ってみてください
表現方法がたくさんあるとデザインの幅が広がりますよ

良質なデザインを作るため揃えるべきフリーフォント

どんなフォントを持っていると、様々な種類のデザインに対応できるのか、事例付きで紹介していきますね

1.マルチに使える基本フォント3つ

まず使用頻度の高いフォントはゴシック体、明朝体、丸ゴシックです

本文、タイトル、なんでも使えます

「自分のパソコンにはゴシック体入ってるから必要ないよ!」

と思った方も、この良質なゴシック体を使ってみてほしいです
パソコンに最初から入っているフォントより表現方法の幅が広がります

1-1 フリーフォントで良質なゴシック体はコレ!

Noto sans(ノトサンズ)

f:id:rororororo:20180922224919p:plain
まず紹介したいのが、通常のゴシック体Noto sansです(別名:源ノ角ゴシック)
PhotoshopのアドビとGoogleが一緒に作ったフォントですね

Windowsにはメイリオ、Macにはヒラギノというキレイなゴシック体も入っていますが、Noto sansとなにが違うかと言うと

太さが7種類もある

これはデザイナーには当たり前ですが、一般の人には知られていないものすごく重要なことです

太さが7種類あるフォントだとどんなことができるか、ここから説明していきますね


ロゴの記事でも書きましたが、誰でも使える簡単で強力なテクニックの1つに「強弱をつける」というものがあります

この例を見てください
f:id:rororororo:20180922161332p:plain

同じゴシック体でも、太さが違うとまるで別のフォントです
そしてこんなに太いフォントは最初からパソコンに入っていません

たくさんの太さがあるフォントを持つことで、表現方法が多様になりデザインの幅が広がります

▼Noto sans(ゴシック体)の使用方法

・タイトル文字
・本文
・ロゴなど文字を加工する前の骨組みとして

・基本のフォントなので、何にでも使える汎用性があります、太ければ力強さを表現できるし、細いとおしゃれなデザインにも使えるマルチなフォントです
(例)
f:id:rororororo:20180922165325p:plain
同じような文字の使い方で「力強さ」「おしゃれさ」を表現しました

・力強さを出すためには、太い文字と画像でなるべく白と黒の差を出す
・おしゃれを表現するためには余白を大事にする

ことを意識しています

▼こんなYouTubeやテレビのテロップも太いゴシックで作れます
f:id:rororororo:20180922190828p:plain

▼必ずインストールしておきたいフォントNoto sans(別名:源ノ角ゴシック)はこちら
Google Noto Fonts

※このリンクには様々な言語のnoto sansがあるので、japaneseと入力してダウンロードしてくださいね(簡単です!)
f:id:rororororo:20180922193422p:plain

ゴシック体の応用編

f:id:rororororo:20180922164311p:plain
フリーフォントには他にも特徴的な楽しいゴシック体があります(太さはないけれど…)

例えば、
・高速道路ゴシック
・やさしさゴシック

こちらもゴシック体の仲間ですが、特徴的なフォントなので、使い方としては「3.デザインの質を上げる!デザイン系フォント」
をご覧ください!(下の方です)

1-2 良質な明朝体

こちらで紹介するのは、ゴシック体と同様、定番のフォント「明朝体」です
紹介するフォントも、先程のGoogleとアドビが作ったフォントの明朝体バージョンです

Noto serif

f:id:rororororo:20180922224950p:plain
こちらも太さが7種類あるおかげで、さまざまな表現方法があります

▼Noto serif(明朝体)の使用方法

・タイトル文字
・本文

ゴシック体と違って、堅い雰囲気や、おしとやかな雰囲気を出しやすいです
新聞の文字は明朝体ですが、すべての文字がゴシック体になったら…子供向けな感じで理解しやすい雰囲気の媒体になる気がします


▼ポスターっぽい事例
f:id:rororororo:20180922163544p:plain

ポスターを作ってみました
・タイトルが太い明朝
・本文が細い明朝体

になっています

タイトルを細い明朝にするとこんな感じ
f:id:rororororo:20180922172318p:plain

太いフォントがあると便利です

▼必ずインストールしておきたいフォントNoto serifはこちらからダウンロード

Google Noto Fonts
※このリンクには様々な言語のnoto sansがあるので、japaneseと入力してダウンロードしてくださいね(簡単です!)
f:id:rororororo:20180922193422p:plain

1-3 良質な丸ゴシック(フリーフォント)はコレ!

続いてみんな大好きな丸ゴシックです

源柔ゴシック

f:id:rororororo:20180809210358p:plain
Noto sans(別名:源ノ角ゴシック)を角丸にしたフォントです
柔らかくて女性的なイメージでも使いやすいフォントです

こちらのフォントのいいところは、もうわかりますよね?

そう、太さが7種類あるところです!

さあ、ここから事例です、まずはこちら

f:id:rororororo:20180922200015j:plain

これは、無料画像ソフトCanvaで作った画像です、文字の太さはHEAVYを使っています
▼この画像の作り方を、ものすごく簡単にわかるように解説した記事はこちら
www.baconjapan.com

どうでしょう?
柔らかさがあって、優しく語りかけるようなイメージの文字だと思います(後ろの鳥の写真ではインパクトを狙っています)

また丸ゴシック単体で見るより、普通のゴシックと比べたほうがわかりやすいと思うので比較画像を作りました

f:id:rororororo:20180922200235p:plain
左の丸ゴシックの方が、「やさしい」イメージになったと思います
逆に右の、普通のゴシックは「力強い」ですね

というわけで、このフォントの使いみちです

▼源柔ゴシックの使用方法

・タイトル文字(やわらかく)
・本文(やわらかく)

こちらも基本のフォントなので本文、タイトルどちらでも使われがちです
イメージとしては女性的なやわらかさを表現したり、ゴシックだと「デザインが強すぎる」でも「明朝ほどしなやかじゃない」デザインを作りたい時に使ってください

実は、最近とあるYouTuberにベーコンブログの校正を頼んで(だからクオリティが上がったのか!)、その代わりにデザインを教えているのですが、そんな彼にも「源柔ゴシックを使いなよ!」と指導しています

▼このYouTubeのサムネイルも源柔ゴシックです
f:id:rororororo:20180922200603j:plain
丸ゴシックは、動物関連のデザインにも合いますね

ちなみに、彼は現在1000人登録を目指して全力でがんばっているので、よかったらチャンネル登録をしてあげてください!
▼猫のデュフィチャンネル
www.youtube.com
子猫の飼育チャンネルです(今見たら、全部のサムネイルに源柔ゴシック使っていました)

▼必ずインストールしておきたいフォント源柔ゴシックはこちらからダウンロード

源柔ゴシック (げんじゅうゴシック) | 自家製フォント工房

2 温かみを表現できる手書きフォント

これまで紹介した、基本のゴシック体、明朝体では表現できないフォントが手書きフォントです!

手書きフォントの使える場面

・子供のデザイン
・やわらかいデザイン
・堅いデザインの中のアクセントとして
・手書きのふりをする

ぼくもよく使います。
昔、クラウドファンディングが失敗して、支援者に向けて謝罪?の文章を作ったとき、手書きフォントを使って送りました…誠意を見せたい時にも使えます!笑(手書きが得意じゃないもので…すみません)

というわけで、ぼくがよく使う手書きフォントです

2-1アームド・レモン

f:id:rororororo:20180922225530p:plain
ちなみにタイトルに使うと、こんな感じ、かなり独特な使い方です
f:id:rororororo:20180922212315p:plain

ぼくがおすすめの使い方はこれ

▼堅いデザインの中のアクセントとして、使います
f:id:rororororo:20180922212304p:plain

手書きで書いた感があり、かなり注目して見てもらえます

ちなみに、このような手書きに近い手書きフォントはたくさん種類があります
ぼくのMacにはこの5つが入っていました、お好みでどうぞ!
f:id:rororororo:20180922212426p:plain
本当に手書きっぽくしたい時は、アームド・レモンですね、えり字も結構使います

▼アームド・レモンのダウンロードはこちら
アームド・レモン | FONTDASU.COM

2-2殴り書きクレヨン

f:id:rororororo:20180922225553p:plain
手書きフォントの中でも独特な、子どもがクレヨンで書いたっぽいフォントです
ポイントは、太い文字ということです

太いとロゴやタイトルに使いやすくなりますからね
▼例
f:id:rororororo:20180922213449p:plain

ちょっと読みづらいけど、大きめの文字なら読みやすいかと思います

似た種類のフォントに「こども丸ゴシック」というものもあります
f:id:rororororo:20180922214246p:plain

このデザインには殴り書きクレヨンの方があっていますが、「子供の文字を再現したい」けれど、デザインなのである程度読みやすくしたいというリクエストの時はこども丸ゴシックを使うことの方が多いです

▼殴り書きクレヨンのダウンロードはこちら
手書きフォント「殴り書きクレヨン」のダウンロード|すもももじ

2-3やまフォント

f:id:rororororo:20180809210514p:plain
このブログで何度も紹介していますが、手書きフォントの太さがありつつ、「それぞれの文字のバランスが悪い」のがちょうどよいフォント
それがやまフォントです

なんか好きなんですよね
こんな例を作りました

f:id:rororororo:20180809205645p:plain

うん、かわいいですね

▼こんな気合い入れて作ったパターンも!
f:id:rororororo:20180809230957p:plain

▼やまフォントはこちらからダウンロード
>>やまフォントのダウンロード

手書きフォントまとめ

一括りに手書きフォントと言っても、太さによって大きく変わってきます
それでは手書きフォントの使い方をもう一度!

手書きフォントの使える場面

・子供のデザイン
・やわらかいデザイン
・堅いデザインの中のアクセントとして
・手書きのふりをする

ぜひ、使える場面があれば使ってみてください!
デジタルの中で、独特の手書きフォントはデザインを大きく変えてくれますよ

3.デザインの質を上げる!デザイン系フォント

最後はデザイン系フォントです
デザイン系フォントは、元々ゴシック体だったり、明朝体だったり、手書き系だったりするフォントに独特の加工をしたフォントです
デザイン系フォントを使うと、一気にデザインの空気が変わります

使いみちはフォントの個性によって違います、おすすめを紹介していきますね!

3-1はんなり明朝

f:id:rororororo:20180922225755j:plain
美しすぎる明朝体、普通の明朝の代わりに使えます
明朝体のコーナーにいれようか迷いましたが、はんなり明朝は独特の雰囲気なのでデザイン系フォントとします

一言で言うと色気のあるフォントです
(例)
f:id:rororororo:20180922215342p:plain
本文もはんなり明朝です、美しい…!

はんなり明朝の使いみち

普通の明朝体の代わり

強いて言えば、明朝体の硬さがなくなりますね、でも美しくなるフォントです

▼はんなり明朝のダウンロードはこちら
日本語フォント「はんなり明朝」 | フォント無料ダウンロード|Typing Art

▼はんなり明朝、こども丸ゴシックの作者の方にインタビューさせてもらいました
www.baconjapan.com

3-2高速道路ゴシック

f:id:rororororo:20180922230211p:plain
高速道路のフォントに似せて作ったフォントです
ぼくこれ大好きです、8年前くらいに作ったロゴもこのフォントをもとに作りました
f:id:rororororo:20180922215648j:plain

漢字も収録されていますが、このロゴに必要な感じがなかったため似せて作った気がします

高速道路ゴシックの使いみち

ロゴっぽい雰囲気を出したい時

▼いつもの例はこちら
f:id:rororororo:20180922220126p:plain
独特ですよね

▼高速道路ゴシックのダウンロードはこちら
>>高速道路ゴシックをダウンロード

3-3やさしさゴシック

f:id:rororororo:20180922230309j:plain
丸ゴシックと手書きフォントの中間という感じの絶妙なフォントです

例はこちら
f:id:rororororo:20180922220332p:plain

やさしさゴシックの使いみち

・手書きよりしっかりしたフォントを使いたい時
・丸ゴシックのもっと柔らかいイメージが欲しい時

▼やさしさゴシックのダウンロードはこちら
フリーフォントやさしさゴシックのダウンロード | フォントな

3-4コーポレート・ロゴ

f:id:rororororo:20180922220812p:plain
ロゴが作りやすいように、文字が直線でできている部分が多いフォントです
文字の太さもかなり太い!


f:id:rororororo:20180922220944p:plain

「かたまり感」のあるところもロゴ制作に使いやすいです

▼ロゴの作り方のコツはこちらの記事で解説しています(「かたまり感」の詳しい解説も!)
www.baconjapan.com

▼コーポレートロゴのダウンロードはこちら
モダンな「コーポレート・ロゴ」フォント無料ダウロード | 転職サイト情報のLOGOTYPE.JP

【コラム】みんなだいすきな筆字・行書フォントについて

プロはあまり使わないかもしれません
ぼくは高校生の頃は筆字フォント大好きでしたがデザイナーになってから使った場面は…ほぼ無い気がします
フリーで有名な青柳衡山フォントも、使い方がかなり難しいフォントだと思います…

ただし筆字・行書フォントでも太いと使いみちが出てきます
有料フォントですが、太い筆字フォントの事例を紹介します

筆ゴシック事例(有料ですが)

f:id:rororororo:20180922221808j:plain

フリーフォントだとなかなか難しいので、和の雰囲気を出したいときも、筆文字、行書体を使わずに明朝体を使った方がクオリティが高くなるのでは…と思います

まとめ

以上、良質なデザインを作るため揃えるべきフリーフォントでした

デザインは練習することでうまくなります
ただ、「フォント」というデザインに必要な最低限の道具を揃えずに練習しても、うまく練習できないことがあります

デザインを練習をするためにも、今回紹介したフリーフォントを揃えてみてください
揃えずにデザインを練習するのとでは、上達のスピードが大きく変わってくるはずです