見出し画像

フリーフォントを使い倒せ!

こいつの自作アイコン。何というか、趣味を極めてるよね。

★この記事について

本稿はLife is Tech! School秋葉原校のメンバー・メンターが執筆する、Akihabara-school Advent Calendar 202412/14分の記事です。今までの方々の記事も力作ばかり。ぜひ読んでね!


自己紹介

 鉄道とフォント、ものづくりが大好きすぎる高校生、めとろと申します。
 普段は鉄道のイラストを描いたり、WebSを頑張ったり、部活動のポスターやオリジナルTシャツに部誌、親に謝礼つきで依頼されたカスタマーハラスメントの告知用webスライダー等を作るなどなど、なんともデザイナーまがいなことをしてフォントと戯れる日常を送っています。
 筆者はフォントが大好きなだけで知識レベルは全くの初心者な上、本稿は初投稿の長く拙い記事ですが、最後まで読んでいただけたら嬉しいです!


0.受け手/作り手にとってのフォント

 当然ですが、皆さんはフォント、使ってますか?
 え?「あんまり使ってない?」 いやいや!そんなことはないでしょう。フォント、つまり「文字の字体」は、毎日見上げる電車の駅名標やサインにも、ネットニュースに出てくる広告にも、そしてもちろん本稿にも使われているように、この現代社会で物事を伝える・受け取る日常の作業に深く溶け込んでいる 超 重 要 なモノです。
 今は絶賛クリスマスシーズン。年末商戦の時期を迎える企業、団体だけでなく、その他あらゆる人々が、フォントを使って相手に物事を伝える時期でもあります。せっかくの機会ですから、「受け手」としてただ何も考えずに見るだけでなく、もっと「作り手」としてフォントに触れてみませんか?

 …「でもフォントって、お高いんでしょう?」

 →そう、お金のかかる有料フォントはめっちゃ高い。高校生の筆者のおこづかいでは買えたもんじゃないです。しかも所謂サブスクの方式だから、来年は契約更新でさらにお金が… あぁ、気が遠くなりそうです。
 有料フォントというのは、要するに文字の表現方法にお金を払う行為。ゲームの課金みたいな分かりやすい仕組みと比べると、何だかお金を払うのが億劫になる人も多いでしょう。
 しかしこの世には救世主、完全無料の「フリーフォント」が存在します。
 本稿では、そんなフリーフォントに焦点をあて、どうやってデザインに取り入れるか、どう使っていくかを中心に、筆者の所感を語り散らしていこうと思っています。

 ↓それでは早速、フリーフォントの世界に飛び込んじゃいましょう!


1.「フリー」フォントって?

 そもそも、本稿のテーマ「フリーフォント」とは何なのでしょうか。デザイン云々の前に、ここで軽く触れておきましょう。
 フォント  「文字の字体」なのは前章で触れた通りですが、ひとくちに「フォント」と言ってもその内実は多種多様の極み。無限の種類を持つと言っても過言ではありません。
 例えばこのnoteの記事。本文に使用されているフォントは、一般的に「ゴシック体」と呼ばれるもの。読みやすさとシンプルさがウリの、癖のない扱いやすいフォントです。

↑ゴシック体とは違った魅力を持つのがこの「明朝体」。
ちなみにこの本の作品名、分かりますか?
この方の文章、実はフォントと関係があったり…

 一方、小説などの文庫本で見られる飾りのついたフォントは、「明朝体」と呼ばれるものであり、これはこれで「扱いやすいフォント」と言えるでしょう。(この辺の用途について詳しくは後で…)
 こういう風に、印刷、掲示される媒体において、皆さんが日常生活で目にする文字は、ほとんどに名前がつけられていて、それぞれの持ち場で活躍しているのです。(例外:手書きの文字。それ風のフォントはありますが、それを使うならやっぱり自分で書いた方が味が出るものですね。)

 しかし、この世にあるフォントは、全て今すぐ使える、というわけではありません。いや、むしろ使えない(一般にPC上にデータとして存在しない)フォントの方が多いはず。
 例えば、このフォント。

ド〇キでめちゃくちゃ見るフォント。
"今ならフォントが0円!"  とか書いてありそう

 某店のポップに多用されていることでお馴染みのこのフォントは「ポップ体」と呼ばれるもの。(HGPや創英角はこれ以外のフォントも含めたブランド名みたいな意味です)
 これを意識して見ることはあんまり無いと思いますが、このフォントもさっきの「すぐ使えないフォント」の一種。Windowsなら仕様上使えますが、Macではライセンスが無い為使えないのです。

 そして、明確にすぐ使えないフォントがこれ。

ゆうしゃ は この "ふぉんと" を つかった!

 昔のゲーム機でよく見るフォント、俗に言う「ドット文字」です。
 さっきのポップ体よりも遥かに使用機会の無さそうなこのフォントですが、これこそが本稿のテーマ「フリーフォント」です。

…実用性の欠片もないフォントだなぁ。

→いや、それがいいんです。
だって、フリーフォントの魅力はそれですから。

 フリーフォントとは、その名の通り、「無料でインストールできる字体」を指す言葉です。が、それ以上に「面白いフォント」でもあるんです。
 当然、さっきみたいな特殊性の塊みたいなフォント達はWindowsでもMacでも初期設定扱いはされておらず、もし使用したいなら配布サイトからのインストールが必要なシロモノです。

 でもだからこそ、そんなフォントを求めている人、使いたいデザインがある人の(超ニッチな)需要に応えてくれる存在、それがフリーフォント
 かなり癖のあるフォントが多めですが、デザインに「ハマる」となんか楽しくなる存在。無料だから手軽に試せる、使える存在。

 筆者はそんなフリーフォントが大好きになっちゃった結果、本稿を仕上げています。
 この記事には僕の「好き」が詰まってるんです。


2.フォントとデザイン

 本題からちょっと逸れますが、この章はフリーフォント、というよりフォント全般とデザインについての内容です。
 デザインにおいて、フォントが持つ役割とは何なのでしょうか?
 ちなみに当の筆者はよく分からなくなって迷走している最中なので、この辺りで原点に立ち返って見直してみようと思います…。

①.それっぽさを演出する、という役目

 当たり前のような話ですが、フォントはその文字の印象を大きく決定づけるもの。同じようなものを指し示す場合でも、フォント(そして色)を変えるだけで大きく印象を変えられるのです。

各国のフラッグキャリアのロゴ。お国柄も割と出てる
(画像は「ある航空管制官のブログ」より)

 分かりやすい例だと、↑このような航空会社のロゴがあります。 
 あくまで傾向ですが、すべて同じ「航空会社」なのにも関わらず、

  • 老舗航空会社は細く飾りのある字体(俗にセリフ体といいます)を採用していることが多い

  • 新興航空会社、またはロゴを変更した老舗航空会社は、太く飾りのないシンプルな書体(サンセリフ体)や、その他オリジナルの特殊フォントを採用していることが多い

  • イメージカラーが暗い色だと前者、青や明るい色だと大概は後者

 というある程度の法則性が見えてきます。
 まぁかなりガバガバな理論だし反例は探せば幾らでもあるとは思いますが、そこそこの割合のロゴマーク、そして学校や飲食店など多種類のマークにこの理論は当てはまるのではないでしょうか。ここで何が言いたいのかというと、人々の認識、固定概念やデザインの根底には、「こういうフォントを使うのはこういうものである」という一定のイメージが存在する、ということです。(↑赤と緑はクリスマスの色、みたいなイメージのこと。これはこれで「トンマナ」としてnote上でも色んな方が紹介しているので本稿では触れません)
  英字のフォントだと説明が面倒なので日本語のフォント、ここでは先述の「明朝体」と「ゴシック体」を見比べると、

大体こうイメージされる。

 一般にはそれぞれ上の例のように解釈されることが多いでしょう。
 これを考えると、歴史を前面に押し出す博物館や城跡のサイトは明朝体や楷書体(筆で描いたような書体)で埋め尽くされていて、AppleやopenAIのサイトはシンプルさや新しさを体現するゴシック体ばかりなのも納得ですね。それぞれの「個性」をアピールし、個性に合わせたそれっぽい雰囲気を演出するのがフォントの仕事なのです。

 ちなみにこれについて面白い例として取り上げたいのが、キリンの飲料「午後の紅茶」のロゴです。
 ご存知の通り、午後の紅茶はペットボトル飲料ですから、そこまで歴史のある飲料ではない(1986~)し、なんならロゴを「紅茶が手軽に飲める」ということをアピールするためにゴシック体にしても良いような気もしますが、

ロゴのフォントにご注目
(画像は公式Hより)

 そう、ロゴには明朝体(厳密には違うけど)が採用されているんです。
 これは一体なぜか?   それはこのロゴが、本章のタイトルでもある「それっぽさを出す」というフォントの役目を最大限活かした結果だからでしょう。
 キリンの公式ホームページを覗いてみると、商品の由来には、
「『日本にも紅茶の本場イギリスの習慣を根付かせたい』そんな思いを込めて、<~中略~>本格的な紅茶のイメージが強調されました。」
 …
とあるように、商品のマーケティングにおいて強調されたのが、「ペットボトルの手軽さ」よりも「本格的な紅茶がペットボトルで飲める」という(当時の)ライバル商品に無いアドバンテージ。 それをアピールする、と決めたなら後は簡単。商品のロゴには、上品さや歴史のある感じを表現できる明朝体が採用されたのではないか…と、筆者は勝手に思っています。
 
 このように、フォント1つで伝えたいことを強調するのもお手の物。
 フォントというものは、いわば「それっぽさを演出する舞台装置」なのかもしれませんね。

②.「それっぽさ」と「読みやすさ」のせめぎ合い

東京駅の新幹線の発車案内。ゴシック体のオンパレード。
この日は東海道新幹線が運転を見合わせた日。写真右のような緊急性の高い表示も、ゴシック体が使われるのです。

 フォントに求められるのは、主に「それっぽさ」と「読みやすさ」。1つ目の「それっぽさ」は①で説明したので、ここでは「読みやすさ」=判読性の高さについて話していきましょう。
 現在、駅の表示、出口の説明のような不特定多数の人が見る表示・目印にはゴシック体の採用例が多いです。なぜなら、ゴシック体には飾りがなく、殆どの線の太さが均一で読みやすいから。
(ほら、現にこの文字用SNS、noteはゴシック体の独壇場でしょう?)
 また、さらに読みやすいようにこのゴシック体を改良したフォントなどには、"UD(Universal Design)フォント"と名が付けられ、その判読性の高さから、駅の表示以外にも義務教育課程の検定教科書など、様々な場面で採用されているのです。
 UDフォントは街中や日常生活で最もよく遭遇するフォントの1つだと思いますが、これが最大の力を発揮するのはただの表示、広告ではありません。
 このフォント最大の活躍の場、それは非常時に読むことになる文です。
 非常時に読む文章、つまるところ、人命や事故に関わる重要事項は、その場にいるみんなが読めることでやっと意味を成すもの。特に近年設置されたものなら、ほぼ全てがUDゴシック体のような均一で読みやすいフォントで説明書きがなされている、と言っても過言ではないでしょう。
 救護活動用機械であるAEDは、かなり太めのサンセリフ体で箱にロゴが書いてありますし、それの使用方法の表記や、非常口を表す緑のピクトグラムには、ゴシック体で説明が書かれているのが一般的ではないでしょうか。 
 このように、「みんなにちゃんと読んで欲しい」を至上命題とした表示は、突き詰めると大体UDゴシック体に行き着くのが定石です※。

 でも、ロゴなんかによく言える話ですが、あんまりそういう広告媒体のメイン(企業名の表記とか)に、そのままゴシック体を使う企業や商品は少ないと思います。

明朝/ゴシック体に区別出来なくとも全然読めるロゴの例
(画像は両社の公式ホームページより)

 例えばさっきの午後の紅茶を販売するキリンは、ロゴに結構特殊なフォントを使っていますし、航空会社のロゴでも明朝体かゴシック体(セリフ体かサンセリフ体)に分類出来ないオリジナルフォントを使う会社は多いです。
 しかし別にそれらの文字は判読し難い訳ではなく、普通に読むことができる場合がほとんど。(反例:こういうロゴとか)
 大概のロゴにおいて、フォントはその組織・団体の雰囲気を演出する「それっぽさ」と、ちゃんと読める「読みやすさ」がせめぎ合った結果、決まっているのです。だから、別にUDフォントじゃなくてもいい事も多いのです。
 それっぽさ
読みやすさ、あなたはどっちを優先してデザインしますか?
 それも考えつつ、次章に進んで参りましょう。

※ただしUDフォントには明朝体もあります。これの代表的な使用例は、1でも触れたような小説の本文などの書籍です。なぜここだけ明朝体なのか…ですが、これは明治・大正以前の印刷方式、活版印刷で使用された活版の字体が明朝体に近いものだったからではないか、と僕は勝手に推測しています。

ここまでで、フォントの説明はおしまい。
ここからは、実際にフリーフォントを使ってデザインを制作しましょう!


3.デザインにフリーフォントを添えて

 ここからは実際にデザインを製作していきます。いざ存分に、フリーフォントを使い倒しましょう!

①:どんなフォントを使っちゃおう

 フォントを探して調べる前に、まずは自分がどんなフォントを使いたいかを考えましょう。
 フォント選びにおいて「それっぽさ」は最大のキーワードです。何も考えずに検索を始めるよりも、始めから、

・今自分が何をしたいか
・どんなフォントなら伝えたいことが伝わるか

 を頭で整理して検索する(フォントを選ぶ)方が時間がかかりません。
 特にデザイン関連の場合(特に「フリーフォントを使う」という選択肢がある人にとっては)、わざわざフリーのゴシック体や明朝体をダウンロードする必要はそんなに無いと思います。理由はもちろんパソコンには初期設定で最初からそこそこいいフォントが沢山入っているから。
 例えばMacなら游明朝、HGSゴシックは勿論、Windowsだと実は使えない(買わなきゃいけない)ヒラギノフォントも使えちゃいます。これは存分に活かしちゃいましょう。PowerPointの資料ではほぼ最強格のフォントです。
 しかし、そういうフォントは文庫本の表紙など、デザイン性よりもタイトルを伝える必要のある媒体には向いているものの、その他の一般のデザインやロゴには向かない事も往々にしてあるので、ここでは新たにそれら以外のフォントを新たに用意して使用する前提で話を進めていきましょう。

最上部のサムネイル。完成の1歩手前がこんな感じ

 …筆者は今からこの記事のサムネイルを自分で作ります。
 (サムネイルとは、見出しとしてトップに表示する画像のことです)
 筆者はここで何を表現したいのでしょうか?言語化するのが割と面倒な工程ですが、例えば筆者がこの記事で伝えたいことを簡潔に纏めると、

  1.  フリーフォントはこの世に沢山ある!

  2. 「フリー」のフォントはめっちゃ便利!

  3. フォントをデザインに使うにはこういうことを意識するといいかも!

 とかだったりします。もしこれをフォント選びの参考にするなら、

1.「沢山ある」→フォントの多様性を表現したい 
→もう安直に、たくさんのフォントを使おう!

2.「フリー」→無料でもいいフォントはある!
→ちょっと特殊なフォントをふんだんに使おう!

3.「デザインに…」→テーマは当然「デザイン」
→タイトルにもデザイン要素が欲しい!
 
+サムネがダサかったら説得力が出ない!

 という結論に行き着くのでは無いでしょうか。またこれはゴシック体の独壇場、noteの記事ですから、全体的な統一感を出す意味からも、ゴシック体寄りのフォントを使うのが良さげ…な気がします()
 ついでに筆者はシンプルなデザインの方が好きなのでなるべく色数は少なめにしようと思っています。(ただの趣味)
 ということで筆者が出した結論は、

  • A.タイトルに使うメインフォントはゴシック体寄りの濃い特殊フォント

  • B.なるべく沢山のフォントを使用して、フォントの多様性をイメージ

  • C.背景は白。文字色は別に色を使う

 という3つです。(また後で変更するかも)
 この結論を元に、次に進んでいきます。

 余談ですが、そもそも何を表現したいか悩んでいる時は、フォントと一緒にデザインの例を探しましょう。その中で「これいいな」と思えるものがあったら、それをいい感じにオマージュしたりエッセンスを取り入れたりして、自分のデザインの糧にしていきましょう。何事もまずは模倣から。著作権とか意匠権(話すと長いので割愛)の許す範囲内でどんどんいいデザインを見つけてパクオマージュしていきましょう!
 それで言うと、最近筆者はこのFedExのロゴに感動しました。

Eとxの間、よく見ると…

 ただのサンセリフ体に見えて、隠された意味があるのがミソ。実は「Ex」の文字の間に「➡︎」が隠されているのです。(有名な話なのかも)
 ここには「迅速」「正確」という運送会社ならではの意味が込められているのです。本稿で何度か「その組織・団体を表すのが…」云々と書いていますが、これ以上にカッコよく企業を体現しているロゴを筆者は知りません。
 しかもあからさまにあるのではなく、気付いた人にしか分からないというオマケ付き。初めて知った時の衝撃は何だかんだ今も覚えています。
 …元々長文を書く癖のある筆者が、自分の好きなことを語りだすと本当に止まらない [だから本稿は意図的に鉄道要素を薄くしている]  と思うのでここでは説明を割愛します。(詳しくはこちらから。)
 こういう手の込んだアクセント、いつか自分で作りたいものです。

②:フォントを探そう!

 さて、ここからはフォントを探す、つまりネットサーフィンの時間です。
 こういう時に乗る波を間違えてYouTubeでも見ようものなら一瞬で時間が溶けていく(←経験談)ので、自分を律してタイパを上げましょう。
 
 さっきの①で方針は決定しました。要するに今から筆者は
「シンプルで見やすく、ゴシック体寄りだけど普段あまり見かけない、ちょっと特殊なフォント」、を探せばいいわけです…が、なんか注文が多い。
 こんな曖昧な文を検索エンジンにそのまま打った所で出るとは思えないので、もう少し欲しい要素を分解しましょう。
 まず重要な要素である「シンプル」は当然ワードに入れるとして、「特殊なフォント」ですが、これは「特殊」とか書いてもしょうがないので、別の言葉で言い換えます。
 求めているのは、強いて分類するなら「かっこいい」的要素なので「クール」などと入れてみたり、特殊さを求めるなら「クセ強め」「インパクト」、または総称して「デザインフォント(書体)」というワードを入れてみてもいいかもしれません。
 ということでまずは試しにフリーフォント クール シンプルと入れて検索をかけてみると….

お、なんかいい感じ。

 良さげな感じのフォントの候補が、ズラリと並んでいます。
 いいですね。使えそう。筆者はここから探すことにします。なんかイマイチな結果だった、という方は、検索内容を変えるのも手ですが、ここではフリーフォントのまとめサイトも見ていきましょう。
 これには色んなサイトやブログがありますが、個人的おすすめは

「フォントラボ」のサイト。紹介されているフォントが多いのはもちろん、さまざまな検索方法が備わっているサイト。神。救世主。

フォントラボです。このサイトはかなり分かりやすいUIかつ、さっきみたいなキーワード別の検索もできるなど、フリーフォント狂信者にとっては神のようなサイトです。ここを見れば大概なんとかなります。見ましょう。
 
いい感じなものを見つけて権利を確認して(←超重要!詳細は後で)パソコンにインストールしたら、この工程は終わりです。

③:文字を配置してフォントを決めよう!

 本章から、実際のデザインの工程に入ります。
 まずは好きなツールを開いて、データを新規作成します。ちなみに筆者が使っているのはPowerPointとIllustrator。そう。パワポもデザインツール。
 
初っ端の東西線のアイコンもPowerPointで自作したものなのです。
 ここではPowerPointを使います。まぁ正直なんでもいいです。今から作るのはシンプルなサムネイルだし、そもそもAdobeに頼るのはやりたいことが出来なくなってからでいいんです。
 まずはタイトルとサブタイトル、それと本稿はアドベントカレンダーの一員なので、それの日付の要素を追加して…

こんな感じ。初期設定過ぎるしデザイン要素ゼロ。

 これで下地はほぼ完成。あとはタイトルやキャッチコピーを構成するフォントを変えましょう。
 ①で方向性(ちょっと特殊なフリーフォントを沢山使う、デザイン性もあるもの)、②でフォント(結局筆者は既存フォントを含め20個以上候補を用意しました)を用意したので、これに従って作っていきます。
 まずは安直にタイトルのフォントをそれぞれ変えて、また目立つように色付けをします。すると…

タイトルに目がいかない。というか読めない

 なんか気持ち悪いデザインが完成しました。
 これは初期案の1つなのですが、これにしなくて良かったですね。
 遠目に見ると上の「フォントで…」の1文と「使」しかマトモに頭に入ってきません。それに背景は白なのだから情報量はそんなに無いはずなのに、なんか理解するのに疲れますね。「い」が黄色で読みづらいし薄いです。
 一体、このデザインは何がダメなのでしょうか?
 次の章で見ていきましょう。

④:無駄の殲滅と統一感

 結局この後5分ぐらい考えた筆者の結論ですが、
 その1つは「統一感がない」という点です。
 このサムネイルでは1文字ずつ文字や色を変えていますが、多分よほど丁寧に作り込みでもしない限りは、使う色やフォントは削減していった方がいいのかもしれません。

 「デザインは引き算」。
 …
誰かがそんなことを言ってた気がします。
      …誰だっけ。

 というわけで削減した結果、

脳が疲れないタイトル。
でもタイトルは目立たせたいし、何よりシンプル過ぎる…

 こうなりました。「使い倒せ!」は廻想体、「フリーフォント」は国鉄っぽいフォント、サブタイトルはさっきのJFドットを採用しています。
 なんかちょっと寂しいですが、タイトルに色を付けて、代わりにサブタイトルを薄くするだけでも、

まぁ、ちょっとずつそれらしくなってきた

 少しは満足のいく感じに近づいてきました。
 まだまだ弄りますが、一旦本章はここまでです。

⑤:改めて、やりたいことを考える

 さて、上の案を作ったところで改めて考えていきましょう。
 筆者はここで何を表現したいのでしょうか?…と考えつつ、①を見返すと、指針にあってまだやってないのが、
「なるべく沢山のフリーフォントを使う」です。
 おっと、さっき消した要素ですねぇ。引き算の次は足し算。プラマイゼロにしてたら元も子もないですが、どう変えていけばいいでしょうか?
 大人しく諦めてもいいですが、もうちょっと足搔きたいし、そもそも今はシンプル過ぎて多分サムネイルとして目立たないので、もうちょっと情報量を増やしていきましょう。
 今から大きく弄れないのは、大きく分けて

  • タイトルの文字のフォントと色

  • 背景(白)

  • タイトル、サブタイトルの大まかなサイズ比率

でしょう。なら今大きく変えられるのは背景の装飾です。ここで沢山フォントを使えばいい。
 …じゃあどうするか。要するに背景をフォントでいっぱいにすればいい。
 なら…

薄くすればギリギリ背景に出来る!

 背景をサブタイトルで埋め尽くしました。
 ちなみに全部違うフリーフォント。英字のみ対応のフォントも使えるように英訳した文(Extend your design world with fonts!)も用意しています。
 これを組み合わせて、

かなり完成形。やったね。

 こうなります。僕はもう完成で良い気がしていますが、一応手直しを次章で加えます。

⑥:いい感じに微調整

 感覚です。頑張ってください。いい感じに微調整してください。
 ここで今更書くことは正直なんもないです。良さそうだな、と思ったことをやってください。
 筆者の場合はここで、

  • タイトル文を少し大きく

  • 下に英字フォントを使ってサブタイトルを追加

  • 背景をちょっと弄って、タイトルを読みやすく

しました。そんなこんなで完成するのが、

完成!即興で作ったにしては、まぁ悪くない

 冒頭のこのサムネイルです。
 
素材探し込みで大体1-2時間ぐらいでしょうか。背景のフリーフォントのごちゃ混ぜ具合の調整に時間を割いていたような気がします。
 もっとも、やる人がやればもっと綺麗でしょうし、筆者もさらに時間をかけた方が良かったのかもしれませんが、割と本稿の締切も迫ってるし筆者には期末試験もあるのでこの辺りで締めておきます。
 妥協するのも大事だったりして…ね?

<まとめ>

没のサムネイル案。今思うとこれも良かったかも

 ここまででサムネイル、そしてフリーフォントを使ったデザインの例が完成しました。
 なんか最後は感覚で適当に丸投げした感が否めませんが、ここまでやってきた手順を振り返ると、
 ①使いたいフォントの雰囲気/全体の方針を決める
 ②使えそうなフォントを探す
 ③一旦配置してみる
 ④統一感を意識して、無駄を消してみる
 ⑤その上でもう一度やりたいことを吟味してみる
 ⑥いい感じに微調整

 …で、フォントとデザインが少しずつ定まっていくのが筆者の脳内とパソコンのデータです。
 本行程が正解かどうかは分かりません(多分違う)が、フリーフォントをデザインに取り入れる時のちょっとした参考にでもなったら嬉しいです。


4.フリーフォントの諸注意

 さて、ここまでフリーフォントをべた褒めしてきましたが、無料であることの宿命か、やはり欠点は存在します。

①権利関係

配布サイトには、ほぼ必ずライセンスが明記されています。
(画像は文字ワク研究「マキナス」の配布サイト)

 まずは権利関係。フリーフォントにも権利が関わることがあるのです。
 意外と多いのが、商用利用不可のフォント。もっとも僕は商用利用するデザインなど片手で数えられる程しか作ったことはありませんが、用心に越したことはありません。配布サイトは凝視しましょう。
 たまに製作者のXアカウントをフォロー、という条件もありますね。フォローしておきましょう。新しいフォントの情報も得られて一石二鳥です。

②非対応の文字

「無料」と「変」が明朝体になっちゃってます

 上の文字、一部の漢字が明朝体になっています。
 これは筆者が意図的にそうしているのではなく、使用しているフォント(NIKKYOU SANS)が「無料」と「変」に対応していない為、デフォルトの明朝体でしか表示することが出来ない状態になっているからなのです。
 こんな感じで、しっかりとしたサポート体制が無く、しかも日本語には旧字体や常用漢字でない複雑な字などもわんさかあるので、完全対応を諦めたフォントも結構あります。…いやほぼ全部そうかも。
 そういうのに悩み始めたら、大人しく有料フォントを買いましょう。
(ちなみに無料フォントが「有料フォントの体験版」として配布されている時もあります。まぁ、そういう場合は小学生の漢字も怪しいですが)
 一方、この心配がほぼ不要なのが英字フォント。なぜなら総文字数が、A-Zや数字、また!/?.<のようなメジャーな記号を含めても100種類に満たないため、大体のフォントは全部の文字に対応してくれているのです。

 そういえば、僕の「漢字も使えるフォント」対応した字が多いフォントかの判断基準は、ズバリ「自分の名前がちゃんと書けるか」です。
 筆者の氏名は4文字中2文字が旧字体、そのため自分の名前を全て表示できるフォントはかなり優秀なのです。
 苗字、名前が難しい方は、ぜひそれを指標に判断してみましょう。意外と当たるもんです。

③たまに読めない

初見殺しどころか、答えが分かっても読めない

 たまに読めないフォントがあります。例は筆文字(衡山毛筆フォント草書)なのですが、筆者には全く読めません。まぁ極端なものは稀ですが、「時々読みづらい文字のあるフォント」は沢山ありますね…
 他の人が読めるかは意識して損はないです。

以上の事を頭に入れつつ、楽しいフリーフォントライフを!


最後に


今パソコンで「ふ」と入力しただけでこうなります。
立派に調教されたね。僕のWindows…

編集後記

 改めましてこんにちは。筆者のめとろです。
 noteの割には長い気がする本稿、いかがでしたでしょうか?
 フリーフォントの奥深さや使う、探す楽しさを感じていただけましたでしょうか? そんな興味を興すきっかけ、一助になっていれば幸いです。(筆者、もとい僕の趣味が暴走した怪文書なのはもう言うまでもありませんね。長文書いてすみませんでした…)
 フリーフォントは様々な人が作ってネットに公開しています。数字表記や象形文字に全振りしたピーキーなものもあれば、企業の記号、表記を完全再現するマニア向けフォント、とりあえずこれにすれば困る事は無いレベルのオールマイティーなゴシック体などなどなどなど…探せばきっと無限大、あなたが求めるフォントも、きっとあるはずですよ。
 冒頭でも触れた通り、世間はもうすぐクリスマス、ついでに年末年始も迫っています。日常にさまざまなポスター、サイン、文字、メッセージ、
 つまり百花繚乱のフォントが溢れる時期な今、デザインを意識しつつ、
ぜひぜひフリーフォントと一緒に、楽しい年末をお過ごしください。
 
 ここまでの案内は、フォントと鉄道が大好きな高校生、めとろでした。
 Life is Tech!で作るアドベントカレンダーも、残すところ約半分。
 残りはどんな記事なのでしょうか。楽しみにしたいと思いつつ、ひとまず僕はかつての中学の卒業論文より長い本稿をさっさと締めたいと思います。
 ここまで飽きずに読んでいただき、本当にありがとうございました!

Akihabara-school Advent Calendar 2024
12月14日分記事担当 めとろ

参考文献・引用した資料、サイト(下線はリンク)

ACAP公式ホームページ(カスハラのスライダーをデザインしました。)
キリン公式ホームページ(+午後の紅茶の特設ページ
ANA公式ホームページ
・おんちゃん 「読めそうで読めないけど分かると読めるロゴマーク
(↑ Life is Tech!メンターOBの方が書かれたロゴの記事です。めっちゃ読めないロゴですが、何の図案化か、分かるかな?)
・ロゴマーケット 「さりげない工夫がなされたロゴマーク | FedEx」
フォントラボ ホームページ
文字ワク研究 「マキナス」配布サイト
筒井美希『なるほどデザイン』エムディエヌコーポレーション 2015年
 ※  本稿で使用した例え話やデザインの例は全て自分で考えて仕上げておりますが、結論の根幹やデザインの要点、というか無意識的な筆者の考え方の元ネタ(初めてかつ唯一の筆者所有のデザイン書)だったりする本です。お値段は張りますが、オールカラーで、こんな怪文書の100倍簡潔に、分かりやすくデザインのことが書かれています。ご参照あれ。)

Special Thanks

・Life is Tech! 秋葉原校
・校正に関わってくださった方々
・本稿で紹介したロゴやサイト、フォントを制作された方々
・こんな所まで読んでくれる、心が広すぎる皆様

おまけ:
「"イーハトーヴォ"ってどこ?」という、本来は本稿のおまけだった内容を独立させている記事も執筆しています。最初の方の文庫本の伏線回収にもなってるので、読んでくれるとすごく嬉しいです。

このサムネイル。読んでね。


おしまい!


いいなと思ったら応援しよう!