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

2B-462023/3/1

模写による絵の練習支援のためのインタラクティブなメッシュガイダンスの生成
鈴木 健1,a)福里 司1,b)

五十嵐 健夫1,c)

概要：イラスト模写を行う際，概形をとらえてから細部を描き込む方法が用いられている．この考え方を元に Iarussi らは，入力画像のシルエット線を単純化したブロックインをはじめ，数種類のガイダンスを生成する手法と，模写向けのフィードバック機能を提案した．しかしこの手法は細部に対するガイダンスを行うことができず，細部の模写は未だに困難である．そこで本研究では，(1) メッシュベースのガイダンスを生成する手法と，(2) 生成用のユーザインターフェースを提案する．具体的には，入力画像に対してユーザは矩形領域を指定し，その領域内にサンプリングされた点群（基準点）から三角形メッシュを生成するものである．指定領域の三角形メッシュをガイダンスとすることで，ユーザは全体的なバランスと細部の把握が容易となり，効率的かつ高品質な模写を実現する．

1. はじめにイラストや絵画の模写は，対象（模写元）の線を（何も考えずに）描くようなコピー作業ではなく，「対象の比率やバランスをとらえる観測力」や「見たものを忠実に描く力」を身に着けるための代表的な練習方法である [1], [2], [3]．
模写の手順は主に，(1) 対象の位置や比率を測り，単純な図形化（例：長方形や三角形）を行う，(2) 各図形の中にパーツ部を描く，(3) （描いた絵の向きやサイズを変更しながら）描いた絵と模写元を比較し，誤差を適宜修正する，が挙げられる．しかし，対象物体を図形化する作業は，ユーザが「ここまで測れば形が歪まずに絵を描ける」と思えるようになるまで，比率の測定（細部の比率も含）を行わなればならず，初心者にとっては非常に難しい作業である．
このような背景の下，Iarussi ら [4] は，入力画像（模写元）から数種類のガイダンス（例：シルエット情報を近似

図 1

本システムの概要．入力画像を模写するための，選択領域（緑した多角形）を生成する手法及び，模写結果の絵のクオリ枠）に対するガイダンス (赤線) を表示する．ガイダンスによっティを評価するフィードバックシステムを提案した．しかて，ユーザは各領域の比率を把握しつつ，手元のキャンバス上しこの手法は，模写対象の大枠に対するガイダンスを生成で模写を行う．

するにすぎず，大枠を捉えれば描ける程度の画力を有するユーザの支援はできるものの，細部の比率を把握しなくてはならない初心者ユーザには不十分である．これらの課題を解決するには，模写元の細部の比率を捉えることができるガイダンス形状を再検討する必要がある．
1a)b)
c)

東京大学
suzuki-ken2104@g.ecc.u-tokyo.ac.jp
tsukasafukusato@is.s.u-tokyo.ac.jp
takeo@acm.org© 2023 Information Processing Society of Japan

そこで我々は，作図が容易な図形「三角形」に着目し，模写元の比率を測る際の基準点をサンプリングする手法及び，三角形メッシュを用いたガイダンス手法を提案する．
更に，ユーザの画力に合わせてガイダンスの詳細度を調整できる機能（ガイダンスを生成する矩形領域やサンプリング点数など）を有するユーザインターフェースを同時に提案し，ユーザテストを通して有用性を検証する．

662

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

図 22B-46
2023/3/1

提案インターフェース (右) とユーザが模写をするキャンバス (左)．

評価するための形状比較の機能を搭載したユーザインター

2. 関連研究
近年，“全く絵が描けないユーザ” がテキストだけで画像を自動生成する技術が注目されている（例：DALL-E2 やMidjourney，Stable Diﬀusion 等）．これらの技術は，大量の試行錯誤から，人間の考え付かなかったアイディアを生み出す可能性を秘めている一方で，言語での表現が難しいニュアンス・細部のこだわりを再現するのは至難の業である．ユーザが満足するような作品を生成するには，人間による判断や修正が必要不可欠な状況にある．つまり，これからの画像生成の時代においても，各個人にはイラストや絵画に関する知識や技術，それに伴う経験を高めることは非常に重要であると言える．

フェースを開発した．このシステムではトレース手法と異なり，ユーザが模写元の概形を捉えやすくすることを目的としているため，模写元の画像全体からガイダンスを生成している．しかし，空間把握能力が不十分なイラスト初心者にとっては，画像全体を対象にしたガイダンスは細部の比率までを把握することは難しく,（ある程度）内部領域の比率などを可視化しなければならない．
そこで本研究では，Iarussi らのシルエットベースの手法を拡張し，模写対象の細部の比率をとらえることができるガイダンス生成方法を検討した．

3. 提案手法

ユーザの絵を描く作業自体を支援する方法として，デー入力画像（模写元）の画像特徴量を基に，比率を測るたタベースのイラストや自動生成結果をガイダンスとする手めの基準点及びガイダンスの作成方法について紹介する．

法が挙げられる [5]．例えば Shadow Draw [6] は，絵を描具体的な手順は以下に示す．

く際のトレース作業に着目し，キャンバス上に描いたストローク情報（描き途中）を基に，データベースから類似画

3.1 ガイダンス生成手法

像の検索及び（背景画像として）表示することで，（ユーザ模写元の矩形領域（入力）の概形を捉えるための基準点が描きたいと推測された）イラスト全体のバランスを整えを決定するために，以下の三つの特徴量を組み合わせるこやすくする機能を実現している．また，SketchRNN [7] はとで各ピクセルの重要度を計算する．

現在のストローク線を基に，次のストロークを予測する機

一つ目はエッジ上にあるピクセルの重要度を高くするた能を提案した．このようなトレース機能は「綺麗な線を引めの項である．今回は，グレースケールに変換した入力イく練習」や「細かい部分の表現を覚える」際には非常に効

ラストに LoG フィルタを適用することで得られた勾配情果的であるものの，空間把握能力（全体のバランスをとら報を用いた（勾配の値を 0 から 1 になるように正規化してえる力）や再現力（見たものを忠実に描く力）といったスいる）．二つ目は，輪郭線の特徴的な箇所を取得するためもキルの向上にはつながらない点が課題となっている．のである．具体的には，Suzuki らの手法 [8] によって取得

Iarussi [4] は，空間把握能力を向上させるための練習法した輪郭線の点列に Douglas-Peucker アルゴリズム [9] をである「模写」に着目し，入力画像（模写元）から数種類適用し，単純化された輪郭線（点列）の頂点座標に一定ののガイダンスを生成する機能と，模写結果のクオリティをスコア 0.5 を割り当てた．三つ目は，イラスト内の各ピク© 2023 Information Processing Society of Japan663

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

図 3

ユーザテストで使用した模写用イラストのペア．

2B-46
2023/3/1

図 4

ベースラインのユーザインターフェース

4.1 手順
セルと背景領域との距離を表すものである．今回は，前景はじめに被験者に対して，我々が事前に用意した 8 枚の領域の各ピクセルを中心に，一辺が矩形領域の短辺の 0.7

イラスト (図 3) を難易度順に並べる「並べ替えタスク」を倍の長さとなる正方形ウインドウを作成する．得られたウ与えた．次に被験者は，並び替えタスクで用いたイラスト

インドウ中で背景領域と同色のピクセル数をカウントしたの 2 種類を，提案手法とベースライン手法で生成されたガ（最大値で正規化している）．以上の手順で得られた特徴量イダンスを用いて模写してもらう「模写タスク」を行った．の重み付き線形和を各ピクセルの重要度とした．

各被験者に与えられるイラストのペアは図 3 のように設定得られた各ピクセルの重要度を用いて（比率を図るためしている．但し，提示される 2 枚のイラストのうち「どちの）基準点を決定する．具体的には，(1) 重要度が最も高いらのイラストを先に模写するか」「どちらの手法を用いるピクセルの位置にサンプリング点を配置し，(2) 近傍ピクか（提案手法 or ベースライン）」の割り当て方は 4 通り存セルにサンプリングされないようにペナルティ値を付与す在するため，一つの画像ペアに対して被験者を 4 人割り当ることで重要度を更新する．この処理をユーザが指定したて，全ての組み合わせを網羅した．

頂点数になるまで繰り返すことでサンプリングを行った．

ベースラインとして，Iarussi [4] のブロックイン（= シ得られたサンプリング点に対し，制約なしドロネー三角ルエット線を単純化し，多角形ポリゴンを生成する）の機

形分割アルゴリズム [10] を適用することで三角形メッシュ能を有するユーザインターフェースを作成した (図 4)．こベースのガイダンスを自動生成する．のインターフェースでは，シルエット線の単純化アルゴリズムのための頂点数の調整用スライダを追加している．

3.2 ユーザインターフェース

提案手法及びベースラインのユーザインターフェース

上記の機能を搭載したユーザインターフェースを構築しはいずれも MacBook Pro（2.3GHz 8-Core Intel Core-i9た (図 2)．本インターフェース上では，ユーザは入力したRAM32GB）上で実行し，模写を行うキャンバスとして模写元の画像（画面左）に矩形領域を指定し，その領域にiPad Pro を用いた．

対するメッシュガイダンスを表示することができる（画面右）．また，ガイダンス生成用のパラメータを調整するた

4.2 結果めのスライダ操作を用いることで，ユーザの画力にあわせ図 5 に並び替えタスクの結果を示す．この結果から，我々たガイダンスを生成することができる．更に，注目領域とが事前に用意した 8 種類のイラストのうち，少数かつ単純各パラメータに対するメッシュデータをキャッシュするこな図形（例：球体など）で構成されるイラストは難易度がとで，インタラクティブな速度での生成を実現している．

低く，人物の全身画（+動物）といったイラストは難易度

4. ユーザテストが高いことがわかった．以下，それぞれの難易度（順番）に応じた模写結果の傾向を分析する．

提案システムの有用性を検証するために，16 名の被験者

図 7 に被験者による模写結果と入力画像（模写元）を重（男性 12 名，女性 4 名）を対象とするユーザテストを実施

ねた結果を示す．各被験者について模写結果のうち，左側した．被験者の年齢層は 22 から 36 歳，利き手は右利き 13が提案手法，右側がベースライン手法を用いた結果である．

名，左利き 2 名，両利き 1 名であった．また，事前に各自また各イラストのペアの上段は，はじめに提案手法を利用の絵を描く経験が，「1：義務教育程度」，「2：趣味で絵を描し次にベースライン手法を用いた被験者，下段はその逆順く程度」「3：専門教育を受けた or 仕事にしている or 定期で手法を用いた被験者である．この結果から，難易度の低的に絵を描く」のいずれに属するかを回答してもらった結いイラスト（レモンやペンギン）では，提案手法とベースラ果，1 は 11 名，2 は 4 名，3 は 1 名となった．

イン手法による模写結果に大きな差がないことが分かる．

© 2023 Information Processing Society of Japan664

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

図52B-462023/3/1

並べ替えタスクの結果． 平均順位が高い (値が小さい) ほど難易度が低いことを意味する．

謝辞

模写用イラストは，ベクターシェルフ*1 の「男性とシェパード」「愛犬と散歩中の女性」「プチトマト」「レモン 3 個」
，いらすとや*2 の「ペンギンのアナウンサーのイラスト」「ごろごろする猫のイラスト」，ちょうどいいイラ「メダリスト (男)スト*3 の「キャリアウーマンのイラスト」のイラスト」を使用させていただいた．本研究は JSPS 科
研費 19K20316 の支援を受けて実施されたものである.
図6

模写結果に対するユーザの満足度．（上）提案手法，(下) ベースライン．

参考文献
[1]

その一方で難易度が高いイラスト（人物画）の場合，提案[2]手法を用いた模写結果は全体の比率の誤差が少ないことが分かる．また，被験者のコメントとして，細部情報を多く含む難易度の高いイラストは，シルエット情報だけでは内[3][4]部のバランスをとることができなかったとの回答が多かった．このことから，提案手法は細部情報が多く含まれる複雑なイラスト模写においてより有用な結果が得られること[5]が予想される．
模写結果に対する主観的な満足度について 5 段階リッカート尺度でアンケートを行った結果を図 6 に示す．この[6]

結果，提案手法による模写結果の満足度（平均）は 4.19 であったのに対して，ベースラインは 3.69 であった．更に，ベースラインに「5 結果に満足している」と回答した被験者は 1 名だったのに対し，提案手法は 6 名であったことから，提案手法による模写への満足度が高いことがわかった．

[7]
[8]

また，提案システムの System Usability Scale [11] は73.59（平均）であった．この結果は，Bangor ら [12] の基[9]

準で良好な評価を得られていると言える．

5. まとめ本研究では，イラストや絵画の概形をとらえるための[10]

メッシュベースのガイダンスをインタラクティブに生成する手法を提案し，ユーザテストによって有用性を検証した．
検証した結果，被験者はシルエット線のみを用いたガイダンス方法（ベースライン）と比較し，提案手法に対する満[11][12]

足度が高かった．また，各ユーザが描いた模写結果を模写元と重ねて比較した結果，（比較的難易度の低いイラストについては大差がなかったものの）比較的高難易度なイラストに対しては，全体形状の誤差が少ない模写ができることわかった．

© 2023 Information Processing Society of Japan

*1
*2
*3

室井康雄： アニメ私塾流 最速でなんでも描けるようになるキャラ作画の技術，株式会社エクスナレッジ (2017).
室井康雄： なぞるだけで絵がうまくなる! アニメ私塾式
キャラ作画上達ドリル，宝島社 (2020).
押山清高： 押山式作画術，株式会社 KADOKAWA (2021).
Iarussi, E., Bousseau, A. and Tsandilas, T.: The Drawing Assistant: Automated Drawing Guidance and Feedback from Photographs, ACM Symposium on User Interface Software and Technology, pp. 183–192 (2013).
Huang, Z., Peng, Y., Hibino, T., Zhao, C., Xie, H.,
Fukusato, T. and Miyata, K.: DualFace: Two-Stage
Drawing Guidance for Freehand Portrait Sketching,Computational Visual Media, Vol. 8, No. 1, pp. 63–77(2022).
Lee, Y. J., Zitnick, C. L. and Cohen, M. F.: Shadowdraw: real-time user guidance for freehand drawing,
ACM Transactions on Graphics, Vol. 30, No. 4, pp.
27:1–27:10 (2011).
Ha, D. and Eck, D.: A Neural Representation of Sketch
Drawings, ArXiv e-prints (2017).
Suzuki, S. and Abe, K.: Topological structural analysis
of digitized binary images by border following, Computer
Vision, Graphics, and Image Processing, Vol. 30, No. 1,pp. 32–46 (1985).
Douglas, D. H. and Peucker, T. K.: Algorithms for theReduction of the Number of Points Required to Represent a Digitized Line or Its Caricature, Cartographica:
The International Journal for Geographic Informationand Geovisualization, Vol. 10, pp. 112–122 (1973).
Springel, V.: E pur si muove: Galilean-invariant cosmological hydrodynamical simulations on a moving mesh,
Monthly Notices of the Royal Astronomical Society,Vol. 401, No. 2, pp. 791–851 (2010).
Brooke, J.: SUS: A ’Quick and Dirty’ Usability Scale,
CRC Press, Boca Raton, FL, USA (1996).
Bangor, A., Kortum, P. and Miller, J.: Determining
what individual SUS scores mean: Adding an adjective
rating scale, Journal of usability studies, Vol. 4, No. 3,pp. 114–123 (2009).
https://vectorshelf.com/
https://www.irasutoya.com/
https://tyoudoii-illust.com/

665

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

図 72B-46
2023/3/1

模写結果．各被験者に対して（左側）提案手法，（右側）ベースライン手法を意味する．
また，各イラストのペアに対し，（上段）はじめに提案手法，次にベースライン手法を用いた被験者，（下段）その逆順で手法を試した被験者による結果を示す．

© 2023 Information Processing Society of Japan666