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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yuki Homma
September 09, 2019
Design
180
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
すたみと3登壇資料.pdf
Yuki Homma
September 09, 2019
More Decks by Yuki Homma
See All by Yuki Homma
Designship2019_AR / Spatial Experience Design
hommy1014
4
2.9k
Other Decks in Design
See All in Design
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
1
130
はじめての演奏会フライヤーデザイン
chorkaichan
1
310
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
230
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.3k
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
160
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
670
Signull 団体説明資料
signull
0
670
test deck title
shotamatsuo
0
1.5k
文化のデザイン - Soft Impact of Design
atsushihomma
0
210
Figma MCPを活用するためのデザインハンドブック
vivion
7
18k
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
0
270
「おすすめ」はなぜ信用されないのか - 信頼を築くUI/UX設計
ryu1013
0
140
Featured
See All Featured
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Navigating Team Friction
lara
192
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
How STYLIGHT went responsive
nonsquared
100
6.2k
First, design no harm
axbom
PRO
2
1.2k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Visualization
eitanlees
152
17k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
360
Thoughts on Productivity
jonyablonski
76
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
310
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