寺井周平によるコラム。第四回目は「動き(モーション)」について。「動く」から楽しいですね。むやみやたらに動かせばいいっていうものでもありません。ユーザに受け入れられる動きってどんな動きでしょう?人それぞれ個性があり、人それぞれ気持ちいい動きがあります。多くの人に見てもらうためのサイトをデザインする時は、できるだけ多くのユーザにとって気持ちいい動きになるように心がけるのですが、そうはいってもアイデアの起点になるのは制作者自身が感じる「動きの気持ちよさ」です。これをユーザと共有できるように落とし込む作業が大切なのだと思います。自分がどういう動きに気持ちよさを感じるのか、一度じっくり考えてみてはいかがでしょうか?イージングって何?まずは用語の解説から。使っている人は「tween(トゥイーン)」と「easing(イージング)」を混同しがちですが、定義上は異なります。タイムライン上で始点と終点を指定してその間をトゥイーンで自動的に補完したりしますね。その補完方法の種類としてイージングがあるわけです。今回テーマとなる「イージング」は「動きに緩急をつけること」とでも認識しておいてください。上下左右の移動スピードの加減速だけでなく、拡大縮小や透明度、色変更などもイージングさせることができます。使ったイージングも有用です。指定した方がパラメータ調整がしやすいというメリットがあります。イージングについて解説しております。easing」と呼ばれる動きの計算式です。Bounce」という感じで前後部2つのパートに分けて考えます。動きの最初(In側)に効果を適応させる。動きの最後(Out側)に効果を適応させる。動きの最初と最後両方(InOut)に効果を適応させるそして後半部はどういう具合に加減速するかを指定します。終点でバネのような動き。終点で跳ね返るような動きこの2つを連記することで動きを表現するわけです。「easeOutBounce」なら最後に跳ねる動きになります。transition:easeOutBounce});というコードになります。イージングタイプを確認できますので、いろんな組み合わせを試してみてください。操作方法:クリックした場所に向かってボールがイージング移動します。上部リストからイージングタイプ・移動時間を組み合わせて試してみてください。※「linear」はイージングせずに等速移動しろという指定です。Reference」も参考になります。製作者がイージング表現を使っています。イージングさせるとユーザが気持よく感じてくれるのを知っているからです。イージングを心地よく感じるのでしょうか?ディスプレイ上はバーチャル(虚構)空間ですので、製作者がどんな動き方をさせようが自由です。ユーザは生まれて以来、現実空間でのモノの動きを見続けてきました。現実世界の物理法則に則った動きを、無意識的にモニタ上のバーチャル空間にも期待し、安心感を得ているのではないでしょうか。イージングを使うことでユーザが不安を感じない世界観を用意し、サイトに自然に没入できる配慮をしておくのです。下に挙げるサイト、気持ちよく感じませんか?Triworks.net上から落ちてくるソファーは床で跳ね、横移動してくるモノは始めと終わりをゆっくりさせることで、「あ、ここは部屋(物理法則が適応された空間)なんだな。」とユーザに意識させる演出です。その他の画面遷移でもいろんなイージング表現を見ることができます。現実世界の動きをシミュレートするだけではなく、その世界上でちょっと気になる動きを使うことで、ユーザの注意を喚起し、コンテンツを意識させることもできます。物理表現をシミュレートできる「物理エンジン」がサイト表現に利用されるようになっており、このサイトは落下と衝突の表現、積み重なる期待感を活用してユーザをサイトの世界に惹き込みます。(※物理エンジン「Box2DFlashAS3」を使っているので狭義には「イージング表現」ではありませんが、モノが跳ね返る表現はイージング使用と同様の効果を狙ったものです。)intentionalliesテーブルの上に名刺大のカードがあると想像してください。人差し指でカードのどこかの部分を軽く押さえて「ツツツッ」と動かしてみてください。カードは、移動しつつも、テーブルとの摩擦のせいで指で押さえている点を基点に回転したりしますね。その動きを再現することで、ディスプレイを平面に見立て、そこにカードが散らばっているのだとユーザは認識します。そこから気になるカードを選んで詳細データを見るわけですが、現実世界では選んだカードが大きく拡大することはありませんし、重なり合ったカードの下のカードを選んだ時に自動的に上にくることもありません。好きな条件でカードが勝手に並び変わる(左上のSORTメニューで並べ替え)なんてことは現実世界では起こりません。やって現実世界のルールにバーチャルならではのメリットを融合させることで、素敵なユーザ体験を提供できるという好例ですね。動きを意識して生活してみる自分がなんとなく好きなモノやコト、その中に動きのヒントが隠されているかもしれません。あなたはその対象のどこが好きなのか?その動きの本質を突き止めていくことで、万人と共有できる「動きの気持ちよさ」に辿り着くことができるでしょう。F1マシンはストレート・コーナーで加速・減速を繰り返します。その加減速のスピードの移り変わりはイージングそのものです。・お互い同じようなスピードで・カーブでは減速し・イン(内)側が小回りな分だけ速い。いう条件をプログラミングされたオブジェクト(モノ)に見えてきます。表現されているサイトをご紹介します。Lui場面切り替え時の表現に注目です。何本かの黒い線が追いつけ追い越せな感じで直進・カーブを繰り返しつつ進んでいきます。見るのと同じ気持ちよさを感じます。このサイトには「線も背景も単色なのに、線の動きで疾走感を表現」しているという新鮮な驚きも感じます。Solutions」では線を使ったスピード表現を見ることができます。僕が好きな動き2:ファンネル(ガンダム)昔からガンダムを見てきました。プラモデルもたくさん作ってきましたが、僕が本当に好きなのは「ファンネル」という遠隔操作のビット兵器の動きなのです。・次のポイントへ移動(繰り返し)という共通プログラムに従って動いている様子が美しいです。ファンネル自体の動きも、移動(動)→レーザー発射(静)をイージングしながら繰り返すというメリハリのある動きが気持ち良いです。・上に浮遊していく発射感がファンネルっぽいと言えなくもないです。僕の中でのファンネルの気持ちよさは他にもあるので、そこはいつか自分で表現しようと思います。サイトターゲットによっては、ガンダム世代にだけ気持ちよい(カッコイイ)と気付いてもらえる動きが有効な場合もあるかもしれませんね。僕が好きな動き3:サイボーグ009009といえばやはり「加速装置」ですね。僕は加速装置を使い終わったあとに009(島村ジョー)がシーンにいきなり現れる瞬間が好きです。高速移動から急停止するため、静止時に勢い余ってちょっと行き過ぎるのです。そのほんのちょっとの反動のアニメ表現が大好きです。Wiiコントローラー操作の説明画面に移動してみてください。数個のコントローラーが円周上を移動しつつローテーションする時や、ボタン説明パネルが時計回りに表示される時に注目してください。スピードがつき過ぎて「行き過ぎちゃった感」が上手く表現されていますね。サイトでもイージングを上手く使ってスピード感を表現しいます。サイトの性格に応じて適切なイージングを選択することも大切です。僕が好きな動き4:バスケットボールドリブルする時はできるだけ強く(速く)バウンドさせるようにするのですが、返ってきたボールに対してはボールの勢いを吸収するイメージ、手を少し引くことでボールが手に吸いつくようなドリブルが良しとされています。縁日の水風船も手元では勢いを吸収するようにしますね。逆方向でも同様に、赤ちゃんを上に放り投げてキャッチするときは腕を柔らかく下げて勢いを吸収させます。シータを受け止めるパズーしかり。この動きで「優しさ・包容力」を表現できる可能性があるのです。落とし込むチャンスかもしれません。気になるのかを分析してみて、自分の表現のヒントにしましょう。掌をパーの状態で肘を曲げて振り上げる。頂点に来たところで折り返す。前後にグワングワングワーンと「動きの余韻」を表現この動きを児玉さんは意図的に強調して表現しています。easingOutElastic」です。「過度な」というのが「意識にひっかかる」ポイントなのかもしれません。どこかで使えるかもしれませんので覚えておくとしましょう。日々いろんなものの動きを意識して暮らしていれば、こういった「動きのヒント」はどんどん蓄積できることでしょう。僕はテレビアニメの影響が大きいようですが、読者の皆さんの性別・生い立ち・趣味・特技に応じていろんな発見・気付きがあると思います。表現に落とし込んでみてはいかがでしょうか?加速と減速の性格と使い分け電車の扉が閉まる時は、安全のために最後の方はゆっくりになります。いったことから僕は減速の中に「優しさ」を感じます。減速表現を使って、コンテンツに「優しさ」を盛り込むことができそうです。適切なイージングタイプを切り替えられるサイトとか見てみたいです(笑)。逆に終点間際で加速する動きは「勢い・力強さ」を表現できるのがメリット。極端に使ってしまうと「強引さ・乱暴さ」といった印象を与えてしまうる可能性もあるかと思います。レース系・格闘系コンテンツはこちらですね。児玉さんの"アタック"チャンスもこちらですね。サイトをあといくつかご紹介させていただきます。多田屋イラストという平面的な素材を、異なるスピードで動かすことで奥行きを表現しています。イージング表現を使うことで「ゆったりできる宿」という印象付けに成功しています。リテック・コンサルタンツもちろん物体を動かすだけがイージングではありません。伸びる・拡大するといった動きにイージングをつけることでも気持ちよさを表現できます。アニメーションをつけた作品。「音」も心地よい動きの表現には欠かせない要素です。アニメーションに限らず、デザイン全般、しいては人間の行動・人生においても「メリハリ」は大事なものだと言われています。いった「差」を意識すること、そして効果的な「差」の程度・度合いの追求。そのあたりを上手に見せることにユーザの興味を惹くポイントがあるかもしれません。おまけ:さらなる「動き」にこだわる人へ。隠しプロパティ」をしたり、「最初はゆっくり動き出して、最後は跳ね返る表現がしたい!」というような人はイージングの変化量を自分で設定することもできます。関連のブログを公開中。リクルートメディアテクノロジーラボ勤務。ススメ(2):作りながら考え、考えながら作る。FEEDCONTACTデザインやアートに関する最新の情報やプレスリリースなど随時受け付けておりますので、問い合わせフォームから、または下記のアドレスまでお送りください。hello@cbc-net.com。