Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
すたみと3登壇資料.pdf
Search
Yuki Homma
September 09, 2019
Design
0
160
すたみと3登壇資料.pdf
Yuki Homma
September 09, 2019
Tweet
Share
More Decks by Yuki Homma
See All by Yuki Homma
Designship2019_AR / Spatial Experience Design
hommy1014
4
2.8k
Other Decks in Design
See All in Design
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
12k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
940
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
330
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
540
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
700
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
550
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
480
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
350
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
140
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
390
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.9k
Code Review Best Practice
trishagee
72
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
650
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
5
710
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Speed Design
sergeychernyshev
32
1.2k
Transcript
ˇ 【すたみと#3 特別編】 夏のxR⾃由研究発表祭
2 本間悠暉 @y__homm ⾃⼰紹介 MESON ディレクター/デザイナー Spatial時代のユースケースとUXをつくる会社MESONに ディレクター/デザイナーとして所属。 Twitterやnoteにて⾃分のアイデア・プロトタイプ、 体験を拡張するプロダクトをハントして発信中。
ONWARD:『PORTAL』, 博報堂:AR City, 共同研究第2弾 Twitter URL
3 ⾃分のアイデアをARですぐ形にできる プロトタイピング!! 本⽇のテーマ
4 本⽇持ち帰ってほしいこと! アイデア プロトタイプ⼿法 TORCH ARとFigmaを⽤いた ARプロトタイプ⼿法を シェアします! ⽇々のアイデア⼒を鍛える& すらすらアイデアを出す
ための⼿法を共有します! ARプロダクトのプロトタイプづくりの2要素!
5 プロトタイプ動画
6 プロダクト開発のサイクル ⽬標の設定、必要な要素の洗い出し、アイデア決定、プロトタイプ作成、デモの発表 というサイクルを何周も回していく Goal Key factor Idea Proto Demo
show
7 共同研究における開発サイクル ⽬標設定とその要因の洗い出しはnoteを読んでいただけると! Goal Key factor Idea Proto Demo show
8 共同研究における開発サイクル 今⽇はアイデア出しとプロトタイプ作成について説明! Goal Key factor Idea Proto Demo show
9 1. アイデア
10 とっておきアイディエーション…!
Spatial ⼤喜利 インスタントアイデアブレスト法
Spatial ⼤喜利 インスタントアイデアブレスト法 ⾃分 ARおじさん
Spatial ⼤喜利 Spatial花⽕!! インスタントアイデアブレスト法
Spatial ⼤喜利 Spatial花⽕!! AR時代は、 みんなが花⽕を打ち上げ 年末年始やお盆は 街中がAR花⽕だらけに!! インスタントアイデアブレスト法
Spatial ⼤喜利 Spatial天気の⼦!! インスタントアイデアブレスト法
Spatial ⼤喜利 Spatial天気の⼦!! 将来はSNS上の 友⼈たちの感情とリンクして ARエフェクトで ⾬が降ったり、晴れたり、 感情の共有できる! インスタントアイデアブレスト法
17 AR⼤喜利のコツはとにかくポップに繰り返し続けること! 思った5倍くらい脳が柔らかくなるのでおすすめです!
アイデアの例
19 2. プロトタイプ
使⽤ツール 使⽤するツールはFigmaとTorch デザインツール (PC) ARプロトタイプツール (iPhone, iPad)
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 21 1. 体験フローを考える 対象物体の検知 ARWikiの表⽰ アプリ起動
03 04 01 Wikiの選択 02 体験フローを洗い出します
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 22 1. 体験フローを考える 対象物体の検知 ARWikiの表⽰ アプリ起動
03 04 01 Wikiの選択 02 ⾮AR体験と、AR体験フローを考えていきます ⾮AR体験 AR体験
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 23 2. ⾮AR体験をかんがえる Figmaを⽤いて、画⾯をデザインします!
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 24 2. ⾮AR体験をかんがえる 画⾯遷移をプロトタイピングします!!
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 25 2. ⾮AR体験をかんがえる Figmaでのデザインを学びたい⽅は、こちらの⽅の記事を参考に! https://note.mu/fjkn
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 26 3. AR体験のプロトタイピング TORCHはノンコーディングで 3Dオブジェクトの配置/インタラクションをデザインするツール
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 27 3. AR体験のプロトタイピング プロジェクトを作成 プロジェクトX
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 28 3. AR体験のプロトタイピング 体験シーンを作成 シーン1 シーン2
シーン3 プロジェクトX
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 29 3. AR体験のプロトタイピング 3Dオブジェクトや写真、動画をシーンに配置 シーン1 シーン2
プロジェクトX シーン3
- その場で、ランウェイに登 場する服の素材感を知るこ とができる 30 3. AR体験のプロトタイピング オブジェクトや、シーン遷移のインタラクション決める シーン1 シーン2
シーン3 プロジェクトX
31 TORCH内で、できること 3Dモデル 動画/写真 PNG, SVG(UIパーツ) Q. どんなものを配置できるの? 天球型写真
32 TORCH内で、できること カメラフォルダ 端末内フォルダ Dropbox Q. どこから配置できるの? Skechfab Poly
33 TORCH内で、できること イメージトラック GAZE Approach Q. どんなインタラクション(⼊⼒)が可能なの? Tap
34 TORCH内で、できること 移動 回転 ⾊を変える Q. どんなインタラクション(出⼒)が可能なの? ETC,,,
35 TORCHをうまく組み合わせると…? こんなことができるように!
36 おもしろいxRアイデアをかたちにしていきましょう! (質問ありましたら気兼ねなく懇親会で聞いてください)
37 ご静聴ありがとうございました!
38 おまけ
39 プロトタイピングが重要な理由 空間的・⽴体的な体験であるARサービスのUXや仕様 は作りながらでないと決められないため、⾼速でプロ トタイピングしながら設計の解像度を上げていく必要 がある Fixをさせないサービスデザインが必要 プロトタイプによるトライ&エラーとブラッシュアッ プは際限なくできてしまうので、最初に期限を決めて その時点までの最適解を定め、改善サイクルを回すが
重要 終わりからはじめる開発スタイル AWEで発表されていたGoogleのAR開発⼿法
アイデアシート
インスタントアイデアブレスト法① Spatial (3Dのインタラクションを持つ) (3Dオブジェクトを⽤いた) (HyperSpaceを⽤いた) × Instagram Google Dropbox LINE
Airbnb Facebook Spotify