2014/02/09 I.C.E（一般社団法人インタラクティブ・コミュニケーション・エキスパーツ） INTERACTIVE CREATION CAMP 講義内容

1. 体験を創る
1-10design,Inc. 坪倉輝明

2. もくじ
•
•
•
•
•
自己紹介
1→10design,Inc.について
制作の舞台裏
体験を創る上で注意している事
アイディアについて
– 良いアイディアを生み出すコツ
– 平凡なアイディアを飛躍させる必殺技

3. 自己紹介
Programmer, Media Artist, VJ
坪倉 輝明
1-10design,Inc. コミュニケーションテクノロジー部
神奈川工科大学 小坂研究室 アドバイザー
・Web
金沢工業大学 メディア情報学科卒
http://teruaki-tsubokura.com/
・Twitter
京都出身。26歳。
入社して2年ちょい。
@kohack_v

4. 自己紹介
• 特徴
– Web出身（サーバーサイド）
– モノづくり好き
– 未来っぽいもの好き
– オタク文化が好き
・Web
http://teruaki-tsubokura.com/
– たまにVJ
– プログラミングは苦手
・Twitter
@kohack_v

5. 自己紹介
• スキル
– Flash, AIR, ActionScript3.0
• 入社してから始めた
– openFrameworks
• 2年半くらい前に興味を持って始めた
– Arduino, 電子工作
・Web
• 2年半くらい前に興味を持って始めた
http://teruaki-tsubokura.com/
・Twitter
– PHP, HTML, JavaScript
• 前職で1年半くらい使ってた
@kohack_v
どれも歴が浅く、未熟です…。

6. ※ プログラミングは苦手なので、
あまりプログラミングの話はしません！

7. 個人で作ったもの
メディアアートとか色々

8. 個人で作ったもの
2010
Shadow Touch
2011
AffinBeatBox
石畳燈籠

9. 個人で作ったもの
2012
AffinBeatVJ
超視力検査 – HyperEyeTest -
七色小道
ミライノピアノ
2013

10. 個人で作ったもの
2013
インタラクティブお葬式

12. 1→10design について
（ ワン・トゥー・テン・デザイン ）
• 京都に本社があるインタラクティブスタジオ
• 社員数
京都本社 31名
東京支社 24名
計 55名
(2014/02/09現在)
PM・ディレクター 15名、デザイナー 12名、Flashエンジニア 9名、
Webフロントエンド+バックエンド 7名、3DCG&映像 5名、
インスタレーションエンジニア 3名

13. 1→10design について
（ ワン・トゥー・テン・デザイン ）
• お仕事での私の担当（インスタレーションエンジニア）
– Flashサイト
– Windows/Macアプリ
( Adobe AIR, openFrameworks等 )
– iPhone/Androidアプリ
( Adobe AIR )
– インスタレーション
– デジタルサイネージ
– プロジェクションマッピング
– ハードウェア
割と企画・提案から入ることが多いです。

14. 1→10 Works

16. 制作の舞台裏

17. 制作の舞台裏
• ミライセンシ
– http://works.1-10.com/event/miraisenshi/
• 渋谷デジタル花火大会
– http://works.1-10.com/promotion/qseye-hanabi/
• 関西テレビ アトリウム空間
– http://works.1-10.com/event/ktv-atrium/

18. リアルインベーダー

19. リアルインベーダー
https://vimeo.com/73109080
場所：渋谷ヒカリエ 8/
公開：2013年6月11日
開発期間：2週間程度
エンジニア2人、デザイナー1人
•
弊社セミナー開催に合わせて開発したインス
タレーション
•
なんか新しいもの色々取り入れてみたかった
•
失敗した・・・

20. リアルインベーダー
初期のアイディアスケッチ
• 2枚の透過スクリーンで立体感の
あるゲーム。
• 敵に見立てたAR.Droneを実際に
飛ばす。
• プレイヤー達で協力して敵の
AR.Droneを倒すゲーム。

21. リアルインベーダー
初期のアイディアスケッチ
• 2枚の透過スクリーンで立体感の
あるゲーム。
• 敵に見立てたAR.Droneを実際に
飛ばす。
• プレイヤー達で協力して敵の
AR.Droneを倒すゲーム。
→ やっぱりAR.Droneを自分で操作
したい。
→ シューティングゲームのプレイ
ヤーとボスという設定で対戦した方
が面白いかも。

22. リアルインベーダー
ゲームの特徴
•
2枚の透過スクリーンを挟んで、プレイヤー
サイドとエネミーサイドに分かれて対戦す
るシューティングゲーム。
•
Kinectを使用し、体を使って操作する。
•
透過スクリーンの間にはAR.Droneが飛んで
いて、ボスのグラフィックスと連動して動
く。

23. リアルインベーダー
【プレイヤーサイド】
•
体の傾きで自キャラを移動させてボスを攻
撃する。
•
両手を上げるとボムを使用し、ボスの攻撃
を全て消すことができる。
•
アイテムを取ると一定時間パワーアップ
•
ライフが少ない。(3機)
•
小回りが利く。
プレイヤーキャラ
プレイヤーゲージ
ボム残数

24. リアルインベーダー
【エネミーサイド】
•
画面上のボスキャラとAR.Droneの位置が
連動していて、体の傾きでAR.Droneを操
作してプレイヤーを攻撃する。
•
手を振るとその方向から機雷を降らせる。
•
ライフが多い（上部のゲージ）
•
移動遅い。
ライフゲージ
ボスキャラ

25. 使用機器
•
ゲーム描画用 MacBook Pro × 1台
•
Kinect制御用 Windows PC × 1台
•
AR.Drone制御用 Windows PC × 1台
•
Kinect × 2台
•
Wiiリモコン × 1台
•
AR.Drone(クアッドコプター) × 1機
•
透過スクリーン(アミッド) × 2台

26. システム構成
ゲーム描画用 Mac
Kinect制御用 Win
Kinect for Windows × 2
AR.Drone制御用 Win
Wiiリモコン
AR.Drone

27. システム構成
ソケット通信（UDP）
ゲーム描画用 Mac
Kinect制御用 Win
Kinect for Windows × 2
AR.Drone制御用 Win
Wiiリモコン
AR.Drone

28. システム構成
ソケット通信（UDP）
ゲーム描画用 Mac
Kinect制御用 Win
Kinect for Windows × 2
AR.Drone制御用 Win
Wiiリモコン
AR.Drone

29. システム構成
ソケット通信（UDP）
ゲーム描画用 Mac
Kinect制御用 Win
Kinect for Windows × 2
AR.Drone制御用 Win
Wiiリモコン
AR.Drone

30. システム構成
ソケット通信（UDP）
ゲーム描画用 Mac
Kinect制御用 Win
Kinect for Windows × 2
AR.Drone制御用 Win
Wiiリモコン
AR.Drone

31. AR.Drone制御

32. AR.Drone制御
• ActionScript3.0用のライブラリ公開して
る人いるし楽勝∼♪
https://github.com/mousepancyo/ARDrone-for-AS3

33. AR.Drone制御
• ActionScript3.0用のライブラリ公開して
る人いるし楽勝∼♪
https://github.com/mousepancyo/ARDrone-for-AS3
→ めちゃめちゃ大変やった…。

34. AR.Drone制御
• AR.Drone
– 3軸加速度センサ
– ジャイロセンサ
– 超音波距離センサ(高度)
– 正面カメラ(1280x720)
– 腹面カメラ(320×240)
– UDPソケットでコマンドを送信して操作

35. AR.Drone制御
• AR.Drone
– 3軸加速度センサ
– ジャイロセンサ
– 超音波距離センサ(高度)
– 正面カメラ(1280x720)
– 腹面カメラ(320×240)
– UDPソケットでコマンドを送信して操作
→ ただし、自身の現在位置は取得できない

36. AR.Drone制御

37. AR.Drone制御
• AR.Droneの3次元トラッキング
– Wiiリモコンの赤外線カメラを利用

39. 768 px
1027 px

40. 0
y
1
0
x
1

41. 0
0
x
(0.2, 0.3)
y
1
1

42. (0.2, 0.3)
(1.0, 0.25)
(0.4, 0.65)
(0.75, 0.8)
赤外線4点まで取得可能

43. (0.2, 0.3)
(1.0, 0.25)
(0.4, 0.65)
(0.75, 0.8)
100fps

44. AR.Drone制御
• AR.Droneの腹面に赤外線LEDを取り付けて
Wiiリモコンでトラッキング！
赤外線LED
+ボタン電池

45. AR.Drone制御
• ただしこれでは2次元座標しか取得出来ない。
→ 3軸目はAR.Droneの超音波距離センサ(高度センサ)を利用
Wiiリモコン
x
超音波距離センサ
y
z

46. • AR.Drone制御用AIRアプリを作成

47. • AR.Drone制御用AIRアプリを作成
取得した3次元座標をプロット

48. • AR.Drone制御用AIRアプリを作成
Wiiリモコンの接続・切断

49. • AR.Drone制御用AIRアプリを作成
UDPソケット通信設定

50. • AR.Drone制御用AIRアプリを作成
AR.Drone操作ボタン等
LEDアニメーション＆
フライトアニメーション

51. 後は指定した位置へ移動するようにコマンド
を送信すれば完成！
・・・と思いきや。

52. 沢山の問題が発生
•
•
•
•
•
•
静止できない問題
風の巻き返し問題
天井吸い上げ問題
Wiiリモコンの視野角狭い問題
超音波センサ精度問題
超音波センサ無反応問題

53. 静止できない問題
• 移動コマンドを送るのをやめても慣性で移
動し続ける。
移動
停止
実際の停止位置
慣性

54. 静止できない問題
• 移動コマンドを送るのをやめても慣性で移
動し続ける。
移動
停止
実際の停止位置
慣性
→ 停止時に少しだけ反対方向にコマンドを送ると軽減できる

55. 風の巻き返し問題
• 自身の風が周りのスクリーン等に反射して
ホバリングが不安定になる。

56. 風の巻き返し問題
• 自身の風が周りのスクリーン等に反射して
ホバリングが不安定になる。
→ 狭い場所での飛行は向いていなかった･･･

57. 天井吸い上げ問題
• 天井が近いと吸い付く･･･

58. 天井吸い上げ問題
• 天井が近いと吸い付く･･･
→ 狭い場所での飛行は(ry

59. Wiiリモコンの視野角狭い問題
• Wiiリモコンの視野角は予想以上に狭く、トラッキ
ング範囲からすぐにはみ出てしまう。
– (水平方向) 45 度 画角(垂直方向) 30 度
– つまり高度1mの位置では約83cmの範囲しかトラッキ
ングできない。
約83cm
1m
45度

60. Wiiリモコンの視野角狭い問題
• Wiiリモコンの視野角は予想以上に狭く、トラッキ
ング範囲からすぐにはみ出てしまう。
– (水平方向) 45 度 画角(垂直方向) 30 度
– つまり高度1mの位置では約83cmの範囲しかトラッキ
ングできない。
約83cm
1m
45度
• ちゃんとした赤外線カメラを
使うべきだった。
• とりあえず最低高度を高めに
設定して緩和

61. 超音波センサ精度問題
• 割と超音波センサの精度悪い・・・
高度
150cm!
高度
150cm!

62. 超音波センサ精度問題
• 割と超音波センサの精度悪い・・・
高度
150cm!
高度
150cm!
どうしようもない･･･

63. 超音波センサ無反応問題
• たまに超音波センサが値を返さない
・・・
高度
150cm!

64. 超音波センサ無反応問題
• たまに超音波センサが値を返さない
・・・
高度
150cm!
原因わからず･･･

65. 結果

66. 結果
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない

67. 結果
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。

68. 結果
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。
• ARDrone for AS3を拡張してLEDアニメーション
やフライトアニメーションも制御できた。

69. 結果
• 残念ながら最後まで正確には制御出来なかった。
– AR.Droneは細かい位置制御に向かない
• AR.Droneは十分に広い場所で使いましょう。
• ARDrone for AS3を拡張してLEDアニメーション
やフライトアニメーションも制御できた。
• 結果的には失敗したが、それ以上に良い経験や
知見が身についた。

71. 体験を創る上で注意してる事

72. 体験を創る上で注意してる事
• とにかくわかりやすく！

73. 体験を創る上で注意してる事
• とにかくわかりやすく！
– 体験型のサイネージやゲームは一般の家庭用ゲームと
違い、1回きりの場合が多い。

74. 体験を創る上で注意してる事
• とにかくわかりやすく！
– 体験型のサイネージやゲームは一般の家庭用ゲームと
違い、1回きりの場合が多い。
→ 初見で操作できる事が重要！（より単純に。）
→ ゲームであれば1回でぎりぎりクリアできる難易度に。

75. 体験を創る上で注意してる事
• ストレスのないインタラクション

76. 体験を創る上で注意してる事
• ストレスのないインタラクション
– 入力が直感的で、確実であること。
– ジェスチャー等がうまく認識されないとイライラする。

77. 体験を創る上で注意してる事
• ストレスのないインタラクション
– 入力が直感的で、確実であること。
– ジェスチャー等がうまく認識されないとイライラする。
→ しきい値は甘めに設定する。
→ 動作しないより動作しすぎる方がまし。

78. 体験を創る上で注意してる事
• 参加ハードルが高くないか

79. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。

80. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。

81. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2）Twitter/Facebookアカウントで参加するゲーム。

82. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2）Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。

83. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2）Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。
– 例3）特設ステージの上に撮影ブースを作成。

84. 体験を創る上で注意してる事
• 参加ハードルが高くないか
– 例1）スマフォと連動する楽しい子供向けサイネージ。
→ 子供はスマートフォン持っていない。
– 例2）Twitter/Facebookアカウントで参加するゲーム。
→ SNSやっていない人は参加できない。
– 例3）特設ステージの上に撮影ブースを作成。
→ 自分だったら恥ずかしくてやらない･･･。

86. アイディアについて

87. 良いアイディアを生み出すコツ
① 技術についての知識を増やす。
② 流行り物は実際に触ってみる。
③ 複数のアイディアを組み合わせてみる。
④ 必ずメモする。
⑤ ひたすらアイディアを出す。

88. ①技術についての知識を増やす
• 手段を知っていなければアイディアは出てこない。
• 知識はあなたの「アイディアの引き出し」
Idea Bank
Idea

89. ①技術についての知識を増やす
例えば…
「ユーザーの手の動きを取得したい」
•
Kinect(ボーントラッキング)
•
LeapMotion
•
Kinect(深度画像解析)
•
スマートフォン
•
WebCam + 画像処理(動体検知)
•
赤外線カメラ + 赤外LED
•
WebCam +画像処理(背景差分)
•
タッチパネル
•
WebCam +画像処理(色認識)
•
ボタン
•
加速度センサ
•
スライダー
•
ジャイロセンサ
•
曲げセンサ
•
筋電センサ

90. ①技術についての知識を増やす
例えば…
「ユーザーの手の動きを取得したい」
•
Kinect(ボーントラッキング)
•
LeapMotion
•
Kinect(深度画像解析)
•
スマートフォン
•
WebCam + 画像処理(動体検知)
•
赤外線カメラ + 赤外LED
•
WebCam +画像処理(背景差分)
•
タッチパネル
•
WebCam +画像処理(色認識)
•
ボタン
•
加速度センサ
•
スライダー
•
ジャイロセンサ
•
曲げセンサ
•
筋電センサ
→ 用途に合わせて最適な手法を選べる！

91. 良いアイディアを生み出すコツ
① 技術についての知識を増やす。
– 手段を知っていなければアイディアは出てこない。
– 知識はあなたの「アイディアの引き出し」
例えば…
「ユーザーの手の動きを取得したい」
•
Kinect(ボーントラッキング)
•
LeapMotion
•
Kinect(深度画像解析)
•
スマートフォン
•
WebCam + 画像処理(動体検知)
•
赤外線カメラ + 赤外LED
•
WebCam +画像処理(背景差分)
•
タッチパネル
•
WebCam +画像処理(色認識)
•
ボタン
•
加速度センサ
•
スライダー
•
ジャイロセンサ
•
曲げセンサ
•
筋電センサ
→用途に合わせて最適な手法を選べる！

92. ②流行り物は実際に触ってみる
• 実際に手を動かさないと気づけないことがある。
• コンセプトムービー詐欺が多い。

93. ②流行り物は実際に触ってみる
例えば…
「 LeapMotion 」
デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…
•
Kinectのように深度画像を利用することができない。
•
指が上下に重なると認識できない。
•
指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。
•
始めて使う人は操作方法がわからず戸惑う。
•
操作方法を伝える事が難しい。（3次元操作を画面では説明しにくい)
•
ユーザーは操作範囲がわからないので予想外の操作をする。（LeapMotionの上に手を
乗せる等）
•
手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知
らないので手のひらを画面に向けたりして多々指が認識できない事がある。
•
センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、
子供に合わせて設置すると大人には低すぎる。

94. ②流行り物は実際に触ってみる
例えば…
「 LeapMotion 」
デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…
•
Kinectのように深度画像を利用することができない。
•
指が上下に重なると認識できない。
•
指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。
•
始めて使う人は操作方法がわからず戸惑う。
•
操作方法を伝える事が難しい。（3次元操作を画面では説明しにくい)
•
ユーザーは操作範囲がわからないので予想外の操作をする。（LeapMotionの上に手を
乗せる等）
•
手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知
らないので手のひらを画面に向けたりして多々指が認識できない事がある。
•
センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、
子供に合わせて設置すると大人には低すぎる。
→ 動画では分からない沢山の気付きがある！

95. ③複数のアイディアを組み合わせてみる
• 技術を組み合わせると面白い化学変化が。
• よくあるアイディアでも、他と組み合わせるこ
とで新しいアイディアになることも多い。
Idea
Idea
＋

96. ④必ずメモする
• アイディアを全て覚えておくことは難しい

97. ④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に
面白いアイディアが生まれる

98. ④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に
面白いアイディアが生まれる
そのまま寝る。

99. ④必ずメモする
• アイディアを全て覚えておくことは難しい
寝る前とかのボーっとしている時に
面白いアイディアが生まれる
そのまま寝る。
そういえば昨日凄く良いアイディアを
思いついた気が…あれ？

100. ④必ずメモする
• 落書き帳を持ち歩く
– 絵で残したほうが後からイメージがつきやすい。
• EverNoteにメモする
– スマフォでメモしておけば後でPCから見返せる。

101. あとは…

102. ⑤ひたすらアイディアを出す

104. でも、私センスが無いからなぁ…

105. 大丈夫！

106. ＼ 誰でもできる ／
平凡なアイディアを飛躍させる
必殺技

107. 数を増やす
https://vimeo.com/38796123
The Global Pursuit of Happiness
THROUGH HOLLOW LANDS

108. 数を増やす
https://vimeo.com/38796123
The Global Pursuit of Happiness
THROUGH HOLLOW LANDS
一気に説得力が増す！

109. サイズを大きくする
Rubber Duck
ファスナーの船

110. サイズを大きくする
Rubber Duck
単体でも存在感のある作品に！
ファスナーの船

111. つまり･･･

112. 金の力で
圧倒させよう！

114. 体験を創る
1-10design,Inc. 坪倉輝明
ご清聴ありがとうございました。