【英語・日本語】おしゃれでかわいい・かっこいい!フリーフォントサイトまとめ

デザインのクオリティをグッと底上げしてくれる物の1つにフォントがあります。デザインテクニックも必要ですが、やはりフォントの影響力は計り知れません。

デザイナーでなくともワードやパワーポイントなど、ビジネスシーンでフォントを活用すれば資料としてのクオリティが上がります。もちろんブログや同人誌などでも有用です。

デザインの現場でフォントと言えばモリサワフォントが有名ですが、高額なので個人では気軽には使えません。

そこで今回は、無料で使えるフォントサイトをご紹介。英語・日本語ともに良い感じのフォントがありますので、使ってみて下さいね。

後半では持ってると便利なフォントも紹介してます。

Google Fonts

画像:Google Fontsは無料で使えるフォント ダウンロードもウェブフォントもOKです。

Google Fonts:Googleが提供する無料のフォントサービス。様々な言語に対応しており、日本語も沢山あります。
ダウンロードだけでなく、Webフォントにも対応しています。「Noto Sans JP」などはよく使うのではないでしょうか。

リンク先:Adobe Fonts

サイトの特徴

英語などの外国語はが多いですが、日本語フォントもあります。サイトは細かな解説があまり無いので最初は戸惑うかもしれません。ですが慣れれば難しい訳では無いので、まずはページ上部から言語やカテゴリーなどを切り替えてフォントを探してみて下さいね。

テキストを入力してプレビュー出来るので便利です。また、フォント名がローマ字表記でも日本語に対応していれば、きちんと日本語でもプレビュー出来ます。

フォントを選ぶ際のポイントの1つにフォントファミリーがあります。つまり書体の太さのバリエーションです。同じ書体でも細い物や太い物しかない場合、使い所が限られてしまいます。
太さが複数あると、見出しや本文などで使えるので統一感が出ます。

フォントのダウンロードはどこから?

気になるフォントを選択すると、詳細ページに入ります。ダウンロードしたい方は画面右上から。Webフォントを使い方は画面一番下から設定すると、画面右にソースコードが表示されます。一応ここからもダウンロード出来ます。

読み込ませるWebフォントの詳細を設定出来るのは有難いですね。

フォントの使用方法

これらのフォントは、Open Font Licenseの下でライセンスされています。 印刷物、デジタル、商用など、製品やプロジェクトで自由に使用できます。

Adobe Fonts

画像:adobe fonts商用も個人用も利用可能

Adobe Fonts:ご存じの方も多いアドビフォントです。Creative Cloudを利用している方は、数千を超えるフォントが無制限に使えます。アカウントを持っていれば商用にも個人用にも利用可能。もちろんWebフォントだって使えます。

リンク先:Adobe Fonts

サイトの特徴

英語以外の外国語はもちろん、日本語フォントも沢山あります。きちんと管理されているので、クオリティ的にも安心です。

分類ごとや書体で絞り込んだり、サンプルのテキストを入力して試す事も出来ます。
無駄にダウンロードする事も無いので便利です。

フォントを選ぶ際のポイントの1つにフォントファミリーがあります。つまり書体の太さのバリエーションです。同じ書体でも細い物や太い物しかない場合、使い所が限られてしまいます。
太さが複数あると、見出しや本文などで使えるので統一感が出ます。

フォントのダウンロードはどこから?

画像:Adobe Fontsでフォントを使える様にするには?

気になるフォントを選択すると、詳細ページに入ります。正確に言うとダウンロードでは無く、「アクティベート」と「Webフォント」のどちらかを選びます。

アクティベートは、PhotoshopやIllustratorなどアドビ製品で使える様に認証する事。クリックするだけで「有効」になります。

Webフォントでは、まず「プロジェクト」を作成します。このプロジェクトにフォントを追加して管理するイメージです。

新規プロジェクトを作るか既存のプロジェクトを選ぶとソースコードが表示されます。フォントを Web ページで使用するには、このコードを HTML の <head> タグ内にコピーします。

フォントの使用方法

Creative Cloudを利用している限り商用にも個人用にも利用可能です。
Webフォントに関しては、クライアントサイトではライセンスの都合上、使用するのは難しいかも知れません。自社サイトで使うか、Google Fontsの方が良いのではないでしょうか。

FREEフォントケンサク

画像:FREEフォントケンサク 日本語のフリーフォント検索サイト
FREEフォントケンサク

FREEフォントケンサク:日本語のフリーフォントは絶対数が少ないのですが、そんな日本語フォントが沢山集まったリンク集サイト。有名なサイトなのでデザイナーならずともおすすめです。

リンク先:FREEフォントケンサク

サイトの特徴

何といっても日本語フォントの多さが魅力です。「手書き風」「毛筆体」「角ゴシック「丸ゴシック」「明朝体」など豊富に揃っています。

もちろんカテゴリーや書体のイメージで検索が出来るので探すのも簡単。「かわいい」「レトロ」「おしゃれ」などのキーワード検索が便利です。

フォントのダウンロードはどこから?

フォントを選択すると、見た目だけでなく、どんな文字が収録されているのか詳細が見れます。

ページ下部に対応OSや配布元などの記載があります。その下に「ダウンロード」ボタンがあります。

このページから直接ダウンロード出来ない場合は、配布元からダウンロード出来ます。

フォントの使用方法

フリーフォントを集めたリンクサイトなので基本的に商用利用はOKですが、当然何をやっても良い訳ではありません。
必ずこちらの利用規約を守ってくださいね。

FONT FREE

画像:FONT FREE 無料で使える日本語フリーフォント投稿サイト

FONT FREE:無料で使える日本語フリーフォント投稿サイト。こちらも様々なテイストの日本語フォントが沢山集められたサイトです。

リンク先:FONT FREE

サイトの特徴

投稿サイトなので掲載されている数は多いですが、玉石混交といった感じです。「ひらがな」や「カタカナ」だけだったり、漢字まで揃っているなど様々なのでそこは注意が必要です。タグ付けされているので、一覧から見分ける事も出来ます。

「かわいい」「レトロ」「おしゃれ」などのキーワードでの検索が便利です。

ページ内に対応OSや配布元などの記載があります。

フォントのダウンロードはどこから?

基本的に配布元へ行ってダウンロードする必要があります。また、個人利用のみや商用利用OKなど、利用条件はバラバラなので要確認です。

フォントを選択すると、見た目だけでなく、どんな文字が収録されているのか詳細が見れます。

ダウンロードするのにアカウントが必要だったり、特定の条件を求められる場合があるので注意しましょう。

フォントの使用方法

基本的に商用利用OKですが中には要相談となっている物もあります。基本的にフリーフォントですが、投稿サイトな為か徹底されていません。実際は有料の物もあります。配布元で必ず利用規約を確認しましょう。

持ってると便利なフリーフォントの紹介

汎用性の高いフォントはGoogle FontsやAdobe Fontsにあるのですぐ見つかります。

ですが、ちょっと変わったフォントは種類が多くて選ぶのが大変かもしれません。

そこで、これは持っていたら便利っていうフォント(書体)をいくつか紹介していきます。

手書き風

手書きのフォントは意外と使いどころが多いので重宝します。個性的なものが多く、実際は使いどころに迷うものが多いです。

手書きの良さを残しつつ、実用性のあるものを集めました。

ふぉんときゅーとがーる。

画像:平仮名・片仮名が女子高生風(?)な可愛いフォント

学校の黒板に書いたような印象のフォントですが、クセが強すぎる事もなく使いやすいです。

フォントの種類

ゴシックに加え、最近は丸ゴシックが追加されました。お好みで使いわけてください。

  • 「JKゴシックL」フォント
  • 「JKゴシックM」フォント
  • 「JK丸ゴシック」フォント

リンク先:ふぉんときゅーとがーる。

クレー

手書き感は少ないですが、機械的な硬さも少なく親しみ易さを感じます。まじめな説明や注釈を付ける時に使うと良いですね。

フォントの種類

文字の太さはレギュラーとセミボールドの2種類あるので用途に合わせて使い分け出来ますね。

  • KleeOne-Regular.ttf
  • KleeOne-SemiBold.ttf

各フォント名をクリックした先の右側に「Download」ボタンがあります。

リンク先:クレー

ゴシック・明朝

はんなり明朝

画像:築地体を参考にした、 やさしくてふんわりとしたひらがなとカタカナが特徴

ご存じの方も多いと思いますが、築地体を参考にした日本語フォントで商用利用可能です。

フォントの種類

  • はんなり明朝

フォントページのページ下側にOpenType形式 Downloadというリンクがあります。広告のダウンロードと間違えて押さない様に!

タイピングアート:はんなり明朝

マメロン

画像:デジタルデバイスで使用することを意識したフォント

主にデジタルデバイスで使用することを意識して制作されたフォントなのでとても読みやすいです。明朝体ともゴシック体とも違う丸形書体で、両方の良いとこ取りをした感じの印象です。

フォントの種類

  • マメロン Hi-Regular

フォントページのページ下側に「ダウンロード」ボタンがあります。Webフォントも使えます。

もじワク研究:マメロン

「mini-わくわく」フォント

画像:大人から子どもまで楽しめる、ちょっと手書き風のかわいいフォント

大人から子どもまで楽しめる、ちょっと手書き風のかわいいフォントです。漢字は使えませんが、太い丸ゴシック系のフォントと組み合わせる事と良いです。

フォントの種類

  • 「mini-わくわく」フォント

フォントページのページ内に「フリーダウンロード」ボタンがあります。

リンク先:「mini-わくわく」フォント

マキナス 4 シリーズ

画像:無感情・無機質な印象のフォント

シャープやボールペンで字を丁寧に書こうとした際の直線的な部分が、無感情だったり無機質な表情となってデジタル化された様な書体です。

本文よりも、商品名などをカタカナ表記したり、近未来的な世界観と相性が良いです。

フォントの種類

  • マキナス 4 Flat

フォントページのページ下側に「ダウンロード」ボタンがあります。

もじワク研究:マキナス 4 Flat

ロンド B (スクエア)

画像:レトロな雰囲気と、未来的・モダンな感じが同居した印象のフォント

レトロな雰囲気と、未来的・モダンな感じが同居しているように感じられる廻想体を母体に、角を丸く、ひらかな・カタカナ・記号・英数字を新規収録したスピンオフ・フォント。

廻想体と同様にクセはありますが、非常に雰囲気のあるフォントです。実は記号や英数字も素敵です。

フォントの種類

  • ロンド B (スクエア)

フォントページのページ下側に「ダウンロード」ボタンがあります。

もじワク研究:ロンドB

まとめ

個性的なフォントは沢山あり、見ているだけでも楽しいのですが、実用性のあるものはごく僅かです。
汎用性のあるフォントはGoogle Fontsなどで探すのがおすすめ。

一方、個性的なフォントが欲しい時はページ後半で紹介したフォントをチェックしてみてくださいね。

画像:未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

未経験でWebデザイナーになる最低限必要なスキルと勉強はこれ!

画像:ポートフォリオの作り方 実績以外のアピール法

未経験Webデザイナーで実績無し – ポートフォリオサイトは必要?

画像:【 超基礎】HTML・CSSとは? ウェブすべてに関係する基本技術

【超基礎】HTML・CSSとは?ウェブすべてに関係する基本技術