アニメーションとうまく付き合う
どうも、はぐっです・ω・♪
note良いなーって思い始めたので、とりあえずなんか投稿しよう！ってことでアニメーションについてお話してみる！
はじめに
もう世の中にはとても多くのアプリが存在し、自分が出そうとしているアプリにもだいたい競合がいます。
サービスにおいて
コンテンツの質・量
は間違いなく大事で、それが欠けているとまず発展しないでしょう。
っていう話は一旦置いておいて。
(この記事、いろんなことを置いていく)
今回考えるのは、コンテンツの種類が似ている場合なにが重要になるか。
なにが競合との差になるか。
ざっくり言うと、「使い心地」かなと。
この記事は、そんな「使い心地」の向上を狙いたい一人のフロントエンドエンジニアひいてはアニメーターの些細なひとりごとです。
アプリやWebサイトと奮闘してきた証ということで、恥を恐れず弾けていきます。
なお、「使い心地」の向上には
・デザイン
・アニメーション
・レスポンスの速さ
等、いろいろあるかと思いますが、今回はアニメーションに関してのみの記事となります。
アニメーションについて
全ての要素を派手に動かせばいいんでしょ？
っていう話ではないです、ええ。
要素を動かすことで
・世界観を想像
・ユーザの行動に対する気持ち良いレスポンスで、体験価値を向上
等、意味を持たせることを意識しています。
動きに意味を持たせる上で大事にしているポイント
・「印象に残すもの」と「印象に残さないもの」
・「静」と「動」
この辺りかなと。
印象に残すもの
アプリを作っていく上で、強調したい箇所っていうのが必ずある。
そこに関しては、もちろんデザイン上で強調するはず。
そしてさらに印象に残すことを意識したアニメーションをつけることで、その強調はより効果的になる。
例えば、ゲームのガチャ。
ガチャは「どのキャラが出るんだろう」や「最高レア度出るかなー」といった、ワクワクドキドキ感を味わえる重要シーン。
サクッと表示させるよりも、強調させる演出を加えた方がユーザが楽しめるコンテンツと化します。
ガチャの仕組み自体は
・ゲーム内通貨を支払う(無料ガチャとかはこの限りではない)
・キャラクターやアイテムを取得する
と、非常に単純なものではあるが、その行動体験で得られるワクワクドキドキ満足感を100倍にするも2億倍にするも、デザイン・アニメーション・音声等の肉付け次第。
ゲームに関しては、そのワクワク感やドキドキ感を体験することを目的としていると言っても過言ではないので、(過言かもしれない)
かなりユーザの体験価値に関わってくると言える。
そのため、とことん印象に残してやろう！っていう想いのもと作っていきます。
印象に残さないもの
アプリを利用していると、
「なんか心地良い」「なんか小気味好い」
そんな感覚を得ることがあるかと思います。
それこそがまさにこの印象に残さないものの正体。
言われてみれば確かに良い！って感じになるものの正体。
ちょっと逸れますが、最近、推しアプリLTというのをやったときに考えたのですが、推しているアプリって2パターンあるなと。
・意識的な推し
やめられない止まらない面白さがあり、最近ハマっているアプリ何？と聞かれて出てくる意識的な推し
・無意識的な推し
超絶便利やっほい！やけど、推しアプリ何？と聞かれても出てこない無意識的な推し
っていう2パターン。
何のアプリを推したかっていうところに関しては自重しておきますが、今回私が大事にしているポイントとして挙げた「印象に残すもの」と「印象に残さないもの」って、つまりこういうことだろうと思いました。
意識的に推される動きって、印象に残るもの。
無意識的に推される動きって、印象に残さないもの。
ほんの些細な動きって、気づかれなくもあり、気づかれているんだと思う。
プロダクト全体で考えた時に、印象に残らない動きの数の方が圧倒的に多くなるはず。だからこそ、ここに注力することが、ちりつも的にプロダクトの質の向上に繋がります。
(ちりつもは、塵が積もればのやつです、ええ。)
アニメーションをつける上で気をつけていること
経験上、アニメーションの失敗は、そもそも動きがイケてないっていう根深い問題は置いといて、以下の2つかなと思います。
・動かしすぎ
開発側として、アニメーションを実装したからには見せたいっていう気持ちになる。
わかる。でもこれはエゴになる。
あくまでも
必要な時に、動かす。
・長すぎ
これもエゴる。
こう動いた後にこう動いて・・・ってやっていくと、なんとなくすごいものができあがりそう。
ただ、長すぎるとウザいと感じてしまうことにつながる。
あくまでも
必要な量、動かす。
結果、
用法用量を守って動かそう。
って話。
ただ、用法用量のベースはプロダクトによって異なると思います。
例えば、
・女性向けのサービスだったら全体的にかわいくするために、かわいい動きを盛りめでいく
・モンスターいっぱい出てきて激しめのゲームだったら全体的に圧倒感を出すために、激しめの動きを盛りめでいく
とか。
一概に全てにおいてこれがいい！って言えることではないので、この辺りはサービスの世界観やターゲットに応じて、プロジェクト初期にしっかり設定できるといいですね！
静と動
そりゃ動いている時と動いていない時があるっていう話は置いといて。
メリハリが大事だよねって話。
例えば、動かす要素を決めて実装していく上で、動き始めをどうするかっていうのは結構考える。けど、動き終わりをおざなりにする。
そうしてしまうと、全体として惜しいアニメーションになってしまいます。違和感が残ってしまう。
髪の毛をセットする時に、鏡で自分から見える前の部分に関してはがんばるけど、後ろは見えないからおざなりにする
とか、それに似ているかもしれません。(多分違う)
アプリを作っていく上で、動きが止まらない要素より、止まる要素の方が多くなるかと思います。(ゲームとなると、動き続けている要素はたくさん)
動きの始まりと終わりは結構目立ちます。
映画やプロモーションビデオ等の動画もそうだと思うのですが、シーンとシーンの境目とかって結構気になるんですよね。
おーってなる動画は、動き方もさることながら止まり方でも魅せる。
止まるところはしっかり止まって、動きを目立たせる。
動き始めだけではなく終わりにもしっかり気を向ける。
これを意識するだけでも成果物の質が変わると思います。
さいごに
見た目部分に興味が強い方にとって
アニメーションでプロダクトの質を上げる
ことは使命だし、そこを評価されようものなら、アニメーター冥利に尽きます。
「エンジニアとして」ユーザ体験の向上に関わる上でわかりやすい貢献に、全力を振り絞りたいはぐっでした・ω・♪
p.s.
コードレベルのお話は、qiitaにて。
https://qiita.com/haguhoms