日本語フリーフォント利用の効率化アイデアと検証結果
この記事はSVG Advent Calendar 2016の第 8 日目の参加記事です。
はじめに(TL;DR)
今よりももっと気軽に、いろんな種類のフォントを使ってみたいと思いませんか?
例えばオリジナル年賀状のデザインを考えるとき、毛筆っぽい表現がほしいですよね。
考えたのは、要するにこれ↓のローカルサーバ&フォント追加版構想です。
今年の夏頃にアイデアを試していた矢先に Google さんが発表してくれたのですが、コレはコレですね(負け惜しみ?)。
時間がなくて文章が雑ですが以下興味あればお読みください。
結論、検証は成功しました。
ソースコード
「弘法にも筆の誤り」から連想して 空海 と名付けました。
ねらい*1
任意の文字列で様々なフォントを比較するのを簡単にしたい。特に日本語フォント。
要するに Google Fonts の日本語フォント版。
ターゲット
プロのデザイナーではなく一般ユーザ向け(多くのフォントがインストールしてあって当然、ではない)。
ユーザ想定と課題
- ローカルコンピュータのフォントインストール状況はデフォルトのまま
- 新たなフォントを利用するにはインストールが必要
- 利用できるフォントに何があるかの選択肢を知らない
- 検索して探しまわる必要あり
- 実際に任意の文字列での見え方を得られるまでの道のりが長い
- 検索して探す
- 利用条件を確認する
- ダウンロードする
- インストールする
- 入手したフォントをプルダウンから選択して適用する
- 確認して判断(NGなら始めに戻る)
アイデア
あらゆるフォントをインストールしたサーバがあって、クライアント側でまとめてプレビューできればそれでよい。フォントファイルではなく、Webフォントでもなく、必要なテキストのみをオンデマンドでアウトライン化したものを SVG で配信する。
どういうときに嬉しいのか
- アイキャッチ画像やプライベートでの写真文字入れをする人の工程が減る
- PCスペックに余裕がない
- フォントをあれこれインストールしたくない、フォント管理ソフト面倒
- プロの現場にサーバを用意してプレビューサーバとして使うとか
- AI とか絡めたら文字組みバリエーション自動生成提案なんてのもいいんじゃない
具体的な実現方法
「テキストのアウトライン(ベクター)化」といってすぐに思い浮かべるのは Illustrator でした。
これをフリーで実現するために目をつけたのが Inkscape です。
気軽にサーバを立てられるように Docker 上で動くものを探して見つけたのがこれ。
で、これを Alpine Linux で動かせるようにしたのがこれ。
さらに Node.js でテキストのアウトライン化ができるものがあったのでこれも試したい。
で、できあがったもののイメージは記事冒頭の画像です。 なんの追加フォントもインストールしていないPCであっても、ブラウザからサーバを見ると日本語フォントをベクターで閲覧できます。 あとは任意のテキストを渡して表示する UI と、様々なプレゼンテーション切り替えですね。ロゴ用、キャッチフレーズ用など長さに応じてレイアウトを変えたくなると思うので。
↑ブラウザで拡大したときのようす
気になること
ライセンスまわり。正直これが自信なくて積極的に前に進められない。 「商用利用OK」「再配布不可」と言われても、この文脈の想定はあくまでフォントファイルをローカルPCにインストールして商用利用OKであってフォントファイルは勝手に配布しないでね、という意味だと考えられる。フォントのアウトライン情報の配信はどうなの、と。1つ1つフォント作者に許可を得るしかないのかなー。
活用アイデアと今後
正規に購入した有償のフォントであっても、PCに負荷かけるのは変わらないのでデザインの現場でも役立つんじゃない?とも思うわけです。なのでクローズドな環境でも使えるよう Docker にすることで「フォントファイルは自分で集めてきてこのフォルダにブチ込めば配信できるよ」っていうところまではできました。やっていいのかわからないけど。PC1台あたりのライセンスとかだったらアウトっぽいですよね。
で、ここまで実現できたら次はフリーフォントによるテキストSVG配信Webサービスとしてインターネットに公開すればみんなハッピーじゃん?とか思うのが自然でしょう。そしたら初心者でもいろんな質の高いフリーフォントを軽快に使えるわけだしね。プレゼンスライドに載せるキャッチーな言葉とか、凝ったフォント使いたいシーン、あると思うんです。
ふつうのWebサイトでも、1文くらいのロゴタイプならWeb上でAPI通してSVG配信したら便利だよね!?あれ、それってもしかして結局Webフォントのことじゃ…
(おわり)