新しいカバー

マイクロインタラクションとバレエ

UIのモーションを考える時、よく脳内でバレリーナの動きを再生する。

妹がバレエをやっていたため実家の居間では、ローザンヌ国際バレエコンクールのビデオがよく流れていた。

ローザンヌは世界最強の若手バレリーナを決める大会だ。この番組はクロード・ベッシー女史というコメンテーターの、辛口実況がウリだった。彼女はパリオペラ座学校の校長先生でもあり、それゆえに評価のハードルが非常に高い。コンテストの登壇者は、ほぼ確実にベッシー先生に滅多斬りにされる。TVカメラのまえで泣きだすこともある。ある意味、登竜門であると同時に公開処刑の場でもあった。

そんなベッシー先生が珍しく大絶賛していたのが、2001年だか2002年に出場したミレナ・シドロヴァだった。(追記、ベッシーさん2002年引退してますね。ビデオで見てたから時系列がメタメタだった。2002年のコメンテーターは別っぽい)。

バレエに特に興味のなかった僕も、このダンスは強く印象に残っており、いまでもアニメーションを考えるときの基準になっている。


彼女のダンスを見て、バレエは単なる振り付けではなく、初動と末端の制動を利用した、時間方向の錯視表現だと理解した。動きを意図的に加速、減速させることで、リアル以上にリアルな動きを作れるのだと思った。


Xスケールを、等速運動で伸縮させたサンプル

等速運動で伸縮をさせても、人間の目には回転に見えない。


Y軸方向に回転させたサンプル

Y軸回転させると、視覚的にはXスケールがSine波で振動する。これは数学的に正しい等速回転の見え方だ。


正面を向いている時間を意図的に長くしたサンプル

より「回転してる感」を出しつつ、アイコンもしっかり見せたい。時間方向で視覚補正を行うときには、バレエの回転技法、ピルエットが参考になる。

バレリーナの頭部に注目してみよう。顔が正面を向く時間が長いことに気づく。これは、胴体の高速回転に対し、頭を逆方向にまわして回転を打ち消しているのだ。これを「顔をつける」と言う。


回転に「顔をつけた」アニメーション。正面を向いている時間が、長いわけだが、不思議とこのほうが回転にキレが出る。


光の変化を付け加えたもの

Xスケールの伸縮ではなく、「3D回転である」ことを明示するため、光の変化を加えたもの。


動作に起こりやしなりを加えたサンプル

動作の初動に、「起こり」と言われる予備モーションを加えることで、よりリアリティが生まれる。物理世界で急回転を行うには、エネルギーを溜め込む必要があるからだ。いわゆる格闘漫画にある、動きの初動を読んで…みたいなのはこの現象の認知だと思われる。


そんなことを考えながら、そろそろnoteにもマイクロインタラクション(動きや手触り)を導入しなければなぁと思っている。最近はAfter Effectsを使うのが流行りらしいので、AEを学び出してみたメモ。

noteのアニメーションは、ベース禁欲的にしつつ、ピンポイントにいくつかの箇所でジューシーさを出していきたい。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

いただいたサポートは、コロナでオフィスいけてないので、コロナあけにnoteチームにピザおごったり、サービス設計の参考書籍代にします。

オススメの本は「予想どおりに不合理」
274
noteのCXO。THE GUILD代表。ユーザーの行動を設計するデザイナです。 サービス設計やnoteのカイゼン報告などについて書いていきます。

こちらでもピックアップされています

#デザイン 記事まとめ
#デザイン 記事まとめ
  • 4980本

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。

コメント (4)
最後の「起こり」を見て、ディズニーアニメは必ずこれが入っているという話を思い出しました。
展覧会の為にgifアニメを作るので、とっても参考になりました!バレエ面白いですね!
人間の目を引いて心に食い込むのは、決して奇をてらった何かではなく、心理や脳科学などの理論に基づいた小さな仕掛けの積み重ねなんだな…と、改めてデザインの奥深さを感じました。
「顔をつける」は知らなかったす。あとバレエは軸と重心の参考にもなりますよね。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。