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

3B33
2018/3/5

描いたイラストのデフォルメ具合を自動で調節するツール
澁谷 美樹1,a)

鈴木 優1,b)

概要：デフォルメキャラクタは漫画やアニメに応用を利かせて扱われ，需要が高いことが伺える．しかしながら同じデザインのキャラクタをデフォルメする際にも絵を描きなおす必要があり，手間がかかってしまう．なぜならデフォルメキャラクタを描く場合には顔や体のパーツの変形・移動が必要になるからである．そこで本研究では，デフォルメキャラクタの効率的な作成を目的とし，描いたイラストのデフォルメ具合を自動で調節するツールの開発を行った．ツールの開発のために画像の変形を行うパラメータの設定を行った．その結果，4 種類のキャラクタの頭身の変形と描き込み具合の変形を行うことができた．

A tool to automatically adjust the deformation levelof the drawn illustration
Miki Sibuya1,a)yu Suzuki1,b)

Abstract: Deformed characters are popular. It mainly appeared in cartoons and anime. But it takes timeand eﬀort to draw deformed characters. This is because skills of illustration omission and exaggeration arenecessary when drawing deformed characters. Therefore, in this research, we aim at the simple creation ofdeformed characters. For that purpose, we developed A tool to automatically adjust the deformation level.
In order to develop the tool, we set parameters to deform the image. As a result, we successfully deformed
the four kinds of characters.

1. はじめにた [2]．つまり，キャラクタのデフォルメ具合を変えるには頭身の低さと線の量とを変更する必要がある．それらの工デフォルメとは対象を変形・歪曲して表現することを指程にはイラストを描き直す手間が掛かってしまう（図 1）．

し，現代ではキャラクタデザインを小さく簡略化した造形

そこで，本研究では同一キャラクタのデフォルメイラストの意味を持つ．特にスーパーデフォルメの手法で作られた作成時の効率化を目的とする．

2 頭身から 4 頭身のキャラクタはちびキャラと呼ばれる. デフォルメキャラクタは漫画やアニメ，及び CM のマスコットとして応用を利かせて扱われ，活躍の幅が広い．
手塚治虫は漫画のキャラクタのデフォルメ技法の中に「誇張」と「省略」があるとした [1]．誇張は特定の構成要素を拡大して全体のバランスを意図的に崩すことである．
省略はキャラクタを描く線の数を減らしたり，細かい構成要素を描かずに表現することである．また，高松らは誇張度を頭身の低さ，省略度を画像の粗さから測定できるとし

図 1

イラストのデフォルメの例Fig. 1 Illustration deformed example
1a)b)

宮城大学
Miyagi University，1-1Gakuen，Taiwa-cho，Kurokawa-gun，
Miyagi 981–3298，Japan
p14220487@myu.ac.jp
suzu@myu.ac.jp© 2018 Information Processing Society of Japan994

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

3B33
2018/3/5

4. イラストを自動でデフォルメするツール

2. 関連研究
デフォルメキャラクタの作成支援を目的とした研究にデ4.1 ツールの概要

フォルメキャラクタのデザイン支援 [3] や 3D モデルを用パーツの変形を手動で行うと時間がかかってしまうた

いた企画者とデザイナ間での作成イメージの共有 [4] があめ，イラストの変形を自動で行うツールを作成する．このる．しかしながら，これらは 3D モデルを使用する方法でツールではプログラムがベースイラストの画像をパーツごあり，平面のイラストを扱うものではない．また，ツールとに拡大・縮小・削除・移動し，自動でデフォルメイラスを使用した後に手を加える必要がある．本研究では平面のトを生成する．この論文ではデフォルメ具合の基準を数とイラスト作成におけるデフォルメキャラクタの作成支援をして捉えることのできる頭身に定め，頭身を低くするにつ目的とし，使用者による手直しを最低限に抑えることを目れて顔や体のデフォルメ具合を高める設定にする．今回は標とする．

ベースイラストの頭身を 8 頭身とし，2 頭身と 3 頭身とに3. 提案するデフォルメイラストの作成方法
3.1 デフォルメイラストの作成方法の概要

変形可能なプログラムを openFrameworks で開発した．

4.2 ツールの対象者

デフォルメイラストの作成方法として，顔と体のパーツ

ツールの使用者は変形対象となるベースイラストを自らを変形して使いまわす方法を提案する．イラストのデフォ用意する必要があるため，全身のイラストを描ける程度のルメ具合を変える場合，イラストのパーツの大きさや線の画力を持っていることが前提である．その上でデフォルメ多さは変わるが，パーツの数や基本的な位置は変わらない．

イラストを描くことが苦手な人や１つのイラストを作成す

そのためパーツを変形をすることでデフォルメイラストをるのに多くの時間がかかる人を対象者とする．デフォルメ作成することは可能だと考えた．また，パーツを使いまわ

イラストを描くことが苦手な人は頭身の高いイラストからす方法はパーツを自力で描き直す手間が掛からないため，デフォルメイラストを入手でき，イラスト作成に時間がか短時間でデフォルメイラストを作成することができる．こかる人はデフォルメ具合の違うイラストを描き直す時間がの論文では使いまわすイラストをベースイラストと呼び，掛からないという効果が期待できる．イラストを描く習慣

ベースイラストには頭身の高いものを用いる．

がある人であれば，イラスト作成の目的は問わない．

3.2 予備実験

4.3 使用するイラストの条件

パーツを使いまわすことでデフォルメ具合の違うイラストを作ることが可能かどうか判断するため，予備実験をツールを作成するにあたり，ベースイラストの条件を以下の 4 点定めた．

行った．CLIPSTUDIO を使用し，7.5 頭身のイラストを• 8 頭身の人物キャラクタ

パーツごとに手動で拡大・縮小・削除・移動して 2.5 頭身• 正面向きで立った状態のイラストを作成した（図 2）．例えば，目の拡大や顎の縦• 体と顔とのパーツごとにレイヤを分けて作成し，他の幅の縮小を行っている．実験の結果，パーツを手動で変形するだけで顔や体のバランスが自然な見た目のデフォルメイラストを作成できることが示唆された．

パーツに被っている部分も描く（図 3）• 頭/後ろ髪/前髪/輪郭/顎/首/胸/腹/腰/二の腕/前腕/手/太もも/ふくらはぎ/足/耳/眉/目/鼻/口のパーツに分ける

図 3
図 2

予備実験の変形結果

後ろ髪パーツの描き方の例

Fig. 3 Example of how to draw hair.

Fig. 2 Deformation results of preliminary experiment.

頭身は計算のしやすい 1 頭身刻みにし，予備実験のベースイラストと近い 8 頭身を指定する．変形後のデフォルメ
イラストの見た目の判断をする際に左右差を無くすために© 2018 Information Processing Society of Japan995

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

3B33
2018/3/5

正面向きを指定する．イラストが何頭身であるかわかりや

表 1

変数

目の横幅

eye-w

すくするために立った状態を指定する．頭身の違うイラス
トを作成する際にパーツの大きさや位置が変わってしまう

定義した変数の一例

パーツ
目の縦幅

eye-h

首の縦幅も描くことを指定する．被っている部分も描くことで，例

neck-h

胸の縦幅

breast-h

えば首を小さく変形した際にも後ろ髪を違和感なく表示す目の y 座標y-eyeることができる．

首の y 座標y-neck

胸の y 座標y-breast

後ろ髪の y 座標

y-hairため，空白を作らないために他のパーツと被っている部分

4.4 デフォルメツールの使用手順
はじめに，使用者に 4.3 節の条件を満たしたイラストを

表 2 目の大きさのパラメータ描いてもらう．次にツールが描かれたパーツごとに読み込

評価項目

横幅

縦幅

む．パーツを表示する際に背景を透過する必要があるた

8 頭身

eye-w * 1.0

eye-h * 1.0

め，パーツの読み込みは PNG 形式で行う．次に使用者に

3 頭身

eye-w * 1.1

eye-h * 1.1

作成するデフォルメイラストの頭身を選択させる．最後に，2 頭身

eye-w * 1.2

eye-h * 1.2

ツールがイラストを選択された頭身にデフォルメする．
表 3

後ろ髪の長さのパラメータ5. 自動化パラメータの設定

キャラクタ

髪の縦幅

ボブカット

5.1 自動化パラメータの決定手順

y-neck + neck-h - y-hair

ショートカットy-neck + neck-h - y-hair

パーツごとに分かれたベースイラストを用意して，パー男性

y-neck + neck-h / 2 - y-hair

ツごとに変形のためのパラメータを設定した．今回はボブロングヘア

y-breast + breast-h - y-hair

カットの女性のイラスト（図 3）を使用したため，この論文ではパラメータの設定に用いたキャラクタをボブカットと呼ぶ．ボブカットのイラストで設定したパラメータを他の 3 種類のイラストに当てはめ適応実験を行い，全てのイラストが上手くデフォルメされるようにパラメータの調整

表 4目の高さの位置のパラメータ

評価項目

y 座標

8 頭身

y-eye

3 頭身

y-eye + eye-h * 0.36

2 頭身

y-eye + eye-h * 0.58

を繰り返した．
パーツの大きさは縦幅横幅ともにベースイラストの初5.2 適応実験に用いるイラストの種類

期値に係数を掛けて設定する（表 2）．表 2 の初期値とはボブカットとは髪の長さ，顔立ち，性別などの特徴に違

eye-w と eye-h とであり，それらに掛かっている数値が係数

いのあるキャラクタのイラストを 3 種用意した．また，絵である．例えば目の 2 頭身の横幅の場合，初期値は eye-w，柄の違いを出すために 3 人の協力者に 1 種類ずつイラスト

係数は 1.2 である．パーツの大きさの設定方法の例外としを作成してもらった．この論文ではそれぞれのキャラクタて，後ろ髪の長さは体のパーツの位置に一定の長さで表示を左からショートカット，男性，ロングヘアと呼ぶ（図 4）．

されるよう，後ろ髪の y 座標と髪の伸びている位置の y 座標の差から逆算して設定している（表 3）．例えば，ロングヘアの後ろ髪の長さは常に胸の高さに表示される．パーツの x 座標の位置は，中心のパーツである首や胸などは初期値から変更せず，両脇の二の腕などのパーツは中心のパーツの横幅を基準に間隔を設定し，頭身ごとに初期値×各係数で設定する．パーツの y 座標の位置は，y-neck + neck-h

図 4

適応実験に用いるイラストの種類

Fig. 4 Types of illustrations used in substitute experimentsを基準とし，指定するパーツの上に位置するパーツまでの縦幅の合計を y-neck + neck-h に足すことで設定する．例
えば腹の y 座標は y-neck + neck-h + breast-h で求める．

5.3 設定したパラメータ定義した変数（表 1）と最終的に定めたパラメータの一部を表にして示す．なお，今回用いた座標は画面の中心を原点とする直交座標系で x 軸は右，y 軸は下がプラス方向である．

© 2018 Information Processing Society of Japan

例外として，目の y 座標は目の y 座標の初期値と目の縦幅×各係数で設定する（表 4）．これらのパラメータで変形を行った結果を図 5 に示す．

5.4 描き込み線の省略
高松らは誇張度を頭身の低さ，省略度を画像の粗さから

996

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

3B33
2018/3/5

図 7
図 5 2 頭身と 3 頭身の作成結果

Fig. 5 Results of creating 2 head and 3 head

2 頭身と 3 頭身の描き込み具合の変形結果

Fig. 7 Deformation result of drawing condition

5.6 使用するイラストの制約
ツールを使用するにあたり，現在のプログラムで正確に測定できることに加え，誇張度と省略度からデフォルメ度合いを測定できるとしている [2]．つまり 2 つのデフォルメ技法を用いることでよりデフォルメ度合いの高いイラストの作成が可能であるといえる．しかしながらパーツの拡大縮小や位置移動では省略の変形を行うことが難しい．例
外として変形後の 2 頭身の鼻のパーツのように非表示にすることはできるが，描き込み線を減らした画像の生成はできていなかった．そこで，パーツの輪郭抽出を行うことで描き込み線の省略を行う．
まず，パーツ画像から輪郭を抽出する．輪郭線とパーツの中間色を用いて新しいパーツの画像を生成することで描き込み線を消去した（図 6）．

変形出来ない特徴をまとめた．

• 複数の色を使用したパーツ• 編み込みやタトゥーなどパーツの内側の描写• 不均一な髪の長さ
輪郭線を表示した際の描画部分の色は黒以外の中間色で塗りつぶしている．そのため複数の色のパーツから中間色を取ると本来のイラストとは違う色に構成されてしまう．
パーツ内部に特徴のあるイラストについても輪郭線の抽出の際に要素が消えてしまうことや，要素の色が中間色の色味を変えてしまうためレイヤを分ける必要がある．不均一な髪の長さについては髪が体のどこまで伸びているか設定することが難しい．これらを正確に変形するには色の違うパーツや長さの違う髪を別レイヤに分けて扱う必要がある．

6. まとめ本研究では描いたイラストを自動で変形するツールの開発をパラメータの設定まで行った．結果として 8 頭身のイラストを 3 頭身および 2 頭身に変形することや描き込み線
図 6 前髪パーツの輪郭抽出の省略を行うことができた．

Fig. 6 Contour extraction of bangs

参考文献
手塚 治虫．マンガの描き方似顔絵から長編まで．光文社．
1996．
[2] 高松 耕太．嶋津 恵子．キャラクターの外見的特徴量の計測実験．研究報告エンタテインメントコンピューティング（EC），2011-EC-19，27 号，pp.1-4，2011．
[3] 工藤 菜央．岡本 直樹．茂木 龍太, 松島 渉．近藤 邦雄． 三上 浩司． 金子 満．動物をモチーフにしたデフォルメキャラクターのデザイン原案作成支援システムの開発．, 第 72回全国大会講演論文集，pp.385-386，2010．
[4] 田中 希．茂木 龍太．三上 浩司．近藤 邦雄．変形テンプ
レートを用いたデフォルメキャラクターのデザイン原案作
成支援システムの開発．映像情報メディア学会技術報告．
36 号．pp.61-64．2012．

[1]

5.5 描き込み線の変形結果
それぞれのキャラクタから描き込み線の多かった表 5 に示したパーツの変形を行った．変形の結果図 7 のように指定のパーツを変形することができたが，パーツのつなぎ目の部分にまで輪郭線が出てしまう点を改善する必要がある．
表 5

輪郭抽出したパーツ

キャラクタ

輪郭抽出したパーツ

ボブカット

前髪/後ろ髪/太ももショートカット
男性
ロングヘア

前髪/後ろ髪/太もも前髪/後ろ髪/太もも/二の腕前髪/後ろ髪/太もも/足© 2018 Information Processing Society of Japan997