【翻訳してみた】マテリアルデザイン - 動きのカスタマイズ1

2019年2月4日 10:09

前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。今回は長いので2つに分けて投稿させていただきます。

前章 : マテリアルデザイン - コレオグラフィ

引用元 Google - Material Design
Customization - Material Design
※動画像データもこちらから引用させていただいております。
しっかりとした情報が欲しい方はコチラをご覧ください。
(※スマホから元サイトに飛ぶとページが上手く表示されないようです。元サイトはPCから見ることをオススメ致します。)

カスタマイズ

モーションは異なったスタイルと個性を表現するためにカスタマイズすることが出来ます。

カスタマイズオプション

- 個性

モーションは速さ、動き、シーケンス、アイコン、イラストレーション、トランジションでカスタマイズすることが出来ます。

カスタマイズは目的のトーンとスタイルに合わせる必要があります。例えば遊び心のあるアプリでは揺れる動きや伸び縮みする動きを使って面白くて魅力的なインターフェースを作ることが出来ます。

良い例
アプリのスタイルにあったアニメーションを使います。このアニメーションロゴと揺れる動きはチップを使ったユーザーアクション中に発生します。
1.イラストアニメーション
2.揺れる動き

悪い例
目的に合っていない技法の使用は避けてください。1番の時差のあるアニメーションはアプリの効率性を重視する目的と反しています。2番の伸びるアニメーションが付いたフローティングアクションボタンや、3番の揺れる動きはアプリの生産性に対して遊びすぎています。

- 整合性

アニメーションは文脈に合わせてカスタマイズし、同一に適用させます。

例えば、時差を使ったエフェクトを使用し、少しずつずらしながら要素を画面に表します。このエフェクトを同様の要素に一貫して適用します。

良い例
特定の文脈のところ全てに同様のエフェクトを適用します。このUIでは同様の時差エフェクトが全てのタブのアイテムリストに適用されています。

悪い例
関連する画面の表現方法に矛盾がないようにします。このリストではBILLSに時差の動きが適用されているのに対し、BUDGETSでは1つのグループとして動くアニメーションが適用されてしまっています。

- キーとなるタッチポイント

カスタマイズはユーザージャーニの中にキーとなるポイントを作り出します。

ユーザーがタスクを行ってくれた労いとしてアニメーションを表示させることで楽しさを作り出すことが出来ます。

- 頻度

カスタマイズを追加するときにはアニメーションの頻度を考えましょう。ユーザーのタスクを妨げないように、カスタマイズには必要なトーンを設定します。

システムアイコンのアニメーションは頻繁に表れるので気を散らさないためにも、さりげないアニメーションにします。

良い例
アニメーションアイコンがボトムナビゲーションに艶を与えています。

起動画面のアニメーションのような複雑にカスタマイズされたアニメーションが高い頻度で表示されると不快に感じてしまいます。初回起動時のみにこれらのアニメーションを表示させることで、表示頻度を下げることを検討しましょう。

悪い例
プロダクトアイコンのアニメーションが高い頻度で表示されるとユーザージャーニを妨げてしまいます。
※ユーザージャーニー : ユーザーがプロダクトを購入or触れる過程。プロセス。

速さ

- 標準的なイージング

標準的なイージングは多くのトランジションに適しています。基本的なナビゲーションなど、ユーザータスクの手助けになるトランジションにオススメです。

標準的なイージングはトランジションに機能性を与えます。

- 強調したイージング

強調したイージングはアニメーションの終点を強調します。標準的なイージングでは表現出来ない、軽やかさや激しさを表現したいときに使用します。

強調したイージングは激しいトーンを画面に与えることが出来ます。

イージングを強調することで柔らかく上品な印象を与えることも出来ます。

強調されたイージングは標準的なイージングよりも素早く加速するので、終端でよりゆっくりとした動きをつくることが出来ます。

- デュレーション

アニメーションの長さを短くすることでハッキリとした印象を与えることが出来ます。逆にアニメーションの長さを長くすることでより柔らかい印象を表現することも出来ます。

標準的なイージングは400ms(0.4秒)を超えるデュレーションになると、想定した効果を得られないときがあります。そのような場合では強調したイージングの使用を検討してみてください。

良い例
特定のトーンを表現するためにデフォルトのデュレーションを微調整します。デフォルトを300ms(0.3秒)から350ms(0.35秒)に伸ばすとよりリラックスした印象を与えます。逆に250ms(0.25秒)に短くするとより大胆な印象を与えます。

悪い例
デフォルトのデュレーションを大きく変更しないでください。このトランジションを550ms(0.55秒)まで遅くすると遅すぎることがあり、115ms(0.115秒)まで速くすると不快な印象を与えることがあります。

動き

- モーションパス

要素が変形するときにはモーションパスと呼ばれる線の上の移動します。

モーションパスはデフォルトでは直線です。要素の大きさが変わったり斜めに移動する場合ではモーションパスは直線か弧を描いたものになります。

- 直線的な動き

直線的な動きはほとんどのトランジションに適したシンプルな動きを作り出します。この動きは注意が逸れることを最小限に抑えてくれます。

良い例
このカードは折りたたまれた状態と展開された状態を直接的な方法で変換します。

注意
この変換は主に上下左右に動くような他の要素と合わない、大きな斜めの動きを作ってしまいます。

- 弧を描く動き

円弧は自然の動きを模倣しています。弧を描く動きは画面の縦横比を大きく変更する必要があるトランジションに適しています。

良い例
このボトムシートでは弧を描くモーションパスに沿って流動的にリストに変形します。

注意
この弧を描くモーションパスはY軸上の静止位置を過ぎて移動してしまっています。

弧を描くパスはバーティカルアウト、ホリゾンタルアウトと呼ばれる2つの方向があります。バーティカルアウトは円弧に沿った要素が垂直方向の動きで終わることを意味し、ホリゾンタルアウトは要素が水平方向で終わることを意味します。

画面を拡大する動きを考慮して使用する向きを決定します。円弧はUIの主なスクロール方向と合わせる必要があります。たとえば、垂直方向にスクロールするカードは、バーティカルアウトの円弧の動きを使って展開します。カードが折りたたまれるときには動きが逆になり、最初は垂直方向に移動し、次に水平方向に移動します。