動きのあるウェブページについて - 名古屋でホームページ制作、ECサイト制作なら花のや 名古屋のホームページ制作、web制作会社 花のや

最近動きのあるページを作ることが続いたのですが、ウェブサイトで動きをつけると言ったら
jQueryのanimateや、css3のtransformあたりになります。

もうちょっとがんばったらcanvasやsvg、WebGLになると思います。

ただ、これらはせいぜい一つの要素を移動させたり、伸縮・回転・歪ませるくらいになりますので
要素内の一部にちょっと複雑な動きをつけるとなると、やはりアニメーションGIFを使う感じになります。

それで色々と調べていたところ、ある広告でたまたま見つけたのがこちら

これは動画になりますが、拡大、縮小、移動以外で漫画の絵が微妙に動いているのがありますね。
これはパーツごとに動かしていたり、３Dモデリングしたものを動かしているのではなく
（※ただし、以下のライブラリによってはそういう解釈もできます。）
どちらかと言えば２Dモーフィングといわれるものになります。
上の動画は広告なのでボツにされたのかそもそも自粛でやらなかったのかはわかりませんが
あべしとかひでぶなんてまさに真骨頂を発揮できそうなんですけど…。

ライブラリの種類

さて、その２Dモーフィング。いろいろなライブラリがありますが

SPINE
ボーンと呼ばれる骨と関節を設定して動かす

Live2D
メッシュで画像を変形

E-mote
メッシュで画像を変形

あたりが今のところ良さそうな感じです。
実際に動画ファイル以外で「ウェブページ」上に要素として表示させる限定で言えばSPINEの場合は
jsonやsphireなどのライブラリへの書き出しができますが
それ以外となるとアウトプットはアニメーションGIFになりそうですね

SPINEは他のライブラリとの連携が面倒そうだったのと試用で書き出しができなかったのでパス。

日本語の説明がしっかりとあるLIVE2Dで試してみました。
チュートリアルを見つつ適当にいじって…

LIVE2Dで試してみました

羽ばたかせたかったのですが、羽が短すぎて無理でした。
ガチな表現だと時間はかかりますが、この程度であれば初めてでも30分かからずにできました。
単純な移動はjavascriptだけで動かして、パーツのモーフィングをこれに任せてやれば
面白そうなコンテンツも簡単に作れそうです。

参考

ライブラリ：LIVE2D
素材：ぴよたそ