ポップアップカードデザインの製作支援インタフェースAn Interface for Assisting the Design and Production of Pop-Up Card

岡村聡介 † 五十嵐健夫 †‡Sosuke OKAMURA† and Takeo IGARASHI†‡

† 東京大学 † The University of Tokyo

‡ ERATO, JST

E-mail: †s.okamura@is.s.u-tokyo.ac.jp, ‡takeo@acm.org

概 要

本論文では、コンピュータを用いてポップアップカード

デザインの製作を支援するインタフェースを提案する。ポッ

プアップカードとは、カードを開くと紙で出来た３次元形

状が飛び出す仕組みを持ち、再び２つ折にして平面へ折り

畳むことが出来るものである。その面白さから、飛び出す

絵本や挨拶状として親しまれている。しかし、ポップアッ

プカードのデザインには幾何的な制約が多く、素人にはそ

のデザインを行うことは難しい。そこで、誰でも簡単にポッ

プアップカードをデザインし製作することが出来るように

支援するインタフェースを提案する。本論文では、180度に開いた時に立体形状が飛び出すものを対象とする。

本システムでは、ユーザは折り目となる軸にパーツを配

置し、パーツの位置や形を編集することでポップアップカー

ドのデザインを行う。その際、「折り畳んだ時にパーツが

カードからはみ出さないか」「折り畳んだ時にパーツ同士

が衝突しないかどうか」をリアルタイムに判断し、ユーザ

に教えてくれる。このフィードバックによってユーザはデ

ザインを行うことに集中できる。

我々は実際に本システムで製作したポップアップカード

を提示するとともに、簡単なユーザテストを行い本システ

ムの有用性を示した。

1 はじめに

ポップアップカードとはカードを開いたときに紙で作ら

れた３次元構造が飛び出し、そのカードを再び二つ折りに

畳むことが出来るものである。人々はポップアップブック

[1] [2] [3] やグリーティングカードを通してこれらの仕組みを楽しみ、カードを送ったり眺めたりしている。図 1はポップアップブックの例である。

ポップアップカードを製作するのは比較的簡単である。

型紙さえあれば、誰でもそれを切り抜いて貼り合わせるだ

けである。ところが、残念なことに初心者には一からポッ

プアップカードのデザインを行うことはとても難しい。第

一の問題点はポップアップカードの仕組みを正しく理解す

る必要があることである。第二の問題点は立ち上がる部品

図 1: “Alice’s Adventures in Wonderland”, ポップアップブック [1]

同士が互いに衝突しないような位置を決めなくてはならな

いことである。この問題は一般的に熟練者の手によって試

行錯誤で解決される。紙から部品を切り抜き、カードに貼

り付け、衝突が起こらないか確認し、もし衝突が見つかれ

ばデザインを再考し最初から再びやり直しとなる。このよ

うな作業は多くの時間と労力、そして紙を消費する。コン

ピュータを用いてポップアップカードのデザインとシミュ

レーションを行うことはこの繰り返し作業を減らし、時間

の節約に繋がると言える。

Glassnerはポップアップカードをデザインするための手法を提案している [4] [5] [6]。彼はいくつかの基本的なポップアップの仕組みを紹介し、これらの仕組みの使い方、頂点

位置を 3つの球の交点としてシミュレートする方法、部品がカードからはみ出していないかや部品同士がカードの開

閉の際に衝突していないかを調べる方法、型紙の生成方法

について書いている。彼の研究は単純なポップアップカー

ドを作る上で非常に有用である。

本研究は Glassnerの研究に基づいていくつかの改良点を紹介していく。まず我々のシステムにはV-foldを基とする新しい仕組みを２つ加えた。次に、我々は Glassnerが詳しく記述していないユーザインタフェースについてその

詳細を述べる。加えて、我々のシステムはユーザがデザイ

ンを行っている際に、部品がカードからはみ出していない

かや部品同士がカードの開閉の際に衝突していないかを調

べ、リアルタイムにフィードバックを返す機能を加えた。

最後に、本システムを用いて行った簡単なユーザテストの

結果を報告する。

2 関連研究

Glassnerは３つのポップアップの仕組み（シングルスリット、非対称シングルスリット、V-fold）について、インタラクティブなポップアップカードデザインにおいて開閉の

シミュレートに必要な点の位置の解析的な求め方を説明し

ている [4] [5] [6]。また、その方法に基づいたプログラミングが紹介されている。しかし、そのプログラムについて

詳細な動作は述べられておらず、ユーザテストも報告され

ていない。

三谷らは立体断面の格子組み合わせによる 180度型折り紙建築模型の設計を提案している [7]。このシステムは物体の 3Dモデルから折り紙建築の部品を製作する。これらの部品の基本的な仕組みが我々のシステムにおける Anglefold open boxと同様の仕組みで出来ているため、我々のシステムで作ったポップアップカードにも用いることが出

来る。しかしながら、3Dモデルは常に用意できるわけではない。その上、部品は紙の中央にしか配置できず、この

システムだけで他の部品と組み合わせることは難しい。

Lee らは複数の V-fold 部品の重ね合わせをシミュレートするための幾何学的制約とその計算方法を説明している

[8]。しかしながら、このシステムは V-fold部品に限定されており、ユーザがインタラクティブに操作してデザイン

を行うことは難しい。

90度型ポップアップカードについてはいくつかのインタラクティブなインタフェースが提案されている。三谷らは

計算機によるボクセル表現を用いた折り紙建築モデルの設

計手法を提案している [9]。この手法を用いると、システムは簡単に 90度型ポップアップカードのモデルを保存し、コンピュータグラフィックスによって表示することが出来る。

ユーザはインタラクティブにボクセルを追加・消去しデザ

インを行う。このシステムは図学教育にも応用できること

が示されている [10]。三谷らはまた平面多角形の集合による折り紙建築モデルの表現と設計手法を提案している [11]。このシステムはモデルが一枚の紙からできる制約を追加し

て、計算を行っている。ユーザはこのシステムを用いて最

初から最後までインタラクティブに 90度型ポップアップカードを製作することが出来る。Hendrixらはユーザが 2D上で編集を行うことでポップアップカードをデザインでき

る Pop-up Workshopを提案している [12]。結果はビューア上に 3Dで表示され、開いたり閉じたり出来る。彼女らもまた子供たちが本システムを用いてデザインできること

を示している。しかしながら、これらのインタフェースは

180度型ポップアップカードには適さない。90度型ポップアップカードは一枚の紙で作られており、これらのシステ

ムはその制約を上手く用いることで成り立っている。また、

ボクセルモデルや平面多角形モデルで 180度型ポップアップカードを表現することは難しい。その上、３次元構造物

を２次元で編集することは結果が想像し辛く難しいため、

新しいインタフェースを考える必要がある。

3 提案システム

図 2は我々が製作したプロトタイプシステムのスナップショットである。

図 2: プロトタイプシステム

ユーザはマウスとキーボードを用いて我々のシステムを

操作しポップアップカードをデザインすることが出来る。

システムは単ウィンドウから成り、この中でポップアップ

カードのデザインやシミュレーションを行う。図 3は本システムの機能である。ユーザは部品の配置を決め、それら

の長さ、角度、模様などを編集し、型紙を生成する。ユー

ザが編集を行っている間、システムは常に部品がカードか

らはみ出していないかや部品同士がカードの開閉の際に衝

突していないかを調べている。

図 3: プロトタイプシステムの機能

本システムでユーザは５つの部品を扱うことが出来る。そ

の内のV-fold, even-Tent, uneven-TentはGlassnerによって紹介されている [4] が、V-fold を基とした Angle foldopen boxとAngle fold cube [13] は新しい部品である。前者の部品は図 4(a)に示されているような底と蓋のない空の直方体である。後者の部品は図 4(b)に示されているような Angle fold open boxに蓋を付けたものである。蓋はカードを閉じる際には箱の中に収納される。これらの部品

は、V-Foldと平行な面を接続して計算し、蓋は３点から同一距離に存在する点を計算してシミュレートしている。

図 4: (a) The angle fold open box (b) The angle fold cube

3.1 基本動作

3.1.1 部品設置

ユーザはまず最初に設置したい部品を選び、マウスカー

ソルを折り目の近くに動かす。すると、折り目の上に黒い

点が現れる。図 5に示されているるように、ユーザがクリックするとシステムはその場所に自動的に新しい部品を生成

する。この時、部品を構成する値は初期値に設定されてお

り、後で編集することが出来る。

図 5: 部品設置のためのユーザインタフェース (a) ユーザが折り目上でクリックすると (b) システムが新しい部品を生成する。

3.1.2 部品編集

ユーザは図 6 に示されているように、部品の頂点をドラッグすることで形を編集することが出来る。ユーザが編

集したい部品を選択すると、その部品の頂点が強調され、

その頂点を１つずつドラッグすることが出来る。ユーザが

部品の辺の長さを編集する際には、図 6(c)に示されているようにシフトキーを押しながらドラッグすることで平行

四辺形を維持したまま長さを変えることが可能である。ま

た、ユーザは図 6(d)と (e)に示されているように面を拡張したり、6(f)～(i)に示されているように二つの面の間の角度や部品の傾きを変更したりできる。

3.1.3 部品消去

ユーザは消去したい部品をクリックすることでその部品

を消去できる。もし、他の部品がその消去した部品上に設

置されていた場合、それらの部品も纏めて消去される。

3.1.4 テクスチャ貼り付け

ユーザはあらかじめ画像を準備しておき、テクスチャと

して用いることが出来る。図 6(j)と (k)に示されているようにユーザがテクスチャを貼り付けたい面と画像を選択す

ると自動的にマッピングが行われる。

3.1.5 型紙生成

システムは保持しているユーザがデザインした 3Dモデルから 2Dの型紙を自動的に生成する。この時同時に、部品を貼り付けるための糊付け部分やどこに貼り付ければい

いかを示すガイド線を追加する。

図 6: 部品編集のためのユーザインタフェース ユーザは(a)(b)(c)(d)(e)長さを変えたり (f)(g)面の間の角度を変えたり (h)(i) 傾斜角度を変えたり、 (j)(k) テクスチャを貼ったりできる。

3.2 リアルタイムのエラー検知

ユーザがデザインを行っている際に、システムは部品が

カードからはみ出していないかや部品同士がカードの開閉

の際に衝突していないかを調べる。システムがはみ出しや

衝突といったエラーを発見した場合、ウィンドウの右下部

分にエラーメッセージを表示すると同時に、図 7(c)や (d)に示されてるようにエラーの原因となっている部分を強調

する。これらの動作はリアルタイムに行われる。ユーザに

よってエラーが解決されれば、メッセージと強調表示はす

ぐに消える。

図 7: システムがエラーを検知した時のユーザインタフェース (a)(b) ユーザが部品を動かしている。 (c)(d) システムがエラーを検知すると、警告文が表示され部品の強調され

る。 (e) カードを閉じてみると、確かにはみ出している。(f) カードを閉じてみると、確かに部品同士が衝突する。

4 実装

我々はGlassnerの研究に基づいてMicrosoft Visual C++を用いてMFCプラットフォームで本プロトタイプシステムを実装した。また、画面の描画にOpenGLを、画像の読み込みにOpenCVを用いた。図 3が実装されている機能の一覧である。ただし、アンドゥ機能はまだ実装されていな

い。ポップアップカードは折り目の上に新しい部品を設置

し、その部品が新たな折り目を作り出す。よって、ポップ

アップカードは木構造のデータ構造で表現される。木の各

ノードは各部品に対応し、親部品に対する相対的な位置と

自身を構成するための変数を保持している。システムはま

ず最初にカードの開き具合を基にカードの位置を計算し、

その折り目の情報を更新する。次に、更新された折り目の

上に設置されている部品について位置を計算し、その折り

目の情報を更新する。これを繰り返すことで、全ての部品

の３次元座標が計算できる。

システムはユーザが部品をドラッグしたりパーツを設置

する時にはみ出しと衝突のエラーがないかどうかを確認し

ている。確認手法はGlassnerが提案しているように、全てのポリゴンの交差判定を一定角度毎に行う方法を用いた。

この手法では衝突を発見し損なう可能性があるが、紙には

多少の柔軟性があるので小さい衝突であれば折り畳むこと

が可能である。表 1 は判定の角度を変えた時の１回のエラー検知に要する平均時間 [ms]である。個人差はあるが、

１回のエラー検知に要する時間が約 100msを超えると入力に対して動作が遅れているように感じられる。デフォル

トでは 10度毎に設定してあるが、もちろん、ユーザや環境によって感じ方や動作が異なるため、ユーザが自由にこ

の値を変更できるようにしている。

部品数 1度 5度 10度 15度 20度

5個 177.9 35.1 18.0 12.6 9.2

10個 662.3 129.2 65.5 46.6 33.6

15個 1389.9 282.7 143.3 100.7 74.7

表 1: １回のエラー検知に要する平均時間 [ms]

5 結果

図 8は我々のシステムを用いてデザインしたポップアップカードの例である。最初の例は図 8(a)の “The WonderfulWizard of OZ” [2]というポップアップブックを参考にしてデザインした。8(b)は本システムを用いて約２時間かけてデザインしたものである。エラー検知システムによって、

部品の高さや配置を決めるのが簡単であった。図 8(d)～(f)は本システムが生成した型紙である。図 8(c)は更に２時間をかけて、この型紙を切り抜き、貼り合わせ組み立てたも

のである。図 8(g)はもうひとつの例である。こちらはデザインに２時間、組み立てに２時間 30分をかけ図 8(h)のようなポップアップカードが完成した。これらの結果は、本

システムが複雑なポップアップをデザインし取り扱えるこ

とを示している。

また、我々は簡単なユーザスタディを行った。実験はマウ

スを接続したノートブック PCを用いて行った。実験には「建物」をテーマとして、本システムを用いずにポップアッ

プカードを作る課題１と本システムを用いてポップアップ

カードを作る課題２という２つの課題を用意した。被験者

を４人（被験者１～４）用意し、最初の二人（被験者１、

２）には課題１を行ってもらった後、本システムの説明を

行い５分間試用してもらい、課題２を行ってもらう。残り

の二人（被験者３、４）には説明・試用の後、課題２を行っ

てもらい、その後課題１を行ってもらう。全ての課題が終

了した後、被験者にインタビューを行い感想を貰った。

被験者は全員ポップアップカードの存在は知っていたが、

知識はなく製作したこともなかった。図 9の上が被験者毎の各課題の結果である。被験者１、３の課題１の結果は一

見上手くできているように見える。しかし、実際に閉じて

みると図 9 (a)(b)(c)のようにカードと部品が衝突したり、部品同士が衝突したり、カードからはみ出してしまうとい

うエラーが発生している。一方、本システムを用いた課題

２の製作物は、全てきちんと閉じることができ、はみ出し

図 8: 我々のシステムでデザインしたポップアップカード

も存在しない。課題の順を変えてもエラーが発生したよう

に、デザインを行いながら、同時にエラーが発生していな

いかを気にするのは難しいタスクである。

製作時間について見てみると、４人のうち３人は課題１

より課題２に要した時間の方が短かった。被験者３は課題

１の方が所要時間が短かったが、残念ながら上手く閉じれ

なかった。課題１で時間がかかるのは主に、まずどういう

仕組みが閉じられるのかを思索し、その後実際に試作して

みてどこに貼るかを考える必要があるのが理由である。

ユーザスタディと被験者へのインタビューを通して本シ

ステムには次のような利点があることが分かった。一つ目

の利点は、本システムを用いてデザインする方が、実際に

紙とはさみと糊を用いてデザインを行うより簡単なことで

ある。被験者２は課題１では高さの調整に時間を費やした

に対し、課題２では部品がカードからはみ出さない高さに

調整するのが簡単だったためより短時間でデザインを完了

できた。同様に被験者４も、課題２で使った仕組みと同様

の仕組みを課題１で用いたが、貼る場所を上手く決めるの

に時間がかかっている。二つ目の利点は、エラー検知機能

によって本システムを用いて製作したポップアップカード

ははみ出しや衝突なく正しく閉じられることである。課題

１では衝突やはみ出しといった失敗をすることがあったが、

課題２では失敗は起こらなかった。

一方、本システムには欠点もある。一つ目の欠点は、ポッ

プアップカードには左右対称のデザインというのはよく見

られるが、現状では上手く左右対称に編集するようなシス

テムは実装されていないなど、編集機能が不足しているこ

とである。二つ目の欠点は、ディスプレイ上の２次元的な

マウスの動きを利用しているので、ユーザが３次元的に動

かしたい方向とずれが生じて直感的に動かせない場合があ

ることである。

図 9: ユーザスタディの結果 (上) 被験者ごとの各課題における製作物 (a) 失敗例：被験者１の課題 1における製作物(b)(c) 失敗例：被験者３の課題１における製作物

6 結論と将来課題

我々は本論文でコンピュータを用いてポップアップカー

ドデザインの製作を支援するインタフェースを提案した。

我々のシステムは「折り畳んだ時にパーツがカードからは

み出さないか」「折り畳んだ時にパーツ同士が衝突しない

かどうか」をリアルタイムに判断し、その結果をユーザに

教える。このフィードバックによってユーザはデザインを

行うことに集中できる。我々は実際に本システムで製作し

たポップアップカードを提示するとともに、簡単なユーザ

テストを行い本システムのリアルタイムのはみ出しや衝突

のエラー検出が有用であることを示した。

我々は将来システムにいくつかの新しい機能を加えたい

と考えている。まず、編集機能を拡張したいと考えている。

ミラーモードでは、ユーザが部品を編集する際システムが

自動的に左右対称になるように値を変更する。制約システ

ムでは、ユーザがこの２つの辺の長さは同じであるという

制約を加えると、編集をする際システムはその２つの辺の

長さを等しくなるように維持する。

一方、現在我々のシステムでは、各面の模様をあらかじ

め用意しておきテクスチャとして指定する方法を採用して

いるが、これは非常に面倒である。我々はソフトウェア内で

ユーザに部品に直接色を塗れるようなシステムを追加した

い。今回我々のシステムでは５つの部品を実装したが、実

際にはポップアップする部品はたくさんある。その中でも

現在最も興味深いのは曲面を持つ部品である。曲面は単純

な平面のように線形に変形できないため、物理的なシミュ

レーションを加えたいと考えている。

我々は自分たちの絶えずフィードバックを返す直接操作

によるインタフェースが一般的に自然物をデザインするた

めの最良のインタフェースであると主張しているわけでは

ない。スケッチインタフェースやタンジブルインタフェー

スのように自然物をデザインするための他の方法も存在す

る。どの方法にも各々の利点と欠点が存在する。我々の経験

では、スケッチやタンジブルといった手法は制約が少ない

ので初期段階で有用である。逆に、我々の手法はデザイン

の後半や複雑に制約された物体のデザインに対して適して

いる。ポップアップカードは自由な形にデザインできない

制約の多い対象の一例であり、我々の手法が上手く働いて

いる。しかしながら、我々の手法は初期段階においては少々

制限しすぎており、今後解決していきたいと考えている。

謝辞

本研究のユーザスタディに参加し、有意なコメントを寄

せてくださった方々に深く感謝したい。

参考文献

[1] R. Sabuda and L. Carroll. Alice’s Adventures inWonderland. Little Simon, 2003.

[2] L.F. Baum. The Wonderful Wizard of OZ. ElibronClassics, 2000.

[3] R. Sabuda and M. Reinhart. Encyclopedia Prehis-torica: Dinosaurs. Candlewick Press, 2005.

[4] Andrew Glassner. Interactive pop-up card design.Miscrosoft Technical Report, 1998.

[5] Andrew Glassner. Interactive pop-up card design,part i. IEEE Computer Graphics and Applications,22(1):79–86, 2002.

[6] Andrew Glassner. Interactive pop-up card design,part 2. IEEE Computer Graphics and Applications,22(2):74–85, 2002.

[7] Jun Mitani and H. Suzuki. Computer aided designfor 180-degree flat fold origamic architecture withlattice-type cross sections. Journal of graphic scienceof Japan, 37(3):3–8, 20030901.

[8] YT LEE, SB TOR, and EL SOO. Mathematicalmodelling and simulation of pop-up books. Comput-ers graphics, 20(1):21–31, 1996.

[9] Jun Mitani, H. Suzuki, and H. Uno. Computer AidedDesign for Origamic Architecture Models with VoxelData Structure. Transactions of Information Pro-cessing Society of Japan, 44(5):1372–1379, 2003.

[10] J. Mitani and H. Suzuki. Making use of a cg basedpop-up card design system for graphics science edu-cation. Journal of graphic science of Japan, 38(3):3–8, 20040901.

[11] J. Mitani and H. Suzuki. Computer aided design fororigamic architecture models with polygonal repre-sentation. Computer Graphics International, 2004.Proceedings, pages 93–99, June 2004.

[12] S. L. Hendrix. Popup Workshop: Supporting andObserving Children’s Pop-up Design.

[13] D.A. Carter and J. Diaz. The Elements of Pop-up:A Pop-up Book for Aspiring Paper Engineers. LittleSimon, 1999.