UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

「フォント管理」と聞くと、デザイナーがするものというイメージがあるかもしれません。もちろんデザイナーにとっても重要なことですが、コーダーにもフォント管理ツールは必要です。

実装後の確認時にPCにフォントがインストールされていると、正しくウェブフォントの設定ができているか判断できません。

今回は、コーダーにとって必要なフォント管理について紹介します。

フォント管理の重要性

使わないフォントを無効化する

フォントが無ければ、もらったデザインのフォントが読み込めないため、コーダー側もフォントをインストールする必要があります。

さまざまなデザインをコーディングしていると、どんどんインストールフォントが増えていき、気付けばフォントの一覧が大量になってしまいます。

フォント一覧が増えると、資料を作るときに使わないフォントが選択肢に大量に出てきてしまいます。
アプリの動作が重くなる原因になりますし、何より選ぶときの邪魔になってしまいます。

大量のフォントの中から、よく使うもの以外は無効化しておくような運用が必要です。

フォント読み込みの確認時に無効化する

また、ウェブフォントという技術を使用している場合、フォントを持っていないユーザーでも、サイト上で読み込んで表示させることが可能です。

しかし、実装したコーダーがPC上でフォントを有効化していると、ウェブフォントの読み込みが適切にできていなかったとしても、フォントが表示されてしまいます。

ウェブフォントの読み込みを確認するときは、一時的にPC上の対象フォントを無効化して、本当に正しく読み込まれているか確認しておくと安心です。

このように、一時的にこのフォントを無効化して、作業が終わったら有効化するといった操作も必要です。

フォント管理アプリ

macOSの場合、OS標準でFontBookというアプリが入っていますが、フォントの管理には向いていません。

そこで、別のフォント管理アプリを入れておくのがオススメです。
私の場合はTypeface Appを使用していますが、他にRightFontなども有名です（昔はFontExplorer X Proを使っていましたが、最新のOSに対応していないため移行しました）。

現在管理しているフォント数は2万近くになります。
デザイナーの方ならもっと多くのフォントを管理していると思いますが、コーダーでもこれだけの数になります。

そして、有効化しているフォント数は1046なので、20分の1になっています。
フォントの選択肢に2万件出てくるのは選ぶのが大変ですし、動作にも影響してしまいます。

また、フォント管理アプリはフォルダ分けやタグ付けしてフォントの管理ができるので、案件用のタグを用意してすぐに有効化・無効化できるようにしていたり、ウェブフォント対応のものを絞り込むこともできるようにしています。

つい後回しにしてしまうことをコツコツ整理する

フォント管理なんて面倒だと思って、ついつい後回しにしてしまいがちです。
しかし、フォントをインストールするたびにちゃんとタグ付けをしたり、フォルダ分けをしておくと後がラクになります。

逆に溜まってきたタイミングで一気にやろうとすると、タグ付けを間違えたり、「あれ？このフォントってこの案件で使ってたっけ？」となり、調べるとそれだけでも時間がかかってしまいます。

こうした整理は日々コツコツ積み重ねることが、大切だなと改めて感じます。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！