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

163C54
2016/3/4

insTangible:ポップアップカードと回路印刷を組み合わせた即時的なタンジブルインタフェース
趙 岩†1

杉浦 裕太†2

多田 充徳†2

三谷 純†1

概要：本論文では，立体形状を簡単に構成できるポップアップカードに着目し，これに回路印刷技術を組み合わることで，即時的にタンジブルインタフェースを構築する手法を提案する．またこれの作成を支援するためのソフトウェアを開発した．具体的には，ポップアップカードの展開図上に回路の始点と終点を手動で入力すると，それらをつなぐ配線を自動計算して描画する．この自動計算では，カード上の切込みの場所，配線の太さ，配線同士の間隔等の制約を考慮した上で回路が最適になるようにレイアウトされる．レイアウトされたものは印刷用のデータに変換される．印刷には，導電性インクとカラーインクを同時に射出可能なインクジェットプリンタを利用する．本論文では，素人でも本ソフトウェアでオリジナルのインタラクティブポップアップカードを作成でき，それを用いたアプリケーションを開発できることを確認した．さらにポップアップカード型インタフェースの利用方法を試作し，本提案の有効性を示した．

InsTangible: An Immediate Tangible User Interface Combining Popup Cards with Conductive Ink Printing
YAN ZHAO†1YUTA SUGIURA†2
MITSUNORI TADA†2
JUN MITANI†1
Abstract: We propose an immediate tangible user interface combining pop-up cards with conductive ink printing technique. To
fulfill our purpose, we developed software that can automatically calculate the circuit layouts on the pop-up card. The circuit layout
is made to have the shortest path by considering the thickness of the layout, the space between circuit lines, and that the layout
should not crossover cut lines. The crease pattern and layouts are printed separately when the layouts are calculated. By attaching
electronic elements, we can make an interactive pop-up card. In a use trial, we confirmed that even novice could create original
interactive pop-up card with our software and use such card to build an application. Furthermore, we demonstrated the effectivenessof our method by making and showing example applications using the interactive pop-up card interface.

1. はじめに具や素材で立体を構成できる点である．本研究で対象とするポップアップカードは，９０度開いたときに立体として紙面上に電子回路を直接印刷する技術が盛んに研究立ち上がるものである．このようなポップアップカードは，され，市販化もされている 5)．それにより，紙の機能性と，折り紙建築という名称で広く知られており，誰でも手軽にエレクトロニクスによるインタラクティブ性を組み合わせ工作できる特徴がある．

た，従来の紙の使い方を拡張した様々なアプリケーション

2 つめは，コスト面であり，紙という安価な素材で立体が登場してきている．紙の機能性で重要な点の一つとして物を構成でき，また薄い平面の状態で流通ができるため，は，ペーパークラフトや折り紙のように，折ったり切った安価にすることができる．3 つめは，サプライズ性であり，りすることで容易に任意形状を生成できる点点である．

平面から立体への変形はユーザへの驚きを提供できる．

我々は，紙のこの形状作成の特徴に，電子回路印刷技術を我々は，このポップアップカードに電子回路を印刷する組み合わせることで，「形状」に「機能」を兼ね備えたインことで，新たに制作の手間を増やすことなく，即時的に形タラクティブデバイスを即時的に出力でき，従来の紙に新状とインタラクティブ性の両方を兼ね備えたタンジブルユ

しい価値を提供できると考えている．

ーザインタフェース（以下，TUI）を構築する方法を提案す紙を用いた形状作成方法の中でも我々は，ポップアップる．本論文にけるインタラクティブ性とは，ユーザがポッカードに着目する．ポップアップカードは，平面の状態かプアップカード上のどの部分を触れたかどうかを認識し，ら立体に変形するものであり，ギフトカードや子供用の絵さらに何かしらの手段で情報を提示するということである．

本として世界中で親しまれている．ポップアップカードのそのためには，ポップアップカードに静電容量方式のタッ魅力はいくつかある．1 つめは，ファブリケーションの容易さであり，日常にある，はさみやカッター，紙などの道†1 筑波大学
University of Tsukuba†2 産業技術総合研究所
National Institute of Advanced Industrial Science and Technology (AIST)© 2016 Information Processing Society of Japan991

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

163C54
2016/3/4

図 1．構成手順．ユーザはモデルをデザインする（a）．ユーザは回路の始点と終点を入力する（b）．
システムが配線パターンを自動算出してレイアウトする（c）．システムは印刷可能なデータ形式に変換する（d）．プリンタで出力されて組み立てたもの（e）．
Figure 1. Overview of our method: (a) a pop-up card designed by the user, (b) the user specifies the start andend points, (c) the circuit layout is calculated automatically, (d) data is converted into printable form, (e) themodel made by user.
チ検知機能が実装されていたり，LED などの素子や，処理用マイクロコントローラなどが紙上に配置されている必要があり，そのための配線の取り回しが重要となる．

2. 関連研究2.1 紙とエレクトロニクス

本論文で対象にしているポップアップカードは紙一枚

近年，紙とエレクトロニクスを組み合わせることで紙の素に切込みと折りを加えていくことで立体を構成するもので材性を活かしたインタラクティブ作品を生み出すための研ある．このポップアップカードの特徴として，紙のどの面究が盛んに行われている．Kawahara らは，家庭用のインクも台紙と接続しているため，任意の場所から配線を引き伸ジェットプリンタを使って紙に導電体を印刷する方法を提ばし，任意の場所に到達させることが可能である．これは，案し，AgIC において製品化している 1)．Olberding らは，LED などの電子素子を任意の場所に配置しても，それを駆紙にアレイ状のセンサを印刷し，配線パターンを工夫する

動するためのマイコンや他のセンサ同士が接続するようなことで，ユーザがはさみで加工してカスタマイズしても引導線レイアウトの解が存在することを意味する．一方で，き続きセンサとして機能するシートを開発した 8)．加藤ら

カードのモデルが複雑な形状になればなるほど切込みの数は，薄いシートに特定の導電性パターンをプリントするこは多くなり，マニュアルでの配線の取り回しは困難となる．とで，ユーザの様々なジェスチャを取得することに成功しそこで本研究では，ポップアップカード上の配線レイア

た 4)．Koizumi らは，紙にバイオメタルを組み合わせるこウトを支援するソフトウェアを開発した．このソフトウェとで，紙を動的にする Animated Paper を提案している 6)．

アは，11)のソフトウェアでモデルを構成し生成されたポッ

Qi らは，立体的な紙に対して LED や静電容量センサを付プアップカード展開図上に，ユーザが回路の始点と終点を加してインタラクティブ化する研究をしている 9)．本研究

入力すると，配線の取り回しを自動計算し，レイアウトをでは，ポップアップカードに着目し，複雑な形状のモデルする．この自動計算では，切込みの場所，配線の太さ，配でもユーザが容易に配線デザインを可能なソフトウェアを線同士の間隔の制約を考慮した上で最適になるようにレイ開発したことが貢献である．

アウトされる．レイアウトされたものは，導電性インクと2.2 配線レイアウト支援

カラーインクを同時に射出可能な市販のインクジェットプ

電子回路設計ソフトウェアには，配線のレイアウトの最リンタによって，印刷できるデータとして書き出される．

適化機能が標準で組み込まれているものが多い．回路設計

プリンタによって書き出されたカードは，触れた場所にの Eagle では，電子回路部品を配置すると，その上で配線応じたメッセージや音楽が流れるギフトカードの拡張や，を自動最適化するアルゴリズムを組み込まれている 2)．ま即時的に平面から立体的な模型に変形して，テーブルトッた特定のモデル上での配線レイアウトを支援する研究もあ

プ上に表示されたオブジェクトを操作できるといったタンる．Savage は，写真で撮影してモデルの形状を取り込み，ジブルユーザインタフェースとして活用できる．

タッチセンシングの箇所とその配線を支持できるソフトウ

本論文では，素人でも本ソフトウェアを使ってインタラェアを構築した 10)．これらの研究と比較し，本論文では，クティブなポップアップカードを作成でき，それを用いたポップアップカードにおける配線の最適化に着目した点でアプリケーションを開発できることを確認した．さらにイ新規性がある．

ンタラクティブなポップアップカードの利用例を試作し，2.3 ポップアップカード制作支援

本提案の有効性を示した．

ポップアップカード自体の設計支援の研究も提案されている．三谷は，紙 1 枚で構成するポップアップカードの展開図をソフトウェア上で制作できるソフトウェアを開発© 2016 Information Processing Society of Japan992

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

163C54
2016/3/4

して，それを製品化した 11)．Li らは，実モデルから展開図に自動変換するソフトウェアを開発した 7)．Iizuka らは，紙を複数枚使ったポップアップカードの設計を支援するソフトウェアを開発した 3)．本研究は，ポップアップカードに対して，インタラクティブ性を付与して新しい体験を提供するのが目的である．

3. 配線レイアウトソフトウェア
3.1 展開図の読み込みポップアップカード上の配線パターン作成を支援するための配線レイアウトソフトウェアを開発した．このソフ

図 2．配線同士の間隔を空けて配線．

トウェアは，三谷が開発したポップアップカード作成ソフ

Figure 2. Individual circuits never crossover the cut lines, andトウェアによって出力されたカードの展開図を利用する

the space separating the circuits is maintained.

（図 1（a））．これは一枚の紙上に切込み線と山折谷折り線で作成される．このカードは９０度開いたときに立体が立

3.3 配線レイアウト

ち上がるものである．このようなポップアップカードは，配線レイアウトが完了したら，展開図と配線レイアウト

折り紙建築という名称で広く知られており，手軽に工作でをそれぞれ PDF で書き出して印刷する（図 1（d））．印刷のきる特徴がある．ポップアップカードのモデルを作るソフ

際に一般的なインクと導電性インクが出力できるインクジ

トウェアは三谷が開発したソフトウェア以外にも数種類存ェットプリンタを利用し，一般的なインクで展開図の切込在し，本研究はこのようなソフトウェアで設計されたポッみ線や折り線などのパターンをプリントし，導電性インクプアップカードにも今後汎用的に対応していくために展開で配線パターンを印刷する．印刷したら切込み線や山折谷図を入力として使う．

折り線に合わせて，ユーザ自身でポップアップカードを組

3.2 配線レイアウト

み立て，これに対して任意の回路や電子素子を装着するこ展開図上に配線する際に，マウスを使って配線したい箇所の始点と終点をクリックで入力し，配線の取り回しを自動計算する（図 1（b））．計算する際に，ポップアップカードの切り込み線を避け，配線同士の間隔を保った状態で最とで，インタラクティブなポップアップカードを作ることができる（図 1（e））．

4. 配線レイアウトソフトウェアの実装

短となる経路にする（図 1（c））．配線の太さは配線同士が本章では，具体的に開発した配線レイアウトソフトウェ

干渉起こさない際の最大値と，紙の裏に配線を印刷した際アのバックグラウンドではどのような計算が行われている

でも，静電容量方式のセンシングができる最小値の間で調か具体的に記す．

整する．

4.1 展開図のグリッド化

一度レイアウトした配線は，配線の始点や終点，中間の配線をマウスでドラッグすることで，修正を加えることが配線レイアウトをする際に，経路探索問題を扱うため，グラフ理論における最短経路問題を適用する．

できるようになっている．この間，配線レイアウトは配線

まずは，入力とする展開図を図 3 で示すように展開図領の制約を保ちながらリアルタイムに再計算と描画を行う．

域内を格子状のグリッドで分割する．グリッドのサイズは，始点と終点には，その先に電子素子やワニ口クリップなど展開図の近似度と探索コストの影響に合わせてユーザが調が装着しやすいように，終端の線を太く設定できる．

整できる．グリッドのサイズを小さく設定した場合は，配配線の太さや配線同士の間隔はユーザが任意で設定で線経路探索のコストも上がり，リアルタイムでの配線の修きる．１つの配線経路を設定したら，次の配線ではその領正操作はより困難となる．グリッドが大きすぎる場合は展域に重ならないように計算される．配線太さは配線後も設開図をグリッドで忠実に表現できない．そこで，入力展開定可能であるが，この太さの最大値は配線同士が干渉を起図の形状に合わせて，適当な値をユーザ自身で設定できるこさないよう配線同士の間隔以内のみで設定できるようなよう，ソフトウェア上でグリッドの大きさを調整するスラ制約を設けている．

イドバーを設けた．

© 2016 Information Processing Society of Japan993

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

163C54
2016/3/4

図 3．展開図をグリッドで分割．

Figure 3. Discrete crease pattern with grids.

図 5．幅優先探索（左），ダイクストラアルゴリズム（右）．

グリッドのサイズが調整できたら，ソフトウェアは，自Figure 5. The result by using breadth first search algorithm (left)

動的に切り込み線を把握し，この部分を配線が跨ぐことがand Dijkstra's algorithm.

ないように認識する．カードの描画線は，配線が跨ぐこと

4.3 配線の始点と終点の処理がきるグリッドとできないグリッドに分かれ，配線できる

配線の始点また終点はドラッグで移動でき，配線の制限

グリッドはグラフ理論におけるノードとみられ，間をエッを保ちながら，経路探索を行う．純粋に最短経路探索で配ジで結び，経路探索用のグラフを生成する．

線を算出すると，図６の左のような配線終点の一部は紙と水平になってしまうことがある．この場合，例えばワニ口クリップのような何らかしらの外部経路と繋ぐ際に不便である．
そこで，図 6 の右のように配線の中に中間点を設け，一つの経路を二つに分けた後に，それぞれの最短経路探索を行う．中間点は始点や終点と同様にドラッグで移動できる．
それは調整することで，図 6 の右で示すような中間点は終点部分の配線が紙の辺と垂直にすることが可能である．

図 4．切り込み線は配線できない場所として設定．

Figure 4. Determine the grids as capable or incapable of being
used in the circuit layout.
4.2 配線の経路探索
配線は，ポップアップカードの切り込み線を避け，配線同士の間隔の制限を考慮して最短となる経路になるよう計算される．最短経路問題を解く際，グラフ理論における幅優先探索やダイクストラアルゴリズムが用いて最短経路探索実験を行う．

図 6．終点をドラッグすることで経路終点部分は紙の辺と水平に

図 5 の左では，始点と終点を一個ずつマウスのクリックなる（左）．中間点を設けると終点部分の配線は紙の辺と垂直にで全部二つの始点と終点を入力し，幅優先アルゴリズムをなる（右）．

使う結果である．図 5 の右は同じ状況で，ダイクストラ探Figure 6. Drag the end point (left), and insert one middle point

索アルゴリズムを使っており，最短経路の結果である．二to refine the circuit layout (right).

つのアルゴリズムいずれも，最短経路の探索ができ，始点と終点は繋がない場合は，経路がないとユーザに提示する．
本研究における最短経路アルゴリズムとしてはダイクスト
ラ探索アルゴリズムを選択する．

4.4 配線レイアウトの例
開発したソフトウェアを用いて著者らがレイアウトした展開図を次に示す．このモデルは，形状が複雑であり，手動で配線をしていくのは時間がかるが本ソフトウェアを使った場合は，3 分程度で配線をすることができた．

© 2016 Information Processing Society of Japan994

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

163C54
2016/3/4

あった．一方で，「最終的に装着する電子素子に合わせてレイアウトのパターンが用意されていると良い」というコメントや「配線がうまくレイアウトされなかったときの理由などが表示されると良い」といった今後のシステムの改良に有益なコメントも得た．

図 8．ユーザがポップアップデザイナーでデザインした形状（左）．配線レイアウトソフトウェアで配線したデータ（右）．

Figure 8. The pop-up card designed by the user (left), and thedesigned circuit layouts (right).

図 7．配線レイアウトの例（タイトル：ブロック城）．

Figure 7. Example of circuit layouts on pop-up card (title: theBlock Castle).

5. ユーザトライアル

図 9．被験者と被験者が制作した作品．紙の端に触れると，内部が発光するタワーを制作．

本研究が提案した構成手法で，初見のユーザでも TUI がFigure 9. The user (left) with his designed interactive pop-up

構築できるかどうか，実際に 1 名のユーザに使ってもらい，card called “Tower” (right).

確認をした．手順としては，三谷が開発したポップアップ
カード制作ソフトウェア 11)で任意のモデル形状を作成してもらう．次に今回我々が開発した配線レイアウトソフト
ウェアを使い展開図上で配線レイアウトをしてもらう．最6. アプリケーション
instangible のアプリケーションとして本論文では，2 つの例を示す．

後に実際にプリンタで印刷をして，実験者が用意した任意

まずは，テーブルトップ上で使う即時的なタンジブルイの電子回路を装着してもらう．終了後に，インタビューをンタフェースの例である（図 10）．具体的には，ポップア行い，ソフトウェアの使い勝手や改良点などを抽出した．

ップカード型インタフェースを画面上で動かすことで，空ユーザには，予め実験者から静電容量方式でタッチ検出間中の家具などのレイアウトが操作できるアプリケーショするための入力機能と，タッチの検出を視覚化するためのンを開発した．

LED，それらを処理するマイコン（Arduino UNO）をプログ

画面上のポップカードの位置は，カード上の配線を通しラムが書き込まれた状態で配布した．またユーザには，こて人間と静電容量方式タッチパネルが導通することで認識れらの回路をユーザのプログラミングや電子回路のスキルをする．またディスプレイ面と接触するポップアップカーに合わせて拡張して良いという旨を伝えた．

ドの台紙に配線されたパターンの配置を組み替えることで，被験者は，配線レイアウトソフトウェアを使い，自身がカードに固有の ID を振ることが可能である．したがって，デザインしたモデルの展開図に，配線をすることができて複数のカードと画面内のバーチャルオブジェクトの組み合いた（図 8，図 9）．またユーザからのコメントとして「市わせを作ることができる．今回は，オブジェクトの中でも，販のポップアップカードでも最近開くと音が鳴るものなど

机，椅子，階段をポップアップカードで出力し，それを部があるが，今回のような仕組みを利用するとオリジナルの屋のレイアウト上に配置して，バーチャルオブジェクトをデザインできるようになるから楽しい」という本研究の目操作できるようにした．

的に対する肯定的な意見や，「自動計算による配線レイアウ

操作対象のバーチャルオブジェクトが変更された場合トは切込み線などを意識せずにできるから便利」というでも，すぐにオブジェクトを実体化して，操作可能な本提我々が開発したソフトウェアに対する肯定的なコメントが案は，このような目的に有効だと考える．

© 2016 Information Processing Society of Japan995

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

163C54
2016/3/4

我々が，試作のためのポップアップカードを作成中に，何度か印刷された配線が切れてしまう場面があった．近年
では柔軟な導電性インクも射出できるようになっているた
め，これを導入することを検討する．
また，本研究では，形状生成の容易さからポップアップカードを選択したが，紙にはこれ以外にもペーパークラフトや折り紙などの形状生成の方法があり，これらにもソフトウェアを対応させていきたい．

参考文献

図 10．ポップアップカード型 TUI を用いた空間デザイン．

Figure 10. A room layout design application in which the user
can move the interactive pop-up card interface on the screen tomanipulate the furniture layout in a room.
また，もう 1 つの事例として，ユーザが接触することで，音を奏でるアプリケーションを開発した（図 11）．ポップ
アップカードには静電容量方式で接触検知ができるような回路が装着されており，ユーザがどの場所に触れたかを識別できるようになっている．接触した位置に合わせて，それと紐づいた音が流れるアプリケーションである．本シス
テムを使えばこのように自分でカスタマイズした楽器を作ることも可能である．

図 11．接触すると対応された音が流れるポップアップカード.

Figure 11. A musical instrument application which plays amusical note corresponding to the touched place.

7. まとめと今後の課題
本論文では，立体形状を簡単に構成できるポップアップカードに着目し，回路印刷技術を組み合わることで，即興

1) AgIC. http://agic.cc/ja
2) Eagle. http://www.cadsoftusa.com/
3) Satoshi Iizuka, Yuki Endo, Jun Mitani, Yoshihiro Kanamori, Yukio
Fukui: "An Interactive Design System for Pop-Up Cards with a PhysicalSimulation", The Visual Computer (Proc. of Computer GraphicsInternational 2011), 27, 6, 605-612, 20114) Kunihiro Kato and Homei Miyashita. 2015. ExtensionSticker: A
Proposal for a Striped Pattern Sticker to Extend Touch Interfaces and its
Assessment. In Proceedings of the 33rd Annual ACM Conference on
Human Factors in Computing Systems (CHI '15). ACM, New York, NY,USA, 1851-1854.
5) Yoshihiro Kawahara, Steve Hodges, Benjamin S. Cook, Cheng
Zhang, and Gregory D. Abowd. 2013. Instant inkjet circuits: lab-based
inkjet printing to support rapid prototyping of UbiComp devices. In
Proceedings of the 2013 ACM international joint conference on
Pervasive and ubiquitous computing (UbiComp '13). ACM, New York,NY, USA, 363-372.
6) Naoya Koizumi, Kentaro Yasu, Angela Liu, Maki Sugimoto, andMasahiko Inami. 2010. Animated paper: A toolkit for building moving
toys. Comput. Entertain. 8, 2, Article 7 (December 2010), 16 pages.
7) Xian-Ying Li, Chao-Hui Shen, Shi-Sheng Huang, Tao Ju, and ShiMin Hu. 2010. Popup: automatic paper architectures from 3D models.
In ACM SIGGRAPH 2010 papers (SIGGRAPH '10), Hugues Hoppe(Ed.). ACM, New York, NY, USA, , Article 111 , 9 pages.
8) Simon Olberding, Nan-Wei Gong, John Tiab, Joseph A. Paradiso,and Jürgen Steimle. 2013. A cuttable multi-touch sensor. In Proceedingsof the 26th annual ACM symposium on User interface software andtechnology (UIST '13). ACM, New York, NY, USA, 245-254.
9) Jie Qi and Leah Buechley. 2010. Electronic popables: exploring
paper-based computing through an interactive pop-up book. In
Proceedings of the fourth international conference on Tangible,embedded, and embodied interaction (TEI '10). ACM, New York, NY,USA, 121-128.
10)
Valkyrie Savage, Xiaohan Zhang, and Björn Hartmann. 2012.
Midas: fabricating custom capacitive touch sensors to prototype
interactive objects. In Proceedings of the 25th annual ACM symposium
on User interface software and technology (UIST '12). ACM, New York,NY, USA, 579-588.
11)
三谷純, 鈴木宏正, 宇野弘: "計算機によるボクセルを用いた「折り紙建築」モデルの設計手法", 情報処理学会論文誌
Vol.44, No. 5, pp.1372-1379, 2003.

的にタンジブルユーザインタフェース（TUI）を構築する手法を提案した．また，ポップアップカード上に電子回路を印刷するための設計支援ソフトウェアを開発した．実際に1 名のユーザにソフトウェアを利用してもらい，今後の改善につながるフィードバックを得た．また即時的に TUI を構成できる利点を示す例として，アプリケーションを試作した．

© 2016 Information Processing Society of Japan996