CodeZine(コードジン)

特集ページ一覧

フォントを活用して、MRをアップデートせよ! ポスト・スマホ時代に向けたUX最適化【デブサミ2019】

【14-E-5】APIを活用したフォントの使い方 ~MR(Mixed Reality)の実例紹介~

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/03/26 12:00

 ビジネス文書から広告、書籍、デジタルコンテンツに至るまで、幅広い用途で使用されているモリサワフォント。現在はAPI経由でのフォント利用も可能になっており、活用の幅はいっそう広がっている。そのモリサワとともにデジタル環境におけるUXの共同研究を行っているのが、神戸デジタル・ラボだ。本セッションではモリサワ 相川晴俊氏と神戸デジタル・ラボ 堀尾風仁氏が「フォント×Mixed Reality(以下、MR)」によってどのような未来を実現しようとしているのかを語った。

Mixed Reality(複合現実)とは

 現実空間と仮想空間を混合することで、現実にあるものと仮想的に存在するものが影響しあう新たな空間を構築する技術。

さまざまな場で活用される、モリサワのフォント

株式会社モリサワ フォントソリューション課 相川晴俊氏
株式会社モリサワ フォントソリューション課 相川晴俊氏

 モリサワは、フォントに関連する製品やソリューションを開発・提供する企業だ。Web開発に携わる方なら、「モリサワのフォント」というフレーズを一度は目にしたことがあるだろう。同社の生み出すフォントが機能的、かつ美しいものであることは、多くの人が知るところだ。

 同社が生み出したフォントは数え切れないほどあるが、中でも有名なものとして「UD書体」が挙げられる。誰にとっても見やすく読みやすいこと(ユニバーサルデザイン)を目指して開発されたこのフォントは、可読性に優れたものになっている。

UD書体の特徴
UD書体の特徴

 「UD書体の利点は、文字の形がわかりやすいことです。例えば、『夏』という文字を他のフォントと比較すると、線と線との間の空間が広いのでフォントサイズを小さくしても読みやすい。また、はなれが明確なので、シルエットの似た文字も判別が容易です。多くの企業やサービスで、このフォントを採用していただいています」(モリサワ 相川氏)

 同社が提供するフォント製品として有名なのが「MORISAWA PASSPORT」だ。これは、すべてのモリサワフォントをどれでも選べて好きなだけ使えるライセンス製品である。書籍や漫画、映画字幕、テレビのテロップなど、生活のありとあらゆる場所で、MORISAWA PASSPORT提供のフォントが活用されている。

 そんな同社が提供するWebフォントサービスが「TypeSquare」である。これは、利用したいフォントをAPI経由で呼び出すことで、システムやアプリケーションに簡単に実装できるというものだ。

 「TypeSquareでは、JavaScriptとフォント情報をモリサワのTypeSquareサーバーから配信します。それらの情報をユーザー側(クライアントサイド)で処理することで、あらゆるデバイスで意図したフォントが表示されるサービスとなっています。

 使用方法はとても簡単です。JavaScriptを呼び出すためにTypeSquare用のscriptタグを差し込み、CSS情報としてfont-familyを書くだけ。 必要な文字のみ含むサブセット化されたフォントを配信することで、高速化を実現しています」(モリサワ 相川氏)

 モリサワでは、TypeSquareをWebサービスだけではなく、他の種類のアプリケーションでも役立てたいと考えていた。そんな中、ある企業との出会いがその夢を実現した。関西で初めてマイクロソフト公式パートナー認定「MRPP(Mixed Reality Partner Program)」を取得した企業、神戸デジタル・ラボである。

「優れたフォント」が「最新のMR技術」と融合する

株式会社神戸デジタル・ラボ 新事業創造係 MR班 班長 堀尾風仁氏
株式会社神戸デジタル・ラボ 新事業創造係 MR班 班長 堀尾風仁氏

 神戸デジタル・ラボは、「MR領域の事業化」を見据え、主にマイクロソフトのHoloLensを用いた研究・開発を続けている企業だ。

 HoloLensを用いた開発において、同社はある課題を感じていた。これまでのデジタル端末と違い「文字が見づらい(透過型ディスプレイのため、起動場所によって背景の色や形状が変わる)」「視野角が狭い」といったものだ。その課題を解決するため、モリサワとの共同研究をスタートした。

 モリサワと神戸デジタル・ラボが行っている研究テーマは主に2つ。1つ目は、どうすれば現実世界とデジタル世界が融合した空間の中で文字を見やすくできるか。2つ目は、どんなフォントを出すことでユーザー体験を向上させられるか、である。その研究は、いくつかのサービスとして結実している。

 「例えば、昨年に台湾で開催されたComputexというイベントで、私たちは『Display Assistant』というサービスを出展しました。これは、HoloLensを着けている人が自転車を見ると、自転車の説明が空間上に浮かび上がるというものです。

 台湾で開催されたイベントのため、日本語・中国語・英語の3か国語に対応しました。もし販売員の方が複数の言語を話せなくても、お客さまにDisplay Assistantを使っていただくだけで、商品のことを深く理解できるソリューションとなっています」(神戸デジタル・ラボ 堀尾氏)

Display Assistantの活用例。ユーザーの視覚情報と説明文が連動することで、圧倒的なユーザー体験の向上に結びつく。
Display Assistantの活用例。ユーザーの視覚情報と説明文が連動することで、圧倒的なユーザー体験の向上に結びつく。

 モリサワと神戸デジタル・ラボは、広告デザイン業務にMR技術を導入できる「Creative Design X」というサービスの研究も進めている。

HoloLens向け空間プレビューアプリ CreativeDesignX

 これは、ある場所と展示物の画像をMR技術によって融合し、疑似的にその場所へ設置したかのような視覚状態を作り出せるサービスである。これにより、現地と展示物との相性を事前に確認できるため、修正にかかる手戻りを大幅に軽減できる。

 また、TypeSquareを導入することで、HoloLensを用いたサービスの開発効率が向上することも大きな利点だという。

 「従来、HoloLensを用いたサービスで文字を表示する場合には、IllustratorやPhotoshopでフォントを指定した文章データを画像としてアウトプットし、Unityにインポートするケースが多かったのです。

 TypeSquareを導入することで、APIを叩くだけでフォント情報を適応できるため、文章データの画像化が不要となります。サブセット機能を使うことで必要なフォントデータのみを取得可能ですから、非常に軽量なのも便利です」(神戸デジタル・ラボ 堀尾氏)

 さらには、「TypeSquareを導入したことで、サービスのユーザー体験が圧倒的に向上しました」と堀尾氏は語る。

 「モリサワさんのフォントは美しいですから、お客さまの反応が全く違いました。HoloLensを装着した際にすごく感動される方が多いのです。今後、MR技術のニーズはさらに高くなります。そんな現代だからこそ、エンジニアはフォントにこだわる意義があると考えています」(神戸デジタル・ラボ 堀尾氏)

 「今回はHoloLensを活用した事例を紹介しました。私たちは、世の中にあるさまざまな課題を、フォントの力によって解決していきたいと思っています。神戸デジタル・ラボさんをはじめ、多くの企業さまと、こういった取り組みを増やしていきたいです」(モリサワ 相川氏)

お問い合わせ

 株式会社モリサワ

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • CodeZine編集部(コードジンヘンシュウブ)

    CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5