Dribbbleとかに投稿されてるUIアニメーションって本当に参考になるの？

久しぶりに終電で帰りまして、車内でインターネットしてたらこんな記事が目に入った。

モバイルアプリ制作に使いたい、ナビゲーションメニュースタイル5個まとめPhotoshopVIP |

ああ、またそっち系かぁ。。などと思いつつ記事を読んでみたところ、予想通りアニメーション作品として掲載されているUIがちらほら見受けられました。

僕はずっと前から

"こういうUIのアニメーションって、よく「参考になる！」みたいな見出しでまとめられてたりするけど、本当に参考になるのかあ？"

と疑問でした。最近は（あ、やっぱ参考にはならないな）っていう気持ちのほうが強い。

かっこいいんですけどね。なんか未来的な感じもするし、動いてるのって魅力的だもん。

でも実際のアプリって、UIって前後の文脈が存在しているんですよね。投稿されてるアニメって、大抵いち部分を切り取って、ある状態から始まってある状態で終わる、っていうタイムラインなんだけど、実際に現実で使われるアプリはそうじゃない。

そこに至るまでの導線があって、そこから至る未来の導線もある。ひょっとしたら、このアニメーションで表現されている箇所を、繰り返し行ったり来たりするかもしれない。そうしたら、もし本当にそのとおりのアニメーションを実装して触ったら、魅力的だったアニメーションが煩わしさに変わっちゃうことも往々にしてあると思うんですよね。そういう実用面での「気持ち良さ / 気持ち悪さ」がこういったアニメーションからはわからない。

インタラクションを持ったUIを作ると、そのあたりの事情は少し変わってきます。実際に触って動作するモデルを作ることで（本物を実装してもいいし、Origamiのようなプロトタイピングでもいい）一方的な動きにはない、反復だったり逡巡する瞬間があらわれます。単なるアニメーション作品としてならよいのですが、アプリという体裁をとってしまっている以上、やはり"実用"の面はしっかり考察する必要があるのではないかと思います。ちなみになんで"少し"と控えめに書いたかと言うと、短時間の確認でよっしゃいけると思ったアニメーション部分が、長時間触れ合っていると煩わしくなったりする瞬間もあるからなんですね。そのあたりはインタラクションデザイナーの腕の見せどころなのでしょうけど。

まあアニメーションに限らず、1枚ものの小奇麗なUIデザインも"作品"としての体は良いけど"デザイン"として見たら参考にはたしてなるのか？と思います。

The Dribbblisation of Design | en.ja Article

追記

念のため追記をしておくと、別に投稿されてる作品に対してどうのっていうのはないです。作り手側には別の目的(アニメーションについて勉強したいとか、AEを習得したいとか)もあるだろうし、そこに無理やり使い勝手の話を持ち込む気はありません。

どちらかと言うと、安易に「参考になる」「使いやすい」というワードでまとめて紹介する側に問題を感じているので。

でももし、動画を作っただけで「これは使いやすいに決まってる。かっこいいし」と思っている方がいれば、ぜひそこはインタラクティブなものに昇華して頂ければ、という気持ちもあります。

こっから先は完全に余談なんだけど、前後の文脈っていう話、これ別にUIに限らない話だよなあと思っていて、例えば最近話題の商店街のポスターとか、確かにWeb上で見たりする分には綺麗なグラフィックだしコピーも簡潔だから魅力的に映るなあと思うんだけど、実際に張り出されている空間ではどういう風に見られているんだろうという疑問があったりする。印刷される大きさとか貼り出し場所によっては全然目立たなそうだなあと感じた。

ポスターだからって何も張り出されてるとこだけでがんばる必要ないやろ！Webでどんどんバズらせるでー綺麗なグラフィックで賞取ってみんなに認知してもらうでーみたいな思惑が最初からあって、そういう流れの上にあるとしたらすごい納得できるんだけど。

しかし、無事に商店街には活気が戻ったのだろうか…？なんだかんだそこがいちばん気になったりする。