デザイナー向けのTweenの話

Sep 28, 2009

少し前になりますがAPMTWeek中に開催されたSpark勉強会で登壇させていただきました。

悲しい事情で直前にスライドを紛失してしまったので資料とかを公開できないのですが簡単に振り返って記事にしておきたいと思います。

他の方が優秀すぎて恐縮だったのでテクニックというよりは現場的なアイディアの発表になりました。

モーションデザインの共有の話

デザイナーとFLASHerと分業する場合、デザインする領域がレイアウトとか静止画だけでなく画面遷移や演出のモーションというところまでひろがります。

そうしたときにどうやってコミュニケーションをとっているのでしょうか。

などなどあるかと思いますが、なかなか共有するのが難しい領域ではあります。

特にビューンとかギューンみたいな擬音が頻出すると一見わかりやすいようで実装に落とし込むときにちょっと困るケースがしばしばありますし、コミュニケーションに悩んでる方もけっこういるように見えます。

基本的にはそうやって何度も動かしてみてやりとりするトライアンドエラーして詰めていくプロセスが必要なのだと思いますが、的確に実装できればクオリティに直結するし要らないストレスや時間を減らすことができると思い、もっと何か工夫できないか考えました。

Tweenerのイージング関数がグラフになっていてとてもわかりやすいです。モーションの変化のしかたの微妙な差異を図で確認できるので、これをデザイナーにあらかじめ共有しておくとすすめやすいこともあります。

デザイン上動きが重要な要素の場合、そもそも動きもFlashで作ってもらうのも有効です。タイムラインアニメーションで構わないのでざっくり作ってもらえばあとはそれに近づけるだけなので効率いいです。またデザイナー側でのシミュレーションもしっかりできるので総合的にもいい影響がありそうです。

Flashの機能でモーションのコピーなども共有するにはいいかもしれません。

動きや演出の説明をできるだけきちんと日本語で説明してほしいと訴えた時期もありましたが、ある本を読んで少し違った考えかたもあると思うようになりました。

原研哉さんと阿部雅世さんの対談をまとめた「なぜデザインなのか。」という本で紹介された阿部さんのHapticProjectの部分で、

「擬音を表現としてもっと認めてもいいのではないか」(※意訳)

という切り口で擬音辞書みたいなカタログを作るところがすごく印象的で、Flashの制作にもヒントになるのではないかなと思いました。(もともとHapticProjectは素材の質感を表現する流れだったと思いますが)

FLASHerにとってみても、上記のイージング関数の名前はピンとこないところがあります。それであればわかりやすい名前をつける、音とセットにする、Progressionのカスタムコマンドで動きをライブラリ化するなど工夫ができそうです。

ここから、動きをシミュレーションするツールを作るとか、動きカタログをつくるなど、FLASHerからのアプローチができそうです。

アイディアだけでは仕方ないので、手始めにモーションを描くツールのデモをWonderflで作ってみました。

マスウで絵を描くとその軌跡を丸が動きます。

技術だけじゃなくてもTipsやアイディアで開拓できる部分はもっとあると思います。

そういえば次回のF-siteも「つくるために作る！」ですね。これは運営から縛りを入れたわけではないのですが、たまたま3人ともこの方向でそろってしまったというところが興味深いです。内容も濃厚そうなメンツですので、ぜひこちらも参加してみてください。