土日 Flash のススメ(4):動きをつけるということ(イージングについて考える)
[Category:trick7]

  • trick7_4.giftrick7 の寺井周平によるコラム。第四回目は「動き(モーション)」について。なんてったって Flash は「動く」から楽しいですね。でもむやみやたらに動かせばいいっていうものでもありません。ユーザに受け入れられる動きってどんな動きでしょう?





    人それぞれ個性があり、人それぞれ気持ちいい動きがあります。多くの人に見てもらうためのサイトをデザインする時は、できるだけ多くのユーザにとって気持ちいい動きになるように心がけるのですが、そうはいってもアイデアの起点になるのは制作者自身が感じる「動きの気持ちよさ」です。これをユーザと共有できるように落とし込む作業が大切なのだと思います。 自分がどういう動きに気持ちよさを感じるのか、一度じっくり考えてみてはいかがでしょうか?


    イージングって何?

    まずは用語の解説から。Flash を使っている人は「tween(トゥイーン)」と「easing(イージング)」を混同しがちですが、定義上は異なります。トゥイーンは最初と最後を指定したら、間を上手く補ってくれる機能のことで、Flash だとタイムライン上で始点と終点を指定してその間をトゥイーンで自動的に補完したりしますね。
    その補完方法の種類としてイージングがあるわけです。今回テーマとなる「イージング」は「動きに緩急をつけること」とでも認識しておいてください。Flash では上下左右の移動スピードの加減速だけでなく、拡大縮小や透明度、色変更などもイージングさせることができます。


    参考:Flash ではタイムライン上での フレームトゥイーンもできますが、ActionScript を使ったイージングも有用です。AS で指定した方がパラメータ調整がしやすいというメリットがあります。稚拙ながら以下のビデオチュートリアルで AS でのイージングについて解説しております。
    「trick7.com blog: スクリプトアニメーション基礎」
    「trick7.com blog: チュートリアルビデオ:Fuse Kit を使う(1)」

    Flash でのイージング方式にはいくつか種類があるのですが、有名なのは Robert Penner 氏が提案した「Penner easing」と呼ばれる動きの計算式です。 easeOutSine とか easeInOutBounce 等という感じで指定するのですが、これは単語を「easeOut + Sine」「easeInOut + Bounce」という感じで前後部2つのパートに分けて考えます。

    前半部には3種類

    easeIn動きの最初(In側)に効果を適応させる。
    easeOut動きの最後(Out側)に効果を適応させる。
    easeInOut動きの最初と最後両方(InOut)に効果を適応させる

    そして後半部はどういう具合に加減速するかを指定します。
    Sineゆるやかに(程度1)
    Quadゆるやかに(程度2)
    Cubicゆるやかに(程度3)
    Quartゆるやかに(程度4)
    Quintゆるやかに(程度5)
    Expoゆるやかに(程度6)
    Circ円っぽい増加!?
    Elastic終点でバネのような動き。ビヨンビヨーン
    Backちょっと行き過ぎて戻る動き
    Bounce終点で跳ね返るような動き

    この2つを連記することで動きを表現するわけです。たとえば「easeOutBounce」なら最後に跳ねる動きになります。今の Flash で有名な tweener というライブラリ(仕組み)を利用すると、

    ボールX座標100Y座標200の位置に2秒最後で跳ねるように動け!

    Tweener.addTween(ball, {x:100, y:200, time:2.0, transition:easeOutBounce});

    というコードになります。下の Flash で Penner easing のイージングタイプを確認できますので、いろんな組み合わせを試してみてください。



    操作方法:クリックした場所に向かってボールがイージング移動します。上部リストからイージングタイプ・移動時間を組み合わせて試してみてください。
    ※「linear」はイージングせずに等速移動しろという指定です。
    ※イージングタイプを可視化した「weener Documentation and Language Reference」も参考になります。
    なぜイージングさせるのか?

    多くの Flash 製作者がイージング表現を使っています。イージングさせるとユーザが気持よく感じてくれるのを知っているからです。なぜイージングを心地よく感じるのでしょうか?

    ディスプレイ上はバーチャル(虚構)空間ですので、製作者がどんな動き方をさせようが自由です。しかしユーザは生まれて以来、現実空間でのモノの動きを見続けてきました。現実世界の物理法則に則った動きを、無意識的にモニタ上のバーチャル空間にも期待し、安心感を得ているのではないでしょうか。

    イージングを使うことでユーザが不安を感じない世界観を用意し、サイトに自然に没入できる配慮をしておくのです。下に挙げるサイト、気持ちよく感じませんか?


    triworks.jpg

    Triworks.net

    上から落ちてくるソファーは床で跳ね、横移動してくるモノは始めと終わりをゆっくりさせることで、「あ、ここは部屋(物理法則が適応された空間)なんだな。」とユーザに意識させる演出です。その他の画面遷移でもいろんなイージング表現を見ることができます。

    単に現実世界の動きをシミュレートするだけではなく、その世界上でちょっと気になる動きを使うことで、ユーザの注意を喚起し、コンテンツを意識させることもできます。


    beyes.jpg

    BEYES Watch the world | RECOMMEND 60 BEYES EDIT STORE

    最近の Flash では物理表現をシミュレートできる「物理エンジン」がサイト表現に利用されるようになっており、このサイトは落下と衝突の表現、積み重なる期待感を活用してユーザをサイトの世界に惹き込みます。
    (※物理エンジン「Box2DFlashAS3」を使っているので狭義には「イージング表現」ではありませんが、モノが跳ね返る表現はイージング使用と同様の効果を狙ったものです。)


    itl.jpg

    intentionallies

    テーブルの上に名刺大のカードがあると想像してください。人差し指でカードのどこかの部分を軽く押さえて「ツツツッ」と動かしてみてください。カードは、移動しつつも、テーブルとの摩擦のせいで指で押さえている点を基点に回転したりしますね。その動きを再現することで、ディスプレイを平面に見立て、そこにカードが散らばっているのだとユーザは認識します。そしてそこから気になるカードを選んで詳細データを見るわけですが、現実世界では選んだカードが大きく拡大することはありませんし、重なり合ったカードの下のカードを選んだ時に自動的に上にくることもありません。ましてや好きな条件でカードが勝手に並び変わる(左上のSORTメニューで並べ替え)なんてことは現実世界では起こりません。そうやって現実世界のルールにバーチャルならではのメリットを融合させることで、素敵なユーザ体験を提供できるという好例ですね。


    動きを意識して生活してみる

    自分がなんとなく好きなモノやコト、その中に動きのヒントが隠されているかもしれません。あなたはその対象のどこが好きなのか?その動きの本質を突き止めていくことで、万人と共有できる「動きの気持ちよさ」に辿り着くことができるでしょう。


    僕が好きな動き1:F1中継

    僕はF1が好きです。F1マシンはストレート・コーナーで加速・減速を繰り返します。その加減速のスピードの移り変わりはイージングそのものです。さらに、複数台のマシンが競り合うときがありますが、
    ・お互い同じようなスピードで
    ・カーブでは減速し
    ・イン(内)側が小回りな分だけ速い。
    という条件をプログラミングされたオブジェクト(モノ)に見えてきます。

    僕が感じるこの気持ちよさを Web で表現されているサイトをご紹介します。


    nec.jpg

    Lui

    場面切り替え時の表現に注目です。何本かの黒い線が追いつけ追い越せな感じで直進・カーブを繰り返しつつ進んでいきます。僕はこの表現に F1 を見るのと同じ気持ちよさを感じます。さらにこのサイトには「線も背景も単色なのに、線の動きで疾走感を表現」しているという新鮮な驚きも感じます。

    「ANTEPRIMA FW2007」
    「wildcard inc.(COVER ARCHVES 01)」
    でも直進・カーブの時の緩急の気持ちよさを
    「DMI, Music & Media Solutions」
    では線を使ったスピード表現を見ることができます。


    僕が好きな動き2:ファンネル(ガンダム)

    昔からガンダムを見てきました。プラモデルもたくさん作ってきましたが、僕が本当に好きなのは「ファンネル」という遠隔操作のビット兵器の動きなのです。モビルスーツから発射されたファンネルは、ひとつひとつが意思を持っているかのように、目的位置も移動タイミングもバラバラで、それぞれ好き勝手に動いているようで実は:
    ・高速で所定の位置に移動
    ・相手の方向を向く
    ・レーザー発射
    ・次のポイントへ移動(繰り返し)
    という共通プログラムに従って動いている様子が美しいです。ファンネル自体の動きも、移動(動)→レーザー発射(静)をイージングしながら繰り返すというメリハリのある動きが気持ち良いです。


    switchmw.jpg

    Switch Mediaworks

    韓国の制作会社のサイトですが、サイト各所で見られる:
    ・無駄にカッコイイ動きをする
    ・同じオブジェクトを大小させて遠近感を表現
    ・ターゲット(標的)を狙っている感
    ・上に浮遊していく発射感
    がファンネルっぽいと言えなくもないです。ただ僕の中でのファンネルの気持ちよさは他にもあるので、そこはいつか自分で表現しようと思います。サイトターゲットによっては、ガンダム世代にだけ気持ちよい(カッコイイ)と気付いてもらえる動きが有効な場合もあるかもしれませんね。


    僕が好きな動き3:サイボーグ009

    009といえばやはり「加速装置」ですね。僕は加速装置を使い終わったあとに009(島村ジョー)がシーンにいきなり現れる瞬間が好きです。高速移動から急停止するため、静止時に勢い余ってちょっと行き過ぎるのです。そのほんのちょっとの反動のアニメ表現が大好きです。
    この「スピード感」を上手く表現しているのが:


    wii.jpg

    Mario Kart Wii

    コントローラー操作の説明画面に移動してみてください。数個のコントローラーが円周上を移動しつつローテーションする時や、ボタン説明パネルが時計回りに表示される時に注目してください。スピードがつき過ぎて「行き過ぎちゃった感」が上手く表現されていますね。 商品がレースゲームなので Web サイトでもイージングを上手く使ってスピード感を表現しいます。サイトの性格に応じて適切なイージングを選択することも大切です。


    僕が好きな動き4:バスケットボール

    ドリブルする時はできるだけ強く(速く)バウンドさせるようにするのですが、返ってきたボールに対してはボールの勢いを吸収するイメージ、手を少し引くことでボールが手に吸いつくようなドリブルが良しとされています。縁日の水風船も手元では勢いを吸収するようにしますね。逆方向でも同様に、赤ちゃんを上に放り投げてキャッチするときは腕を柔らかく下げて勢いを吸収させます。シータを受け止めるパズーしかり。つまりこの動きで「優しさ・包容力」を表現できる可能性があるのです。


    僕が気になる動き5:アタック25(司会の児玉清さん)

    見ていてなぜか気になる動きも Web に落とし込むチャンスかもしれません。なぜ気になるのかを分析してみて、自分の表現のヒントにしましょう。
    アタック25の児玉さんのアタックチャンスの時の手の動きをご存知でしょうか?


    1. 掌をパーの状態で肘を曲げて振り上げる。
    2. 頂点に来たところで折り返す。
    3. 直後グーにする。本人的にはそのポイントで動きを止めたい!
    4. しかし勢いが残っているため反動を抑えきれない!
    5. 前後にグワングワングワーンと「動きの余韻」を表現

    この動きを児玉さんは意図的に強調して表現しています。Penner easing 的に言うとあれは「過度な easingOutElastic」です。「過度な」というのが「意識にひっかかる」ポイントなのかもしれません。どこかで使えるかもしれませんので覚えておくとしましょう。


    日々いろんなものの動きを意識して暮らしていれば、こういった「動きのヒント」はどんどん蓄積できることでしょう。僕はテレビアニメの影響が大きいようですが、読者の皆さんの性別・生い立ち・趣味・特技に応じていろんな発見・気付きがあると思います。
    ディズニーアニメの「ターザン」での木の枝を滑るように駆け巡る動きの表現は、製作スタッフのサーフィン体験がルーツだという話もありますし、皆さんも自分の「動きへの快感」を Flash 表現に落とし込んでみてはいかがでしょうか?

    加速と減速の性格と使い分け

    電車の扉が閉まる時は、安全のために最後の方はゆっくりになります。そういったことから僕は減速の中に「優しさ」を感じます。減速表現を使って、コンテンツに「優しさ」を盛り込むことができそうです。移動時間を長めに取るとゆったりした雰囲気になるのですが、その冗長さはイラチな関西人には向かないコンテンツになってしまうかもしれませんね。地方別、血液型別、人種別に適切なイージングタイプを切り替えられるサイトとか見てみたいです(笑)。

    逆に終点間際で加速する動きは「勢い・力強さ」を表現できるのがメリット。極端に使ってしまうと「強引さ・乱暴さ」といった印象を与えてしまうる可能性もあるかと思います。レース系・格闘系コンテンツはこちらですね。なるほど児玉さんの"アタック"チャンスもこちらですね。


    それでは最後に、イージングをうまく活用されている Flash サイトをあといくつかご紹介させていただきます。

    tadaya.jpg

    多田屋

    イラストという平面的な素材を、異なるスピードで動かすことで奥行きを表現しています。イージング表現を使うことで「ゆったりできる宿」という印象付けに成功しています。


    retec.jpg

    株式会社 リテック・コンサルタンツ

    もちろん物体を動かすだけがイージングではありません。伸びる・拡大するといった動きにイージングをつけることでも気持ちよさを表現できます。


    giantsteps.jpg

    Giant Steps

    ジョン コルトレーンの名曲「Giant Steps」に Flash でアニメーションをつけた作品。「音」も心地よい動きの表現には欠かせない要素です。



    アニメーションに限らず、デザイン全般、しいては人間の行動・人生においても「メリハリ」は大事なものだと言われています。「メリハリ」「ハレとケ」「緩急」「善悪」「明暗」「ピンキリ」「ON と OFF」etc.. そういった「差」を意識すること、そして効果的な「差」の程度・度合いの追求。そのあたりを上手に見せることにユーザの興味を惹くポイントがあるかもしれません。


    おまけ:さらなる「動き」にこだわる人へ。
    今回紹介した Penner easing を使えば、数パターンのイージングタイプを簡単に使うことができますが、さらにオリジナルな動きを追求したい人は、より詳細な設定:
    「[Saq.] Tweener の隠しプロパティ」
    をしたり、「最初はゆっくり動き出して、最後は跳ね返る表現がしたい!」というような人はイージングの変化量を自分で設定することもできます。
    「[Saq.] FuseKit の Custom Easing Tool を Tweener で使う」

    trick7_4寺井周平 (Flash ユーザー)


    trick7 名義で Flash・ActionScript 関連のブログを公開中。
    リクルートメディアテクノロジーラボ勤務。
    Blog: http://www.trick7.com/blog/





    [ DATE : May 21, 2008 ]
    [ TAG: ]
pagetop

( ! ) Warning: include(http://www.cbc-net.com/_right_column.htm): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/users/0/cbcnet/web/article/2008/05/trick7_04.php on line 525
Call Stack
#TimeMemoryFunctionLocation
10.0002219296{main}( ).../trick7_04.php:0

( ! ) Warning: include(): Failed opening 'http://www.cbc-net.com/_right_column.htm' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/0/cbcnet/web/article/2008/05/trick7_04.php on line 525
Call Stack
#TimeMemoryFunctionLocation
10.0002219296{main}( ).../trick7_04.php:0


( ! ) Warning: include(http://www.cbc-net.com/_footer.htm): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/users/0/cbcnet/web/article/2008/05/trick7_04.php on line 537
Call Stack
#TimeMemoryFunctionLocation
10.0002219296{main}( ).../trick7_04.php:0

( ! ) Warning: include(): Failed opening 'http://www.cbc-net.com/_footer.htm' for inclusion (include_path='.:/usr/local/php/5.6/lib/php') in /home/users/0/cbcnet/web/article/2008/05/trick7_04.php on line 537
Call Stack
#TimeMemoryFunctionLocation
10.0002219296{main}( ).../trick7_04.php:0