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

体験を創る

1 - 1 0 d e s i g n , I n c .　坪倉輝明

もくじ •  自己紹介 •  1→10design,Inc.について •  制作の舞台裏 •  体験を創る上で注意している事 •  アイディアについて

–  良いアイディアを生み出すコツ –  平凡なアイディアを飛躍させる必殺技

自己紹介 Programmer, Media Artist, VJ

坪倉輝明 1-10design,Inc. コミュニケーションテクノロジー部

神奈川工科大学小坂研究室アドバイザー

金沢工業大学メディア情報学科卒

京都出身。26歳。

入社して2年ちょい。

@kohack_v

・Web

　　http://teruaki-tsubokura.com/

・Twitter

自己紹介

•  特徴 –  Web出身（サーバーサイド）

–  モノづくり好き

–  未来っぽいもの好き

–  オタク文化が好き

–  たまにVJ

–  プログラミングは苦手

@kohack_v

・Web


・Twitter

自己紹介

•  スキル –  Flash, AIR, ActionScript3.0

•  入社してから始めた

–  openFrameworks

•  2年半くらい前に興味を持って始めた

–  Arduino, 電子工作

•  2年半くらい前に興味を持って始めた

–  PHP, HTML, JavaScript

•  前職で1年半くらい使ってた

@kohack_v

・Web


・Twitter

どれも歴が浅く、未熟です…。

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

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

個人で作ったもの 2010

Shadow Touch

2011

石畳燈籠 AffinBeatBox


2013

ミライノピアノ七色小道

AffinBeatVJ 超視力検査 – HyperEyeTest -


インタラクティブお葬式

1→10design について •  京都に本社があるインタラクティブスタジオ

•  社員数

京都本社 31名

東京支社 24名

計 55名 (2014/02/09現在)

PM・ディレクター　15名、デザイナー　12名、Flashエンジニア　9名、

Webフロントエンド+バックエンド　7名、3DCG&映像　5名、

インスタレーションエンジニア　3名

（ワン・トゥー・テン・デザイン）

1→10design について •  お仕事での私の担当（インスタレーションエンジニア）

–  Flashサイト

–  Windows/Macアプリ ( Adobe AIR, openFrameworks等 )

–  iPhone/Androidアプリ ( Adobe AIR )

–  インスタレーション

–  デジタルサイネージ

–  プロジェクションマッピング

–  ハードウェア

割と企画・提案から入ることが多いです。

（ワン・トゥー・テン・デザイン）

1→10 Works

制作の舞台裏

制作の舞台裏 •  ミライセンシ

–  http://works.1-10.com/event/miraisenshi/

•  渋谷デジタル花火大会

–  http://works.1-10.com/promotion/qseye-hanabi/

•  関西テレビアトリウム空間

–  http://works.1-10.com/event/ktv-atrium/

リアルインベーダー

リアルインベーダー場所：渋谷ヒカリエ 8/

公開：2013年6月11日

開発期間：2週間程度エンジニア2人、デザイナー1人

•  弊社セミナー開催に合わせて開発したインスタレーション

•  なんか新しいもの色々取り入れてみたかった

•  失敗した・・・

https://vimeo.com/73109080


•  2枚の透過スクリーンで立体感のあるゲーム。

•  敵に見立てたAR.Droneを実際に飛ばす。

•  プレイヤー達で協力して敵のAR.Droneを倒すゲーム。

初期のアイディアスケッチ


•  2枚の透過スクリーンで立体感のあるゲーム。

•  敵に見立てたAR.Droneを実際に飛ばす。

•  プレイヤー達で協力して敵のAR.Droneを倒すゲーム。

→　やっぱりAR.Droneを自分で操作したい。

→　シューティングゲームのプレイヤーとボスという設定で対戦した方が面白いかも。

初期のアイディアスケッチ

リアルインベーダー •  2枚の透過スクリーンを挟んで、プレイヤーサイドとエネミーサイドに分かれて対戦するシューティングゲーム。

•  Kinectを使用し、体を使って操作する。

•  透過スクリーンの間にはAR.Droneが飛んでいて、ボスのグラフィックスと連動して動く。

ゲームの特徴

リアルインベーダー【プレイヤーサイド】 •  体の傾きで自キャラを移動させてボスを攻撃する。

•  両手を上げるとボムを使用し、ボスの攻撃を全て消すことができる。

•  アイテムを取ると一定時間パワーアップ

•  ライフが少ない。(3機)

•  小回りが利く。

プレイヤーゲージ

ボム残数

プレイヤーキャラ

リアルインベーダー【エネミーサイド】 •  画面上のボスキャラとAR.Droneの位置が連動していて、体の傾きでAR.Droneを操作してプレイヤーを攻撃する。

•  手を振るとその方向から機雷を降らせる。

•  ライフが多い（上部のゲージ）

•  移動遅い。

ライフゲージ

ボスキャラ

使用機器 •  ゲーム描画用 MacBook Pro × 1台

•  Kinect制御用 Windows PC × 1台

•  AR.Drone制御用 Windows PC × 1台

•  Kinect × 2台

•  Wiiリモコン × 1台

•  AR.Drone(クアッドコプター) × 1機

•  透過スクリーン(アミッド) × 2台

システム構成

ゲーム描画用 Mac

AR.Drone制御用 Win Kinect制御用 Win

Wiiリモコン AR.Drone Kinect for Windows × 2

システム構成




ソケット通信（UDP）

システム構成





システム構成





システム構成





AR.Drone制御

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

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

→　めちゃめちゃ大変やった…。

AR.Drone制御 •  AR.Drone

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

AR.Drone制御 •  AR.Drone

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

→　ただし、自身の現在位置は取得できない

AR.Drone制御

AR.Drone制御 •  AR.Droneの3次元トラッキング

– Wiiリモコンの赤外線カメラを利用

768 px

1027 px

0

y

1

1 x 0

(0.2, 0.3)

0

y

1

1 x 0

(0.2, 0.3)

(0.75, 0.8)

(1.0, 0.25)

(0.4, 0.65)

赤外線4点まで取得可能

(0.2, 0.3)

(0.75, 0.8)

(1.0, 0.25)

(0.4, 0.65)

100fps

AR.Drone制御 •  AR.Droneの腹面に赤外線LEDを取り付けて

Wiiリモコンでトラッキング！

赤外線LED +ボタン電池

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

超音波距離センサ

y x

Wiiリモコン

z

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


取得した3次元座標をプロット


Wiiリモコンの接続・切断


UDPソケット通信設定


AR.Drone操作ボタン等

LEDアニメーション＆フライトアニメーション

後は指定した位置へ移動するようにコマンドを送信すれば完成！

・・・と思いきや。

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

静止できない問題

•  移動コマンドを送るのをやめても慣性で移動し続ける。

移動停止実際の停止位置慣性

静止できない問題

•  移動コマンドを送るのをやめても慣性で移動し続ける。

移動停止実際の停止位置慣性

→　停止時に少しだけ反対方向にコマンドを送ると軽減できる

風の巻き返し問題

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

風の巻き返し問題

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

→　狭い場所での飛行は向いていなかった･･･

天井吸い上げ問題

•  天井が近いと吸い付く･･･

天井吸い上げ問題

•  天井が近いと吸い付く･･･

→　狭い場所での飛行は(ry

Wiiリモコンの視野角狭い問題

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

1m

45度

約83cm

Wiiリモコンの視野角狭い問題

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

1m

45度

約83cm

•  ちゃんとした赤外線カメラを使うべきだった。

•  とりあえず最低高度を高めに設定して緩和

超音波センサ精度問題

•  割と超音波センサの精度悪い・・・

高度 150cm!

高度 150cm!

超音波センサ精度問題

•  割と超音波センサの精度悪い・・・

高度 150cm!

高度 150cm!

どうしようもない･･･

超音波センサ無反応問題

•  たまに超音波センサが値を返さない

高度 150cm!

・・・

高度 150cm!

・・・

原因わからず･･･

超音波センサ無反応問題

•  たまに超音波センサが値を返さない

結果

•  残念ながら最後まで正確には制御出来なかった。

–  AR.Droneは細かい位置制御に向かない

結果



•  AR.Droneは十分に広い場所で使いましょう。

結果




•  ARDrone for AS3を拡張してLEDアニメーションやフライトアニメーションも制御できた。

結果




•  ARDrone for AS3を拡張してLEDアニメーションやフライトアニメーションも制御できた。

•  結果的には失敗したが、それ以上に良い経験や知見が身についた。

結果

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


•  とにかくわかりやすく！



– 体験型のサイネージやゲームは一般の家庭用ゲームと違い、1回きりの場合が多い。



– 体験型のサイネージやゲームは一般の家庭用ゲームと違い、1回きりの場合が多い。

→　初見で操作できる事が重要！（より単純に。）

→　ゲームであれば1回でぎりぎりクリアできる難易度に。


•  ストレスのないインタラクション



– 入力が直感的で、確実であること。

– ジェスチャー等がうまく認識されないとイライラする。



– 入力が直感的で、確実であること。

– ジェスチャー等がうまく認識されないとイライラする。

→　しきい値は甘めに設定する。

→　動作しないより動作しすぎる方がまし。


•  参加ハードルが高くないか



– 例1）スマフォと連動する楽しい子供向けサイネージ。




→　子供はスマートフォン持っていない。





– 例2）Twitter/Facebookアカウントで参加するゲーム。






→　SNSやっていない人は参加できない。







– 例3）特設ステージの上に撮影ブースを作成。







– 例3）特設ステージの上に撮影ブースを作成。

→　自分だったら恥ずかしくてやらない･･･。

アイディアについて

良いアイディアを生み出すコツ

①  技術についての知識を増やす。

②  流行り物は実際に触ってみる。

③  複数のアイディアを組み合わせてみる。

④  必ずメモする。

⑤  ひたすらアイディアを出す。

•  手段を知っていなければアイディアは出てこない。

•  知識はあなたの「アイディアの引き出し」

Idea Bank

Idea

①技術についての知識を増やす

①技術についての知識を増やす例えば…

「ユーザーの手の動きを取得したい」 •  Kinect(ボーントラッキング)

•  Kinect(深度画像解析)

•  WebCam + 画像処理(動体検知)

•  WebCam +画像処理(背景差分)

•  WebCam +画像処理(色認識)

•  加速度センサ

•  ジャイロセンサ

•  筋電センサ

•  LeapMotion

•  スマートフォン

•  赤外線カメラ + 赤外LED

•  タッチパネル

•  ボタン

•  スライダー

•  曲げセンサ

①技術についての知識を増やす例えば…









•  LeapMotion




•  ボタン



→　用途に合わせて最適な手法を選べる！

良いアイディアを生み出すコツ

①  技術についての知識を増やす。 – 手段を知っていなければアイディアは出てこない。

– 知識はあなたの「アイディアの引き出し」

例えば…









•  LeapMotion




•  ボタン



→用途に合わせて最適な手法を選べる！

②流行り物は実際に触ってみる

•  実際に手を動かさないと気づけないことがある。

•  コンセプトムービー詐欺が多い。

②流行り物は実際に触ってみる例えば…

「 LeapMotion 」デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…

•  Kinectのように深度画像を利用することができない。

•  指が上下に重なると認識できない。

•  指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。

•  始めて使う人は操作方法がわからず戸惑う。

•  操作方法を伝える事が難しい。（3次元操作を画面では説明しにくい)

•  ユーザーは操作範囲がわからないので予想外の操作をする。（LeapMotionの上に手を乗せる等）

•  手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知らないので手のひらを画面に向けたりして多々指が認識できない事がある。

•  センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、子供に合わせて設置すると大人には低すぎる。

②流行り物は実際に触ってみる例えば…

「 LeapMotion 」デモムービーが公開された時は「魔法のデバイス」と話題になったが、実際は…

•  Kinectのように深度画像を利用することができない。

•  指が上下に重なると認識できない。

•  指同士をくっつけると取得できなくなるので、つまむ動作が取得できない。

•  始めて使う人は操作方法がわからず戸惑う。

•  操作方法を伝える事が難しい。（3次元操作を画面では説明しにくい)

•  ユーザーは操作範囲がわからないので予想外の操作をする。（LeapMotionの上に手を乗せる等）

•  手のひらが下を向いている状態でないと認識がうまくいかないが、ユーザーはそれを知らないので手のひらを画面に向けたりして多々指が認識できない事がある。

•  センサーを固定する必要があるので、大人に合わせて固定すると子供には位置が高すぎ、子供に合わせて設置すると大人には低すぎる。

→　動画では分からない沢山の気付きがある！

•  技術を組み合わせると面白い化学変化が。

•  よくあるアイディアでも、他と組み合わせることで新しいアイディアになることも多い。

Idea

③複数のアイディアを組み合わせてみる

Idea

＋

④必ずメモする

•  アイディアを全て覚えておくことは難しい



寝る前とかのボーっとしている時に面白いアイディアが生まれる




そのまま寝る。




そのまま寝る。

そういえば昨日凄く良いアイディアを思いついた気が…あれ？

•  落書き帳を持ち歩く –  絵で残したほうが後からイメージがつきやすい。

•  EverNoteにメモする –  スマフォでメモしておけば後でPCから見返せる。


あとは…

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

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

大丈夫！

平凡なアイディアを飛躍させる

必殺技

＼誰でもできる／

数を増やす

THROUGH HOLLOW LANDS

The Global Pursuit of Happiness https://vimeo.com/38796123

数を増やす

THROUGH HOLLOW LANDS

The Global Pursuit of Happiness

一気に説得力が増す！

https://vimeo.com/38796123

サイズを大きくする

Rubber Duck

ファスナーの船

サイズを大きくする

Rubber Duck

ファスナーの船

単体でも存在感のある作品に！

つまり･･･

金の力で圧倒させよう！

体験を創る 1 - 1 0 d e s i g n , I n c .　坪倉輝明

ご清聴ありがとうございました。

Self Improvement

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