次世代Webのアニメーションデザインのヒントは美少女ゲームのPVにある

研究会でWebのUI/UXについて話している時にボソっと先輩が言って話題になったのだけど、美少女ゲームのPVは次世代のWebを作るにあたってのヒントが多く隠されているかもしれない。

サキガケ⇒ジェネレーション



これは「サキガケ⇒ジェネレーション」というゲームのオープニングムービー。いくつか見たけどこれが分かりやすい例なんじゃないかと思ったので自分用のメモも兼ねて紹介。

使っている画像リソースが少ない

アニメのオープニング映像とこういったゲームのオープニング映像の決定的な違いがこれ。

アニメは1コマ1コマ登場人物の動きを書いて背景画に重ねて映像作品にしているけど、ゲームは一人の絵師が描いているのでそうもいかない。というわけで、同じ絵で目だけ、顔だけ差分にして、表情を動かしてアニメーションにするという手法になっている。実際ゲームの本編だって顔だけ違う同じ経ち絵が続いたりするし、全画面のイベント画像だって表情だけ差分で変化するのが主流の手法だと思う。

オープニング映像を見るとゲームのロゴのアニメーションあたりは力を入れているけど、キャラクターの部分は少ない枚数のイラストをトリミング、回転、拡大、縮小、座標移動、差分変化などで上手く動かして見せている。

これらは全てCSS3 animationで実現できる。CSS3で実現できるという事はiPhoneやAndroidでも実行できるし、プラットフォームを選ばない。昔の気合いの入った良い意味でWebらしからぬFlashサイトのような事が、イマドキなプラットフォーム殆どに配信できるのだから夢が広がる。

ベタ塗りを効果的に使っている

斜めのベタ塗りラインの背景を回転させたり色々動かして効果的に見せているけど、これに着想してWebで同じ事をやっても大した負荷にはならないし、多分カッコイイ。参考になりそう。

Retinaディスプレイでスクロールすると全画面表示の画像がクソ重くて担当者を殴りたくなるパララックス効果なんかと相性が良いのかもしれない。

your diary+H



こっちは更に気合いが入ってる。なんといってもラノベで有名な人気絵師の「カントク」を起用しているんだからすごいんじゃないかと美少女ゲーム界隈には疎い自分でも想像できる。

ぼかしと座標移動で遠近感を表現

色々CGっぽい所があったり妙に効果に凝ってたり色々違いはあるけども、1個目に紹介したPVとの違いとして取り上げたいのが遠近感の表現。キャラクター数名の一枚絵を一枚絵の背景に乗せているだけなのに、ぼかしとカメラワークで実写のような臨場感のある遠近感を表現している。一枚の回転や拡大縮小に加えて「ぼかし」による遠近感が加わるのは効果的だ。

テクノロジー界隈ではAppleなんかがこういった表現では有名だと思う。iOS 7のデザインは賛否両論だったけども、加速度センサーで画面に映る映像のカメラ位置をずらす事によって奥行きを表現している。ホームボタンを長押しすると背景がぼかされてSiriの音声アシスタントが起動するし、Appleのデザインチームは映像表現に着想を得た可能性は高いと思う。というのも、Appleのユーザーインターフェースはアニメーションありきだからだ。iPhoneも、初代からアニメーションには凝っていた。

画像の一部分を回転・座標移動させる

表情なんかは差分を差し替える必要があるけども、この映像では髪の毛や腕なんかも動いている。ヒロインが腕をぶらんぶらんさせながらスキップしているシーンは腕だけ別レイヤーで慣性をつけて回転させていて、髪の毛だってレイヤーを分けて動かすことによってなびかせている。

現状のWebデザインの世界には、大きな画像パーツの一部分だけGIFアニメにする事によってあたかも全体が動いているかのような生き生きとした表現力のある「シネマグラフ」という手法をたまに見かけるけど、一部分を透過PNGとCSS3アニメーションでループで動かしてしまえばGIFアニメ素材を作らずとも効果的な表現ができそうだ。

Web以外にも目を向けるべきかもしれない

正直美少女ゲームのオープニング映像はWebとは結構かけ離れた場所にあると思うし、世界中のWebデザイナーの殆どは美少女ゲームなんてやっていないと思う。でもこうやって閉鎖的な世界で育ってきた文化には独自の表現力があると思うし、それをWebに輸入すれば「Web的には新しいもの」が作れるかもしれない。少なくともWebデザインを勉強していくにあたって他人の作ったWebサイトを参考にしてWeb系のブログのエントリばかり読んでいても後追いしかできないのだから。