開くときと閉じるときのモーション時間の違い

ダイアログなどを開く際にモーション（アニメーション）をさせると、ダイアログを開いたことが分かりやすく効果的です。

しかし、モーションをさせる時間には気をつけるべきポイントがあります。

開く時はゆっくり、閉じる時は素早く

モーション時間は「開く時はゆっくり、閉じる時は素早く」です。

例えばこちらのダイアログの例を見てください。

この例ではダイアログを開く時は0.48秒、閉じる時は0.16秒に設定しており、閉じる時のモーション時間は開く時のモーション時間の3分の1になっています。

一方で、開くときと閉じる時の両方とも同じ0.48秒に設定したものがこちら。

開く時はそれほど気になりませんが、閉じるときに少し焦ったいような感じがしませんか？

もうひとつ、同じような例を挙げてみます。

先ほどと同様、上の動画が0.48秒と0.16秒、下の動画が両方とも0.48秒です。

やはりモーション時間が同じだと、閉じるときにすこしもっさりした感じになります。

Googleが発表しているマテリアルデザインにも、要素を開くときと閉じる時の秒数が厳密に指定されており、開く時よりも閉じる時の方が時間は短くなっています。

開く時と閉じる時の差だけではなく、モーション時間をゲーム内で厳密に決めておくと、統一感のあるUIモーションになるはずです。

ではなぜ開く時と閉じる時でモーション時間を変えた方がストレスを感じさせないのか。

ポイントはユーザーが操作した後の次の行動にあります。

ダイアログを開く時は、ユーザーの次の行動はそのダイアログ内にあります。

そのため、その目的であるダイアログのモーションに多少時間をかけても、ユーザーはあまりストレスに感じません。

また、ダイアログは画面内の「新たな要素」なので、瞬時に出すよりも少しモーションを強調した方が、ユーザーは起きたこと（ダイアログが表示されたこと）やUIの階層を理解しやすくなります。

一方でダイアログを閉じる時は、ユーザの次の行動はダイアログ外にあります。

つまりダイアログはもう不要なものになっています。

そのため、その不要なダイアログの閉じるモーションが長いと、なかなか次の行動に移れずストレスになってしまうのです。

ダイアログを例にとって説明してきましたが、他にも同様のことが言える部分はあります。

例えばUIの遷移（トランジション）アニメーション。

ステージ選択画面とゲームプレイ画面をそれぞれ遷移する際のアニメーションを考えてみてください。

この場合は「進む遷移か戻る遷移か」を考えると良いと思います。

ステージ選択画面からゲームプレイ画面に遷移する場合は、「進む遷移」ですので、遷移アニメーションに多少時間をかけても問題ありません。

というのも、遷移した先が最終目的であるからです。

一方で、ゲームプレイ画面からステージ選択画面に戻る場合、「戻る遷移」になるので、遷移アニメーションは素早く行います。

図にするとこのようになります。

ダイアログを開くことについても「進む遷移」、ダイアログを閉じることは「戻る遷移」と捉えることができます。

モーション時間の違いについてまとめました。