「もっと読みやすくできるはず」。白源、Bizin Gothic作者が日本語入りプログラミングフォントを手がけ続ける理由【フォーカス】

2024年6月12日

プログラミングフォント制作者

たわら

プログラミングフォント制作者。コーディングに適した欧文・英数字フォントと、日本語フォントを合成し、新たなフォントを生み出す手法に定評がある。2019年5月に「白源(HackGen)」を公開したのを皮切りに、毎年のペースで合成フォントを手がけている。本業ではインフラエンジニアやWebプログラマなどを経て、現在ではSaaS企業にてSREを担う。自身の息子に「プログラミングを教えて」と頼まれた時、まずはプログラミングフォントの重要性を説いた。
X
GitHub

日本語に対応したプログラミング用フォント「白源 (はくげん・HackGen)」は、2019年にGitHub上で公開され、現在では2000件のStar数を持つ人気の書体です。作者は、欧文・和文合成フォントとして2010年代に高い人気を誇ったプログラミングフォント「Ricty」にインスパイアされた、「たわら」というユーザー

これで理想のプログラミングフォントができたかと思いきや、たわらさんはその後も毎年、合成フォントをリリースしてきました。2024年3月には、GtiHub公式から23年11月にリリースされたばかりの欧文プログラミングフォント「Monaspace」をベースに、和文入りプログラミングフォント「Moralerspace」を制作。5月下旬に公開した新たな合成フォント「Bizin Gothic」も大きな話題になりました。

無償での活動ながら、一体なぜ、何作ものプログラミングフォントをつくり続けているのか。「エンジニアの皆さんが日本語でプログラミングできる『選択肢』を増やしたかった」と語るたわらさんに、コーディングフォントにこだわる楽しさを取材しました。

日本語プログラミングフォント不遇の時代、選択肢を増やしたくて

――早速ですが、和文入りのプログラミングフォントをつくりはじめたきっかけを教えてください。

たわら日本語を使ってコーディングするエンジニアの「選択肢」を増やしたかったのです。

少し話は逸れますが、私は昔からシャーペンやノートといった文房具を選ぶとき、各社の各製品を片端から試して比較するのが好きでした。「このクルトガというシャーペンは先端が回るのがウリらしいな。おお、本当だ」などと各製品の特徴を理解した上で試し、自分の好みの品を見つける流れが楽しかったのです。

エンジニアになってからも、最も長く付き合う道具のひとつであるテキストエディタを、いろいろと試してきました。中でもプログラミングフォントは、エディタのUIを形作る極めて重要な要素のひとつで、さまざまな既存フォントも試しましたが、正直、しっくりくるものはごくわずかでした。

▲たわらさんが24年3月に公開した「Moralerspace」に同梱されているフォント群

たわら:そもそも2010年代までは、「プログラミングフォント」といえば、専ら英数字のみの表示に対応したものが多く、「日本語文字も表示できるプログラミングフォント」は極めて少なかったです。

当時有名だった和文入りプログラミングフォントは、合成フォントの先駆者的存在「Ricty」(※1)と、あとせいぜい「Myrica」(※2)という書体ぐらいしか思いつきません。ほとんどの皆さんは、英数字のみ対応したプログラミングフォントか、OSにプリインストールされているMSゴシックなどのフォントを使っていました。

エディタによっては欧文フォントと使い分けて、日本語文字のみ自動的にOSプリインストールのフォントを表示する機能もありますが、英数字と日本語部分とで表示幅が均等ではないなど調和が取れていない見た目になることが多く、使いづらかったのですね。

(※1)Ricty:欧文フォント「Inconsolata」と和文フォント「Migu 1M」を組み合わせたフォント。英数字と日本語を合成したフォントとして、2010年代前半には先駆者的な存在として知られた。2023年1月にサポート終了。
(※2)Myrica:Rictyに影響を受けたtomokuniさんというユーザーが、「Inconsolata」と和文フォント「源真ゴシック」「Mgen+」を合成して制作したフォント。GitHub上で最古のバージョンは2014年12月に公開されている。

▲たわらさんが5月末に公開したBizin Gothic

――でも、すでに「Ricty」と「Myrica」という選択肢があったのならば、それを使えばよかったのではないのでしょうか?

たわら:確かに「和文を使ってコーディングしたい」という願望はこれで叶えられますが、「Ricty」と「Myrica」は英数字の部分がどちらも「Inconsolata」という書体をベースにしているんです。結局、異なるフォントに見えても欧文部分は同じですし、全体的な雰囲気は似たようなものだったのです。

でも私としては、もっと異なる性質のフォントをあれこれと比べて楽しむために、多様な選択肢がほしかったのです。

また、当時はマイナーな書体ジャンルだったので、「Ricty」「Myrica」を含め、和文入りプログラミングフォントを試したことがない、あるいは知らない、という人がかなり多かったのも不満でした。

自分のためにフォントの選択肢を増やしたかったし、皆さんにも和文入りプログラミングフォントという道具をあれこれと試しながら比べて使ってみる面白さを知ってほしかった。なかなか新しいフォントが出てこなかったので、「ならば自分でつくるしかない」と考え、白源を制作したのです。

▲「Inconsolata」のテキスト(画像は公式サイトのスクリーンショット)

難解でニッチなフォントづくりの世界へようこそ

――最初に手がけた白源は、どんなフォントなんですか?

たわら:プログラミング用の英文フォントで、太めの線をしている「Hack」と、Adobe製の和文フォント「源ノ角ゴシック」にさらに丸みを付けた派生フォント「源柔ゴシック」を合成したフォントです。

全体的に線の輪郭がはっきりしており、遠くからでも視認性が高いのが特徴です。また、パイプ記号「|」は中央部分で破断線化させ、長音記号「ー」と漢数字の「一(いち)」ではそれぞれ変形させるなど、私の好みをもとに、元のフォントにはない独自のカスタマイズをしています。こうしたこだわりによる識別性の高さが、エンジニアの皆さんに好評を得ているようです。

▲白源フォント 長音記号「ー」は左側に、漢数字「一」は右側にアクセントがあり、識別が容易

――未経験からのフォントづくりは、大変ではなかったですか?

たわら:おっしゃる通り、実に苦労の連続でした。

正直、最初は「合成フォントなんて英文と和文フォントをくっつけるだけだろう」などと思っていました。いざ自分で実際に挑戦してみたら、難易度は想像のはるか上でした。

まずは、勉強手段の少なさ。フォントづくりは、ニッチな世界なので、フォントファイルのスクリプトを構成するパラメータについて解説したドキュメントは、Microsoft、Adobe、Appleや、フォントメーカーが出している資料ぐらいしかないですし、内容も想像以上に難解でした。

私の場合、とりあえずは「Ricty」のビルド用スクリプトを眺めり、ビルドし「Ricty」自体をフォント制作ツール「FontForge」で開き、手当たり次第に表示関連のパラメータをいじってみました。「あ、ここに手を入れると字幅や高さが変わるのか」など、どこがどう変化するのかを確認し、ドキュメントで該当するパラメータについてのリファレンス部分を探し出して意味を理解する、ということを繰り返しました。

また、合成をしようにも、和文と英文フォントをそのまま単純につなげればいいなんてことはないんです。たとえば高さを適切に調整せずに合成すると、小文字「g」の下部の曲線が表示できる領域からはみ出して消失したりするんですよ。

白源の制作開始からリリースまでには約3か月かかりましたが、ほとんどの時間はこうしたフォントの仕様の設定の感覚をつかむ調査に費やしました。

――ほかに、どんな困難を経験しましたか?

たわら:私にとって最も意表を突かれたのは、文字のサイズ変更に応じて起こるトラブルです。

プログラマの「あるある」だと思うのですが、エディタやターミナル上で、視界に入る情報量を増やすために、文字サイズを小さくすることはよくあります。

白源でも同じことをやろうとしたら、文字サイズが小さくなっていくあるタイミングで、字体の線同士がくっついたりして表示が崩れてしまったんです。

対策を調べてみたところ、これを防げる「ヒンティング」という技術に行き当たりました。文字に対して、どんな大きさでも常に輪郭にきれいなアンチエイリアスがかかるよう、ナビゲーションのような設定を施すのです。白源では英字部分に、この「ヒンティング」を適用してあります。

――未知のトラブルが起こってからはじめて知ることが多かったのですね。

たわら:はい。ドキュメントが少ない分野では、トライ&エラーでしか学べないことがあるのだと痛感しました。

実際にフォントをつくってみるまで、当然、フォントのパラメータ設定もヒンティングなんて概念も、知りもしませんでした。でも調べれば調べるほど、仕様や定義の幅と深さが半端ではないことに気付かされました。そういうときは、実際にいじって試行錯誤し、肌で覚えた方が早いこともあるのです。

▲たわらさんが21年7月に公開した「PlemolJP」。「IBM Plex Mono」と「 IBM Plex Sans JP」を合成している。これもたわらさんのお気に入りで、ブラウザでのウェブサイト閲覧時に利用

フォント制作は好みと「裏テーマ」を貫きたい

――白源以降も、毎年新しい日本語入りプログラミングフォントをリリースしていますよね。2024年にも、「Moralerspace」と「Bizin Gothic」を手がけました。たわらさんは、なぜ合成フォントをつくり続けているんですか?

たわら:単純に好奇心に駆られて「やってみたい!」は一番のモチベーションですね。

白源を手がけて以来、暇なときに英文フォントや和文フォントを眺めていると、ふと「このフォントとあのフォントを組み合わせたらきれいな書体が生まれるんじゃないかなあ」と思い浮かぶことがよくあります。丸みの印象が強い英文フォントを見たときに、同じ雰囲気の丸みを帯びた和文フォントを連想するんです。

すると実際に合成して確かめたくなっちゃうんですよね。つくったものはライセンスの問題をクリアできているものならそのままリリースするんです。ベースにしたフォントが「Monaspace」のように公開されたばかりのフォントなら、「もう和文入りバージョンをつくったのか!?」と面白がってもらえるので、こうした反応をもらえるのも楽しいですね。

もうひとつは、人によってフォントに求める仕様が異なるからです。皆さん、フォントで重視する要素や、「使っていてしっくりくる」ポイントが本当にバラバラなんですよ。ですので、さまざまな性質のフォントをリリースすることで、結果的にユーザーの要望を満たせる可能性を上げられるのではないか、との考えがあります。

――ユーザーがフォントに求める仕様の違いとは、どういうものがありますか?

たわら:線の太さや形など、とにかくいろいろとあります。はっきりと好みが分かれる最たる例は、「全角文字と半角文字の幅の比率」です。

たとえばエディタ上にて、マウスによる矩形選択をよくする人では、全角1文字が、ちょうど半角2文字分の幅をとるという「2倍幅」比率にこだわる事が多いんですよ。

和文と英数字の文字幅比率が綺麗に1対2だと、矩形でまとめてきれいに選択しやすい一方で、「2対3」や「3対5」などの変則的な比率になると、コード部分が選択範囲からはみ出す、というのはありがちです。ですので、矩形選択の使い勝手にこだわりがある人は、倍幅の比率を好みます。

▲「全角1:半角2」幅フォントと「全角3:半角5」幅フォントの比較 (たわらさん作・UDEV Gothicフォントを使用)

たわら:あとは、似た文字を区別するために取り入れる、「アクセント」デザインのこだわりも、人によって異なります。

0(アラビア数字ゼロ)とO(大文字オー)を例にとりましょう。識別用アクセントの定番は、0に斜線を入れる、あるいは中央に点を入れるというものですが、この好みも分かれるのです。白源の場合は、0の真ん中にドットを打つとのアクセントを採用しています。

▲白源の文字資料。0(アラビア数字ゼロ)に点が打ってあり、識別しやすい。

たわら:私自身、こっちが好みなのですが、「スラッシュが良い」というユーザーもいて。本当に人それぞれで、理想系が異なるわけですね。

なので、「究極のフォント」みたいなものは結局無いかなと思っています。

――「究極のフォント」が存在しないにせよ、人それぞれの理想を可能な範囲で汲み取り、ひとつのフォントに落とし込む作業は想像するだけで大変そうですよね。

たわら:とっても大変です。なので、私は全員のニーズを汲むことは決してしません。なぜなら、全部のフォントに全員の理想をマージすると、結局どの書体も似たようなものになってしまうと思うのです。それでは「Ricty」「Myrica」ぐらいしか選択肢が無かった時代と、同じことになってしまいます。何度も申し上げますが私としては、いろんな選択肢からフォントを選んで試し、比較することを楽しんでほしいのです。

基本的に、公開を行うフォントには「裏コンセプト」を定めてあります。制作方針や、「この文字を、こう直してくれ」とリクエストがあった時のマージ判断は、これに合致するか否かで取捨選択を決めています。

例えば白源では、両者を識別しやすいよう、カタカナの「ヘ」にアクセントを加えています。

▲白源の「へ」に注目

たわら:ですが、いま私が気に入っている合成フォント「UDEV Gothic」に、そのような仕様はないです。「UDEV Gothic」で和文のベースになっている「BIZ UDGothic」は、すっごく美しいフォントなんですよ。なので和文テキストの形状に手は加えない、との裏コンセプトを持たせています。

「ヘ」の区別がつきづらいフォントなのですが、こうした理由から、ユーザーから修正要望を受けても改変を行なっていません

▲UDEV Gothicはプログラミングフォントながら、「へ」の区別が難しい

たわら:同様に、白源でも0とOの区別に使うアクセントを点ではなく斜線にしてほしい、とのリクエストはちょくちょく寄せられていますが、全部お断りしていますね。それは私の好みではないから。

――なんだかんだで、自身の好みも大事にしているということですか?

たわら:そうですね。

私がフォントを制作する時は、実際に自分で使ってみて、直したくなった部分を改善してから公開しています。なので、つくっているフォントは「自分が使いたくなるもの」がほとんどですし、裏コンセプトの根底に、私の好みが反映されていることは多いです。

とはいえ、フォントを公開してから皆さんの反応をいつも楽しんで見ていますよ。リクエストや反応がくるたびに、「皆さん、ここが好きなんだ。ここには不満を持つんだな」、と。

そういったフィードバックを眺めていると、「ちゃんと皆さん、フォントを比較検討する楽しさを味わっているな」と実感できますからね。つくづく、合成フォント作者冥利に尽きますよ。

取材・執筆:田村今人
編集:王雨舟

関連記事

人気記事

  • コピーしました

RSS
RSS