UIモーションとフロントエンド (『Post-Frontend Meet UP! #01 登壇内容まとめ)
およそ一半年ほど前のことでめちゃくちゃ今更なのですが、DONGURIさん主催のイベント、「POST-FRONTEND MeetUp！」に登壇させていただきました。その時話した内容をこちらで公開しておきます。
当日は『UIモーションとフロントエンド』というテーマで、フロントエンドエンジニアの端くれなりのUIモーションの捉え方や、実践方法をお話させていただきました。
(ちなみに自分はUI/UXを専門にしている訳ではないので、あくまでフロントエンドエンジニアがより良いUIモーションを実装するためのTipsになります。何卒ご了承ください。)
以下、note用に再編+更新した内容です。
---
はじめに
UIモーションとは
その定義は様々ですが、一般的には"ユーザーがそのインターフェースをよりスムーズに理解し、より使いやすくするためにUIに動きを持たせるもの" と捉えることができます。
例えば以下のように、ユーザーの操作に対してそのシステムがどのように変化したかを伝えるUIモーション。
https://material.io/design/motion/understanding-motion.html#brand-expression
また、以下のようにユーザーが次にとるべき行動を示すUIモーション。
https://material.io/design/motion/understanding-motion.html#brand-expression
いずれも、静止した状態では分かりづらい内容を、モーションという非言語的な方法を用いてユーザーに伝えることで、快適な操作を手助けしていることが分かります。
より詳しい内容については、Google が提供しているmatarialdesign.io の Material Fundation内に説明がございますので、未読の方は是非ご一読ください。
UIモーションとフロントエンド
近年のWebデザイン/UIデザインにおける中心的な概念であるGoogleによるMaterial Designや、AppleによるFluid Interfaceなどに共通する要素として、インターフェースの操作における自己帰属感を高め、ユーザーにとっての気持ち良さ、快適さを実現するという姿勢があります。
それを実現するのは、先に挙げたような自然かつ明らかなフィードバック(動き)であり、モーションはUI/UXデザインにおいて欠かせない要素となっています。
しかしWebサイト制作の現場では、UIモーションの責任者というものは比較的曖昧にされがちです。
フロントエンドエンジニアがUIモーションにまで責任を持つ必要があるのかというとケースバイケースだとは思いますが、少なくとも実装者としてより質の高い、適切なUIモーションを実装することで、限られたリソースのなかでユーザー体験を最大化することが可能になります。
そんなこんなで前置きが長くなってしましましたが、何となくでやってしまいがちなUIモーションを今一度整理して、フロントエンドエンジニア視点で少しでもより良く実装するためのTipsをご紹介していきます。
イージングについて
UIモーションを構築する上で、イージングは避けては通れない要素です。
そもそもなぜイージングが必要なのか。
それは、私たちの住む現実世界の物理法則に倣った動きによって、
非現実世界であるデジタルインターフェース上の動きを違和感なく知覚し、
快適な操作を行えるようにするためです。
当然ですが人や車などこの世のほとんどものは、急に動き出したり、急には止まったりしませんので、UIモーションにおいてもできるだけ現実世界のモノの動きに近づけることで、違和感のない快適なインターフェースを実現することができます。
イージングの種類
種類の多い今一度イージングの種類についておさらいしてみます。
QuadやQuartなど、それぞれのイージングの名称は関数名の略名になっており、三角関数、二〜五次関数、指数関数と、段階的に緩急が強い動きを表しています。
一般的に緩やかな動きであれば、高級感や余裕を、急激な動きであれば楽しさやポップさを演出することができますが、殊にユーザーの操作に対して直接的なフィードバックを行う際に、緩やかなイージングを選択してしまうとあたかも反応が悪くもたついた印象を与えてしまう場合があるので注意が必要です。
ちなみにSineは三角関数なので円運動や振り子運動に、Quadは二次関数なので落下運動などを表現する際に最適です。
これら知識として理解していれば、"こういった感じ"というような曖昧な表現を使うことなく、チームでスムーズに認識を合わせていくことが可能です。
---
思ったよりも長くなってしまったので後半はまた後日公開します。
この記事が気に入ったらサポートをしてみませんか？