技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

名古屋のホームページ制作会社 花のや > 花のやブログ > 動きのあるウェブページについて
2017/04/21ホームページ制作HTML/CSSJavaScript

動きのあるウェブページについて

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

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

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

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

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

ライブラリの種類

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

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

Live2D
メッシュで画像を変形

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

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

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

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

LIVE2Dで試してみました

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

退かぬ!媚びぬ!省みぬ!
 

参考

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

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ