【翻訳してみた】マテリアルデザイン - 動きのカスタマイズ1
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらは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の主なスクロール方向と合わせる必要があります。たとえば、垂直方向にスクロールするカードは、バーティカルアウトの円弧の動きを使って展開します。カードが折りたたまれるときには動きが逆になり、最初は垂直方向に移動し、次に水平方向に移動します。
良い例
スクロールする方向の中で画面を展開し、同じパスに沿って反対方向に画面を折りたたみます。
悪い例
円弧の動きとスクロール方向が衝突しないようにしてください。
- オーバーシュート
オーバーシュートは大きな力で進んでいるかのように、静止位置を超えて要素をアニメーションさせる方法です。
オーバーシュートは以下の目的で使用されます。
・投げ捨てる動きやオーバースクロールようにジェスチャーに勢いをつける場合
・重要な情報や時間に関する情報を強調したい場合
・スイッチのような小さなコンポーネントで楽しさやエネルギーを表現したい場合
良い例
オーバーシュートはジェスチャーに自然な勢いを与えます。
悪い例
オーバーシュートを使わないジェスチャーは無機質な感覚を与えます。
楽しさを加えるために小さなコンポーネントにオーバーシュートを適用します。
このダイアログは入り部分を強調するためにオーバーシュートを使用しています。
- オシレーション(揺れる動き)
オシレーションは2つ以上のオーバーシュートの動きを使用する際に発生します。動きが止まるまで前後の動きが前の動きよりも小さくなりながら追加されていきます。カートゥーン風なスタイルを作るためにオシレーションを使用することも出来ます。
良い例
奇抜なスタイルを作るためにジェスチャーにオシレーションを使います。
悪い例
機能的で効率的なインタラクションを必要とするアプリではオシレーションを使用しないでください。
- ストレッチ
ストレッチは1つの方向に沿って要素のサイズを大きくする方法です。スイッチやスライダーなどシンプルなコンポーネントでは移動する方向に引き伸ばすことによって高速な動きを作り出せます。ストレッチは水平、垂直、または円を描いて移動するときに使用することが出来ます。
ストレッチは後ろについてくる終端の遅れによってカスタマイズすることが出来ます。終端をより遅らせるとより長いトレイルを作り出すことが出来ます。
※トレイル : 要素の後ろについて追従してくる要素と動き方のこと。
上のドットの遅延時間 : 150ms(0.15秒)
下のドットの遅延時間 : 350ms(0.35秒)
水平垂直方向の動きにはストレッチを使用することができます。斜めの動きにはストレッチの代わりにフェードトランジションを使用します。
※フェード : ふわぁーっと消える動き方のこと。
ストレッチは選択型のステッパーに個性を与えます。
良い例
この時間表示は他の位置に移動する際に弧を描いて移動します。
悪い例
斜めのパスや完全な円以外の曲線など、単純な形(円、長方形、角丸長方形)以外の要素はストレッチしないようにしましょう。
悪い例
UIコンポーネントに個性的なアニメーションは使用しないでください。このカートゥーン調なフローティングアクションボタンはタスクをこなすアプリケーションでは気を散らすものになってしまいます。
※フローティングアクションボタン : アプリ内で頻繁に使用されるアクションを強調するボタン。
- 奥行き
奥行きはZ軸上の要素の位置を指します。トランジション中に高さのあるアニメーションを作ることで、UIの奥行きを増やし、レイヤーを強調することが出来ます。
- パララックス
パララックスとは見ている人に近い要素が、遠くの要素よりも速く移動して見える現象のことです。パララックスは要素が他の高度にいることや、奥行きを強調するために使うことが出来ます。
パララックスはスクロールする際に要素に奥行きを与えることが出来ます。
パララックスはどの要素が前にあるかを示すことが出来ます。
- スケール
大きさが小さくなっている要素は後ろに遠ざかっていくように見えます。逆に大きくなる要素は手前に出てくるように見えます。
後ろの要素は遠くに移動していることを強調するために縮小させています。
以上が4章-1になります。ご拝読有難うございました。
この記事が気に入ったらサポートをしてみませんか?