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

1B-57
2020/3/9

二次元アイドルの衣装デザインを用いた小物制作支援システムの提案
計良 美来†1

沖 真帆†1

塚田 浩二†1

概要：近年, 二次元アイドルという文化が登場している. 二次元アイドルを創作を通して応援する活動も盛んであり, 例えばアイドルの衣装をもとに小物制作が行われている. 本研究では, 主に裁縫初心者を対象として二次元アイドルの衣装デザインをもとにした小物制作を支援するツールを提案する. 入力した衣装画
像に対し画像処理を行うことでデザインの単純化や編集を支援し，作成したデザイン／縫製補助用の目印を含む型紙の生成と出力を行うことで，小物制作の負担を軽減することを目指す．

1. 背景
近年, 二次元アイドルという文化が登場している. 二次
元アイドルとは，図 1 左1 のように漫画やアニメ，ゲームなどに登場する架空のアイドルのことである．二次元アイドルのファンが創作を通して応援する活動も盛んであり，例
えばアイドルの衣装をもとにした衣装や小物の制作が行われている．たとえば，衣装を再現しファン自身が身に着けるコスプレや，衣装をモチーフにしたデザインのペンライ

図 1

二次元アイドルと声優によるライブの例

ト用ポーチが存在する．後者は，二次元アイドルの声を担当する声優たちによって行われるライブ（図 1 右2 ）に参加する際に所持し，ライブ中に使用するペンライト等を収納する．図 2 は実際に二次元アイドルの衣装3 をもとに制作されたペンライトポーチの例である．この制作には，デザイン（衣装のデフォルメ），布の選定，裁縫といった作業が必要であり，初心者には難易度が高い．本研究では，裁縫初心者を対象として二次元アイドルの衣装デザインを用いた小物制作を支援するシステムを提案する．本論文では，もとになる衣装を衣装デザイン，制作物を小物，布に縫い付けるリボンやボタンを装飾と定義する．

2. 関連研究図 2

衣装デザインと完成した小物本研究の関連研究について，「二次元図形のデフォルメ
手法」「型紙の制作支援」という観点から紹介する．

前者には，菅沼らのデフォルメ地図の自動生成システ
ム [1]，湯浅らのスケッチベースのデフォルメデザインシス

†1
1
2

3

現在，公立はこだて未来大学
IDOLM ＠ STER SideM.
https://imas-sidem.com
IDOLM ＠ STER SideM 3rdLIVE TOUR〜GLORIOUS ST@GE ！〜.
https://cutt.ly/qrq4ktH【4th Anniversary】牙崎 漣+（左）. https://cutt.ly/0rq4Tpq，
THE IDOLM@STER SideM PRODUCER MEETING 衣装
天ケ瀬冬馬（右）. https://cutt.ly/jrq4Krs© 2020 Information Processing Society of Japanテム [2] が挙げられる．菅沼らは案内図や鉄道路線図のような電子地図から対象を抽出して形状を簡略化した上で，特定の方向で揃えることでデフォルメを行っている．湯浅らの研究では，使用者が描いた枠に合わせて画像を膨張させることで，直感的にデフォルメできるシステムを提案し384

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

1B-57
2020/3/9ている．本研究は，対象が地図や画像ではなく衣服であるという点で異なっている．
後者にあたる佐藤らの型紙作成ツール [3] では，型紙の作図，補正をコンピュータ上で行うことで型紙制作の難易度を下げるツールを提案している．この研究は作品の制作
難易度を下げるための支援として型紙制作に着目しているが，本研究ではデザイン生成，布選びなどにも焦点を当て，二次元アイドルの衣装をモチーフとした小物制作における一連の作業の支援を対象とする．

3. 提案

図 3 システム構成図

本研究では, 主に裁縫初心者を対象として二次元アイドルの衣装デザインをもとにした小物制作を支援することを目指す．通常の小物制作の手順は以下の通りである．

( 1 ) デザインのもととなる衣装を選ぶ( 2 ) 衣装デザインを小物用にデフォルメする( 3 ) 衣装にあわせた布や資材を用意する( 4 ) 型紙を作る( 5 ) 型紙に合わせて布を裁断する

図 4 射影変換の一例. 画像を読み込み（左）, 衣装部分を選択して( 6 ) 布を縫製し装飾をつける（中央）, 正面画像を作成する（右）.

これらの手順の中で，初心者にとって難しいと考えられる
利用手順を述べる．ユーザはまず，手本にする二次元アのは「2，3，4，6」の 4 項目である．
本研究では，上記の問題解決策として以下のような機能を持つシステムを提案する．

イドルの衣装の画像を用意し，システムに入力する．シス
テムが画像処理部で画像を変換し，エディタに表示する．

a.

デフォルメを半自動的に行う

ユーザはエディタにて，デザインの修正を行う．編集完了

b.

布や資材のデータベースを用意する

後，型紙テンプレートの中から使用したい型紙を選択し，c.

型紙のテンプレートを用意する

印刷用データとともにシステムで出力する．この出力デーd.

布上に直接型紙や縫製の目印を出力する

タを，UV プリンタ等の印刷機を用いて布に直接印刷する．

1 つ目は，二次元アイドルの衣装の一部を選択し，半自動その後，従来の方法と同様に，布の裁断／縫製や装飾の追的にデフォルメデザインを生成する．2 つ目は，布や素材加を手作業で行う．素材データベースは生成したデザインのデータベースを作成し，名前や質感，どのような衣装にを印刷する布や取り付ける装飾を選定する際に使用し，色合うかを検索できるようにする．3 つ目は，事前に様々ななどを指定して検索を行うことで布選びを補助する．

型紙を用意し，テンプレートとして使用できるようにする．

4. 実装

4 つ目は，布上にデフォルメした衣装デザインや型紙，装システムの実装について，画像処理部とエディタの実装

飾の目印を直接印刷することで，縫製を支援する．

を中心に述べる．

3.1 システム設計
前述の 4 つの機能を備えたシステムの構築を目指す．た4.1 画像処理部

だし，多様かつ複雑な衣装画像からデフォルメしたデザイ

画像処理には Python の OpenCV ライブラリを使用す

ンを作成することは容易ではない．そこで，画像の下処理る．まず使用する画像を読み込み，デザイン生成に使用しをシステムが半自動で行い，実践的なデフォルメや作り込たい範囲の四隅をマウスクリックで指定する．そして，選みはユーザ自身が手動で編集できるシステムから試作す択した部分に射影変換を行うことで，正面から映した画像

る．システム構成図を図 3 に示す．

を生成する (図 44 )．

本システムは，画像からデフォルメに必要な補正や領域

次に，射影変換した画像をもとに領域分割を行う．射影抽出等のための下処理を行う「画像処理部」，処理された画

変換後の画像は，多数の線や多階調の色で構成されており，像を元にしてデザインの詳細を編集する「エディタ」，型紙

このままではデザインを修正するための作業が複雑になや布材のデータベースを検索しエディタに渡す「資材デーる．そこで，修正作業をシンプルにするために，システム

タベース」で構成される．

4© 2020 Information Processing Society of Japan牙崎漣+. https://cutt.ly/drq4mS6385

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

1B-57
2020/3/9が領域分割を行い，ユーザがエディタにて領域を選択／結ることが可能であるため採用した．UV プリンタはフルカ

合して単純化させる方法を取る事にした．領域分割は輝度ラーで高精細に印刷が可能であるため，印刷したデザインをもとに近傍の画素との境界を小さい順に判定して結合しをそのまま小物デザインとして活用することもできる．図ていく方式で，領域数 n と分割条件 k を指定して行う [5]．

2 のような装飾のある作品を作成する場合は，印刷したデ

実際に画像を領域分割した例を図 5 に示す．また，領域数

ザインを下絵として，その上に手作業で装飾を縫いつける．

と分割条件を指定するにあたり使用する画像や値を変えて

図 7 右に，システムで作成したデザインを UV プリンタで検証を行った．検証の詳細は 5 章に記載する．

印刷した例を示す．図 8 は印刷した布をもとにポーチを制作したものと，服の部分に別の布を縫い付けたものである．

4.2 エディタ
画像処理終了後に，画像エディタを用いて領域を選択し，不必要な部分の削除や統合，縫製補助用の目印付けなどの編集作業を行う．まず，ユーザはマウスクリックにより，

5. 予備実験
入力画像を領域分割するために必要なパラメータ条件を調査する予備実験を行った．

分割された領域の選択と結合（塗りつぶし）を行う．その後，ノイズ除去フィルタ（例：膨張，収縮フィルタ）をか

5.1 目的け，輪郭線を抽出／描画して境界線を整える．最後に，描ユーザが必要な範囲を選択する工程において領域分割を画ツールで任意の色やサイズの線でデザインを修正し，ト行うにあたり，プログラム内で領域数と分割条件を設定しリミングを行う．図 6 に塗りつぶし例，図 7 左に修正後ておく必要がある．領域数は，1 枚の画像を似た特徴を持のデザインの一例を示す．デザインの編集後，型紙テンプ

つ複数の領域に分割する際，分割する数を定める値である．

レートを選び，型紙の正面パーツのサイズに合わせてデザ

分割条件は境界の結合の起きやすさを表し，大きいほど境

インを変形させる．型紙テンプレートの作成や調整方法に界の結合が起きやすく，領域も大きくなりやすい．領域分

ついては，フリーのアパレル CAD である洋裁 CAD[4] を割の結果はこの後の編集操作に影響するため，色の同じ領参考にした．最終調整が完了したら，印刷用データを出力域ごとに分割できるような設定が望ましいと考える．そのする．

ため，領域数や分割条件のパラメータを変えてプログラムを実行し，出力された結果を検証した．

4.3 デザインの印刷本研究では，UV プリンタを使用して生成したデザイン

5.2 方法と結果を型紙とともに布に印刷する．UV プリンタとは紫外線硬まず，図 4 の衣装画像を用いて，領域数 n のパラメータ化インクを用いたインクジェットプリンタであり，通常の調整を行った．領域数は 10 から 30 までを 5 刻みで検証しプリンタでは印刷できない布などの素材に対しても印刷す

た (図 9)．この時分割条件 k は全て 200 に統一してある．
出力画像をみると，n=10 の出力画像には分割されてない部分（黒色の部分）が多いことがわかる．そのため，領図 5

射影変換した画像に対し領域分割した結果（領域数 n= 25, 分割条件 k = 1000）
図 7 生成したデザイン (左) を, UV プリンタで印刷 (右).

図 8
図 6

塗りつぶしの一例. 領域を選択し（左）, 塗りつぶす（右）.

© 2020 Information Processing Society of Japan

印刷した布の使用例. ポーチ (右) と上から別の布を縫い付けたもの (左).

386

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

1B-57
2020/3/9

図 11

検証に使用した画像

図 9 領域数 n のパラメータの値と出力結果

図 12 領域選択に適すると考えられる分割条件 k と出力結果

図 10 分割条件 k のパラメータの値と出力結果

域数が少ないと服や肌などの異なるパーツ同士も結合されてしまい，使いたいパーツを選択することは難しい．また，

n=30 の出力画像は同じパーツ内（肌など）で領域が分かれているため，選択に手間がかかると考えた．こうした理由から，分割条件のパラメータ調整は領域数を 25 に固定
して行う．

図 13

次に，分割条件 k のパラメータ調整を調査した．k の値

領域数／分割条件の調整用インタフェースの一例

は 100 から 1000 までを 100 刻みで設定した．結果を図 10た．そこで，図 13 のように画像に応じて領域数や分割条に示す．この結果から，分割条件が k=100 のように小さい

件を調整できるインターフェースを開発する方針として，と，領域数が小さい時と同じように分割されていない部分

現在システムの改良を進めている．

があるとわかる．分割条件が k=900, 1000 のように大きくなると未選択の黒い領域がなくなり，領域が選択しやすいと考えた．

6. 今後の取り組み
今後は，素材データベースとの連携等の機能追加や操以上の結果をもとに別の画像 12 種類でも検証を行った

作性向上の改良を進める．また，本システムを使って小（図 115 ）．実験者の主観にはなるが，「衣装のパーツすべて

物制作を行う一連の作業を対象としたユーザ評価を行い，に領域割り当てがされる」「領域の境界がなめらか」というフィードバックを得ながら改善していく予定である．

観点で，領域選択に適すると考えた出力結果と分割条件 kを図 12 に示す．この時，領域数は 25 に固定し分割条件の参考文献

値のみを変化させた．

[1]

5.3 考察[2]

検証の結果，ユーザが画像を編集しやすい領域数・分割条件の値は，元画像の柄や複雑さに依存することがわかっ
5【ウエディング】【Bullets】【アーティステック】大河タケル.
【サイバネティクス】【気まぐれな旋風】牙崎漣.
【キラ☆姫】【SP@RKLING TIME】水嶋咲.
【スマイルマジック☆】【ORIGIN@L PIECES】ピエール.
【ヴァンパイア伯爵】握野英雄. 【ハロウィン 2015】九十九一希.

© 2020 Information Processing Society of Japan

[3]
[4]
[5]

菅沼優子，根岸博康，川又武典: 図形のデフォルメ技術，
三菱電機技報 2011, Vol. 85, No. 11，pp．653-656.
湯浅海貴，中山雅紀，藤代一成: Swellart:制約付き膨張によるスケッチベースのデフォルメデザイン. 芸術科学会論
文誌. 2017, Vol. 18, No. 4, pp. 102-109.
佐藤玲奈，鈴木優: 手軽な服作りを可能にする型紙作成ツール. インタラクション 2015 論文集.2015, pp621-622.
洋裁 CAD：入手先 ⟨https://洋裁.net/⟩(2019.7.19).
Felzenszwalb, P.F. and Huttenlocher, D.P: Eﬃcient
Graph-Based Image Segmentation, International Journal of Computer Vision, 2004, 59(2), pp.167-181

387