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

A4-0
2014/2/27

1 枚の画像から簡単にパラパラ漫画を生成する「かんぱら」システムの提案
橋本真琴†1

小川克彦†2

近年普及し始めた電子書籍は，利便性に長けている一方，紙の書籍ならではの面白さを失ってきているように感じる．
紙の書籍の面白さの一つとして，紙の端にパラパラ漫画を描いて楽しむことがある．そこで，このパラパラ漫画を電子書籍においても実現し，電子書籍の楽しみのひとつにしたいと考えた．しかし，紙と違ってコンピューターで絵を描くことは難しい．そのため，簡単にパラパラ漫画を作成できる「かんぱら」システムを構築した．本稿では，「かんぱら」システムを使ったパラパラ漫画の作成方法と作成条件について述べる．

Proposal of The “KANPARA” System, Which Make Flip Book fromOne Piece of Image Easily.
MAKOTO HASHIMOTO†1

KATSUHIKO OGAWA†2

Recently the use of electronic books has begun to spread. It brings convenience and flexibility but other aspects of interactingwith paper books are lost. One of the fun uses of a paper book is drawing flip books on the page corners. Therefore it wasconsidered in this report the case of flip books among electronic books and the possibility to make it for that kind of media.
However, it is difficult to draw a picture on a computer like it is on paper. Consequently the "KANPARA" system was made,which makes flip books easily out of an electronic source. In this report, it is explained how the method was developed and how
flip books are made using the "KANPARA" system.

1. はじめに「かんぱら」の意味は，“簡”単に“パラ”パラ漫画を作ることができるに由来している．

近年，スマートフォン，タブレット端末が普及し，電子

なお，「かんばら」システムを使って作成したパラパラ

書籍が広く活用されるようになっている．電子書籍は手軽

漫画の電子書籍への表示方法については別途報告する．

に使え，便利であるが，本ならではの面白さを失ってきているのではないかと考える．例えば，紙の書籍の面白さのひとつとして，紙の端に絵を描いてパラパラ漫画を作るということがある．そこで，電子書籍にも紙の書籍の面白さを持たせるため，電子書籍にパラパラ漫画を表現したいと考えた．しかし，紙と違いコンピューター上で絵を描くことは難しい．そこで，絵を描くことが苦手な人でもパラパ
ラ漫画を楽しめるために，簡単にパラパラ漫画を作ることができる「かんぱら」システムを制作した．
本稿では，この「かんぱら」システムのコンセプトを述
べ，1 枚の画像を変形する作成アルゴリズムと作成例を紹介し，パラパラ漫画の表現について考察する．

2. 「かんぱら」システムのコンセプト「かんぱら」システムのコンセプトを図 1 に示す．「かんぱら」システムでは，1 枚の画像を変形させて複数の画像を生成し，それらを順に並べることでパラパラ漫画を作成する．例えば，各画像を電子書籍の端に配置し，電子書
籍をめくったときに，あたかも絵が動いているようする．

†1 慶應義塾大学総合政策学部
Keio University Faculty of Policy Management†2 慶應義塾大学環境情報学部
Keio University Faculty Environmental Information© 2014 Information Processing Society of Japan

図 1
Figure 1「かんぱら」システムのコンセプト
Concept of the “KANPARA” system.

271

3. パラパラ漫画の生成アルゴリズム「かんぱら」システムには，パラパラ漫画を生成する 2
つのアルゴリズムがある．一つは，1 枚の静止画像を XYZ
軸中心に回転させることで変形させる回転射影方式である．
もう一つは，予め作成された動きのパターンに画像を当て
はめて変形させるパラパラ動きパターン方式である．

画像は，キー操作によって，X 軸，Y 軸，Z 軸それぞれを中心に回転し，画像を変形させる．図 2 の下図が変形させた状態に当たり，Y 軸を中心に回転した状態を示している．画像が Y 軸方向に回転したことで，パソコン画面上に表示される画像は右図のように元の画像より魚の尾が手前に出たように変形したように表示される．
変形させた画像はキー操作によって保存できる．他の操3.1 回転射影方式
紙で表現するパラパラ漫画の作品に多く用いられている表現として，登場人物の縦横の移動，登場人物の腕を上げるなどの体の変形，登場人物の画面に向かって前方後方への移動が見うけられる[1]．これは平面的な動きと，奥行を感じられるような動きとに分類される．平面的な動きは，
登場人物の縦横，前後への移動によって表現され，画像の拡大縮小と上下左右の移動によって表現可能である．しかし，この方法では，奥行を感じさせる動きである登場人物の体の変形は表現できない．一方，画像を回転することによって変形させる方法では，登場人物の体の変形も可能になる．そのため，画像を XYZ の 3 軸を中心に回転させる
ことで変形させる回転射影方式を作成した．これにより上下左右の移動に加え，平面的な動きも可能にしている．
回転射影方式のアルゴリズムでは， 図 2 に示すように，元の静止画像がパソコン画面上に 3D で表示されるとともに，それを XY 平面に射影された 2D の画像が表示される．
図 2 左は，画像の 3D 表示，右が 2D 表示である．

作としては，画像を最初の位置に戻すリセット，画像の上下左右の移動がある．画像の変形を繰り返し，画像を保存することで，1 枚の画像から変形した複数の画像を作成し，パラパラ漫画を作成する．
3.2 パラパラ動きパターン方式
パラパラ動きパターン方式は，動かしたい画像と，その画像の動きをあらかじめ登録されている動きのパターンから選択し，半自動でパラパラ漫画を作成する方式である．
図 3 の上図は，選択した画像と，あらかじめ作られた動きのパターンを表している．一連の動きのパターンは，回転射影方式の機能とともに，画像の伸縮と画像を折る機能を順次適用して作成される．
図 3 の動きは，蝶々が羽ばたく動きを表しており，画像が Y 軸を中心に開閉するようにあらかじめ動きを作成している．決められたキーを押すことによって，あらかじめ作
られた動きに沿って画像が変形する．回転射影方式と同様に，変形した画像をキー操作で保存することでパラパラ漫
画を作成する．図 3 の下図の 3 枚の画像が変形された画像
に当たる．

図 2
Figure 2

回転射影方式による画像の変形の仕組み
Structure of the transformation of the image by therotary projection method.

© 2014 Information Processing Society of Japan

図 3

パラパラ動きパターン方式による画像変形の仕組み

Figure 3

Structure of the image transformation by the patterntransformation.

272

変形のパターンは，図 3 の蝶々が羽ばたく動き，蛇がうねって進行する動き，横から見て魚が泳ぐ動き，人間の顔のパーツの動き，煙が昇っていく動き，旗がはためく動き，
横から見て馬が走る動き，髪がなびく動き，鳥が羽ばたく動きなどのいくつかを作成している．動きの種類は文献[2][3][4]を参考に，アニメーション作成において良く用いられる動きから選択した．
図 6
3.3 パラパラ漫画の描写

Figure 6

作業画面 1Work screen 1.

「かんぱら」システムで画像を変形して複数の画像を作成し保存することで，複数の画像を生成した．変形した画像は，フォルダに番号を振って保存される．これらの画像を順に並べてパラパラ漫画のように表示する仕組みを制作した．図 4 は，仕組みのイメージ画像である．

図 7
Figure 7

図 4

作業画面 2Work screen 2.

保存された画像をパラパラ漫画のように表示する仕組みのイメージ画像

Figure 4

Image picture of structure displaying a saved image
like flip book.

4. パラパラ漫画を作成手順「かんぱら」システムはソフトウェアによって実現され

図 8
Figure 8

保存された画像
Image which was stored.

る．
システムを起動すると，図 5 に示す画像の選択画面が表示される．画像を選択すると，図 6 に示す選択した画像が5. パラパラ漫画の生成例映し出された作業画面が表示される．この作業画面でキー

ここでは「かんぱら」システムを使って作成したパラパ

操作により画像を変形できる．図 7 はキー操作によって画

ラ漫画の例をあげる．図 9 は，鳥の画像を選択し，鳥が羽像を変形させた状態である．変形して保存した画像は図 8

ばたく動きのパラパラ動きパターンに当てはめて複数の画のようにフォルダに保存される．

像を作成したものである．図 9 の左上の図は，鳥が描かれた元の画像である．各鳥の右横にある図形の画像は，パラ
パラ動きパターンの動きのパターンを表している．この動きに沿って，元の画像の鳥の羽が上下に動いて見えるように変形している．
図 10 は，蛇の画像を選択し，蛇がうねって進行する動きのパラパラ動きパターンに当てはめて複数の画像を作成したものである．図 10 の左上の画像は，蛇が描かれた元の画像である．各蛇の右横にある図形の画像は，外側の淡図 5Figure 5

元の画像の選択

Choice of the original image.

© 2014 Information Processing Society of Japan色の四角形は画像が表示される画面全体を表し，内側の濃色の四角形はパラパラ動きパターンの動きを表している．

273

ン方式の人の顔のパーツの動きでは目と口を独立して動かすことができる．
二つ目は，元の画像自体を変えることはできないということである．これは，人が歩いているような動きであり，例えば，元の画像では人がこちらから見て左向きで左足が前に出ている画像だった場合，右足を前に出すというように画像自体を変えることはできない．
三つ目は，変形する画像の種類によっては，動きが不自然になるものがあるということである．画像にも様々な種類があるため，適した画像を選択する必要がある．例えば，
デジカメで撮影した写真のように背景が付いたものであると，背景も含めて変形してしまうため，パラパラ漫画にすることに適していない．
以上 3 つの制限を踏まえ，「かんぱら」システムでパラパラ漫画を作成する際の条件は次のようにまとめられる．

図 9
Figure 9

元の画像は，変形する対象が 1 つだけのもの



元の画像を変えない動きのもの



元の画像は，背景のないもの

鳥が羽ばたく動き

Movement that a bird flaps the wings.

これらの条件を緩和することは，今後の「かんぱら」シ
ステムにおける課題である．

7. まとめ
1 枚の静止画像を順次変形し，動きのある複数の画像を生成する「かんぱら」システムを提案した．具体的には回転射影方式とパラパラ動きパターン方式のアルゴリズム，
さらにパラパラ漫画の作成例と制約を述べた．
今後の課題として，人が足を交互に動かして歩くように，
2 つ以上の対象の変形が実現できる簡単な方式を考えることである．例えば，人の顔の目と口のパーツの変形のように，それぞれの対象を別のキー操作によって変形できるよ
うにしていく．元の画像を変える動きについては，例えば人が歩く動きであれば，元の画像の手前側にある足から奥図 10
Figure 10

蛇がうねって進行する動き

Movement that a snake undulates and goes.

にある足の画像を作り，それらを重ねて表示してそれぞれが左右に振り子のように動くパターンを作ることで表現していきたいと考えている．さらに，「かんぱら」システムの6. 「かんぱら」システムによるパラパラ漫画の作成条件

改善に合わせて，パラパラ動きパターンを増やし，パラパ
ラ漫画の動きを表現できるデータベースを作成し，よりパ
ラパラ漫画の作成を簡単にする方法を検討する．

「かんぱら」システムでパラパラ漫画を作成するには，
主に 3 つの制約がある．
一つ目は，画像を変形させる際の対象が 1 つであるということである．例えば，1 つの画像に 2 つの対象が描かれていたとしても，2 つをそれぞれ独立させて変形させることはできず，2 つとも同様に変形する．このため，2 つ以上の対象が描かれた画像での質の高いパラパラ漫画の作成は期待できない．ただし，例外として，パラパラ動きパター© 2014 Information Processing Society of Japan

参考文献
1) NEVER まとめ / パラパラ漫画動画集
http://matome.naver.jp/odai/2127105941338841201
2) 尾澤直志: アニメ作画のしくみ キャラに命を吹き込もう！
( 2004)3) 尾澤直志:アニメ作画のしくみ 2 [動物編]( 2004)
4) ハロルド・ウィテーカー, ジョン・ハラス, 木義郎（訳）: ア
ニメーションタイミング技法( 1983)

274