フォントのモリサワが提案するAPI連携によるフォント配信、開発側の利点とは?

2019年2月14・15日に開催された、開発者のための総合ITカンファレンス「Developers Summit 2019冬」(通称：デブサミ)。ここに、日本を代表するフォントベンダーであるモリサワが今回初めて参加し、開発者に向けてフォントをAPIで提供することや、事例を紹介するセッションを行った。

UIデザインやWebデザインの現場で多用されるフォントを、システム・ソフトウェアを中心とする開発の領域において活用する利点とは何なのだろうか。改めて、モリサワの 相川晴俊さん、山田大輔さんにお話を聞いた。

• 株式会社モリサワ 相川晴俊さん(左)、山田大輔さん(右)

文字をつくる、モリサワのフォント開発

パソコンでWordやPowerPointなどを開けば、文字のツールボックスにいくつもフォントが入っているのを目にするだろう。日本語なら、1つのフォントにつき最低でも約9000字、多いもので約2万3000字もの文字が格納されている。それらは1文字1文字をフォントデザイナーが手で書き上げたものだ。

• デザイナーの手によって1文字ずつデザインされていく。「永」の字は止め・ハネ・払いなど、書の基本技法のすべてを含む文字のため、見本として使われることが多い

さらに、文字の並びが見やすく美しくなるよう、あらゆる組み合わせで文字の位置が最適化するように調整する必要がある。こうして、モリサワは1フォントあたり2年〜3年という時間をかけて開発しているという。

• フォントの開発コンセプトも時代に合わせて変わっているという相川さん

「書体ごとにそれぞれコンセプトがあります。開発プロジェクトではまずそのコンセプトを決めます。例えば、見出しに適した書体、大きな広告物でも見栄えのする書体、装飾的に使えるデザイン書体……といった形です」(相川さん)

• 例えば視認性への配慮を重視した「UD新ゴ」。PCやスマホの画面で見分けにくい「プ」と「ブ」や、画数の多い文字も見やすくデザインされている)

• 明朝体、ゴシック体というくくりの中でも、特徴の異なるフォントが豊富に提供されている

• 「UD新ゴ」との併記に適した多言語フォントの「クラリモ」シリーズ。各言語に精通したデザイナーの監修により、ネイティブでも読みやすいフォントだ

また、近年は企業がブランディングの一環として、企業ロゴなどとイメージを統一した独自の「コーポレートフォント」を制作し、自社が発行する文書やウェブサイトに使用する動きも広がっているという。

Webフォント配信サービス「TypeSquare」の仕組み

かつて、フォントを用いた成果物といえば印刷物がほとんどだった。しかし、Webサイト、モバイルアプリ、組み込みアプリなど、文字を表示する情報媒体の多様化に合わせ、同社ではこれらに適した数々のフォント製品を提供している。そのうちの１つ「TypeSquare」は、Webサイト向けのフォント(Webフォント)配信するサービスとして、2012年2月から稼働を続けている。

Webフォントを使用しない場合は、閲覧側のデバイスにインストールされたフォントでWebページ上の文字が表示されることになるため、サイト制作側が意図したサイトデザインで表示できない場合がある。Webフォントを使用すれば、閲覧側の環境に左右されることなく、製作側が意図するフォントを表示することができる。TypeSquareなら明朝体やゴシック体だけでなく、デザイン性の高い書体も含めて約900書体(本稿執筆時点)から自由に選べるため、文字にこだわりたいUIデザイナー、Webデザイナーにとっても利用価値の高いサービスとなっている。

• TypeSquareの仕組み。利用の際には会員ページにてウェブサイトのURLを登録し、発行されるタグをHTMLに埋め込むだけでOK

しかし、先ほど述べたように日本語フォントは1書体あたり最大で約2万3000文字のセットだ。そのデータ量は多いもので20〜30MBにも上るため、リクエストごとに全て配信するのは効率的ではない。そこでTypeSquareが取り入れたのが「サブセット配信」の技術だった。

• コンテンツ表示に必要な文字だけを配信する「サブセット配信」により、TypeSquareは表示速度の高速化を実現している

「サブセット配信は、元のフォント(フルセット)から、Webページに必要な文字だけを含んだ軽量なフォントを生成し、ブラウザに配信する方法です。多くの場合で、１書体あたり数十KB程度までフォントのデータ量を削減することができるため、高速な配信が可能になります。」(山田さん)

それだけではなく、実用に耐えうる表示速度を実現するには、他にも多くの努力が必要だったという。

「数年前にCDN※を導入したことで、かなりの高速化を実現できました。現在も、処理ロジックの効率化やアーキテクチャ見直しによるシステム可用性の向上など、速度や安定性を向上させるための取り組みを日々実施しています」(山田さん)

※CDN(コンテンツデリバリーネットワーク)：Webコンテンツを効率よく配信するためのネットワーク。世界各地のCDNサーバにコンテンツをキャッシュし、コンテンツ提供者のサーバの負荷を分散させる仕組み。

TypeSquareはEC、コーポレートサイト、メディアサイトなどに多くの導入実績を持つ。導入による利点は、デザインの自由度はもちろん、見出しやナビゲーションボタンなどこれまで画像化せざるを得なかった文字をテキストのまま配置できることで、SEOにも効果がある。

また、画像化の工程がなくなることで、サイト制作のワークフローがシンプルになり、修正や変更の工数を大幅に削減できることもメリットがある。CMSやデータベース連動により自動生成される動的なコンテンツに対しても、Webフォントの適用はサイト閲覧時に自動で行われるため、制作側での特別な作業は不要だ。

さらにTypeSquareでは、CSSの形式でフォントを取得可能なTypeSquare APIを提供している。「ウェブサイトへの配信時と同様に、必要な文字だけを含むフォント(サブセット)をAPIで事前に取得することができます。この方式であれば、サイト閲覧時のテキスト抽出処理やサブセット生成処理を省略することができるため、より高速にWebサイトを表示することができます」(山田さん)

開発者がAPIでフォントを利用する利点

一方、PCアプリやモバイルアプリでは、あるフォントを表示に利用したい場合、アプリにフォントを組み込む必要があるため、開発者がそのようにプログラムを作成することになる。Webの場合はデザイナーがエンジニアを兼ねる場合も多いが、アプリの場合は、開発者はデザイナーに指示されたフォントを指示されたところに組み込むといったような、どちらかといえば受動的に利用する場面が多いと思われる。また、組み込みフォントは一般的に高価であり、ライセンス形態が複雑であることも、フォント利用に対する障壁となっているだろう。

「よほどフォント好きでない限りは、多くのアプリ開発者はフォントに関心がありません。もし、TypeSquareのAPIを使って、開発者自身が容易にフォントを利用することができれば、フォントの価値への理解にもつながり、より魅力あるアプリの開発を支援できるのではないかと考え、TypeSquare APIのアプリへの転用を考えました」(相川さん)

「アプリへのフォント組み込みを可能にするため、それまではWebフォント形式(WOFF/WOFF2)でしか取得できなかったAPIを拡張し、デスクトップフォント形式(TTF/OTF)でも取得できるようにしました。また、組み込みを容易にするためのSDK(ライブラリ)開発も予定しています」(山田さん)

APIの活用事例

実際に開発現場でモリサワのTypeSquareAPIを活用している事例を紹介しよう。

スマホに続く新たなスクリーンとして注目されるスマートグラス。そこにも文字が必要になるはずだと考え、モリサワは神戸デジタル・ラボとの協業で、マイクロソフト社のHoloLensを使ったMR(Mixed Reality＝複合現実)アプリケーションの研究開発を進めている。

今回のデブサミではその事例である、「Display Assistant」と「Creative Design X」が紹介された。 「Display Assistant」はリアルに配置された商品に対し、バーチャルで説明を表示するMRアプリケーションだ。商品と説明が視覚的に結びつくことで理解しやすく、背景を変えて試乗体験なども可能になっている。

「バーチャルな体験から購買につなげることを狙うなら、そこに使われる文字は見やすい方がいい。その発想からインタフェースにモリサワのフォントを活用していただいています」(相川さん)

「Creative Design X」は、ディスプレイ上でデザインした看板やポスターなどを、デザインの段階でより現実に近い空間で見え方を確認できるアプリケーションだ。例えば該当の看板や駅の案内版、電車内の広告、展示会でのブースなどをデザインする場合において、あらゆる方角からの見え方や導線に応じた分かりやすさ、人混みなどの状況、景観への影響など、様々なシチュエーションをリアルに近い状態で確認できる。

実際に、神戸デジタル・ラボがアプリケーションの体験者にフォントごとの見やすさを調査したところ、見やすさや好みの差が出る結果となった。

• 同じ内容を異なる書体で表示。体験者にアンケートを取ると…

• UD新ゴの視認性の高さが際立つ。一方、好まれるフォントでは黎ミンも支持率が高いことがわかった

HoloLensのアプリケーション開発において文字を扱う際には課題が多かったが、モリサワのTypeSquare APIの活用によって、その多くを解消できている。

• 書体は選びたいがデバイスにない書体は画像化するしかない。だがそれでは開発効率やインタラクティブ性が犠牲になる

• TypeSquare APIの利用箇所のコード(イメージ)。 JSON形式でデータを取り扱うため、言語によらず利用しやすい

サービスとしてのフォントが課題を解決する

私たちが日々接触する情報の多くは文字で伝達されている。紙からパソコンやスマートフォンへ、そしてVRやMRへと媒体が変わっても、文字の役割が大きいことに変わりはない。相川さんは、媒体や環境に合わせたフォントを使うことの重要性を強調する。

「例えば、スクリーン幅の狭いスマートフォンでの表示に適した書体、ゲームの世界観に合わせた書体など、デバイスやプロダクトによって最適な書体というものがあります。モリサワのAPIを活用することでフォント選択や導入の敷居が下がるため、コンセプト検討段階で多数のフォントを試しながらの開発が容易になります」(相川さん)

視覚的に字形をデザインするだけでなく、さまざまなデバイスへの適応、さらに開発環境に合わせた配信システムや契約形態まで含めて、モリサワはフォントの活用で開発現場の課題解決をサポートしたいと考えている。開発効率やコンテンツの柔軟性、多言語化などに課題があるならば、APIでフォントを使うことを検討してみてはいかがだろうか。

[PR]提供：モリサワ