Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What is going on with this article?
@umi_kappa

元Flash使い・現JS使いの僕がUIアニメーション作成時に工夫しているポイント

More than 1 year has passed since last update.

aptpod Advent Calendar 2018の5日目担当蔵下です。2日目(JSで描画したViewをHeadless ChromeでPDF化するまで)に続き2記事目です:joy:

現在はJSでガリガリとUIアニメーションを実装することが多いのですが(それ以外にも実装してます笑)、社会人スタート当時はFlash(ActionScript3.0)をメインで触ってました。某検索エンジン掲載用のバナーを100本ノックとかやったな〜とおじさんらしく懐かしむ。

言語は変われど人体(ユーザーの目)や視覚・感覚は変わらないため、いまでもUIアニメーション作成時に工夫しているポイントをいくつか紹介します。

ボタンが硬いものか柔らかいものかを考える

コード上ではただの <button> ですが、デザインのトンマナによってはそのボタンが硬いものだったり柔らかいものだったりします。硬いとscaleは変化させずにパキっと背景の色を変えたり、柔らかいものだとほわんとscalseが変化して長めのアニメーションしたり。そのボタンがどういう場所に置かれるのかを意識するといいかと思います。

特殊なEasingはなるべくそのまま使わない

ここでいう特殊なEasingとは、開始〜終了までの変化を超えるものとします(例えばscaleが0.5→1.2→1.0などのように、2つめのscaleが終了のscaleを超えているなど)。UIアニメーションを実装するときにいつもお世話になっているEasing Function 早見表。この中でいうとBack, Elastic, Bounceが特殊なEasing。

特殊なEasing
引用「Easing Function 早見表

指定するだけで動きのあるアニメーションになってくれるので便利なのですが、変化量や変化する間隔が調整しづらいため使い所によっては違和感が出てしまいます。違和感を感じたときは、一つ一つの変化を分割してアニメーションを作りつなげていくと自然なアニメーションになります。使っているEasingは違いますがこちらの記事「フロントエンド演出:ふわふわ浮遊する動きの作り方」で雰囲気は感じられるかと思います。

時間の短いアニメーションにはlinearもあり

linearはアニメーション時間に対しての変化量が一定のEasingです。

linear
引用「Easing Function 早見表

linearは等速なのでなかなかUIアニメーションには使いづらい印象がありますが、MouseOut時などの時間の短いアニメーションにはlinearが向いています。時間が短いと人の目で追うことは難しいですし、MouseOutのアニメーションをシンプルなものにすることで、次の操作の邪魔にならないようになります。

ときにはベジェ曲線でEasingを作る

なかなかハマるEasing無いな... と思ったら思いきって作っちゃいましょう! cubic-bezier.comなら、GUIで細かなEasingが作れます。

cubic-bezier.com

一つのアプリで複数種類のEasingは多用しない

デザインにキーカラーがあるように、Easingもある程度絞り込むことをおすすめします。UIによってEasingがバラバラだと統一感がなくごちゃっとした印象になってしまいます。個人的に使うことが多いのは、Expolinearの組み合わせです。in(MouseOver)はExpo0.5s、out(MouseOut)はlinear0.2sのように指定したりします。

複数の要素を表示するときはテンポよく

Webページやアプリだと、オープニングでスプラッシュが入りそれからUIが表示されることが多いかと思います。ヘッダー・サイドメニュー・フッターなど、スプラッシュの後に1秒でも早く表示させてユーザーにテンポよく使ってもらいたい! と思って一気に表示するとごちゃっとなったり、一気に描画負荷が上がってカクついたり... かと言って一つずつ表示すると待たせてしまう... そういうときは、ある程度アニメーションを並行して表示させて邪魔にならずテンポのいいポイントを探すと気持ちいい表示が実現できます。

まとめ

現在のアプリケーションは、Flash全盛期に比べて性質も異なり、アニメーション自体が主役になってしまうと、かえってユーザーに混乱を与えてしまうことにもなりかねません。ユーザーが気づかない間に「あれ? このアニメーション気持ちいいな。ついつい触っちゃうな」と思わせるような絶妙な加減を探って、クリック率の向上を目指したり、あくびしてても使えちゃうUIの実現を目指して、これからもUIアニメーションを作っていけたらと思います。

7
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
umi_kappa
週4で阿佐ヶ谷の飲み屋で芋飲んでます。いつもいるねって言われるけど、ちゃんと仕事してますよ。JSとかアプリとかでIoTなコンテンツを作るお仕事やってます。
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
7
Help us understand the problem. What is going on with this article?