アニメーションデザインガイドライン

[feb19]

Issueのタイトル

質問内容(20文字程度) / AMAブース名(下記)

質問をしたいAMAブース

• Web Payments / Payment Request API について何でも訊いて下さい by えーじ
• AbemaTVだけど質問ある？（AbemaTV関係ない質問でもいいです）by Kenichi Kato, Tetsuharu OHZEKI, and Shota Kubota
• 日経電子版の高速化について何でも聞いてください by sisidovski and cssradar
• Fastly のエッジクラウドについて何でも聞いてください by Fastly
• Web パフォーマンスについて何でも訊いて下さい by Ayumu Sato and Shogo Sensui
• freeeのアクセシビリティ、いまとこれから by 伊原 力也
• 現場の ES201x とアーキテクチャの変遷と未来 by mizchi
• デザインとエンジニアリングのワークフローについて語りましょう by Hidemi Atarashi, Kensuke Takada, Masanari Hamada
• コンポーネント座談会 by pirosikick, 伊藤康太, 加藤佑典

質問

アニメーションだれが定義したり、デザインガイドにしたり、作ってますか？
ドリルダウンしたい場合は push トランジションだったり、アクションを行わせる画面を呼び出す場合はモーダルトランジションといった定義は紙のようなペライチなデザインガイドには難しいと思うので、動的なデザインガイドに活路がありそうかなと妄想してます

[narirou]

@feb19
ご質問ありがとうございます！
返信が遅くなり申し訳ありません。

Yahoo!内では既に、アニメーションを含めて定義がなされているデザインシステムがあります。
弊社(GYAO)では現在アニメーションの定義などは存在しないのですが、今後行うべきと考えています。

やはり、ダイアログなどをモーションで表示する際に各所で異なる速度のモーションが付加されるのは、ユーザにとって操作性の違和感を与えます。
代表的なところだとGoogleのマテリアルデザインや、WindowsのFluentDesginSystemは、特にモーションデザインも含めて定義が正確にされていると思いますが、モーションのデザインを整えることでサービス独自の印象と統一された体験を与えることに成功しています。

https://developer.microsoft.com/en-us/windows/apps/design
上記のような表現であれば、cssの変数定義などからデザインガイドを作成できるかと思っています。

各所で取り入れられている、micro animation (小さなアクションにアニメーション表現を付加してユーザー体験を向上される)も、デザインシステムとしてモーションを定義しておくことは、大事なことかと思います。