WISS 2018

クラフトバンドを利用した紙工作のためのモデリング手法
五十嵐 悠紀*概要． 本稿ではクラフトバンド工作に着目して初心者を対象にしたデザイン支援システムを提案する．クラフトバンドは紙であり制作時に試行錯誤がしづらい素材であるが，本システムを使用することで試行錯誤をシステム内で行うことができ，初心者でもイメージをつかんでからオリジナルデザインを制作することができる．システムの実装にあたって，インタフェースの設計とモデリング手法を提案する．知識がないとデザインできない箇所はコンピュータが支援し，ユーザがデザインしたいサイズや色合いといった見た目の部分はユーザが行うといった使い方が可能となる．

1

はじめにコンピュータグラフィックス(CG)は手軽に実世界のものをデザインするツールとしても発展してきた．伝統的な CAD(Computer Aided Design)システ
ムは主に専門家のユーザに使われているが，非専門家のユーザにとって使いやすい CG やインタラクシ
ョン技術を盛り込んだシステムの研究も盛んである．
本稿ではクラフトバンド工作に着目して初心者が手軽に思い通りのデザインのクラフトバンド工作をデザインできるような支援システムを提案する．クラフトバンド工作とは図 1 に示すような，クラフトバンドと呼ばれる紙テープを適切な長さに切り，適切な幅に割き，交互に絡ませながら作成していく工作である．手軽に楽しめる工作の 1 つとして昨今子どもたちに人気であり，ダイニングで使用するカトラリーといった小物から，カバンのような大物までデザイン次第では様々なのものを作ることができる．
クラフトバンドという名前の他，ハマナカ株式会社のエコクラフト🄬，(株)山久のエコテープ，そのほか，紙バンドなどといった様々な名前で各社が作り方説明書付きのキットを販売している．100 円ショップなどでもキットおよび素材を手に入れることができ，身近なクラフトの 1 つとして注目されている．
我々は，クラフトバンド工作を対象として初心者が簡単にデザインできるよう，インタフェースの設計とモデリング手法を提案する．まずユーザは作りたい形状を選択し，サイズを入力する．
それに従い，システムが自動的に形状を計算して，初期形状を提示する．ユーザはこれを見ながら，クラフトバンドの幅や色，本数や形状といった詳細な点を修正しながらリアルタイムにシステムで反映結果を見ること
Copyright is held by the author(s).
* 明治大学／JST さきがけができる．修正したら最終的に必要なクラフトバンドのそれぞれの色および長さが算出され，ユーザに提示する．また，実際の制作過程を CG で支援するインタフェースも構築した．これを見ながら実際に作っていくことができる．

図 1: クラフトテープとかご作品の例．

2

関連研究

日本の伝統工芸におけるかご編みでは植物のツルや草，竹といった自然素材を編むことで，花かごやフレームバスケット，バッグ，小物入れなどを制作している．各地方の特色を生かした素材と組み方の技法は職人技であり，一つ一つ丁寧に作られて民芸品として販売されている．かご編みでは編む人のテンポや手の力の強さが出来栄えを左右するため，初心者が満足いく作品を作るのは難しいが，初心者用のワークショップが開催されることもある．初心者向けに編み方を丁寧に解説した書籍[1]もあり，この書籍では日本に伝統的に伝わる 150 種類以上の編み方を「編む」，「かがる」，「組む」，「巻く」，「結ぶ」に分類し，立体的なかごを編むための技法の組み合わせ方，作り方の実践を紹介している．また，書籍[2]では，日本の伝統的な編み技法でクラフトバンドを使って，かごとざるの編み方を紹介している．こWISS 2018のようにクラフトバンドは伝統工芸に触れる一歩としても注目されている．
また，最先端のグラフィックス技術を用いた実世界のものづくりを支援するシステムが近年いくつも提案されている．3 次元モデルを入力として実際の物体を作るための設計図を出力するものとしては,ペーパークラフト[3]，ポップアップカード[4]，ぬいぐるみ[5]，ビーズデザイン[6]などが提案されている．
スケッチ入力を用いてインタラクティブにデザインしていくものとしては，洋服[7]，ぬいぐるみ[8]，ビーズデザイン[6]などが提案されている．これらのシステムは非専門家がデザインを行うことに特化しており，紙や布といった物理的制約をモデリング過程に組み込んであることが特徴的である．
このように，実世界の 3 次元物体をコンピュータでデザインする際には物理制約が必要になる．我々はクラフトテープを用いたデザインであるため，それぞれのテープを構成するメッシュは可展面となっている必要があること，できあがりのサイズはユーザの入力したサイズになっていること，といった制約を満たすようなアルゴリズムを提案する．
3 次元モデルから素早く 3 次元形状を実世界に出力するための技術も提案されている．Mueller らは3 次元モデルをラピッドプロトタイピングのためにワイヤーフレームモデルに変換して 3 次元プリンタで出力を行った[9]．Tao らは 3 次元モデルの形状を良くあらわすように，複数のバンド型の形状を自動生成し，2 次元パターンに展開する手法を提案した[10]．Takezawa らは入力した 3 次元メッシュの曲率を計算し，表面を覆うような交差する可展面のストリップを生成するアルゴリズムを提案した[11]．
これを交互に重ねることで任意の曲面でできた 3 次元モデルを簡単に実世界に作成することを実現しているが，展開図は等幅のストリップではない．我々は等幅のバンドで形状を作成するという制約の中で円筒や直方体をベースとした幾何学的な形状をユーザの要望するサイズに合わせて自動計算するアルゴリズムを提案する．

3システム概要

提案システムを JavaTM で実装した．本章では，提案システムを用いたデザイン過程をユーザの視点から説明する．
詳細なアルゴリズムは次章で述べる．
我々はまず，既存のクラフトバンド工作の作品を書籍やキットを用いて調査した．その結果，直方体もしくは円筒形を基準とした形状が主に占めていることがわかった．また，クラフトバンドの組み方は何十通りもあるが今回は対象ユーザをクラフトバンドの初心者に絞り，基本的な“交互に重ねる編み方”だけを扱うこととした．また，配色によって与える印象も大きく変わるため，それを実際に制作する前に可視化することも必須要件である．
また，クラフトバンドは図 2 のように通常 12 芯が平たく糊付けされた状態で 1 本の帯状につながっている．単色のものの他，12 芯それぞれに色がついたものもある．
必要な幅に応じて割いて使用したり，側面にボンドで芯を足すこともできる．
提案システムの外観を図 3 に示す．ユーザはシス
テムを起動したらまず，直方体形状か円筒形状かを選び，外形のサイズを入力する．クラフトバンドは12 芯で 15mm であることから，1 芯の幅 w を w =15 / 12 (mm)と設定して計算した．

図 2: クラフトバンド．1 本が 12 芯で構成される．必要に応じて割いて芯数を変更することで異なった幅で作成可能．

図 3: 提案システムでの直方体形状のデザイン例．

3.1 直方体形状デザイン
直方体形状では，図 3,4 に示すように，幅 width，奥行き depth，高さ height を入力してシステムが形状を自動生成する．この 3 つの数値はキーボードの上下左右キー，シフト+上下キーでインタラクティブにバランスを見ながら変更可能である．底面を作成する際には，図 4 下図のように，後に側面の縦として使用する幅方向のクラフトバンド V と，底面のみの幅方向のクラフトバンド W，後に側面の縦として使用する奥行方向のクラフトバンド D の 3 種類が存在する．
それぞれのクラフトバンドの芯数 wV,wW, wD を設定することができる．また，底面が編み終わったら側面の縦となるクラフトバンドを立ち上げて編んでいく．側面における水平方向のクラフ
トバンド H の芯数を wH とする．初期設定は，width

クラフトバンドを利用した紙工作のためのモデリング手法= 150(mm), depth = 100(mm), height = 80(mm), wV= 8(本), wW = 6(本), wD = 6(本) , wH = 6(本)とした．
wH

側面における水平方向のクラフトバンドH

高さheightn本

幅 width

奥行 depthwD

側面の縦として使用する
奥行方向のクラフトバンドD
側面の縦として使用する
幅方向のクラフトバンドV
k本

wW
d

底面のみの幅方向のクラフトバンドW

3.3 クラフトバンドの配色機能
ユーザはそれぞれのクラフトバンドについて配色を変更することができる．通常のクラフトバンドは単一色であるため，ペイントソフトのように色を選び変更したいクラフトバンドをクリックすると反映する．よりおしゃれな作品を制作することができる
ように， 12 芯のクラフトバンドが最初から各芯に着色したものも販売されている[12]．これをテクスチャとしてカラーパレットを用意することで反映することもできるようにした(図 6)．特にカラフルなク
ラフトバンドを使用した際には使用する部位に応じて出来上がりのイメージと異なることも多いため，この機能が有用である．

m本

図 4: 直方体形状での設定可能なパラメタ．

3.2 円筒形状デザイン
円筒形状では，図 5 に示すように，半径 radius，高さ height を入力することができる．この 2 つの数値はキーボードの上下左右キーでインタラクティ
ブにバランスを見ながら変更可能である．また，より細かい制御として，底面のらせん状のクラフトバンドの芯数 wB，側面のらせん状のクラフトバンド芯数 wS を変更できる．初期設定をそれぞれ，radius =50(mm), height = 80(mm), wB = 2(本), wS = 6(本)とした．らせん状に編んでいくため，側面縦のクラフ
トバンドの本数は奇数である必要がある．また，底面のらせん状に編むクラフトバンドの芯数 wB は大きい値を設定すると曲率が高くなりすぎて曲げられないため1 ≤ w𝐵 ≤ 3とした．システムにはこういった制約を入れてあり，ユーザは意識することなくパラメタ変更をすることができる．
また，円筒形状では先をすぼめたり，広げたりしながら編んだものをつけていくことができる．図 15に側面の色が変わっているところから先の半径を1%ずつサイズを変えながら編んだ例を示した．
側面のらせん状のクラフトバンド芯数 wS

図 6: クラフトバンドのカラーパレット．

3.4 制作支援機能
また，従来の書籍などでの作り方説明図では，図4 下図のような説明図を，該当するクラフトバンドのみの色を替えて編んだものを用意して，写真を撮って作成している．本システムでは CG モデルを生成することで，ユーザがデザインしたクラフトバンドモデルに対応した作り方説明書を簡単に作成することができる．3 次元 CG で制作過程を 1 ステップずつ提示した例を図 7 に示す．図 7 上図のようにワイヤーフレーム表示ありにすることでできあがりの全体像のうち，どの部分を制作しているのかが理解しやすくなる．また，図 7 下図のように表示することで通常の書籍の作り方のような表示になる．ユー

高さ height
半径 radius

底面のらせん状のクラフトバンドの芯数wB

図 5：円筒形状での設定可能なパラメタ．
図 7：制作手順の可視化．

WISS 2018

ザは好きな方を選択可能とした．制作に必要なバンドの色と長さの提示も行い，それを元にバンドを購入して長さを切って作っていくことができる．

4

重なるレイヤーを操作する手法[13]などの物理シミュレーションを使用した手法では，衝突が多く発生し想定通りに動かすことができなかった．そこで本稿で提案するモデリング手法の実装とした．

アルゴリズム

本章では，3 次元クラフトバンドモデルの生成アルゴリズムを述べる．
4.1 クラフトバンドモデル
図 8 にクラフトバンドモデルのデータ構造を示す．
3 次元モデル M はそれぞれのクラフトバンド B をリストで管理する．クラフトバンド B はそれぞれの重なり部を単位としたスティッチ S をリストとして保持する．
図 10：テクスチャは 3 種類．

図 8: クラフトバンドモデルのデータ構造．
図 11：円筒形の底はテクスチャ座標をカーブに沿わせ使用．

法線ベクトルVn
編み方向ベクトル Vdht1-t

図 9：スティッチ S の構造．

それぞれのスティッチ S は編み形状を曲面で表現するために図 9 のように Sn 個に分割している．Sn =10 とした．持ち上げる高さ h は，h = a t (t - 1) (0 ≤t ≤1, a:定数)とした．メッシュにテクスチャを貼り付けて使用している．それぞれのスティッチ S に法線ベクトル Vn を保持し，表裏のどちらの方向へバンドをくぐらせるかを制御する．
図 10 に示したように，テクスチャの貼り方は 3種類用意した．(a)は 3 次元モデルを 12 芯並べた白黒テクスチャ画像を用意して，色を指定することで単色のテクスチャ画像を生成する．(b)は図 6 のように 12 芯配色に対応したテクスチャである．(c)は円筒形状の底部分の中央用である．実際に編んだ写真を使用した．
テクスチャ画像は芯数を 12 芯で用意し，使用するクラフトバンドの芯数 N に応じて，テクスチャ画像を，(u, v) = (0 ≤u ≤1, 0 ≤ v ≤N/12) の範囲で使用した．円筒形状の底部分はスティッチ S に対して
図 11 に示したようなカーブに沿ったテクスチャ座標を用いて図 5 左図のようなカーブを実現した．

4.2 直方体形状のデザイン
直方体形状の側面を作る際には，図 4 のように底面を作り，側面へとクラフトバンドを立ち上げる．
そのため，立ち上がりのクラフトバンドが必ず偶数本になる．そこで 1 段ずつクラフトバンドを巻いてボンドで止めていく作成方法が多い．m 段目を編み終わったら，m 段目と交互に交差するように m+1段目を編んでいく(図 12)．
ユーザの入力した数値 width，depth，height にあわせてクラフトバンドの配置を決めるための本数
m, k, n を決定していく．長方形の底面では，まず，
図 4 下図のように初期配置をする．
奥行き depth は，幅方向のクラフトバンド V, W でサイズが決定する
ため，それぞれの芯数 wV, wW を利用して，
𝑘 = argmin | 𝑘 𝑤 𝑤𝑉 + (𝑘 + 1) 𝑤 𝑤𝑊 – 𝑑𝑒𝑝𝑡ℎ |𝑘を満たすような V を k 本，W を k+1 本に決定する．
幅 width は，奥行き方向のクラフトバンド D の配置で決定する．隣り合ったクラフトバンド D の間隔（ギャップ）を d とする．ここで間隔 d は，2 w wW程度になるのが見栄えとしてのバランスがよく，また強度も保つことが経験上言えるため，
𝑚 = argmin | 𝑚 𝑤 𝑤𝑑 + (𝑚 − 1)𝑑 – 𝑤𝑖𝑑𝑡ℎ | ,𝑚𝑑 = 2𝑤𝑊を満たすような D の本数 m 本を決定する．ユーザ

クラフトバンドを利用した紙工作のためのモデリング手法のキー入力の増減では，この m の値を増減する．
高さ height は，側面のクラフトバンド H でサイズが決定するため，
𝑛 = argmin | 𝑛 𝑤 𝑤𝐻 − ℎ𝑒𝑖𝑔ℎ𝑡 |𝑛を満たすような H の本数 n 本を決定する．
一度本数を決定したあとのユーザのキーボード入力によるインタラクティブな変更ではキー入力に応じてこの k，m，n の値を増減させることとした．

図 14: 円筒形状の側面はらせん状になっている．とする．底面中心の円の半径は 4 芯で作成した場合におよそ 25mm であることからその値を使用した．
高さ方向の巻き段数の決定方法については直方体形状の際と同様のアルゴリズムを使用している．

5

図 12：直方体形状．1 段ごと終わらせて編んでいく．

4.3 円筒形状のデザイン
円筒形状の側面を作る際には，側面の立ち上がりのクラフトバンドを奇数本にして，らせん状に 1 本のクラフトバンドを下から順に巻いていく．具体的には図 13 左図に示すように，12 芯のクラフトバン
ド 2 本を 4 芯ずつに割いて，十字に重ねたあと，4芯のクラフトバンドを差しひもとして貼り付けて編み始める．これにより，側面をらせん状に編むことができる．前節のように偶数本の側面に対して 1 段ずつ編み終わっていくこともできるが，本システム
ではより手軽に編めて初心者に易しい，らせん状での編み方を採用した．図 14 に示すように，側面 m段目が終わったあと，m+1 段目に行く際に m 段目の上側の頂点を使用することでらせん状に上がる表現を実現している．
巻き段数は，ユーザの入力した数値にあわせて決定する．底面の巻き段数 nb は，nb = (r ― 底面中心の円の半径) / w wB

結果と考察システムでデザインをした形状を図 15 に示す．
これらはおよそ 5～10 分程度で作成することができた．何名かに使ってみてもらったところ，直方体形状のほうは作りたいサイズがすでにあって，直接サイズをキー入力で入れたあとは配色デザインを検討することが多い．一方，円筒形状のものは外形のバランスを見ながら高さや幅を変えてみたり，上を広げてみたり，すぼめてみたりといった操作をすることが多く，具体的に幅何 mm，高さ何 mm のものが作りたい，というよりはバランス重視なことがわかった．図 16 に実際に作成した作品を示す．

図 15：システムでデザインした結果．

6

図 13: 円筒形状の底面の作成方法．

まとめと今後の課題

我々は初心者を対象としたクラフトバンドを用いたデザイン支援システムを提案した．本システムを用いることで，知識がないとデザインできない箇所はコンピュータが支援し，ユーザがデザインしたいサイズや色合いといった見た目の部分はユーザが行うといった使い方が可能となる．例えば，縦のバンドと横のバンドを組み合わせていく際に，井桁に組WISS 2018活かして，海外展開も視野に入れている．

参考文献[1] 佐々木麗子(著)．かご編みの技法大全：編む・かがる・組む・巻く・結ぶ、編み方の技法を網羅した決定版．
誠文堂新光社．2013 年 10 月 16 日発売．
[2] 高宮紀子(著)．和のかごとざる：クラフトバンドで始める伝統の編み方 30 作品．誠文堂新光社．2015 年
6 月 10 日発売．
[3] J. Mitani and H. Suzuki: Making Papercraft Toys
from Meshes using Strip-based Approximate
Unfolding, ACM Transactions on Graphics, 23(3),259-263, 2004.
[4] X.-Y. Li, C.-H. Shen, S.-S. Huang, T. Ju, and S.-M.
Hu. Popup: automatic paper architectures from 3Dmodels. ACM Transactions on Graphics, 29:111:1–111:9, 2010.
図 16：実際に作った作品．

[5] D. Julius, V. Kraevoy, and A. Sheffer. D-Charts:
Quasi-Developable Mesh Segmentation. Comput.

み合わせる必要がある．こういった箇所を初心者のユーザが注意を払いながらサイズを計算し，実際に制作するのは容易ではない．システムが自動で提示してくれることでこれを防ぐことが可能となる．また，実際に制作をするには簡単な円筒形状のものであっても数時間かかる．実際に制作する前に色合いやクラフトバンドの残量を確認することができるといったメリットもある．
今後の課題としては，さらなる自由度の高い形状をデザインできるように検討したい．例えば，同じ直方体形状であっても，ティッシュケースの場合には取り出し口をあける必要があり，この箇所が井桁で組めるように芯数や本数をうまく調整する必要がある．これをシステムが支援できるようにしたい．
また，それぞれのバンドの芯数や配置の間隔など，可変にも関わらず提案システムでは使用できていないパラメタがまだたくさん存在する．最適化計算を行う等，今後それらのパラメタの使用を検討し，ユーザの入力したサイズにより合うようなデザインを提案したい．また，現在は図 16 のような目や鼻のパーツをシステム内ではつけることはできないが，システム内でデザインすることでより個性的なデザインが可能になるため今後検討する．
8 月に小学生を対象とした本システムを用いたワークショップを開催する予定である．実際にデザインを支援できるかの確認をするとともに、本システムの有効性を検討したい．これまで我々は子どもを対象に手芸デザイン支援システムの有効性を示してきたが，かご編みは発展途上国における重要な稼ぎの 1 つでもある．本システムは，非言語依存でしあげることで，ビジュアル提示のツールであることをGraph. Forum, pp. 581–590, 2005.
[6] Y. Igarashi, T. Igarashi, and J.Mitani. Beady:Interactive Beadwork Design and Construction.
ACM Transactions on Graphics, 31(4): 49, 2012.
[7] P. Decaudin, D. Julius, J. Wither, L. Boissieux, A.
Sheffer, and M.-P. Cani. Virtual Garments: A Fully
Geometric Approach for Clothing Design. Comput.
Graph. Forum, pp. 625–634, 2006.
[8] Y. Mori and T. Igarashi. Plushie: An interactive
pattern design for plush toys. ACM Transactions
on Computer Graphics, 23(3): 45, 2007.
[9] S. Mueller, S. Im, S. Gurevich, A. Teibrich, L.
Pfisterer,F.Guimbretiere,andWirePrint:

3D

Previews

PrintedP.

Baudisch.
forFastPrototyping. In Proc. of UIST 2014, 273-280.
[10] Y. Tao, G. Wang, C. Zhang, N. Lu, X. Zhang, C. Yao,
and F. Ying. WeaveMesh: A Low-Fidelity and LowCost Prototyping Approach for 3D Models Createdby Flexible Assembly. In Proc. of the 2017 CHI
Conference on Human Factors in Computing
Systems. 509-518. 2017.
[11] M. Takezawa, T. Imai, K. Shida, and T. Maekawa.
Fabrication of freeform objects by principal strips.
ACM

Transactions

onComputerGraphics,35(6):225, 2016.
[12] 有限会社めぐみ手芸．
https://www.rakuten.co.jp/megu123/[13] T. Igarashi and J. Mitani. Apparent Layer
Operations for the Manipulation of Deformable
Objects, ACM Transactions on Graphics, 29(4): 110,2010.