ITとデザインで未来をつくる -...

ITとデザインで未来をつくる ー創造的問題解決ー

公立はこだて未来大学 システム情報科学研究科 特任助教　木塚 あゆみ

2016. 1. 20

今回の授業内容

「ITをデザインして未来をつくる」 •  私の興味

–  生物、同期現象、コミュニケーション、認知 –  これまでに作ったものの小紹介

•  思いついたものを実現する –  ITでプロトタイピング（↑で作ったものの作り方） –  創造力をきたえる：SFワークショップ –  できる人と協力する・技術について調べる方法

•  息抜き用） サービスデザイン：自分の学びのExperience Mapを作ってみる –  大学に入学前と入学後

•  専門：メディアデザイン 　　 メディアアート、情報教育

•  メディアデザインとは… さまざまなメディアの特性を知り 組み合わせてデザインする

•  キーワード： 身体性、体験型、学び、映像、質感…

•  体験型学習展示物の開発 など

き づか 木塚 あゆみ

おとなになってきてわかったこと：表現の幅

History •  福岡県の普通科高校 卒業 •  1年浪人

•  公立はこだて未来大学（2002 - 2008） 学部～大学院

•  岡山県立大学 デザイン学部 助手（2008 - 2011）

•  福岡にて 個人事業を立ち上げる（2011 - 2013） –  科学館の展示 –  IT×デザイン のコンテンツ開発

•  札幌にて 個人事業を継続 –  大学の先輩と同じ仕事に関わる –  科学技術コミュニケーションについて学ぶ（北海道大学）

•  公立はこだて未来大学 システム情報科学部 特任助教

芸術（映像）をやりたい!➡!世界の仕組みを理解したい

舞踏、!コンテンポラリーダンス

き づか 木塚 あゆみ

高校生～大学生のとき 夢中になったもの

宇多田ヒカルーTraveling（dir:紀里谷和明,2001）

宇多田ヒカルーSAKURAドロップス（dir:紀里谷和明,2002）

宇多田ヒカルーFinal!Distance（dir:紀里谷和明,2001）

Sheryl!Crow!@!Good!Is!Good(p:Psyop,!2008)

Franz!Ferdinand!@!Take!Me!Out!(p:Psyop,!2004)

田中秀幸

HALCALIーストロベリーチップス（dir:ﾀﾅｶﾉﾘﾕｷ,2004）

HALCALIータンデム（dir:!田中秀幸,2003）

木村カエラーJasper（dir:!中村剛/Caviar,2008）

チャットモンチーーシャングリラ（dir:!福居英晃,2006）

平面劇（脚本・演出:木塚あゆみ,2006）

舞踏青龍會（原田信雄） 珍しいキノコ舞踊団

演劇・舞台講演（木塚あゆみ,2002@2007）

テクノロジー×表現（演出） どうやってるんだコレ！？ 　➡　仕組みを考える

メタ的な問題： 人間はなぜ!

そう認識するのか

メタ的な問題： 現象として!

どういうことなのか

同期現象・非線形科学

https://www.youtube.com/watch?v=9@jfla4FHSs

同期現象・非線形科学

ホタルの集団明滅：!・蔵本由紀,!非線形科学,!集英社新書 2007!・スティーヴン・ストロガッツ,!SYNC!　―なぜ自然はシンクロしたがるのか―,!!　早川書店,!2005

生物のコミュニケーション：!・セオドア・ゼノフォンバーバー,!!　もの思う鳥たち,!日本教文社,!2008!・アントニオ・ダマシオ, 　無意識の脳・自己意識の脳,!講談社 2003

ホタル通信 呼吸情報を使ったコミュニケーションツール（2006）

＋

呼吸に応じて光が明滅する

•  熱電対（温度センサ）!•  LED!•  通信モジュール（赤外線LED）

Globalホタル通信 光の明滅を使ったコミュニケーションごみばこ（200７）

呼吸に応じて光が明滅する

•  ゴミの量測定!（圧力センサ）!

•  LED

おもいぬま -Omoi-numa- 身体リズムを利用したコミュニケーション舞台（2008）

•  人の動き（省電センサ）!•  人がいるかどうか（赤外線LED）!•  水流制御、水滴制御（水ポンプ）!•  水を光らせる（LED）!•  水滴を光らせる（高輝度LED）!

おもいぬま -Omoi-numa- 身体リズムを利用したコミュニケーション舞台（2008）

http://youtu.be/AUXCp88_IxE

torikage ‒トリカゲ ｰ 影を使ったインタラクション、影シリーズ（2007－2011）

•  人の影（Webカメラ）!•  アニメーション投影!（プロジェクタ）!

コンペ と わたし

余談ですが… コンペにハマった •  美術展のグラフィックデザイン：　優秀賞2万円 •  ホタル通信：　　　学会発表で優秀賞 •  Globalホタル通信：エコジャパンカップ準グラ50万 •  torikage：　　　　学生CGコンテスト入賞（プリンタとHDD） •  Kageto：　　　　 まちなかアートギャラリー福岡20万 ---- •  おもいぬま：達成感

ボツになっているものが!多いとも言える…

未来をつくる 昨今のテクノロジーについて

音声認識・ジェスチャー・プロジェクション Openarch!||!FILM!(2011)　Openarch

https://vimeo.com/32439871

市販されているデバイス 昨今のテクノロジーについて２

入力 出力

基本的な（よく使う）入力系

センサ：物理・電磁・熱・音響・化学の変化を 　　　　科学的原理を利用し変化を検出（信号化）するもの

–  加速度センサ –  ジャイロセンサ –  タッチセンサ –  温度センサ –  光センサ（画像・カメラも） –  圧力センサ –  磁気センサ –  距離センサ –  振動センサ（マイクも） –  においセンサ（硫黄など） –  スライダー、つまみ、ジョイスティック（可変抵抗） –  RFIDセンサ（SUICAのような） –  GPS（全地球衛星測位システム）

入力

便利な入力デバイス 入力

スマートフォン・PCなど Kinect http://www.xbox.com/ja@JP/kinect

Webカメラ

生体情報取得デバイス Nike!Smart!Watch! iOS8!HealthBook!

NeuroSky!!Mindwave

Spire!

入力

基本的な（よく使う）出力系

アクチュエータ：エネルギーを物理運動に変換するもの –  LED（単色、フルカラー、アレイ、マトリクス） –  DCモーター –  サーボモーター –  振動モーター –  ACソレノイド –  バイオメタル

出力

VR 出力!

http://hacosco.com/

https://www.oculus.com

ロボット 出力!

入力 出力

コンピュータ ・

マイコン

距離センサ・イヤホン

Universal!Earphones（松村耕平,2012）

マイク・振動

ONTENNA（本多達也,2014）

マイク・振動

ONTENNA（本多達也,2014）

舞台表現・LED

Lighting!Choreographer!（光の振り付け）!

・ウェアラブル（LED、マイコン電飾）!

・ダンス!

m!plus!plus!Co.,Ltd.（藤本実 氏ら）!

ももいろクローバーZ!!!@!!サラバ、愛しき悲しみたちよ（2012） https://www.youtube.com/watch?v=OWSbfCPkTBk

第65回紅白歌合戦　三代目 J!Soul!Brothers!from!EXILE!TRIBE「R.Y.U.S.E.I」（2014）

東京工科大プレスリリース!http://www.teu.ac.jp/press/2012.html?id=128

作るのは簡単じゃないが…

アイデア プロトタイプ

! 知識を蓄える

こんなのがほしいなー!これ売れそうだな!

とにかく!作る

創造力を鍛える

# 創造力を鍛えるコツ

1.  アイデア ⇄ ものづくり をたくさんする （なんでもいい、他人にも見せる）

2.  他人の創作物を見る、模倣する

3.  モノコトを観察、分析する（常識に囚われない）

4.  妄想する

5.  振り返る

頭の中にたくさんの自分を蓄える

これ嫌い

意味!わからない

それビジネス!になるの???

その後!どうするのさ!

将来的に!　受けそう

面白いね！

SF映画ワークショップ

映画を使った問題発見-解決力のトレーニング

創作物Aの世界観（設定）を理解

Aの世界観（設定）のなかで!使われるインタフェースを開発

日常世界（現実）で!実際に使ってみる 40!

・発表会!

・振り返り

プロトタイピング

テーマ

世界観を!妄想

ワークショップ概要 『ICT DESIGN TREK 2014 　～SF映画をみて、映画の世界のインタフェースを作ろう！ 　　 妄想×開発ワークショップ～』

–  2014年11月9、15、16日 3日間 –  2014年11月17～21日 ミュージアム展示

41!41!

!　「ブレードランナー」監督からの指令："　１つシーンを付け足して欲しい。"　実際にシーンを想定して、その場面で使う"　小道具(大道具)のプロトタイプを作れ！! !

–  デモできるモノ・コト（ICT機器を使う）!–  実演プレゼン(アクティングアウト)! Ridley!Scott

成果物

•  Aチーム –  カスタマイズ傘屋

42!商品おすすめレジ

情報提示する傘

しゃべる傘

成果物

43!レイチェル役

•  Bチーム!–  情報提示ロボット"「テレット」!

•  Cチーム!–  レプリカントによる"遠隔教育コンテンツ"（カプセル型）!

iPad!はめ込み映像

頭の中にたくさんの自分を蓄える

Blade!Runner

「振り返る」

知らざるを知らずと為す 是知るなり

『論語』（孔子）

し　　　　　　　　　し　　　　　　　な　　　 これ し

Experience Map サービスデザインで使われる経験の可視化マップ

Starbucks!Coffee’s!User!Experience!Map（2010）

Experience Map サービスデザインで使われる経験の可視化マップ

店内で 来店後 来店前

良い経験

悪い経験

時間軸

Experience Map サービスデザインで使われる経験の可視化マップ

店内で 来店後 来店前

良い経験

悪い経験

時間軸

前後での変化を!比較できる

振り返りExperience Map これまでの大学での経験を振り返ってみよう

振り返りExperience Map これまでの大学での経験を振り返ってみよう（数字の順に）

～～を学んだ!!!～～について知った!!!新しく～～について!興味を持てた!!!～～がうまく!いかなかった

～～～にはじめて!挑戦してみた!!!～～を学んだ!!!～～について知った!!!新しく～～について!興味を持てた

～～は自分には!向いてないかもと!感じた!!～～�����!� �����!分からないところが!あることに気づけた!!!～～について知った!!!新しく～～について!興味を持てた

～～に詳しくなりたい!!!～～に頼りにされる!人物になりたい!!!活躍して憧れの～～!さんと仕事がしたい!!!プライベートも充実!させたい。特に～～!について!

～～について卒業までに挑戦したい!～～について重点的に学びたい!～～を専門にしている人に直接話を!聞く機会を得たい!

～～について学びたい!!!～～をたくさん見たい!!!同じ趣味の友人を!つくりたい!!!～～をつくりたい

～～ついては学べた!!!～～は身についた!!!～～についてまだ!自信がない!!!～～を学ぶ機会が!まだない!

まとめ

入力 出力

コンピュータ ・

マイコン

テクノロジー×表現

Blade!Runner

「振り返る」

ayumikizuka.com

Twitter,!Facebook:!!ayumikizuka