情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1P-83
2024/2/28

プレイマットのパターン生成支援ツール
山本 さりい1,a)Wang Jiajun2,b)Chan Liwei2,c)

杉浦 裕太1,d)

概要：クッション性の高い素材でできたプレイマットは乳幼児の転倒による怪我を防止するため, 家庭内やプレイルームなどの幅広い環境で使用されている．また，周辺がパズルのような形状となっているため，マットを配置したいスペースに合わせて自由にサイズや形状を変えることができる．本研究は多様な色のプレイマットを用いてパターンを描くためのアプリケーションを提案する．これにより子どもたちが楽しみながら絵を描くことが可能になり，プレイマットに乳幼児の安全の確保だけではなく，床にデザインを表示するツールとしての用途を与える．さらに，マットを配置したいスペースに必要なマット数を直感的に把握することでき，育児の負担軽減が期待できる．

1. はじめにプレイマットとはクッション性の高い素材で作られ，各辺の凹凸部分を組み合わせてサイズや形を調整することができるマットのことである．本研究ではプレイマットのパターン生成支援ツールを作成する．プレイマットは衝撃や音を吸収するため，乳幼児やペットのいる家庭では転倒による怪我を防いだり，騒音を防止するために用いられる．
特に乳幼児の外傷性脳損傷の多くは転倒によるものであり，走る，跳ぶなどの幼児自身の行動が最大の要因となっている [1]．また，転倒の多くは家庭内で起こるものであり，リビングルームや子ども部屋では，転倒時の衝撃を抑えるためにプレイマットが広く使用されている．一方で市販のプレイマットの多くは 2 色構成または 3 色構成で販売されるが，デザインの幅が狭く，シンプルなデザインになりやすいという現状がある．そこで本研究では子どもやその保護

図 1

システム概要：（左上）シミュレーション；（右下）実環境への配置

Fig. 1 System Overview：（Upper Left）Simulation；（LowerRight）Placement in a Real Environment

者が簡単に楽しみながらプレイマットのパターンをシミュレーションできるアプリケーションを開発する（図 1）．これにより，従来乳幼児の安全のために使用されていたプレイマットを床に自由にデザインするツールとしての用途を

2. 関連研究2.1 デザイン生成支援ツール

与え，子どもの感性を育むためのエンターテインメント性

コンピュータを用いたデザイン生成支援ツールは近年多を持たせることが期待できるとともに部屋のサイズに対しく開発されている．ぬいぐるみやビーズワークなどの手芸て必要なマットの数を直感的に理解することができ，マッ作品において，手書きでの設計図の作成や制作過程での構トを敷く際の作業の軽減が可能になる．

造の検討が必要とされてきた．しかし，こうした作業は子どもや初学者には難しく，また，手間がかかるため，経験者にとっても負担になりやすい．そこでコンピュータを通12a)b)c)d)

慶應義塾大学
国立陽明交通大学
sarii429@keio.jp
shigurewg.cs10@nycu.edu.tw
liweichan@cs.nycu.edu.tw
sugiura@keio.jp© 2024 Information Processing Society of Japan

して設計のシミュレーションを行うことで，作業の効率化や初学者の学習支援といったメリットが期待される．2D
スケッチからオリジナルのぬいぐるみをデザインでき，布を裁断するための 2D パターンを出力する “Plushie”[2] や，

562

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1P-83
2024/2/28

予め定義されたプリミティブを組み合わせて大まかなデザインを決定し，さらに簡単な操作でビーズワークの設計図を作成することができる “Beady”[3] などが例として挙げられる．“Podiy”[4] はポーチを作成するために製図を作成するツールだが，ユーザが入力した寸法をもとに長方形の組み合わせによる設計図を出力することで布の裁断や裁縫を直線的にし，製図だけでなく，制作自体もサポートしている．また，編み物や織物はデザインをピクセルアートと図 2システムの流れ：（1）3D モデルの生成；（2）描画；（3）配置

Fig. 2 System Flow：（1）3D Model Generation；（2）Drawing；

して表示することが多く，制作中にピクセルのスキップや（3）Placement重複などのミスが生じることが多い．Igarashi らは手作業によるミスが発生した際に設計図を更新し，制作物を変更せずにもとの設計図との歪みが最小になる新たな設計図を2). 描画：事前処理としてアプリケーション画面上で，モデルの回転やマットの配置範囲，マットサイズの設定作成するアルゴリズムを開発した [5]．本研究ではプレイを行う．ユーザは画面上のカラーピッカーで色を選択，マットによるパターン生成を支援するツールを作成する．

保存し，描画を行う．本システムの用途として，既にこれにより，マットの配置前にデザインをシミュレーショ

プレイマットを使用しているユーザが手持ちのマットンすることで，誰でも容易に床をデザインできるようにすを用いて模様替えのためにパターンをシミュレーショることと，スペースに必要なマット数の計算を不要にし，ンする場合と，プレイマットをリビングスペースや子育児の負担を軽減することを目指す．

ども部屋などに導入することを検討しているユーザが，必要なマットの数や色をシミュレーションする場

2.2 Edutainmetn に関する研究

合の 2 種類が想定される．

Edutainment とは Education（教育）と Entertainment( a ) 既存のマットを使用する場合：描画を始める前に（娯楽）からなる合成語で主に幼児が楽しみながら文字や手持ちのマットに近い色を画面右上のカラーピッ

数字を学習する機会となるエンターテインメント形式を指カーで作成し，Save ボタンにより保存を行う．保す． Edutainment を目的とした研究として，Li らによる存した色は右下のプレビューで表示され，さらに“AnimalDraw” がある [6]．“AnimalDraw” は子どもの芸

その下の矢印ボタンによって切り替えが可能であ術教育とエンターテインメントのため，段ボールを用いたる．それぞれのマットの所有数をもとにパターン動物玩具を作成するインタフェースを実現している．異なを描く．

る平面に自由にスケッチすることで段ボールに 3D モデル( b ) 購入を検討している場合：新たにマットの購入をを印刷するものだが，子どもでも簡単な操作方法が実装さ検討する場合は，描画中にマットの色を調整し，れており，子どもたちはシステムを通してビューの切り替

描いたパターンに必要なマットの数を購入する．

え，保存などのショートカットキー操作を習得できるため，描画はユーザ自身が自由に行うか，DOTOWN*1 など教育支援としても役割も期待される．また，床面を用いたのサイトを参考に，部屋のサイズに合わせた画素数でEdutainment の例として Mahmoud らによる PI Floor が季節に合った柄や文字，数字など幼児の教育を支援すある [7]．これは床の上に複数のタイルを置き，児童が質問るパターンを描く（図 6）．従来プレイマットはテーの回答だと思うタイル上に移動し，スマートフォンを使用ブルやソファといった家具を除いたスペースに配置すして児童の位置と回答の正誤を判定するというものである．

ることが多いが，本システムでは自動で家具や壁など

これにより児童はゲームを楽しみながら学習を行い，かつの物体を検出するためユーザはインテリアを変えるこ

同時にタイル上を移動することで身体活動の促進を目的ととなく本来のスペースに合わせたマット数でデザインしている．本研究では子どもたちがタブレット端末やコンピュータを用いて絵を描き，実環境にマットを配置することで幼児のクリエイティブ支援やタブレット，コンピューを作成することができる．

3). 実環境への配置：描画終了後はスクリーンショットなどで作成したパターンを記録し，写真に基づいて実環タの基本的な操作を習得することを目的とする．

3. 本システムのシナリオ

境へマットを配置する．

4. システム構築

本システムのシナリオを以下に示す．

1). 3D モデルの作成：ユーザは iPhone や iPad など自身のタブレット端末を用いてマットを配置したい環境の3D モデルを生成する．

© 2024 Information Processing Society of Japan

本研究ではプレイマットの配置をシミュレーションするために Unity を用いてアプリケーションを作成する（図 3）．
*1https://dotown.maeda-design-room.net/

563

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1P-83
2024/2/28

4.1 3D モデルの生成
事前にプレイマットを配置したい環境の 3D モデルを作成し，アプリケーションにインポートする．本システムでは iPhone 内蔵の LiDAR センサ [8] を用いて実環境をキャプチャし，天井や周辺の不要部分を削除するため Meshlabを用いて処理を行う．アプリケーション上で 3D モデルは画面中央に表示され，家具や壁を除く部分にマットが配置される．ユーザはパターンの描画前に画面右下のスライダーでモデルの回転とマットサイズの調整を行い，任意の角度に調整する．また，3D モデル内の右上と左下の球を移動してマットを配置したい範囲を設定する．

4.2 インタフェースの機能説明
本システムのインタフェースの機能を示す（図 3）．

図 3

実行画面

Fig. 3 Execution Screen( 1 ) 配置範囲の設定：モデルの右上と左下の球を動かすことでマットの配置範囲を調整する．

( 2 ) カラーピッカー：カラーピッカーからマットの色を選択する．RGBA，HSB，HEX カラーコードから色を指定し，Save ボタンを押して色を保存する．

( 3 ) ローテーションスライダー：3D モデルの角度を回転する．

( 4 ) マットサイズの調整スライダー：0.1 から 1 のスケー
ルでマットサイズを調整する．

( 5 ) プレビュー：選択している色を確認する( 6 ) 切り替えボタン：保存している色との切り替えを行う．
プレビューに反映される．

( 7 ) アングル変更ボタン：カメラ位置を変更する．初期状態ではモデルを真上から投影しているが，ChangeAngle ボタンを押すことでカメラの位置を斜め 45 度

図 4

アングル変更Fig. 4 Camera Angle Changeに変更し，さらに WASD キーでモデルに対して前後検出のために用いる．3D モデルのスケールを 1 として 0.6

左右，矢印キーで上下にカメラ位置を変更し，実環境の高さでクリップし，床からクリップした高さまでに点群における人間の視界を再現してマットの配置を確認すが存在するとき，点群の真下の点群検出レイヤーのマットることが可能である（図 4）．

が有効となる．１枚のプレイマットの面積に含まれる有効( 8 ) マットのシミュレーション：色を選択してマット部分

な点群検出マットが 60%以上のとき，プレイマットが配置をクリックすることで色が反映され，文字や数字などされている部分には家具または壁などの物体があるとしてのパターンを描くことができる．

グレーアウトされる．初期状態では点群検出マットの大きさがマットの 5 分の 1 のため，マット 1 枚に対して点群検4.3 システムの構成
本システムは 3D モデルとプレイマット，点群検出レイヤーからなる（図 5）．3D モデルはユーザが自身で撮影し，Unity にインポートしたものである．3D モデルの位置を原点とし，スケールを 1 としたときに高さ 0.1 の場所で切り出マットが 5 × 5 = 25 枚含まれ，そのうちの 60%，つまり15 枚以上の点群検出マットが有効の時，そのマットが配置されている部分には家具があると認識する．

5. パターン例

取ることで床を非表示にする．プレイマットは 3D モデル

以下に今回使用したスペースに配置できるパターン例をの床部分に表示され，ユーザがマットのサイズを調整する示す（図 6）．使用した部屋では一辺が 30cm のプレイマッことが可能である．クリックすることでその場所のマットトを最大で 172 枚配置することができる． 部屋の形状がの色を変更し，パターンを描く．また，点群検出レイヤー

台形のため，部屋の下部は実際に敷くことができるマット

はプレイマットの 5 分の 1 サイズのマット（点群検出マッ数と誤差が生じているが，必要枚数の目安を確認することト）の集合からなり，3D モデル内の家具や壁などの物体ができる．パターンの可能性として（b）のように季節を© 2024 Information Processing Society of Japan564

情報処理学会 インタラクション 2024
IPSJ Interaction 2024

1P-83
2024/2/28

かることから 3D モデルの作成が本アプリケーションを使用する上での障害となることが懸念される．また，アプリ
ケーションのインタフェースに関しても児童が使用することを考慮して，より簡便に機能をまとめる必要がある．今後はユーザスタディを行い，提案手法を用いた場合と用いない場合で作成したパターンにどのような変化が生じるかや，提案手法のユーザビリティの評価を行う予定である．
また，日常的にプレイマットを使用しているユーザに対してインタビューを実施し，提案手法の有用性に関する調査を行う．さらに，現状では作成したパターンをスクリーンショットで保存するか，ディスプレイを直接見ながらマットを配置しているが，AR 上で実環境に置くべき色のマッ
図 5

物体検出

Fig. 5 Object Detection

トを投影するなど，マットの配置時のサポートも検討する．

7. おわりに本研究では乳幼児の転倒時の怪我を防止するために使用されるクッション性の高いプレイマットを用いたパターン生成支援ツールを作成した．安全対策だけではなく，児童のクリエイティブ支援やマット配置時に必要な枚数や色を直感的に計算できるようにすることによる育児の負担軽減を目指す．今後はユーザスタディによりシステムの有用性や本研究によりプレイマットのパターンにバリエーションが生じるかの評価，子どもでも操作しやすいインタフェー
スの検討を行う予定である．
謝辞

本 研 究 の 一 部 は ，JSPS 科 研 費（ 課 題 番 号：

JP23H01046）の支援を受けたものである．
参考文献
[1]
図 6

パターン例：（a）ハート；（b）クリスマスツリー；（c）数字；（d）花（家具有り）Fig. 6 Pattern Exapmles：（a）Heart；（b）Christmas Tree；（c）
Numbers；（d）Flowers（with Furniture）

モチーフにした絵を描くことでプレイマットを部屋の飾り[2][3]つけの一環とすることや，（c）のように数字を表示し，幼児の学習に役立てることが期待できる．また，（d）は中央にテーブルを配置しており，スペースが限られるため，一[4]つの絵を描くことが難しいが，小さな柄をいくつか表示することが可能である．
[5]

6. 制約と今後の課題
本アプリケーションの制約としてユーザが iPhone やiPad を用いて 3D モデルを作成したのち，アプリケーションにインポートするためにファイルの変換や余分な部分の削除といった処理が必要であることが挙げられる．さらに精度の高い 3D モデルを生成する技術の習得に時間がか© 2024 Information Processing Society of Japan[6]

Juliet Haarbauer-Krupa, Tadesse Haileyesus, JulieGilchrist, Karin A. Mack, Caitlin S. Law, and Andrew
Joseph. 2019. Fall-related traumatic brain injury in children ages 0-4 years. J Safety Res. (September 2019), 70,127-133. doi: 10.1016/j.jsr.2019.06.003.
Yuki Igarashi and Takeo Igarashi. 2009. Designing plush
toys with a computer. Commun. ACM 52, 12 (December2009), 81–88. https://doi.org/10.1145/1610252.1610275.
Yuki Igarashi, Takeo Igarashi, and Jun Mitani. 2012.
Beady: interactive beadwork design and construction.
ACM Trans. Graph. 31, 4, Article 49 (July 2012), 9pages. https://doi.org/10.1145/2185520.2185545.
Yuki Ikeda and Yuki Igarashi. 2022. Podiy: A Systemfor Design and Production of Pouches by Novices. IEEE
Computer Graphics and Applications, 42, 2 (April 2022),
81-88, doi: 10.1109/MCG.2022.3145129.
Yuki Igarashi and Takeo Igarashi. 2022. Pixel
Art Adaptation for Handicraft Fabrication. Computer Graphics Forum, 41 (October 2022), 489-494.
https://doi.org/10.1111/cgf.14694
Wanwan Li. 2022. AnimalDraw: Drawing Animal Cardboard Toys Design for Children s Art Education andEntertainment. In Proceedings of the 4th World Symposium on Software Engineering (WSSE ’22). Associationfor Computing Machinery, New York, NY, USA, 15–19.

565情報処理学会 インタラクション 2024
IPSJ Interaction 2024

[7]

[8]

1P-83
2024/2/28

https://doi.org/10.1145/3568364.3568367.
Ahmed Hamdy Mahmoud, Yara Abdullatif, andShaimaa Lazem. 2018. PI Floor: Portable Interactive Floor with High Resilience and Minimal Setup
for Edutainment. In Proceedings of the 17th International Conference on Mobile and Ubiquitous
Multimedia (MUM ’18). Association for Computing Machinery, New York, NY, USA, 419–423.
https://doi.org/10.1145/3282894.3289734
Vacca, Giuseppina. 2023. 3D Survey with Apple LiDAR Sensor―Test and Assessment for Architecturaland Cultural Heritage. Heritage 6, no. 2: 1476-1501.
https://doi.org/10.3390/heritage6020080.

© 2024 Information Processing Society of Japan566