今週、私はカレンダー機能用のマイクロインタラクションをデザインしていました。「ビジュアルデザイン」はだいぶ前に完成したのですが、モーションをコードに埋め込んで正しく動作させるのは、ビジュアルデザインよりも大変でした。
浮き上がる、折りたたむという2つのUIコンポーネントをどのように動かしたいかを考えているうちに、気がつくと私は開発室の中で体を動かしながら手振りをしていました。
「それは……最初に少しの間少し浮き上がり、そのあとに折り畳まれるような効果です」
うまく表現できました！ ただ、自分と同じ部屋にいない相手にどのようにすればうまく伝えられるか悩みました。Slackやメールで「体を動かして伝える」ことは難しいからです。
簡単な画面遷移、フェード効果、ボタンステートの適用ができるアプリ（Invision、Marvel、Adobe XD）はたくさんありますが、完璧な「UIモーションオーサリングツール」は少ししかありません。結局、Atomic.ioを使うのが良さそうです。
UIの動き方は本当に重要か？
簡単な「ease-in」を使うのはどうでしょうか。
ease-inで十分な場合もありますが、たいていの場合は不十分です。たとえば、色の選択がコンテンツに影響を及ぼすことは誰でも知っています。しかし、モーションの場合にも意味があるのです。
下の短いアニメーションは1944年に作られたものです。実験心理学者のFritz HeiderとMarianne Simmelが作成しました。自分たちの教え子の大学生34人にこのアニメーションを見せて、分かったことを書かせました。
なかなか、おもしろい実験です。自分でも見たものを説明してみてください。
HeiderとSimmel作成のアニメーション（1944年）
このアニメーションはなんでしょう？
- キャラクターを認識したか？
- ストーリーはあったか？
- シェイプ同士の関係が分かったか？
通常は上の事柄を認識して、ほとんどの人がだいたい次のように解釈します。
大きな三角形は力のある人物で、おそらく年配の男性。2つの小さな三角形と円は若いカップル。大きな三角形がこのカップルをたしなめて小さな三角形が小さな円と離れるように脅しているように見える。しかし、カップルは屈さず、小さな三角形は円ともう一度一緒になる。そして最終的に2人で駆け落ちして、大きな三角形はかんかんになって怒る。
アニメーションでなにが起こったかを書くように言われた大学生の見方は次のように分かれました。
- 32人が幾何学的なシェイプを人と見なした
- 1人が幾何学的なシェイプを鳥と見なした
- 1人が幾何学的なシェイプをそのままシェイプと見なした
ほとんどの人が嫉妬、憎悪、勇気、愛などの繊細で複雑な人間の特徴に触れました。
しかも、これらの「キャラクター」が、ストーリーにおけるキャラクターにあるはずの一般的な特徴をほとんど持っていないにもかかわらずです。つまり、顔や目、口、手足もないのにです。話をしたり音を出したりしておらず、認識のギャップを埋めるサブタイトルもありません。
「潰しと伸ばし」を使ったアニメーション
シェイプは伸びたり、縮んだり、歪んだりしません。それでも、アニメーション作成者が好んで使う昔からあるストーリーテリングツールなのです。テクニカルな見方をすれば、South Park（訳注：アメリカのコメディ中心のケーブルテレビで、切り絵または切り絵風のストップモーション・アニメを放送している）を3Dモーションキャプチャのように見せることです。
また、シンプルな黒いシェイプの動きでロミオとジュリエットを表現しても意味が理解できるということです。つまり、モノの動きにたくさんの意味を見いだせるということです。
これでスライドするメニューがケビンスペイシーになるか？
もちろん、そのようなことはありません。
しかし、UI要素を動かす必要がある場合、つまり、縮めたり、広げたり、すべらせたり、跳ねさせたり、回転させたり、動かしたりする場合、その動き方はときには伝えようとすることと同じくらいUXにとって意味のあることなのです。
（原文：UI Motion : Can You Tell a Story with Movement?）
［翻訳：中村文也／編集：Livit］
