体験を創る - 1→10design,inc. 坪倉輝明
DESCRIPTION
2014/02/09 I.C.E(一般社団法人インタラクティブ・コミュニケーション・エキスパーツ) INTERACTIVE CREATION CAMP 講義内容TRANSCRIPT
![Page 1: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/1.jpg)
体験を創る
1 - 1 0 d e s i g n , I n c . 坪倉輝明
![Page 2: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/2.jpg)
もくじ • 自己紹介 • 1→10design,Inc.について • 制作の舞台裏 • 体験を創る上で注意している事 • アイディアについて
– 良いアイディアを生み出すコツ – 平凡なアイディアを飛躍させる必殺技
![Page 3: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/3.jpg)
自己紹介 Programmer, Media Artist, VJ
坪倉 輝明 1-10design,Inc. コミュニケーションテクノロジー部
神奈川工科大学 小坂研究室 アドバイザー
金沢工業大学 メディア情報学科卒
京都出身。26歳。
入社して2年ちょい。
@kohack_v
・Web
http://teruaki-tsubokura.com/
![Page 4: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/4.jpg)
自己紹介
• 特徴 – Web出身(サーバーサイド)
– モノづくり好き
– 未来っぽいもの好き
– オタク文化が好き
– たまにVJ
– プログラミングは苦手
@kohack_v
・Web
http://teruaki-tsubokura.com/
![Page 5: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/5.jpg)
自己紹介
• スキル – Flash, AIR, ActionScript3.0
• 入社してから始めた
– openFrameworks
• 2年半くらい前に興味を持って始めた
– Arduino, 電子工作
• 2年半くらい前に興味を持って始めた
– PHP, HTML, JavaScript
• 前職で1年半くらい使ってた
@kohack_v
・Web
http://teruaki-tsubokura.com/
どれも歴が浅く、未熟です…。
![Page 6: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/6.jpg)
※ プログラミングは苦手なので、 あまりプログラミングの話はしません!
![Page 7: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/7.jpg)
個人で作ったもの メディアアートとか色々
![Page 8: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/8.jpg)
個人で作ったもの 2010
Shadow Touch
2011
石畳燈籠 AffinBeatBox
![Page 9: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/9.jpg)
個人で作ったもの 2012
2013
ミライノピアノ 七色小道
AffinBeatVJ 超視力検査 – HyperEyeTest -
![Page 10: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/10.jpg)
個人で作ったもの 2013
インタラクティブお葬式
![Page 11: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/11.jpg)
![Page 12: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/12.jpg)
1→10design について • 京都に本社があるインタラクティブスタジオ
• 社員数
京都本社 31名
東京支社 24名
計 55名 (2014/02/09現在)
PM・ディレクター 15名、デザイナー 12名、Flashエンジニア 9名、
Webフロントエンド+バックエンド 7名、3DCG&映像 5名、
インスタレーションエンジニア 3名
( ワン・トゥー・テン・デザイン )
![Page 13: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/13.jpg)
1→10design について • お仕事での私の担当(インスタレーションエンジニア)
– Flashサイト
– Windows/Macアプリ ( Adobe AIR, openFrameworks等 )
– iPhone/Androidアプリ ( Adobe AIR )
– インスタレーション
– デジタルサイネージ
– プロジェクションマッピング
– ハードウェア
割と企画・提案から入ることが多いです。
( ワン・トゥー・テン・デザイン )
![Page 14: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/14.jpg)
1→10 Works
![Page 15: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/15.jpg)
![Page 16: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/16.jpg)
制作の舞台裏
![Page 17: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/17.jpg)
制作の舞台裏 • ミライセンシ
– http://works.1-10.com/event/miraisenshi/
• 渋谷デジタル花火大会
– http://works.1-10.com/promotion/qseye-hanabi/
• 関西テレビ アトリウム空間
– http://works.1-10.com/event/ktv-atrium/
![Page 18: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/18.jpg)
リアルインベーダー
![Page 19: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/19.jpg)
リアルインベーダー 場所:渋谷ヒカリエ 8/
公開:2013年6月11日
開発期間:2週間程度 エンジニア2人、デザイナー1人
• 弊社セミナー開催に合わせて開発したインスタレーション
• なんか新しいもの色々取り入れてみたかった
• 失敗した・・・
https://vimeo.com/73109080
![Page 20: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/20.jpg)
リアルインベーダー
• 2枚の透過スクリーンで立体感のあるゲーム。
• 敵に見立てたAR.Droneを実際に飛ばす。
• プレイヤー達で協力して敵のAR.Droneを倒すゲーム。
初期のアイディアスケッチ
![Page 21: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/21.jpg)
リアルインベーダー
• 2枚の透過スクリーンで立体感のあるゲーム。
• 敵に見立てたAR.Droneを実際に飛ばす。
• プレイヤー達で協力して敵のAR.Droneを倒すゲーム。
→ やっぱりAR.Droneを自分で操作したい。
→ シューティングゲームのプレイヤーとボスという設定で対戦した方が面白いかも。
初期のアイディアスケッチ
![Page 22: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/22.jpg)
リアルインベーダー • 2枚の透過スクリーンを挟んで、プレイヤーサイドとエネミーサイドに分かれて対戦するシューティングゲーム。
• Kinectを使用し、体を使って操作する。
• 透過スクリーンの間にはAR.Droneが飛んでいて、ボスのグラフィックスと連動して動く。
ゲームの特徴
![Page 23: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/23.jpg)
リアルインベーダー 【プレイヤーサイド】 • 体の傾きで自キャラを移動させてボスを攻撃する。
• 両手を上げるとボムを使用し、ボスの攻撃を全て消すことができる。
• アイテムを取ると一定時間パワーアップ
• ライフが少ない。(3機)
• 小回りが利く。
プレイヤーゲージ
ボム残数
プレイヤーキャラ
![Page 24: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/24.jpg)
リアルインベーダー 【エネミーサイド】 • 画面上のボスキャラとAR.Droneの位置が連動していて、体の傾きでAR.Droneを操作してプレイヤーを攻撃する。
• 手を振るとその方向から機雷を降らせる。
• ライフが多い(上部のゲージ)
• 移動遅い。
ライフゲージ
ボスキャラ
![Page 25: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/25.jpg)
使用機器 • ゲーム描画用 MacBook Pro × 1台
• Kinect制御用 Windows PC × 1台
• AR.Drone制御用 Windows PC × 1台
• Kinect × 2台
• Wiiリモコン × 1台
• AR.Drone(クアッドコプター) × 1機
• 透過スクリーン(アミッド) × 2台
![Page 26: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/26.jpg)
システム構成
ゲーム描画用 Mac
AR.Drone制御用 Win Kinect制御用 Win
Wiiリモコン AR.Drone Kinect for Windows × 2
![Page 27: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/27.jpg)
システム構成
ゲーム描画用 Mac
AR.Drone制御用 Win Kinect制御用 Win
Wiiリモコン AR.Drone Kinect for Windows × 2
ソケット通信(UDP)
![Page 28: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/28.jpg)
システム構成
ゲーム描画用 Mac
AR.Drone制御用 Win Kinect制御用 Win
Wiiリモコン AR.Drone Kinect for Windows × 2
ソケット通信(UDP)
![Page 29: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/29.jpg)
システム構成
ゲーム描画用 Mac
AR.Drone制御用 Win Kinect制御用 Win
Wiiリモコン AR.Drone Kinect for Windows × 2
ソケット通信(UDP)
![Page 30: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/30.jpg)
システム構成
ゲーム描画用 Mac
AR.Drone制御用 Win Kinect制御用 Win
Wiiリモコン AR.Drone Kinect for Windows × 2
ソケット通信(UDP)
![Page 31: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/31.jpg)
AR.Drone制御
![Page 32: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/32.jpg)
AR.Drone制御 • ActionScript3.0用のライブラリ公開してる人いるし楽勝~♪ https://github.com/mousepancyo/ARDrone-for-AS3
![Page 33: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/33.jpg)
AR.Drone制御 • ActionScript3.0用のライブラリ公開してる人いるし楽勝~♪ https://github.com/mousepancyo/ARDrone-for-AS3
→ めちゃめちゃ大変やった…。
![Page 34: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/34.jpg)
AR.Drone制御 • AR.Drone
– 3軸加速度センサ – ジャイロセンサ – 超音波距離センサ(高度) – 正面カメラ(1280x720) – 腹面カメラ(320×240) – UDPソケットでコマンドを送信して操作
![Page 35: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/35.jpg)
AR.Drone制御 • AR.Drone
– 3軸加速度センサ – ジャイロセンサ – 超音波距離センサ(高度) – 正面カメラ(1280x720) – 腹面カメラ(320×240) – UDPソケットでコマンドを送信して操作
→ ただし、自身の現在位置は取得できない
![Page 36: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/36.jpg)
AR.Drone制御
![Page 37: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/37.jpg)
AR.Drone制御 • AR.Droneの3次元トラッキング
– Wiiリモコンの赤外線カメラを利用
![Page 38: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/38.jpg)
![Page 39: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/39.jpg)
768 px
1027 px
![Page 40: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/40.jpg)
0
y
1
1 x 0
![Page 41: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/41.jpg)
(0.2, 0.3)
0
y
1
1 x 0
![Page 42: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/42.jpg)
(0.2, 0.3)
(0.75, 0.8)
(1.0, 0.25)
(0.4, 0.65)
赤外線4点まで取得可能
![Page 43: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/43.jpg)
(0.2, 0.3)
(0.75, 0.8)
(1.0, 0.25)
(0.4, 0.65)
100fps
![Page 44: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/44.jpg)
AR.Drone制御 • AR.Droneの腹面に赤外線LEDを取り付けて
Wiiリモコンでトラッキング!
赤外線LED +ボタン電池
![Page 45: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/45.jpg)
AR.Drone制御 • ただしこれでは2次元座標しか取得出来ない。 → 3軸目はAR.Droneの超音波距離センサ(高度センサ)を利用
超音波距離センサ
y x
Wiiリモコン
z
![Page 46: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/46.jpg)
• AR.Drone制御用AIRアプリを作成
![Page 47: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/47.jpg)
• AR.Drone制御用AIRアプリを作成
取得した3次元座標をプロット
![Page 48: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/48.jpg)
• AR.Drone制御用AIRアプリを作成
Wiiリモコンの接続・切断
![Page 49: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/49.jpg)
• AR.Drone制御用AIRアプリを作成
UDPソケット通信設定
![Page 50: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/50.jpg)
• AR.Drone制御用AIRアプリを作成
AR.Drone操作ボタン等
LEDアニメーション& フライトアニメーション
![Page 51: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/51.jpg)
後は指定した位置へ移動するようにコマンドを送信すれば完成!
・・・と思いきや。
![Page 52: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/52.jpg)
沢山の問題が発生 • 静止できない問題 • 風の巻き返し問題 • 天井吸い上げ問題 • Wiiリモコンの視野角狭い問題 • 超音波センサ精度問題 • 超音波センサ無反応問題
![Page 53: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/53.jpg)
静止できない問題
• 移動コマンドを送るのをやめても慣性で移動し続ける。
移動 停止 実際の停止位置 慣性
![Page 54: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/54.jpg)
静止できない問題
• 移動コマンドを送るのをやめても慣性で移動し続ける。
移動 停止 実際の停止位置 慣性
→ 停止時に少しだけ反対方向にコマンドを送ると軽減できる
![Page 55: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/55.jpg)
風の巻き返し問題
• 自身の風が周りのスクリーン等に反射してホバリングが不安定になる。
![Page 56: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/56.jpg)
風の巻き返し問題
• 自身の風が周りのスクリーン等に反射してホバリングが不安定になる。
→ 狭い場所での飛行は向いていなかった・・・
![Page 57: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/57.jpg)
天井吸い上げ問題
• 天井が近いと吸い付く・・・
![Page 58: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/58.jpg)
天井吸い上げ問題
• 天井が近いと吸い付く・・・
→ 狭い場所での飛行は(ry
![Page 59: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/59.jpg)
Wiiリモコンの視野角狭い問題
• Wiiリモコンの視野角は予想以上に狭く、トラッキング範囲からすぐにはみ出てしまう。 – (水平方向) 45 度 画角(垂直方向) 30 度 – つまり高度1mの位置では約83cmの範囲しかトラッキングできない。
1m
45度
約83cm
![Page 60: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/60.jpg)
Wiiリモコンの視野角狭い問題
• Wiiリモコンの視野角は予想以上に狭く、トラッキング範囲からすぐにはみ出てしまう。 – (水平方向) 45 度 画角(垂直方向) 30 度 – つまり高度1mの位置では約83cmの範囲しかトラッキングできない。
1m
45度
約83cm
• ちゃんとした赤外線カメラを 使うべきだった。
• とりあえず最低高度を高めに 設定して緩和
![Page 61: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/61.jpg)
超音波センサ精度問題
• 割と超音波センサの精度悪い・・・
高度 150cm!
高度 150cm!
![Page 62: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/62.jpg)
超音波センサ精度問題
• 割と超音波センサの精度悪い・・・
高度 150cm!
高度 150cm!
どうしようもない・・・
![Page 63: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/63.jpg)
超音波センサ無反応問題
• たまに超音波センサが値を返さない
高度 150cm!
・・・
![Page 64: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/64.jpg)
高度 150cm!
・・・
原因わからず・・・
超音波センサ無反応問題
• たまに超音波センサが値を返さない
![Page 65: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/65.jpg)
結果
![Page 66: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/66.jpg)
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
結果
![Page 67: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/67.jpg)
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。
結果
![Page 68: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/68.jpg)
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。
• ARDrone for AS3を拡張してLEDアニメーションやフライトアニメーションも制御できた。
結果
![Page 69: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/69.jpg)
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。
• ARDrone for AS3を拡張してLEDアニメーションやフライトアニメーションも制御できた。
• 結果的には失敗したが、それ以上に良い経験や知見が身についた。
結果
![Page 70: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/70.jpg)
![Page 71: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/71.jpg)
体験を創る上で注意してる事
![Page 72: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/72.jpg)
体験を創る上で注意してる事
• とにかくわかりやすく!
![Page 73: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/73.jpg)
体験を創る上で注意してる事
• とにかくわかりやすく!
– 体験型のサイネージやゲームは一般の家庭用ゲームと違い、1回きりの場合が多い。
![Page 74: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/74.jpg)
体験を創る上で注意してる事
• とにかくわかりやすく!
– 体験型のサイネージやゲームは一般の家庭用ゲームと違い、1回きりの場合が多い。
→ 初見で操作できる事が重要!(より単純に。)
→ ゲームであれば1回でぎりぎりクリアできる難易度に。
![Page 75: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/75.jpg)
体験を創る上で注意してる事
• ストレスのないインタラクション
![Page 76: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/76.jpg)
体験を創る上で注意してる事
• ストレスのないインタラクション
– 入力が直感的で、確実であること。
– ジェスチャー等がうまく認識されないとイライラする。
![Page 77: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/77.jpg)
体験を創る上で注意してる事
• ストレスのないインタラクション
– 入力が直感的で、確実であること。
– ジェスチャー等がうまく認識されないとイライラする。
→ しきい値は甘めに設定する。
→ 動作しないより動作しすぎる方がまし。
![Page 78: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/78.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
![Page 79: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/79.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
![Page 80: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/80.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
![Page 81: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/81.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2)Twitter/Facebookアカウントで参加するゲーム。
![Page 82: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/82.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2)Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。
![Page 83: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/83.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2)Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。
– 例3)特設ステージの上に撮影ブースを作成。
![Page 84: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/84.jpg)
体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1)スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2)Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。
– 例3)特設ステージの上に撮影ブースを作成。
→ 自分だったら恥ずかしくてやらない・・・。
![Page 85: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/85.jpg)
![Page 86: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/86.jpg)
アイディアについて
![Page 87: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/87.jpg)
良いアイディアを生み出すコツ
① 技術についての知識を増やす。
② 流行り物は実際に触ってみる。
③ 複数のアイディアを組み合わせてみる。
④ 必ずメモする。
⑤ ひたすらアイディアを出す。
![Page 88: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/88.jpg)
• 手段を知っていなければアイディアは出てこない。
• 知識はあなたの「アイディアの引き出し」
Idea Bank
Idea
①技術についての知識を増やす
![Page 89: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/89.jpg)
①技術についての知識を増やす 例えば…
「ユーザーの手の動きを取得したい」 • Kinect(ボーントラッキング)
• Kinect(深度画像解析)
• WebCam + 画像処理(動体検知)
• WebCam +画像処理(背景差分)
• WebCam +画像処理(色認識)
• 加速度センサ
• ジャイロセンサ
• 筋電センサ
• LeapMotion
• スマートフォン
• 赤外線カメラ + 赤外LED
• タッチパネル
• ボタン
• スライダー
• 曲げセンサ
![Page 90: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/90.jpg)
①技術についての知識を増やす 例えば…
「ユーザーの手の動きを取得したい」 • Kinect(ボーントラッキング)
• Kinect(深度画像解析)
• WebCam + 画像処理(動体検知)
• WebCam +画像処理(背景差分)
• WebCam +画像処理(色認識)
• 加速度センサ
• ジャイロセンサ
• 筋電センサ
• LeapMotion
• スマートフォン
• 赤外線カメラ + 赤外LED
• タッチパネル
• ボタン
• スライダー
• 曲げセンサ
→ 用途に合わせて最適な手法を選べる!
![Page 91: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/91.jpg)
良いアイディアを生み出すコツ
① 技術についての知識を増やす。 – 手段を知っていなければアイディアは出てこない。
– 知識はあなたの「アイディアの引き出し」
例えば…
「ユーザーの手の動きを取得したい」 • Kinect(ボーントラッキング)
• Kinect(深度画像解析)
• WebCam + 画像処理(動体検知)
• WebCam +画像処理(背景差分)
• WebCam +画像処理(色認識)
• 加速度センサ
• ジャイロセンサ
• 筋電センサ
• LeapMotion
• スマートフォン
• 赤外線カメラ + 赤外LED
• タッチパネル
• ボタン
• スライダー
• 曲げセンサ
→用途に合わせて最適な手法を選べる!
![Page 92: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/92.jpg)
②流行り物は実際に触ってみる
• 実際に手を動かさないと気づけないことがある。
• コンセプトムービー詐欺が多い。
![Page 93: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/93.jpg)
②流行り物は実際に触ってみる 例えば…
「 LeapMotion 」 デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…
• Kinectのように深度画像を利用することができない。
• 指が上下に重なると認識できない。
• 指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。
• 始めて使う人は操作方法がわからず戸惑う。
• 操作方法を伝える事が難しい。(3次元操作を画面では説明しにくい)
• ユーザーは操作範囲がわからないので予想外の操作をする。(LeapMotionの上に手を乗せる等)
• 手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知らないので手のひらを画面に向けたりして多々指が認識できない事がある。
• センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、子供に合わせて設置すると大人には低すぎる。
![Page 94: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/94.jpg)
②流行り物は実際に触ってみる 例えば…
「 LeapMotion 」 デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…
• Kinectのように深度画像を利用することができない。
• 指が上下に重なると認識できない。
• 指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。
• 始めて使う人は操作方法がわからず戸惑う。
• 操作方法を伝える事が難しい。(3次元操作を画面では説明しにくい)
• ユーザーは操作範囲がわからないので予想外の操作をする。(LeapMotionの上に手を乗せる等)
• 手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知らないので手のひらを画面に向けたりして多々指が認識できない事がある。
• センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、子供に合わせて設置すると大人には低すぎる。
→ 動画では分からない沢山の気付きがある!
![Page 95: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/95.jpg)
• 技術を組み合わせると面白い化学変化が。
• よくあるアイディアでも、他と組み合わせることで新しいアイディアになることも多い。
Idea
③複数のアイディアを組み合わせてみる
Idea
+
![Page 96: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/96.jpg)
④必ずメモする
• アイディアを全て覚えておくことは難しい
![Page 97: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/97.jpg)
④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に 面白いアイディアが生まれる
![Page 98: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/98.jpg)
④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に 面白いアイディアが生まれる
そのまま寝る。
![Page 99: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/99.jpg)
④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に 面白いアイディアが生まれる
そのまま寝る。
そういえば昨日凄く良いアイディアを 思いついた気が…あれ?
![Page 100: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/100.jpg)
• 落書き帳を持ち歩く – 絵で残したほうが後からイメージがつきやすい。
• EverNoteにメモする – スマフォでメモしておけば後でPCから見返せる。
④必ずメモする
![Page 101: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/101.jpg)
あとは…
![Page 102: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/102.jpg)
⑤ひたすらアイディアを出す
![Page 103: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/103.jpg)
![Page 104: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/104.jpg)
でも、私センスが無いからなぁ…
![Page 105: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/105.jpg)
大丈夫!
![Page 106: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/106.jpg)
平凡なアイディアを飛躍させる
必殺技
\ 誰でもできる /
![Page 107: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/107.jpg)
数を増やす
THROUGH HOLLOW LANDS
The Global Pursuit of Happiness https://vimeo.com/38796123
![Page 108: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/108.jpg)
数を増やす
THROUGH HOLLOW LANDS
The Global Pursuit of Happiness
一気に説得力が増す!
https://vimeo.com/38796123
![Page 109: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/109.jpg)
サイズを大きくする
Rubber Duck
ファスナーの船
![Page 110: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/110.jpg)
サイズを大きくする
Rubber Duck
ファスナーの船
単体でも存在感のある作品に!
![Page 111: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/111.jpg)
つまり・・・
![Page 112: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/112.jpg)
金の力で 圧倒させよう!
![Page 113: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/113.jpg)
![Page 114: 体験を創る - 1→10design,Inc. 坪倉輝明](https://reader033.vdocuments.mx/reader033/viewer/2022052311/556f5f70d8b42a916b8b51c9/html5/thumbnails/114.jpg)
体験を創る 1 - 1 0 d e s i g n , I n c . 坪倉輝明
ご清聴ありがとうございました。