AR Designer Meetup #1

>100 Views

November 21, 18

スライド概要

https://ar-japan.connpass.com/event/104067/

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

AR DESIGNER MEETUP #1 2018.11.08 [THU] @アカツキ Yahoo! MAPアプリのARモードについて Yahoo! JAPAN 廣橋 孝紀 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

2.

自己紹介 ひろはし たかのり 廣橋 孝紀 t_chashi Yahoo! JAPAN デザイナー ・2017年にヤフー株式会社に新卒入社 ・Yahoo! MAPアプリやSB Driveの案件を経験 ・現在は新規領域を企画から担当 ・本業以外でも様々なUI/UXデザインを中心に活動 ・好きなサービスは「TikTok」 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

3.

目次 ・Yahoo! MAPアプリのARモードとは/ARの重要性 ・ARモードの開発記録 ・ARと地図の違い Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

4.

Yahoo! MAPアプリのARモードとは Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

5.

ARモードとは Yahoo! MAPアプリ(iOS)で提供している ARを使った徒歩ナビ支援機能 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

6.

リリース後の反響 メディア掲載は60近く。 Twitterなどを通じて多くの人に知ってもらえた。 「Yahoo! MAP」にAR機能“迷わないナビ”、目的地まで矢印で案内 ARで実際の風景にナビ情報を表示――Yahoo! MAPのiOS版に試験導入 ヤフーは3月5日、スマートフォン向け地図情報サービス「Yahoo! MAP」のiOS版にAR(拡張現実)を活用したナビゲーション機能「ARモード」を試験導入した。カメラで撮影した実際の風景に、「ルート」や「看板」などの重ねて表示する。開発には、iOS 11のARアプリ開発フレームワーク「ARKit」を活用した。 ARモードを利用するには、Yahoo! MAPで目的地への徒歩ルートを検索した後、画面右上の「ARモード」をタップする。端末のカメラが起動し、空間を認識する。実際の風景にアプリが目的地へのルートを青い線で重ねて表示する。「矢印」や「残りの距離」の他、曲がり角を示す「看板」、ユーザーが歩くルートをカメラで写した実際の風景に、ルートや看板などのビジュアルを重ねて表示し、目的地までの方向や距離を立体的に確認できる~ Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

7.

ARモードの開発記録 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

8.

ARモード開発のきっかけ ヤフーのスーパーエンジニアが ARモードを開発中 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

9.

ARモード開発のきっかけ 3Dモデリングできて、 ARモードやりたい人 いない? 学生時代にプロダクトデザインを専攻 3Dモデリングを行なっていることもあり、ARモードの開発にアサイン Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

10.

ARモードのデザイン開発日程 12月 1月 2月 ワイヤー作成 UIの作り込み 必要要素の決定 プロトタイプ作成/テスト 3Dモデリング作成 UI/UX作成の活動期間は約2ヶ月 App StoreのTodayタブのアートワーク作成期間は4日間 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

11.

検討事項の一覧 ・ARモードへの遷移 ・3D看板 ・足跡 ・歩きスマホの防止 ・ARモードの失敗時 ・ルート表示 ・空間認識のダイアログ ・App StoreのTodayタブ ・遊び心 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

12.

検討事項の一覧 ・ARモードへの遷移 ・3D看板 ・足跡 ・歩きスマホの防止 ・ARモードの失敗時 ・ルート表示 ・空間認識のダイアログ ・App StoreのTodayタブ ・遊び心 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

13.

3D看板について 3DモデリングはBlenderを使用し作成 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

14.

3D看板について 3DモデリングはBlenderを使用し作成 ・360度どこから見ても残り距離がわかる ・Yahoo! MAPの世界観を保ちつつ現実世界に馴染ます Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

15.

ARモードの失敗時について AR体験に慣れていない人が多いため 失敗時も最も重要な要素の一つ Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

16.

遊び心もARモード内に 足跡で歩く楽しみ ゴール時の体験向上 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

17.

App StoreのTodayタブの対応 Todayタブにフィーチャー Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

18.

ARモードで学んだコト Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

19.

ARモードで学んだコト ARモードの ユースケース ウェイクアップ画面 案内画面の情報 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

20.

ARモードのユースケース 通常のマップ ARモード ・目的地位置までの把握 ・今この瞬間に向かうべき方向 ・地図全体を俯瞰できる ・現在位置でフォーカスする ・案内画面:地図 ・案内画面:現実 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

21.

ウェイクアップ画面 - 歩きスマホの防止 ・AR起動時に必ず確認のポップアップを表示 → 毎回表示させることで、不注意による交通事故を 未然に防ぐ役割。グラフィックと文言で表現 新しいテクノロジーを使用時は、 よりあらゆる状況を想定しておかなければ行けない Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

22.

案内画面の情報 ・地図情報をARに最適なパーツに置き換える必要がある ・0.5秒で直感的にわかるパーツを使用する必要がある ・+αの遊び心をいれることによって、ユーザの心を掴める Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

23.

まとめ Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

24.

まとめ ・最新技術を使うことは既存にはないユースケースが必ず発生するので あらゆるコトを想定してデザインしていかないといけない ・新しい技術を使って、ユーザーの生活をより豊かにする+遊び心を 取り入れることでよりARを好きになってもらう取組みが大切 Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.

25.

EOF 写真:アフロ Copyright © 2018 Yahoo JAPAN Corporation. All Rights Reserved.