Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

AR勉強会に参加しました!

こんにちは、株式会社ヤプリでUX/UIデザイナーをしている岡田です!
普段は自社サービスのユーザビリティを改善したり、アプリのUIを考えたりしてます。

今回、MESONさん主催の AR Designer Meetup #1 にブログ枠で参加しましたので、勉強会での内容をレポートしたいと思います。

ar-japan.connpass.com

会場は目黒のオフィスで、とても綺麗でした!我々が到着した時にはすでに多くの方が来場されてました。

f:id:takenori-okada:20181109132331j:plain

勉強会レポート

f:id:takenori-okada:20181109132350j:plain

①ARアプリならではのUI/UX

登壇者:Graffity UI/UXデザイナー 樋山理紗さん

ARで新しいコミュニケーションを元発足された会社でGraffity、Pemojiや、magicallyというARアプリをデザインされていました。

Graffityは女子高生がターゲットがターゲットのARアプリなんですが、なかなか、継続的に使ってもらえないことに課題があったそうです。
そこで、解決策としてシーンにあったコンテンツを出すように心がけたそうです。
ただ、コンテンツを出すだけではなく、状況に合わせてコンテンツを対応させると言うのが大切なことだなーっと改めて実感しました。

そのほか樋山さんは海外向けのARビデオチャットを手がけたたのですが、海外の若者って何やってるの?
と言うユーザーの行動がわからないと言う課題が明らかになりました。
そこで、シャドーイングという朝から晩まで、学生の1日に寄り添って行動特性を観察することにより海外の若者の行動を明らかにしたそうです。
わざわざ海外までに行って一日中行動を共にするってすごいですね!
ただその結果、いくつかアイディアが生まれ、ヒットにつながったそうです。

最後に樋山さんはこう話を締めくくっています。

大事なのは、撮る体験よりも、見る体験が大事だということだ

②ARゲームデザインで困ったこと

登壇者:meleap プランナー/ディレクター 井上 嵩教さん

井上さんは、前職、広告制作会社でデザイナーとして、映像、グラフィック、展示会などの企画から制作まで担当され、meleap社ではHololensを使ったHADO KARTを5月まで担当し、現在はHADOの観戦事業で番組全体の企画制作を担当されているそうです。
今回は、GhostBattleというホロレンズを使ったゲームでの苦労話を話されました。

ゲームを作った時に困ったこと

GhostBattleは、はじめテーマパークなどのアトラクションとして利用しようと考えて作られました。
コンセプトとして家族で楽しめることを主眼に入れているとのことでした。
そして、このARはHololensを使っています。そのことで、いくつかの課題が浮き彫りになりました。

一つ目は、色が分離して見えてしまうのです。白を使うと特にそレが顕著になるそうです。
そこで、単色を使うことでその課題を解決することにしました。

二つ目は黒が使えないのです。
使っても黒が表示されないという仕様のようなのです。
ただ、不思議と枠をつけると黒が表現できるので枠を画面につけることで表現したそうです。

三つ目は視野角が狭いために、見えている領域に対してCGの表示領域が狭いのが課題としてありました。
そこで、先ほど見えないことが問題の黒を周りに置くことでその問題を解決したそうです。これは黒がそもそも見えないのだから、マスクの様に使ってしまおうという取り組みでした。
ゴーストのキャラクターに対し。ぼかした黒をおくことにより、よりゴーストっぽくしたそうです。

四つ目は3Dは現実空間を同時に捉えにくいので、2D情報を減らすなどの工夫も行ったそうです。

考えることが本当に多いですね!

最後に井上さんはこう話を締めくくっています。

デザインは課題解決のツールである

③Yahoo MAPのデザインについて

登壇者:ヤフー株式会社 UI/UXデザイナー 廣橋 孝紀さん

廣橋 は2017年にヤフー株式会社に新卒入社しYahoo! MapアプリやSB Driveの案件を経験。 現在は新規事業領域としてYahoo MAPにARを取り入れる事業を行っているそうです。

マップ作成で一番苦労したのが、とにかくARマップというのは一般的でないので人々に使い方を理解してもらうことが大変とのことでした。
例えば、ARモードのユースケースを理解することについては作成にあたり、以下のことに気がついたそうです。

  • 2DとARがあるが、その使い方が大きく違っていた。
  • 2Dは地図全体を俯瞰して見るのが主である。
  • 3Dは現在位置や、今進むべき方向を主にすべきということがわかった。
  • また、マップというものは外で使うものなので事故などにも気をつける工夫が必要。

確かに、ARってスマホの中のことばかり考えちゃいますけど、外部との繋がりって大事ですよね。

④魔法の作り方

登壇者:BB Media デザイナー 角井 佑花里さん&テクニカルディレクター 木戸 竜也さん

角井さんはWebデザインが主ですが、イラスト、映像、イベント等様々な業務に従事されており、木戸さんはWEB制作を担当後、最近は体験型コンテンツ、ARコンテンツの企画、制作されているそうです。

お二人は画面のUIだけでなくスマホを格納するケースもデザインして、AR&ケースとトータルでコーディネートしております。
魔法の手鏡という手鏡を持って、妖精を探すアプリをつくり、魔法感を出すのが非常に大事なので、テクノロジー要素を隠すことをARであえてしたということに衝撃を受けました。
つまり、スマホを隠し、完全にケースを使ってARを体験するのです。スマホはあくまでツールとして使います。
使ってる時のワクワク感や魔法感を出すために、ケースもこだわったそうです。実際結構重くなったが、それゆえに臨場感を出せたそうです。

ただ、スマホを隠すと当然UIが無くなりますが、そこはマーカーを利用することでUIをなくすことに成功したそうです。普段アプリのUIをデザインしている人間としては、普段の生活で使っているものがUIという事を思い出させていただく一面でした。

⑤ARの意義と意味

登壇者:MESON CEO 梶谷健人さん

f:id:takenori-okada:20181109132344j:plain

最後に今回主催いただいた、会社の代表であるMESON CEO 梶谷健人さんが登壇されました。

梶谷さんは株式会社MESON CEOで、ARサービスのプランニング・体験デザインなどを主に担当。
大手グローバルブランドを含む複数企業にサービスデザインとグロースのコンサルティングも行っておられるそうです。
「いちばんやさしいグロースハックの教本」(Amazon.jpのマーケティング・セールス一般カテゴリ1位)の著者でもあり。
2015年末まではVASILYでiQONという女性向けファッションサービスのGrowthを担当し、 インドにて現地スタートアップ向けにサービスデザインとグロースのメンタリング業務も経験というすごい経歴の持ち主です。

今回はMESONのARスタイジオの領域について話いただきましたが、一番印象的なのが、MESONさんは

ARを作るだけではなく、コンセプトから詰める

という事です。

これはつまりサービス自体の価値をどうデザインするのかとか、ARの必要性をどうデザインするのかを考えた上でデザインしているという事です。
デザイナーもつい忘れてしまうのですが、ARという機能ばかりに目がいってしまって、「なぜARが必要なのか?」という」問いを忘れてしまうことがあります。
梶谷さんはそこを我々に気付かせました。

その流れとして、
まず、サービス自体の価値、意義のデザインをする必要がある。
これは、一旦ARを忘れる必要があることを意味します。
なぜなら、通常ならばARありきで考えてしまうが、そうすると本質的にユーザーに価値のあるサービスを忘れてしまうからです。

解くべき問いを明確にすることで、サービスアイディアの価値がぶれなくなります。
その後、テーマに対し、具体化された解くべき問いに答えるのです。

ただ、その時にやはりユーザーインタビューや、調査が大事と説きます。

そして、その問いに対し、アナロジーによるアイディア出しをおこない、
そのアイディアから構造を抽出、構造的に似ているものからアイディアをさらに出すのです。

そして、ここから意義を出し、そこから意味を導き出す。

梶谷さんはこう締めくくります。

意義のデザインから意味のデザインを導きだし、意味のデザイン=ARの本質価値を見つける
という構図がを作り出す

パネルインタビュー

勉強会も終盤に差し掛かり、パネルインタビューが始まりました。 ここでは、内容のみ紹介したいと思います。

ARのUI設計は?

  • トライアンドエラーです。実際にやってみて学ぶと言う点が多いですね
  • いかに早くエンジニアとコラボして作るのが大事です。

ARグラスを作る上で気をつけるべきことは?

  • CGは絶対ずれると考えないといけない。なので、ずれる事を念頭に入れてデザインする。
  • マジックリープ

ARのUI/UXをよくする上で参考にしてるものは?

  • 映画とかゲームを参考にしている。
  • ARシティーとかを参考してる

ARが向いているシチュエーションって?

  • お店の情報を出すとか
  • 工場見学のアプリが良かった。ARの方が実際に行くよりわかった。機械の中が見えないので
  • スケール感を体感できるARとかいいと思った
  • インカメのフィルターとかに使うといいと思った。

ARコンテンツのアイディアを出すときのコツがあれば

  • クソみたいなアイディアを考える

ARスキルの身につけ方

  • とにかく試す
  • ブレンダを使ってみる
  • 実際に動き回って、プロトタイプを作る
  • デバイスの特性をよく調べた
  • ユーザーヒヤリングとユーザビリティーテスト(100件のヒヤリング、ユーザーテスト15件)

最後は懇親会を行いお開きとなりました。
とても密の濃い勉強会でした!