UIデザインガイドライン

マテリアルデザイン|No.34:Speed|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Speed(スピード)」の概要を日本語解説で学ぶことができます。

Material Design : Design section “Speed”
URL:https://material.io/design/motion/speed.html

なお、この記事は「約3〜5分」で読める内容となっています。

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。

理由は、日本語に翻訳しますと不自然な表現となるためです。

少し読みにくい部分もあるかもしれませんが、ご了承ください。

また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

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デザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。

次のガイドラインを学びたい方は
マテリアルデザイン|No.35:Choreography|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Choreography(振り付け)」の概要を日本語解説で学ぶことができます。...

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.33:The motion system|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「The motion system(モーションシステム)」の概要を日本語解説で学ぶことができます。...

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA