【KDDI Engineer&Designer 2022-2】プライベートで作品展示（Maker Faire への出展）をした際の体験設計などと得られた気づきの話

## はじめに
こちらは、[KDDI Engineer&Designer Advent Calendar 2022](https://qiita.com/advent-calendar/2022/engineer-designer) の 25日目の記事です。
（自分個人としては、今年の 2022年のアドベントカレンダー用に書いて公開した記事の、46記事目！）

Qiita の規約に沿った記事であれば、業務に関係ない話で OK という話で参加している自社のアドベントカレンダー。以下の記事に続いて、このカレンダーでの 2記事目の投稿です。

https://qiita.com/youtoy/items/8eacb1af28ac18301b74

（※ 記事のテーマは自由なので、上記の 1記事目を書いた時は、担当日前日にリリースされたばかりの ChatGPT 扱う話を、当初準備していた内容を捨てて入れ込むなんてこともサクッとできたりしました）

今回の内容はタイトルの通り、プライベートであれこれ技術コミュニティ・モノ作り界隈などで活動している中の、作品出展に関する話です。

## この後の流れ
この後に書いている内容について、以下の構成にしています。

- プライベートの活動で Maker Faire に出展をした時のコミュニティについて・出展の概要
- 自分が 4回の出展で出した各作品の概要
- 自分が出展をするにあたり考えたこと・準備・体験設計など

## プライベートの活動での Maker Faire出展
### 共同主催しているコミュニティで出展した話
まず、この後の記載の前提となるｍプライベートで作品展示の部分についての概要説明です。

2012年くらいから、プライベートで技術コミュニティの活動などをやっていて、技術コミュニティの主催を複数行っています。その中の1つに「[ロボットトイ "toio"](https://toio.io/)」のユーザーコミュニティ「[toio™で作ってみた！友の会（非公式）](https://www.facebook.com/groups/toiotomo/)」があります。

※ [Facebookページ](https://www.facebook.com/groups/1072357599632186) と [connpass のグループ](https://toiotomo.connpass.com/)があります
![Facebookページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f0805b3a-fe30-52e4-a192-8917c0b35bcf.png)
![connpassのページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c4f2107c-68bf-c869-8983-9878cb802353.png)

このコミュニティは、2019年に 3人で立ち上げて、今もそのメンバーで運営を続けています。
コミュニティでのイベントは、コロナ禍前はLT会をやったり、コロナ禍前後でもくもく会も行ったりしました。

そのコミュニティで行っている活動の関連で、2020年に初めて、モノ作り系の展示イベントである「Maker Faire」に出展しました（この時は、主催メンバー 3人とコミュニティメンバー 2人の　5人で現地対応）。
![つくばの出展メンバー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e0b05e7b-0f16-bbda-d28d-b9f2158b8989.png)

#### toio の非公式コミュニティでの Maker Faire 出展について
上記の初出展から現在まで、日本国内で開催される Maker Faire のうち、以下で出展を行ってきました。2020年と2022年で、出展回数の合計 4回という感じです。

- 【つくば開催】 [Tsukuba Mini Maker Faire 2020](https://tmmf.jp/2020/) 
   -　[⇒ 出展者ページ](https://tmmf.jp/2020/?portfolio=toio%e3%81%a7%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%ef%bc%81%e5%8f%8b%e3%81%ae%e4%bc%9a)
- 【東京開催】 [Maker Faire Tokyo 2020](https://makezine.jp/event/makers-mft2020/)
   -　[⇒ 出展者ページ](https://makezine.jp/event/makers-mft2020/m0040/)
- 【仙台開催】 [Sendai Micro Maker Faire 2022](https://makezine.jp/event/makerfaire/smmf2022/)
   -　[⇒ 出展者ページのキャプチャ画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a1ddbd19-033a-6491-b174-1890dd4e2373.png)
- 【大垣開催】 [Ogaki Mini Maker Faire 2022](https://www.iamas.ac.jp/ommf2022/)
   -　[⇒ 出展者ページ](https://www.iamas.ac.jp/ommf2022/maker/robot-gamers-from-toio-tomo-group/)

#### 現地でコミュニティとして展示した内容について
上記の　4回で出展をした作品は、現地対応をしたメンバーが作った作品（現物を持ち込んで展示）に加え、コミュニティメンバーが作った作品の動画も展示していました（※ コミュニティ内で、作品の動画を共有してもらう依頼を出し、集まった動画を 1つにつなげて、現地でタブレットでループ再生した形）。

## 自分が toio のコミュニティで Maker Faire に出した作品
自分は、上記の 4回の出展で毎回現地対応をして、作品出展も行っていました。
今回の記事で準備・体験設計をするのはそれらに関する話になります。

詳細に入る前に、作った作品の概要を掲載します。

### Tsukuba Mini Maker Faire 2020 に出した作品
つくばでの展示では、「特定の音を鳴らすと、鳴らした音・鳴らし方によって、toio が異なる動きで反応する」というものを作りました（[⇒ 試作時の動作の様子の動画はこちら](https://www.youtube.com/watch?v=-qb0G9G9oEk)）。実装は HTML+JavaScript（ブラウザ上で動かしたもの）です。

https://twitter.com/youtoy/status/1232811813529501696

技術としては、音の認識の部分は「Google さんが提供している機械学習の仕組み Teachable Machine」を使い、toio の動きを無線制御する部分には、「Chrome系のブラウザで使える API の Web Bluetooth API」を使いました。
そして、音を鳴らすグッズは、100円ショップのダイソーで買ってきたアイテムを使っています（上記の写真にうつっている、敷物みたいに使っているコルクボードも、同じ店で入手したものです）。

### Maker Faire Tokyo 2020 に出した作品
東京ビッグサイトでの展示では、つくばで展示したものに手を加えたものと、ビジュアルプログラミング環境で作った 2台が連動した動きをする作品の 2つを展示しました。

●音での制御やビジュアルプログラミングでの制御 #toio #toiotomo #MFTokyo2020 - YouTube　https://www.youtube.com/watch?v=Ve6TyzzmXck

<iframe width="560" height="315" src="https://www.youtube.com/embed/Ve6TyzzmXck" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

つくばに出した作品をベースにしたものは、toio の絶対位置座標がとれる仕組みを利用できる、toio用マットを使ってみました。また鳴らす音について、オンラインで購入したハンドベルと、[音素材サイト「効果音ラボ」](https://soundeffect-lab.info/)の素材（※　音を鳴らすのはスマホを利用）を新たに追加して利用しました（利用した技術は、つくばの時と同じです）。

もう 1つの作品では、[toio 用のビジュアルプログラミング環境「toio Do」](https://toio.io/do/)の iPadアプリ版を使いました。

### Sendai Micro Maker Faire 2022 に出した作品
仙台での展示した作品は、「手の認識 ＋ toio のランダムな動き ＋ 万華鏡的な描画 ＋ プロジェクション」を組み合わせたものです。

常時、「toio がランダムに動いて、その軌跡を元にした万華鏡的な描画が生成され、それを toio が動いているマット上にプロジェクションされる」という動作をします。また、手前のセンサー（LeapMotion）に片手か両手を近づけると、toio をランダムに動かすパラメータに影響を及ぼし、toio の動きが変わります（それと、BGM を流す処理も入れているのですが、その BGM の再生されるテンポなども、toio の動きの変化に合わせて変わります）。

https://twitter.com/youtoy/status/1540780857950367744

全体構成や実装に利用したものなどは、以下となります。

![仙台に出展した作品の構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/49978d45-cf1b-817f-4abc-69a43f767a8d.png)

### Ogaki Mini Maker Faire 2022 に出した作品
大垣での出展では、「フットスイッチによる入力 ＋ 100円ショップで買ったアイテムを使って工作したもの ＋ toio の動き」を組み合わせたものです。

以下の、toio公式が出しているレシピの 1つで使われている、「toio を動かして穴の開いた部分にボールを落とす」という仕組みを使いつつ、工作・toio のプログラム制御などを足したものです。
　●toio LAB | あそびレシピ |014知恵の穴 - YouTube
　　https://www.youtube.com/watch?v=lsZUigV1dD4
![toio LAB | あそびレシピ |014知恵の穴](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9bc9d88a-ecc2-8e72-f0ab-e66b49b82f2a.png)

それと、大垣での展示を行いながら、工作の部分をアップデートしていったりということもやりました。

https://twitter.com/youtoy/status/1599009177245863936

構成としては、以下のとおりです。

![大垣に出展した作品の構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/42c4657d-97e8-225b-7dd6-9684f3250525.png)

## 自分が出展した作品の準備や体験設計についてなど
ここから、自分が出展用に作品を作るにあたり考えたことや、準備をした過程、展示に関する体験設計などを書いていこうと思います。

4回の出展全てについてもれなく書いていくと、内容が長くなりすぎるため、一部ピックアップなどしつつ書いていきます。

### 出展作品を考えた過程
4回の出展で出した各作品を、どのような方向で考えて作ったのかを、まずはざっくり書いてみます。

- つくばに出したもの
   - 普段の情報収集で見かけて長らく気になっていた「Teachable Machine」を、toio の物理的な動きと連動させると面白そう、という思いつきから
- 東京で出したもの
   - 同年の春頃に行われていた toio のオンラインコンテスト向けに、toio の専用マットを使った仕組みを考えるということをやって、そこでつくばでの出展作品をベースにしたものを考えた
   - 上記のコンテスト用の作品作りの流れで、ビジュアルプログラミング環境を使い、「作るのは簡単だけど、見た目が良い感じになりそうなもの」をあれこれ考えようとした
- 仙台で出したもの
   - 出展前の何ヶ月かで、描画ライブラリの p5.js を使ったアート系の描画にハマっていて、それを toio と組み合わせて使う方向を考えた
- 大垣
   - 最新のガジェットを何か組み合わせる方向と、toio 公式で提供されている toio　を使った遊び方の情報を拡張する仕組みという方向で考えて、後者をメインにさらに考えていった

### 作品を完成させていく上での共通事項
4回の出展全てで、この後に書く体験設計にも関わる、自分が決めた共通の前提条件があります。
それは、「未就学児童から大人まで、幅広い年齢の来場者が分かる・楽しめる」というものです。

↓未就学児童からという部分について、例えばつくばの事例で、これくらいの年齢層の子にも楽しんでもらえたという結果が得られました。

https://twitter.com/youtoy/status/1228822898124582912

この条件に従って、どのような対応をしたのかという話を、ピックアップしつつ書いていきます。

### つくばに展示した作品での対応
つくばに展示した作品で、音を鳴らすグッズはダイソーで買ったのですが、その選定で考えたことは、以下でした。

- 小さい子でもすぐに使い方が分かる
- 小さい子にも大人にも扱いやすいもの（※ 小さすぎず大きすぎずで、持ち上げるものは重たすぎずというもの）
- Teachable Machine による音の機械学習で、音の区別ができる

3つ目については、店頭では耳で聞き分けるしかないですが、それだと大まかな音の違いしか分からなかったため、区別がつけられるか分からないものはとりあえず買ってみました。以下の写真の白と青の卓上ベルは、ちょっとした音の違いがありそうに店頭では思えたのですが、機械学習でそれなりの精度で区別できるほどの差はなかったようでした。
（それと当時、音でなく画像を対象とした機械学習を使うパターンも検討していて、それに関するものも以下には混じっています）

https://twitter.com/youtoy/status/1227720148255068161

それと、音の鳴らし方について、卓上ベルでは「普通に叩く」・「連打する」という 2種類を用意して、それに連動する動作は、連打すると（早く叩くと） toio が早く動く、という分かりやすい対応をさせました。
その他、鳴らす音によって異なる toio の動きは、「展示用の机の上から落ちなそうな程度のもの」にしつつ、「ぱっと見で明らかに別の動きだと分かるもの」にしました。

#### 意図せず得られていた効果1
音を鳴らすものに卓上ベルやハンドベルを選んだのは、ダイソーで音が鳴らせるもので、上で書いていた条件を満たすものがこれらだった、という理由でした。

それが来場者の方、特に子どもにとって「非日常の体験」という要素になり、体験を楽しんでもらえることにつながったというのがあったようでした（※ 実際に、そういう内容のコメントを複数の方からいただきました）。
少し補足すると、日常生活であまり見ないもの、また卓上ベルはレストランなどに出かけた時に見かけたとしても、自分で何度も自由に鳴らすことはしないもの、という点で、それを好きなように鳴らして体験するというのがポジティブな要因として働いていたようでした。
（卓上ベルの連打についても、普段やると怒れるような、なかなかできない非日常に該当するアクションですが、これは準備の過程で意図的に入れていた要素でした）

#### 意図せず得られていた効果2
この時の展示作品は、体験としては短い時間でもできる、とてもシンプルな内容でした。

実は、当初はゲームのような要素を入れるとか、いろいろ膨らませる要素を考えていたのがあったのですが、実装のトラブルがいろいろ出てしまい、それらを実装する時間がなかったためそうなった、という要因がありました。
それが結果的には、以下のような良い方向になったというのが意図せず得られた要素でした。

- 他のたくさんの展示も見たい方・もうすぐ会場をでないといけない方が、少しでも時間があれば短時間で体験できる
- 混雑して順番待ちができても、混雑具合に合わせて体験時間を短く調整する運用が柔軟に行える
- 「試しにこのベルなどを鳴らしてみてください、そしてこの toio を見てみてください」とだけ説明すれば、あれこれ説明することなく体験してもらえて、現象も見てもらえば内容が伝わる

1つのブースに複数メンバーの作品をそれぞれ出していた状況でもあり、上記の「短い時間でも十分体験ができ内容が分かる」とできたのは、そういう点でも結果的に良かった部分です。

このつくばでの展示体験は、自分がその後の展示作品を考える際に役立つ知見が得られたものでした。

### その後の展示での対応（抜粋）
長くなってきたので、その後の展示で上記の方針に沿って対応したことについて、ざっくりと書きます。

- 仙台での展示
   - 手のセンシングについて、LeapMotion は手や指の向きなど細かな情報もとれるが、来場者が対応する操作がシンプルになるよう「手を近づけない、手を近づけるパターン 3種（右手のみ／左手のみ／両手）」というパターンに絞った
   - LeapMotion を使った仕組みの部分が toio の動き（＝描画内容）に影響を及ぼした際、鳴らしている音の大きさ・再生のテンポも変化させ、来場者が起こしたアクションで何らかの変化が起こったことを分かりやすくなるようにした
- 大垣での展示
   - 入力をシンプルにするため、フットスイッチ上のボタン最大 3つのみで足りる構成をとった（実際には、2つのボタンのみ利用する形にした）
   - 上記により、3種類の入力しか利用できないという制約ができるため、toio をいろいろ操作して穴にボールを落とす仕様は、大きく変更しつつ、ボールが落ちたり落ちなかったりという現象は引き起こせるようにした
      - 展示開始時は、toio の動きのパターンを工夫した状態のみだったが、展示を行う中で、物理的な工作の部分でも凹凸をつけたり、ボールが転がるのに影響する要因を増やした（※ 念のため、物理工作部分を後付けで変えられるよう、あらかじめ材料は用意していた）

↓最後の項目について、念のためいろいろ準備していた物品類を、キャリーケースで持ち込んでいた様子
![大垣に持ち込んでいたもの](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8164675f-9723-d581-b2e9-0ed6348a0755.png)

### 思ったとおり進まなかったこと
#### 十分な時間を確保して余裕をもって進める
上では、うまくいった話ばかり書いていましたが、思うようにいかなかった話も書いてみます。

全ての展示で共通した事項は、完成がいつもギリギリになるという点です。
4回とも、「前日に、会場最寄りのホテルなどに移動する」ということをやっていたのですが、いつも、ホテルに着いてから夜中の3時までなど、夜遅くまで作品の実装の仕上げをする、という状況はずっと改善されずでした。

進めていて想定外のトラブルが発生したり、実装が思うように進まなかったり、というのが出るであろうことは予期できるのですが、それに十分な時間を割り当てずに進めてしまうパターンで、上記のような状況を作ることが多い気がしています。

### 会場で気づいた要改善事項
あと、会場で気づいた改善事項も少し書いてみます。

#### 展示本番の音の環境の変化
これは、つくば・東京で使った音の機会学習の話で、その　2回の展示のうち東京のほうの話です。

内容は、事前に音色などを学習させていた機械学習モデルでの環境音の特性と、会場の入場開始後の環境音の特性が大きく異なったことで、認識精度が大きく変わったという話です。会場に入場者が入り始めてから、突如、機械学習の精度が悪くなってしまったというものでした。
これについて、つくばでも、来場者が多く入ることで環境音の特性が大きく変わって影響が出てそうなものですが、そちらでは問題は出ておらずでした。

これについては、用いていた技術が「Teachable Machine」で、幸いブラウザ上で簡単な手順で機械学習モデルを作成できるというものだったため、会場の本番中にその環境音の中での音の機械学習モデルを作り直す、という対応をすることで事なきを得ました。

https://twitter.com/youtoy/status/1312576667391459328

#### 会場の明るさについて
仙台での展示は、プロジェクターでプロジェクションをする仕組みを入れていました。

その機材には、かなり前に買っていたわりと安価なプロジェクターを用いていました。
輝度はそこまで明るくはない機器だったものの、自宅で昼間に明かりもつけた部屋で試して、問題ない映像の見栄えだったため、それを単純に用いる形で進めました。

しかし、展示会場で設置してみると、肉眼で見て問題ないギリギリくらいの明るさになってしまいました。
どうやら、自宅の部屋に比べて、照明などがかなり強めである環境のようでした。

本番で展示してみて、「光を遮るような囲いなどがあったら...」という状況になりましたが、こちらはさすがに展示本番中に調達するのは厳しくて、現地での対策はできずとなりました。

## おわりに
過去に toio のユーザコミュニティを立ち上げてから、そのコミュニティで出展した作品展示の話を書いてみました。

そこで使った技術の話は、既に　Qiita の記事に書いているものもあるため、この記事では、展示を考える過程・準備や体験設計に関する話を書いてみました。