この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Speed(スピード)」の概要を日本語解説で学ぶことができます。
Material Design : Design section “Speed”
URL：https://material.io/design/motion/speed.html
なお、この記事は「約3〜5分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
Controlling speed｜スピードの調整
マテリアルデザインでは、モーションの「スピード(Speed)」を調整するためのルールがあり、スピードを調整してUI遷移をデザインすることにより、ユーザーはUIの操作を複雑と感じることなく、その操作を理解することができます。
また、スピードの調整には「Duration(遷移が続く時間)」と「Easing(時間にともなって変化する加速)」といった要素があります。
この章(記事)では、モーションにおける「スピード」の各要素と、その調整の方法について解説します。
なお、ここから先は、理解を深めるために、マテリアルデザインの以下Webページの「サンプルムービー」を見ながら読み進めることをおすすめします(この記事内には参照の関係上、ムービーはありません)。
Material Design : Design section “Speed”
URL：https://material.io/design/motion/speed.html
Duration｜モーション時間
モーションは、その「Duration(モーション時間)」を指定することができ、UI要素のモーションによってその「Duration」を変える必要があります。
Exits and closing｜非表示やクローズ
UI要素を非表示にする・消す・折りたたむ・クローズする、などの遷移の場合は、そのモーション時間に「短い時間」を指定します。
これはユーザーが注目している遷移ではないため、短い時間にしても問題ないためです。
例えば、「Navigation drawer」は「250ms」で表示しますが、非表示になる際は「200ms」で非表示になります。
※1000ms (mmsec：ミリ秒) = 1秒
Transition area｜遷移エリア
マテリアルデザインでは、「遷移エリア(遷移するUI要素のサイズ)」に応じて、その「Duration」を調節します。
まず、「Icon」などの「Small」に分類される小さいサイズのUI要素の場合、その「Duration」は短く「100ms」が指定されています。
次に、「Bottom sheets」などの「Medium」に分類される中くらいのサイズのUI要素の場合、その「Duration」は「200～250ms」が指定されています。
次に、「Full-screen dialog」などの「Large」に分類される大サイズのUI要素の場合、その「Duration」は「250～300ms」が指定されています。
なお、「Duration」のサンプルムービーを確認したい場合は、こちらのマテリアルデザインのWebページからご確認ください。
Sample movie : Duration
URL：https://material.io/design/motion/speed.html#duration
Easing｜イージング
「Easing(イージング)」とは、アニメーションの変化の速度を調整することです。
現実世界で動いているものは、急に停止したり動きだしたりせず、摩擦、重力、質量などの影響を受けて、時間をかけて速度を上げたり下げたりしており、この法則を「イージング」を用いてアニメーションに適用させます。
そして、UI要素に対して「イージング」を用いることによって、現実世界のようにアニメーションさせることが可能となります。
なお、マテリアルデザインでは、「イージング」を以下4つのタイプに分けており、状況によって使い分けます。
- 01：Standard easing｜標準
- 02：Emphasized easing｜強調
- 03：Decelerated easing｜減速
- 04：Accelerated easing｜加速
それでは4つの「イージング」について解説します。
01：Standard easing｜標準
1つ目の「Standard easing(標準)」は、最も標準的な「イージング」であり、アニメーションの最初の加速時間よりも、最後の減速時間の方が長いため、「アニメーションが終わるタイミング」に対して注目してほしい際に使用します。
02：Emphasized easing｜強調
2つ目の「Emphasized easing(強調)」は、アニメーションの加速と減速が急になっているのが特徴です。
「Emphasized easing(強調)」によってアニメーションするUI要素は、すばやく移動し、ゆっくり止まるため、「Standard easing」よりもさらに「アニメーションが終わるタイミング」を強調したい場合に使用されます。
03：Decelerated easing｜減速
UI要素が画面外から入ってくる遷移の「イージング」には、3つ目の「Decelerated easing(減速)」を使用します。
画面外から入ってきたUI要素は、減速するかたちでアニメーションし、指定の位置に停止します。
04：Accelerated easing｜加速
「Decelerated easing」とは逆に、UI要素が画面外に遷移する際の「イージング」には「Accelerated easing(加速)」を使用します。
画面外に向かうUI要素は、加速していくかたちでアニメーションし、すばやく画面外に移動していきます。
なお、「Easing」のサンプルムービーを確認したい場合は、こちらのマテリアルデザインのWebページからご確認ください。
Sample movie : Easing
URL：https://material.io/design/motion/speed.html#easing
まとめ
モーションをデザインする際は、その「スピード(Speed)」を調整することによって、ユーザーへの理解をうながすことができます。
そのため、「このモーションでは、ユーザーにどのようなことを伝えたいか？」を意識した上で、モーションをデザインすることが重要となります。
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
