チームラボハンガー開発経緯

チームラボ株式会社

カタリスト Div.安達 隆

企画からプロダクト化まで

teamLab Inc.2

• 安達隆• 2009 年に新卒入社• カタリスト（＝ディレクター）

自己紹介

teamLab Inc.3

• チームラボについて• チームラボハンガーとは• チームラボハンガー開発経緯　企画• チームラボハンガー開発経緯　プロトタイピング• チームラボハンガー開発経緯　プロダクト化• その他の事例

目次

teamLab Inc.4

チームラボについて

teamLab Inc.5

チームラボ株式会社

Web 制作・システム開発をコアに、映像、空間、プロダクトなどあらゆる分野でテクノロジーとクリエイティブを提供。

従業員数：約 300 名

エンジニア（ 70 ％）

プログラマUI エンジニアDB エンジニアUI アー キテクトネットワークエンジニアロボットエンジニア画像処理エンジニア

など

デザイナー（ 10％）

Web デザイナーグラフィックデザイナーCG アニメーター絵師

など

カタリスト（ 15 ％）

※プランニング、ディレクション、プロジェクト管理などを行うチーム

その他（ 5 ％）

ブランディングチームバックオフィスなど

teamLab Inc.6

Works

EC サイト（ VillageVanguard ） デジタル壁画（東京スカイツリー）

プロジェクションマッピングを使ったテレビ CM （三浦工業）

メイドカフェのインタラクティブな内装（めいどりーみん）

デジタルアート・インスタレーション

※基本的には Web を中心とした SI 業務がメインの会社です。

teamLab Inc.7

チームラボハンガーとは

teamLab Inc.8

チームラボハンガーとは

ハンガーにかかった服を手に取ると…

コーディネート写真がディスプレイに表示

teamLab Inc.9

仕組み

ディスプレイ・プロジェクタなど

受信機 PC

Hanger 01

Hanger 02

Hnager 03

1 ．ハンガーが手に取られると、無線で信号を送信2 ．手に取られたハンガーの ID を識別して、紐付けられたコンテンツを表示

表示コンテンツ

teamLab Inc.10

商品をより魅力的に

コーディネイト、デザインコンセプト、機能説明、素材ウンチクなど、商品の魅力を効果的に訴求。

teamLab Inc.11

空間の有効活用

モニタやプロジェクタなどを使うことで、小さな空間でもたくさんの商品を紹介可能。

teamLab Inc.12

マーケティングデータの収集

「いつ、どのアイテムが、何回手に取られたか」これまで人手でしか収集できなかったデータを自動的に蓄積。

teamLab Inc.13

新しい体験の提供

より楽しい店舗体験を提供。画像や映像だけでなく、音や光を使った演出も可能。

teamLab Inc.14

導入実績

■ メンズアパレルブランド『 VANQUISH 』（渋谷、池袋、静岡、名古屋栄、大阪心斎橋）

■ レディースアパレルブランド『 earth music&ecology 』（新宿、北千住、東京ソラマチ、大阪梅田）『 3rd by VANQUISH 』（渋谷）

■ ランジェリーブランド『 Ravijour 』（新宿）『トリンプ　 AMO‘S STYLE 』（大阪梅田）

店舗（常設）

イベント・展示会• ZOZOCOLLE 『 VANQUISH 』• VOGUE FASHION’S NIGHT OUT 2012 TAIWAN• SHANGHAI RUNWAY 2012 SPRING / SUMMER 『 earth music&ecology 』• ANAYI 展示会• クロスカンパニー展示会• TOKYO DESIGNERS WEEK 2010• 文化庁メディア芸術祭 2010• Reebok Café• FRAPBOIS’s Exhibition

その他多数

teamLab Inc.15

『 3rd by VANQUISH 』（渋谷）

teamLab Inc.16

『 Ravijour 』（新宿）

teamLab Inc.17

『 earth music&ecology 』（新宿、北千住、東京ソラマチ、大阪梅田）

teamLab Inc.18

チームラボハンガー開発経緯

- 企画 -

teamLab Inc.19

きっかけ

クライアントからの相談：

店舗で何かおもしろいことができないか？

• ざっくりしたお題• チームラボではよくあること

teamLab Inc.20

EC サイトの運用経験から得ていた知見

「コーディネートされた写真」があるほうが、圧倒的に売れる！

1st

teamLab Inc.21

デジタルの価値をリアル店舗に

• 限られたコーディネート• マネキンか、店員さんか、試着

• 大量のコーディネート• プロのモデル

リアル店舗 Web

teamLab Inc.22

デジタルの価値をリアル店舗に

「来店者の関心に応じてコーディネートを提示する仕組み」を作ろう！

• Web では当たり前のことを、リアル店舗でも提供したい• 物理的制約を、テクノロジーで解決

teamLab Inc.23

なぜハンガーか？

新しい動作やリテラシーを要求しない 誰でも使える・説明不要

• タッチパネルを操作して• この台に服を置いて

新しい動作やリテラシーを要求する例

「気になった服を手に取る」という自然な動作を検知するのに最適だったから

• スマホでバーコードを読み取って• モニタの前でポーズを取って

teamLab Inc.24

New Value in Behavior

•チームラボのデザインコンセプトのひとつ•既存の行為そのものに新しい価値や意味をあたえる

本来の行為そのものがインターフェース

イギリスや中国のお茶：日本の茶道：

日本には、行為がその本来の目的から独立し、行為そのものの精神性を求めたり、行為そのものを遊び楽しむ文化がある。

おいしいお茶を淹れる方法お茶を淹れる行為そのもの

teamLab Inc.25

「ハンガーを使って面白いことをしよう」が出発点ではない

1 ．まず提供したい体験があり2 ．そのインターフェースとしてハンガーが選ばれた

•ハンガーは単なるスイッチ•商材が変われば、ハンガーである必要はない

リアル店舗でもっとコーディネート

を見せたい

自然な行為をインターフェース

にしたいインタラクティブ

なハンガー× ＝

teamLab Inc.26

プロジェクトのお蔵入りと再始動

•初期に提案したクライアント：諸事情により実現せず

• 「 PUBLIC/IMAGE.3D 」で何か展示をしてみないかという話をいただく

•構想していた「インタラクティブなハンガー」を作って展示することに

クリエイティブスタジオ「 ANSWR 」のオフィスに併設するオルタナティブスペース。（池尻大橋）

teamLab Inc.27

チームラボハンガー開発経緯

- プロトタイピング -

teamLab Inc.28

最初の展示

2010 年 7月　 PUBLIC/IMAGE.3D にて『 COODINATION 』展を開催

制作期間：　 3週間弱

• 電子工作の経験：　ほぼなし• 製品化を前提とした電子機器の制作経験：　なし

当時のチームラボの状況

teamLab Inc.29

開発手法

• まず全体をいくつかのモジュールに分解• モジュール間のインターフェース（つなぎかた）を先に決める•責任範囲を明確にした上で、各モジュールを平行で開発

ソフトウェアハードウェア

センサー

通信モジュール

ハンガー本体

通信アプリ

表示制御アプリ

Interface

Interface

インターフェース定義がカギ

• エンジニア 3 名 ＋ ディレクター 1 名少人数チームでの分業

teamLab Inc.30

センシング方法の検討

「ハンガーが手に取られた」をどのように検知するか？最大の課題：

•アイディアを具体的な機構に落としこむ

teamLab Inc.31

センシング方法の検討

■検討されたセンシング機構の例

感圧センサ

• ポールにかかるフック部分の圧力をセンシング• センサからマイコンへの配線が露出してしまう

静電容量センサ

• 人が触れた際の静電容量の変化をセンシング• ハンガー全体にセンサを配置する必要がある

いずれもハンガーのデザイン性を損なうため却下

■他にも様々なセンシング方法を検討するが…

デザイン性、コスト、開発期間などの問題で採用に至らず

teamLab Inc.32

センシング方法の検討

最終的なセンシング方法： ハンガーのフック部分をスイッチにしてしまう

シンプルな仕組み：　高いセンシング精度と堅牢性 シンプルな見た目：　センサ部分をケースで隠せる

バーにかかった状態 手にとった状態

ハンガー自体の重みにより、フックが上に引き出されている。

バネの力でフックが押し下げられ、スイッチが作動する。

スイッチOFF

スイッチON

teamLab Inc.33

その他、様々な試行錯誤

最初の試作品

完成したプロトタイプ

•通信方式の検討•電池の選定• 基板の実装•ケース材質の選定• ハンガー工場めぐり• インターフェース設計•通信アプリの開発• 表示制御アプリの開発•各種チューニング

などなど…

teamLab Inc.34

プロトタイピングのポイント

チーム全員が最終アウトプットに関心をもつ

• 作業は分業でも、議論には全員が参加• 例えばソフトウェアのエンジニアが、ハンガーのデザインについても考える

スピードとクオリティの両立

teamLab Inc.35

参考書籍

フィジカルコンピューティングを「仕事」にする

小林茂著　ワークスコーポレーション発行

• 36ページ分、チームラボハンガー！•今回ご紹介しきれなかった様々な開発経緯•技術面での詳しい解説も

teamLab Inc.36

無事 3週間で展示が完成

•予想を超える反響• 3週間にわたり展示（ 1週間の延長含む） プロダクト化へ

teamLab Inc.37

チームラボハンガー開発経緯

- プロダクト化 -

teamLab Inc.38

プロトタイピングの次に来るもの

仕様面での制約の低減 より自由な表現の担保

汎用化 効率化

ニーズへの柔軟な対応 コストの削減

導入・保守体制の整備 生産・在庫管理フロー整備

「試作品」から「製品」へ

teamLab Inc.39

チームラボハンガーのプロダクト化

• 2010 年 7 月　最初の展示『 COODINATION 』展• 2011 年 3 月 『 earth music&ecology 』新宿ルミネエスト店導入• 2012 年 10 月時点で 12 店舗導入

• 基板製造と組立を外部に委託•故障時の交換オペレーションの簡易化•バッテリ寿命の改善• ハンガーのデザイン・耐久性見直し•表示制御アプリの改善• セットアップの簡易化• コンテンツを遠隔更新可能に

などなど…

実店舗導入の流れ

改善ポイント

新型チームラボハンガー耐久性やバッテリ寿命を改善

teamLab Inc.40

プロダクト化＝スケールさせること

プロダクト化のゴール

初期投資の回収

新しいビジネスの確立

収益性の確保

teamLab Inc.41

その他の事例

teamLab Inc.42

D ラボフック

• チームラボハンガーのフック版• 大広（企画）、ユカイ工学（ハードウェア製作）との共同開発•ソフトウェアはチームラボハンガーと共通

導入場所：　ソックスショップ『 tutuanna 』渋谷スペイン坂店（ 2012 ）

teamLab Inc.43

Media Block Chair

• イス／照明／什器•近接センサーにより、組み合わせると光の色が変化する•導入場所の『ぴゃるこ』は、平日はセレクトショップ、休日はワークショップ会場• 「ショップの什器を片付けてイスを並べる」行為により、空間の色が変化する• 空間の機能を変える行為そのものを楽しむためのデバイス

導入場所：　セレクトショップ『ぴゃるこ』渋谷パルコ（ 2012 ） 　ほかイベントなど

teamLab Inc.44

チームラボボール

•浮遊する光のバルーン•加速度センサーにより、オーディエンスがボールをトスすると光の色が変化する• 無線通信により、複数のボールが連動して一斉に色を変えることも可能• 会場の照明との連動も可能• オーディエンスが空間演出に参加することができる

導入場所：　 COUNTDOWN JAPAN 、六本木アートナイト　ほかアート展示やイベント多数

teamLab Inc.45

team-lab.net

その他の事例はこちら

teamLab Inc.46

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

チームラボ株式会社安達 隆

adachi@team-lab.com