UIモーション01： UIになぜ動きが必要か？
スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション（動き）が使われています。 こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。
UIモーションとUIアニメーション
「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言えます。
UIモーション：UI要素に動きを与えたもの。ユーザーの操作や時間経過に応じてUI要素が移動・拡大・縮小・変形などの変化が生じること。（例：モーダルウィンドウの表示・非表示など）
UIアニメーション：時間とともに変化するグラフィックをUIに取り入れること。（例：Twitterのいいねボタンを実行した際の演出）
厳密には両者は異なりますが、この記事ではこれらを包括する名前として「UIモーション」を用います。
UIモーションの目的
UIモーションは様々な目的で使われていますが、大きく以下の２つの目的に分類することができます。
理解のための動き
演出としての動き
順に見ていきます。
1. 理解のための動き
１つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法について理解を深めることができます。
例えば、iOSのホーム画面からアプリアイコンをタップすると、アプリアイコンから拡大しながらアプリのViewが開きます。アプリから離れホーム画面に戻る際は、逆にアプリアイコンに向かってViewが縮小します。
この動きにより利用者はホーム画面のアイコンとアプリの間に連続性を認識することができます。
また、このホーム画面では、左右のスワイプによる動きや、端末の傾きによる視差効果によって、複数のレイヤーを認識することができます。様々なアプリを開く背面としてホーム画面があり、その前面に複数のアプリがアイコンとして並ぶレイヤーが存在しています。そのため利用者はiPhoneの小さな画面の中に奥行きを感じることができます。
アイコンをタップすると、各アプリが手前にせり出すように拡大表示されます。ホーム画面に戻る際はアプリが縮小しながら奥に戻ります。新しく作業を始める際は手前に。作業を終える際は奥に。この奥行き方向の移動は、机の上に本を広げて調べ物をし、メモを取るためにノートを広げるといった現実世界のメタファーと捉えることができます。動きにより奥行きが認識されるため、このメタファーが強化されています。
そのため、利用者は写真アプリからメールアプリに移動するために、一旦写真アプリを閉じてホーム画面に戻り、今度はメールアプリを開くという一連の操作を説明なく受け入れることができます。
また、メッセージで会話していると相手の吹き出し内に「・・・」が明滅するアニメーションが表示されることがあります。
このアニメーションにより会話相手がテキストを入力中であることがわかります。代わりに「○○さんが入力中…」というテキストを表示することもできますが、文字情報は認識するのに時間がかかり利用者の負担に繋がります。特にメッセージアプリの場合、会話の途中でそれ以外の文字情報に目を奪われ、相手との会話のリズムや集中が削がれてしまう可能性もあります。
このようにUIに上手に動きを取り入れると、説明がなくともナビゲーションの構造や、システムの状態を理解することができます。言葉による説明を省くことで利用者の認知負荷が小さくなります。わたしたちが「直感的に使い方が理解できる」と感じる時は、おそらくこのような状態を指します。
2. 演出としての動き
２つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、モチベーションや達成感や愛着など利用者の感情に働きかけます。
Twitterで「いいね」ボタンを押すと、弾けるようなアニメーションを伴ってアイコンの色が変化します。
小さいながら微細に作り込まれた演出と触覚フィードバックにより、「いいね」はTwitterの中でも特別なアクションであることが伝わります。利用者は小さな達成感を感じ、繰り返し「いいね」を使うことになります。
一方で、演出としての動きは利用者の不利益になる場合もあります。例えば、ランニングアプリでは走った距離の数値が0からカウントアップするアニメーションを伴って表示されます。走った達成感を感じさせる演出として有効ですが、同じ演出が表計算ソフトの計算結果の数値の表示に使われていたら過剰に感じられるでしょう。
必然性のない過剰な演出は利用者の注意を奪い、本来達成したい目的を阻害する要因になります。そのため、利用者にとって特別な瞬間やアクションに範囲を絞り演出を作り込みます。
また、人間中心設計を提示したドナルド・ノーマンの「エモーショナル・デザイン―微笑を誘うモノたちのために」では、利用者の感情と使いやすさの関係について触れられています。
感情には環境の中での選択肢を減らす役割があり、意思決定を支えているそうです。人は不安な時に思考が狭まりトラブルの細部に集中してしまいがちですが、ポジティブな感情の時は色々なやり方を試すため、満足な結果に至ることが増えるそうです。つまり、演出としての動きが間接的に使いやすさにつながることもあります。
3. 理解のための動き ＋ 演出としての動き
理解のための動きと演出としての動き、両方の目的を満たしている場合もあります。iOSからSiriを起動すると、AIアシスタントを表現したアニメーションが表示されます。
Siriを起動すると、円形の中を曲線がゆっくりと回転します。話かけると音量に応じて円形のアニメーションが反応し、拡大・縮小の動きが生じます。
AIアシスタントの知性を感じられる「演出としての動き」と同時に、音声の入力状況や回答待ちの状態を把握できる「理解のための動き」が使われています。
動きを効果的に取り入れる
UIに独自性のある動きを取り入れようとすると、そうでない場合に比べて多くの手間と時間を要します。特に利用者の操作に応じて変化するインタラクティブ性の高い動きを取り入れる場合、初期開発だけでなくリリース後のメンテナンスコストの増加につながる懸念もあります。そのため複雑のものであればあるほど、それに見合った効果が見込めるのか検討が必要です。動きを効果的に取り入れるための方法をいくつか考えてみます。
1. 重要な指標に関わる機能やアクションに取り入れる
SNSでの「いいね」の増加は利用者がより多く投稿するモチベーションに繋がるため、アニメーションの採用が１ユーザーあたりの投稿数に間接的に貢献する可能性があります。また、トーク画面での入力中のアニメーションは、利用者同士の会話の満足度を高め、再び会話をする動機を高めるかもしれません。このように、プロダクトの重要な指標に関わる機能やアクションの一部に利用することで、動きを効果的に取り入れることができます。
2. 再利用性しやすく管理する
また、モーダルビューの表示・非表示、アコーディオンの開閉といった状態変化を表すモーションはサービス内で何度も利用する可能性があります。そのため再利用しやすいように管理することで、開発工数を抑えたり、デザイナーとエンジニア間のやり取りの手間を減らすことができます。Material Designではモーションの時間とイージングがデザイントークンの一部として定義されており、少ないコストで一貫性のあるモーションを実現しやすくする工夫がされています。
3. 体験の中心に取り入れる
Pinterestのスマホアプリでは、OS標準とは異なるナビゲーションが採用されています。ユーザーが一覧の中から画像を選択すると、その画像が動きをともなって画面いっぱいに拡大されます。画面をスクロールすると関連画像として画像一覧を表示され、画像を選択すると再び動きをともなって画面いっぱいに拡大されます。
このナビゲーションの動きはOS標準とは異なるものです。このような独自のナビゲーションを採用することは開発コストの増大に繋がりますが、これによりPinterestでは他の類似サービスとは全く異なる体験を実現しています。拡大し続ける動きにより、利用者はナビゲーションを意識することなく気になる画像に意識を向け、関連画像を次々と探索し続けることができます。
まとめ
UIモーションの目的について考察しました。冒頭の「UIになぜ動きが必要か？」という問いに対しては以下のように答えることができます。
UIには利用者の理解のために動きを取り入れることができる。メタファーを効果的に使った動きを取り入れることで言葉による説明を省き、直感的に使い方が理解できるUIを実現できる。
UIには演出として動きを取り入れることができる。モチベーションや達成感や愛着など利用者の感情に働きかける。
必然性のない過剰なUIモーションは利用者の注意を奪い、利用者の本来の目的を阻害することもある。
動きを効果的に取り入れるためには、重要な指標に関わる機能やアクションに取り入れる、再利用しやすく管理する、体験の中心に取り入れるなどの工夫ができる。
今後もUIモーションの事例やデザイン・開発方法、効果検証などについて書いていきたいと思います。
TwitterでもUIデザインについて発信しています。感想やコメントなどいただけると嬉しいです！
この記事には続きがあります。