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
150
すたみと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.7k
Other Decks in Design
See All in Design
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
420
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
180
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
TUNAG BOOK 2024
stmn
0
330
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
150
Карта процесса-опыта. Презентация метода
ashapiro
0
330
Arborea Art Book
thebogheart
1
290
Карта реализации историй — убийца USM
ashapiro
0
210
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
360
我做了一個詐騙網站...嗎?
crboy
1
150
Haruki_Konaka_Portforio.pdf
haruki556
0
650
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Automating Front-end Workflow
addyosmani
1366
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
GitHub's CSS Performance
jonrohan
1030
460k
Building Adaptive Systems
keathley
38
2.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
156
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
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