KDL BLOG

「Developers Summit 2019」 登壇レポート(2019/2/14)

「Developers Summit 2019(2/14開催@ホテル雅叙園)」で、モリサワ様のセッション[APIを活用したフォントの使い方 ~ MR(Mixed Reality)の事例紹介 ~(14-E-5)]に、新事業創造係 MR班の堀尾 風仁(ほりお ふうと)が登壇させていただきました。今回は、登壇の経緯と登壇内容についてレポートいたします

国内フォント最大手のモリサワ様より、「Developers Summit 2019(2/14開催@ホテル雅叙園)」での登壇のお誘いをいただき、モリサワ様のセッション[APIを活用したフォントの使い方 ~ MR(Mixed Reality)の事例紹介 ~(14-E-5)]に、新事業創造係 MR班の堀尾 風仁(ほりお ふうと)が登壇させていただきました。

picture_pc_c9b8407511ea3fbe64fb789f627c39b3.jpeg

<ホテル雅叙園 (@東京目黒区)>

登壇テーマは、「TypeSquare APIを活用したMixed Reality アプリケーション開発[事例紹介]」。

MR班の堀尾が、デブサミ2019でモリサワ様のセッションに登壇いたします。HoloLens上でAPIを用いてフォントを利用する事例を、モリサワ様とのパネルディスカッション形式でご紹介。
お待ちしております!#hololens #フォント #font #mr #vr #ar #microsoft #devsumihttps://t.co/4LDG9HuqTB

— 神戸デジタル・ラボ(KDL)(@KobeDigitalLabo)2018年12月27日

本ブログでは、登壇させていただいた新事業創造係MR班の堀尾が、Developers Summit 2019登壇の舞台裏をお伝えしたいと思います。

登壇のキッカケ (2018/08/17)

Developers Summit 2019(通称、デブサミ)への登壇が決まったのは、昨年8月の某日。セッション当日に一緒に登壇させていただいたモリサワの相川さんからの、一通のSlackによるものでした、、。

picture_pc_6fded445031a0ab09982a775f1daac21.png

今、このレポート記事を書くためにSlackを見返していたら、、。わずか10分足らずで、デブサミに登壇することが決まっていました。笑

picture_pc_87932ca2b560ddd1c8aa110152f3a568.png

「発注者」と「受託者」の関係性ではなく、同じ未来を見据えた仲間として一緒に頭を抱え、取り組んできたからこそ、会社の垣根を超えたシームレスな「共創」が実現できる良好な関係が構築できている。そう自信を持って思えた瞬間でした。エンジニアとしても、お客様からこうして「一緒にやりませんか?」とお誘いいただけることが何よりも嬉しいですね。

モリサワの相川さんは担当営業の方で非エンジニアですが、エンジニアのトレンドに非常に敏感で、Slackでカジュアルにやり取りをしていただけたので、登壇まで非常にスムーズに連携を取ることができました!相川さん、いつもありがとうございます!

picture_pc_1e3dae38d53c170a0d7b711118c830d9.jpg

セッション本番 (2019/02/14)

前日のリハーサルとは異なり、会場を埋め尽くすほどの多くのエンジニアにご参加いただきました。

picture_pc_ad08b98d464e24a8092c31fc73b92fe1.jpeg

本セッションでは、モリサワ相川さんより「1. モリサワ製品の説明(モリサワパスポートetc)」 、「2. TypeSquare(Webフォント)APIのご紹介」があり、続いて私から、「3. TypeSquare APIを活用したMixed Reality アプリケーション開発[事例紹介]」をお話させていただきました。

picture_pc_8a11d31913afb9736596eb29ad8c445d.jpeg

<デブサミ登壇0秒前の様子>

TypeSquare APIを活用したMixed Reality アプリケーション開発[事例紹介]

私がお話した内容を、簡単にレポートします。

1. なぜ今、Font × MRの取り組みを行っているのか?

picture_pc_8621e44c7eb2b62ee5aa5dc27ddef767.png

突然ですが、、、皆さんは「ポスト・スマホ」について考えたことありますか?
今消費者に台頭しているスマホの次には何が来るかということです。

デジタル端末の進化に伴い、フォントもその姿、カタチ、あり方を変えてきました。実は今のモリサワ様の1番の収益源は、なんとテレビなどへの組み込みフォントライセンス販売費だそうです。

紙(アナログ)から、PC(デジタル)→スマートフォンの普及に伴う(マルチデバイス化)、コミュニケーション媒体の進化と共に、モリサワ様は、ビジネスの主戦場を変えてこられました。

picture_pc_dc94ab41ebef90bc08e5eec4d4a1be30.png

では、モバイルの次の主戦場となりうるものは何か?

・・・・

KDLでは、モバイルの次には「Mixed Reality(以下、MR)」が必ず来ると信じて、米・巨大IT企業Googleが「Google Glass」を発表した当時(2013年)から、MR(AR)がビジネスシーンに与える影響度やビジネスインパクトの大きさに注目し、研究・開発を続けて参りました。

picture_pc_23182c35fd8ab52a27f63e67e3c6d04b.png

マイクロソフト社が提供する「Microsoft HoloLens(ホロレンズ、以下HoloLens)」のアプリケーション開発にもデバイス発売当初から取り組みを始め、昨年7月には、Microsoft公式のMRPP(※Mixed Reality Partner Program)認定を取得。

精力的にアプリケーション開発を進めていたそんなとき、HoloLensのような透過型ディスプレイや、Vuzix Bladeを代表する画面の小さなスマートグラスでは、これまでのデジタル端末に比べて文字が圧倒的に見づらいという課題に突き当たりました。ビジネスにおけるMRの普及において、文字の見やすさは重要な課題になると感じました。

picture_pc_f44ed0e0779dff38048c06ac3a4ae57c.png

そこで、フォントメーカーのモリサワ様とMR空間での「1.フォントの視認性、デザイン性」、また、「2.フォントの変化によって生じるUXの違い」について共同研究を開始したのです。

2. モリサワ × KDL MR事例紹介 【 Unity C#編 】

まずは、実際にMRは、どのような現場のどのような方の役に立つのか?という現場の課題解決をテーマとし、2つのユースケースを考えてみました。

1. Display Assistant

1つ目は、HoloLensを活用した営業シーンのアップデートです。パンフレットではなく、商品そのものの周辺に商品説明を表示させることにより、商品情報をより直感的に得ることができたり、多言語での商品説明が容易になります。

picture_pc_b1a539445e3fc6e661e94a442ec2bac8.png

また、HoloLensは視線のトラッキングが可能なので、お客様がどの商品のどの部分をどれくらい見ていたのか?といった趣味嗜好に紐づく可能性のあるデータを定量的に取得することもできるようになります。

2. Creative Design X

2つ目は、デザイナー向けのシミュレーションアプリです。例えば制作したポスターや看板のデザインを、PCを介してクライアントに確認し、OKをもらって完成したとします。それなのに、いざ現地に貼ってみると・・・「イメージが違う!」といわれることが多々あるのだとか。

picture_pc_f6ed1b3a269b476f9cf86b4d27cdb5e4.png

こうなってしまう要因は次のとおり。

  • 1.原寸大で確認できないこと
  • 2.実際ポスターや看板を設置する現場(景観)での見え方をイメージできないこと
  • 3.デザイナーとクライアント間で共有できないこと

これらの課題をMRを活用して解決するのが「Creative Design X」です。デザイナーがデザインしたポスターや看板を、原寸大で確認したり、現地に仮配置してみて、リアルタイムでデザイン修正を行えるなどの機能を実現します。

MR空間で見やすいフォントとビジネスへの影響

これらのデモ開発を行う中で、MR空間におけるフォントの視認性・デザイン性についてもユーザーに、3つのフォントをご覧いただいてアンケートを実施してみました。

デバイスに標準的に搭載されている「メイリオ」、モリサワ様が提供しているフォントで一番視認性の高い「UD新ゴ」、そして、横線の細さからMR(AR)デバイスでは敬遠されがちな明朝体である「黎ミン」。この3つの書体を同じ空間に表示させ、体験後のユーザーに、比較した結果を聞く、というものです。

picture_pc_4ca8686e890d91887a12353bcc81563f.png

ブランディングはフォントで決まる

アンケート結果を見てみましょう。

見やすさに関しては、UD新ゴが圧倒的に見やすく、ほかはメイリオよりは黎ミンが見やすいという方が多かったという結果が出ています。

picture_pc_4c0f3d0776a024be330ccf5d7f798726.png

しかし、興味深いことに、3つのフォントでどのフォントが好きか?というアンケートでは、見やすさの結果とは異なり、黎ミンを選択するユーザーの割合が大きく増える(25%→38%)という結果でした。

picture_pc_1c0e4e0e9d480f37623d78df88a21d55.png

見やすさと高感度は比例していないことから、ユーザーは文字そのものが表現する雰囲気も大事にしているということです。この結果により、MR(AR)空間上では製品をPRする際に、単に見やすいからという理由だけでゴシック系を選択するのは、短慮かもしれないことが考察できます。

また、利用するフォントによって消費者が商品に抱く印象が大きく違ってくるという点でも、MR(AR) 空間上でのフォントの選定が非常に重要になってくると言えます。

ギネス世界記録を持つ、明朝体 モリサワ 黎ミン(レイミン)とは?

私自身、本プロジェクトに携わるまで知らなかったのですが、実は明朝体は、フォントウェイト(Weight)を、レギュラー(Regular)から、ボールド(Bold)に変えても、横線の太さは同じなのだそうです。だから、MR(AR)のアプリケーションでは、文字が見づらい、あるいは潰れてしまうといった理由で、敬遠されがちでした。

ただ、モリサワ様が開発された黎ミンというフォントを使えば、横線の太さも変更できるため潰れてしまうことがなく、MR(AR)の表現の幅を広げることができます。

picture_pc_b004a512d1760630474ef7d6a61dc821.png

「ブランディングはフォントで決まる。」

このアンケート結果を見たとき、初めてその実感が湧いてきました。

3. アプリ開発で、TypeSquare APIを活用するメリット

続いて、なぜMRアプリケーション開発で、TypeSquare API(Webフォント)を活用するのか?というお話。

従来のHoloLensアプリケーション開発では、IllustratorやPhotoshopを用いてデザインした後、画像ファイルに書き出し、Unity上に取り込んでUIを調整していました。ただ、MR、HoloLensのような最新テクノロジーの概念検証(PoC)に費やせる、「人」や「お金」は限られています。私のように、1人でアプリ企画、UIデザイン~開発~デプロイまでを一手に担うxRエンジニアが、いちいちIllustratorとUnityを開いてUIの確認を行うのは、非常に煩雑で、手間もかかる。だから、UI部分の開発が後回しになり、気が付いたらUIにはシステム標準フォントを使っていたなんてことは日常茶飯事です。

picture_pc_059bf3937bb1d0730b8876c5fb278757.png「確かにフォントにこだわるとユーザー体験が変わって、明らかにHoloLensデモ時のお客さんの反応が良くなりました。でも実際問題、ITエンジニアがIllustratorにモリサワパスポートを契約するのは、まぁまぁハードルが高いんですよね。」

というストレートな思いを相川さんにぶつけてみました。その他にも、これまでのデジタル端末とは異なり、奥行きを表現する必要があるMRのUI開発で、その全てを画像対応するのは非効率であったり、HoloLensのような容量の小さなエッジデバイス(64GB)に、データ量の多い書体データを保持させておきたくない、など・・・。

picture_pc_4ffdc8d8f638972034df95d04bb02a49.png

相川さんはすぐさま、

「じゃあ、モリサワのTypeSquare API(Webフォント)を活用してみてください」

と紹介してくださいました。

Webフォントはその名前からも推測される通り、主にWeb界隈で使われている技術です。しかし実は、Web以外の技術領域でも工夫次第で活用することが可能です。ご紹介いただいたTypeSquare API(Webフォント)を、さっそくMixed Reaalityアプリケーション開発に組み込んでみました。

導入後、どうなったか?

APIのリクエストを投げると、Base64でエンコードされた書体データがペイロードに含まれた状態で返ってきます。リクエストパラメーターには、[書体名]: “Reimin Y20 Heavy” や、書体データが必要なテキスト情報(サブセット機能)[書体データの欲しいテキスト]: “あいうえお”、などを持たせることができ、ユーザーの使用範囲に応じた書体データを、任意のタイミングで取得することが可能となります。

picture_pc_1a465e16c452ec6ec90ba99aa0cff195.pngレスポンスデータは、Unity C#スクリプト上で、Base64の書体データをデコードし、一時ファイルとしてデバイスにキャッシュさせることで、使用することができます。レスポンスデータをそのまま使えないという煩雑さは残りますが、Illustratorを使って、書体を選んで画像に書き出しを行う手間に比べると非常に少ないステップで、様々な書体を試すことができるようになりました。これによって、PoC(概念検証 : Proof of Concept)の業務効率、UI表現の幅が格段に広がりました。

picture_pc_7a3e2ff2b47004949bd94fedb7740dbf.png

エンジニアこそ、フォントにこだわれ

PoCと言えば、昨今、デジタル変革期として、業種・業態・規模問わず、様々な企業様が「AI(人工知能)」や「IoT(Internet of Things)」、MRなど、最新テクノロジーを活用した業務効率化の取り組みを加速させる動きが顕著化しています。KDLでもそういったお客様のニーズにお応えして、PoCを実施させていただくケースが急増しているのですが、KDLの取り組みの中で、フォントの取り組み内容に興味・関心を持っていただくことが非常に多いです。

MRのビジネスシーンでの活用を考えると、「1.フォント(文字)がユーザーに与える影響の大きさ」、「2.フォントの視認性が業務効率に直結すること」が上記の要因として考えられます。本取り組みを通じて、テクノロジーがいくら進化しても、システムを活用するのは、お客様であり「人」であるということに気付かされました。

KDLでは、引き続きモリサワ様との共同研究を進め、関西のMRアプリケーション開発を牽引していきたいと思います!

エンジニアこそ、フォントにこだわれ。

最後までお読みいただき、ありがとうございました。

当日の発表スライドは、以下、[SpeakerDeck]をご覧ください。

所感(堀尾風仁)

picture_pc_c1227f9ae9cf60092b1a788cd1b12d48.jpeg本登壇をキッカケに、初めてDevelopers Summitに参加させていただきましたが、同じITエンジニアと言えども、使っている言語や技術要素、業種・業態が違うと、こんなにも考え方が違ってくるのかと、改めて自分の携わっているIT(情報技術)というモノを見つめ直す良い機会となりました。

また、普段参加している勉強会とは違って、本当に多種多様なセッションを一度に聞くことができるので、エンジニアとしての視野の広がりを感じました。セッション後の「Ask the Speaker」では、MRとは違った専門分野を持つエンジニアの方とディスカッションさせていただき、エンジニア vs エンジニアで技術について熱く語り合えるなど、他のイベントでは体験できない非常に濃密な時間を過ごすことができました。大変収穫の多い2日間となりました。

関係者の皆さま、ご来場いただいた皆さま、そして最後に、KDLとの共同研究の場を設けていただいた園田様(モリサワ)、今回登壇のお誘いをいただいた相川様(モリサワ)、アプリケーション開発時にご尽力いただいた青木様(モリサワ)、TypeSquare API開発チームの皆さま、本当にありがとうございました!引き続き、よろしくお願いいたします!!!

Developers Summit とは?

エンジニアの知的交流を促進することで、世の中がもっと豊かになることを目指して開催される、ITエンジニアの祭典です。

picture_pc_d790892dcc7a694615a24f1cdc0d38ec.jpeg

デブサミ2019テーマ「SHARE YOUR FUN!」とは?

みなさん、技術を愛していますか? さまざまなテクノロジーが登場し変化が激しくなる世の中。エンジニアとしての生涯をどうデザインしていくか、楽しみでもあり不安でもある方が多いのではないでしょうか。変化に適応し、学びつづけるのは辛い? いいえ、テクノロジーは楽しいもの。楽しいから没頭し、没頭するから学びつづけることができる。「楽しい」はエンジニアの成長をブーストしてくれる最強のモチベーションです。新しいテクノロジーと出会う楽しみ、現場で起こる課題を解決していく楽しみ、エンジニアとしての成長を日々実感することの楽しみ、まわりの人やコミュニティに貢献することの楽しみ……デブサミ2019では、さまざまなエンジニアの楽しみを持ち寄って、これからのエンジニアの生き様を考えます。(公式サイトより抜粋)

デブサミ2019 タイムテーブル

picture_pc_9247e33c485c838664f0e177615bd9c7.jpeg同イベントでは、Cloud Native(Docker[コンテナ]/ Kubernetes)系に始まり、大規模データ解析(RedShift / BigQuery)技術 、セキュリティ(DevSecOps / Shift Left)、サーバレスアーキテクチャ(Severless)、そして、エンジニアのキャリア(考え方)など、幅広いジャンルのセッションがホテル内の複数会場で、同時多発的に繰り広げられていました。個人的には、 ZOZOテクノロジーズの方が、「ZOZO SUITS」を着用して、セッションに登壇しようとしたところ、会社の広報に止められたという噂を聞いて、さすがはITエンジニアの祭典だなと、ワクワクしました。笑

こちらは前日のリハーサル時の様子です。

picture_pc_19399d31db12d110de27292cf27b2476.jpeg

前日までのセッション応募には、200名枠に、350名以上の方に応募いただいていたようです。また、エンジニア向けのイベントにフォントメーカーのモリサワ様(※デザイナー向けのイメージが強い)が登壇されるということもあり、非常に注目度の高いセッションの一つだと、主催者の方から直接お声掛けいただきました。ゲストスピーカーとしては、戦々恐々の思いでした。

しかし、当日は、立ち見の聴講者も続出するなど、非常に多くのITエンジニアの方々に、「フォント選定の重要性、MRの魅力」について、お伝えすること(SHARE MY FUN!)ができ、一ITエンジニアとして「喜び」を感じると同時に、今回の登壇を通じて、また一つ成長できたと自負しています。

ちなみに、当日準備していたPCの接続トラブルが発生し、リカバリ用のPCで発表を行うことになったのですが、イベントスタッフの皆さまの対応が圧巻で、大幅な遅延もなく、無事に発表を終えることができました。スタッフの皆さま、ありがとうございました。