この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Customization(カスタマイズ)」の概要を日本語解説で学ぶことができます。
Material Design : Design section “Customization”
URL：https://material.io/design/motion/customization.html#applying-customizations
なお、この記事は「約6〜8分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
Applying customizations｜カスタマイズの適用
マテリアルデザインでは、モーションをカスタマイズすることができます。
例えば、生産性や操作スピードが求められるアプリでは、ユーザーが操作に集中できるように、「Duration(モーション時間)」を短くしたり、対称的に、楽しく使うアプリでは、これから解説します「Oscillation(振動)」「Motion paths(モーションパス)」「Elevation(高さ)」「Stagger(よろめき)」などを活用して、そのブランドを表現することができます。
それでは、カスタマイズできるモーションの要素についてそれぞれ解説します。
なお、Material DesignのWebページでは、それぞれの要素に対するサンプルムービーやInteractive Tool(モーションを実際に操作して確認できるツール)があります。
それぞれのURLリンクを用意していますので、各要素のモーションもぜひ確認してみてください。
Speed｜スピード
「Speed(スピード)」は、画面遷移の持続時間である「Duration(モーション時間)」と「Easing(イージング)」を変更することで調整することができます。
※注意：この章の原文(英文)では「Duration(モーション時間)」のことを「Transition(トランジション)」と呼んでいるため、原文を読む際はご注意ください。
モーション時間が短く、標準的なイージングを採用した場合は、機能的な印象をユーザーに与えます。
逆に、モーション時間が長く、強調されたイージングを採用した場合は、様式的な印象をユーザーに与えます。
Sample movie : Speed
URL：https://material.io/design/motion/customization.html#speed
なお、モーションの「Speed(スピード)」について詳しく学びたい方は、こちらの記事も合わせてご確認ください。
Motion paths｜モーションパス
UI要素がモーションによって移動する際の軌道のことを「モーションパス(Motion path)」と呼びます。
このモーションパスをカスタマイズすることによって、ユーザーに与える印象を変えることができます。
UI要素がモーションにて斜め方向に移動する場合、そのモーションパスは線形もしくは円形を描きます。
線形のモーションパスの場合は、シンプルで機能的な印象をユーザーに与えます。
また、円形のモーションパスの場合は、ワクワクさせるような印象をユーザーに与えます。
Sample movie & Interactive tool : Motion paths
URL：https://material.io/design/motion/customization.html#motion-paths
Oscillation｜振動
「Oscillation(振動)」とは、UI要素がモーションによって移動したのち、移動の最終地点に着いた際に少し揺らす動きのことです。
通常、UI要素が移動の最終地点に着くと停止しますが、「振動」を付けることによって、遊び心のあるモーションにすることができます。
この「振動」は、以下にありますサンプルムービーを見ていただいた方が理解が早いと思いますので、合わせてご確認ください。
Sample movie : Oscillation
URL：https://material.io/design/motion/customization.html#oscillation
Transition patterns｜遷移パターン
「Transition pattern(遷移パターン)」とは、マテリアルデザインにて規定されている4つの「UI要素のモーションパターン」のことです。
通常、「Container」のあるUI要素がモーションする場合、「Container transform(コンテナ変形)」と呼ばれる遷移パターンを使用しますが、別の遷移パターンである「Shared axis(共通軸)」と呼ばれる遷移パターンを使用することで、印象を変えることができます。
「Shared axis」を使用することによって、より繊細で鋭い印象をユーザーに与えることができます。
Sample movie & Interactive tool : Transition patterns
URL：https://material.io/design/motion/customization.html#transition-patterns
なお、「Transition patterns(遷移パターン)」を詳しく学びたい方は、こちらの記事も合わせてご確認ください。
Elevation｜高さ
通常、「Container」を変形させるモーション中、その背景のUI要素は動きませんが、背景のUI要素をモーションさせることによって、UI要素間の「Elevation(高さ)」を強調させることができ、モーションそのものを強調させることができます。
Sample movie & Interactive tool : Elevation
URL：https://material.io/design/motion/customization.html#elevation
Stagger｜ゆらめき・ずらし
「Stagger(ゆらめき・ずらし)」とは、複数のUI要素を表示する際に簡単なアニメーションを付与することです。
具体的には、複数のUI要素の表示タイミングを順々にずらして表示する、などが挙げられます。
「Stagger(ゆらめき・ずらし)」を使用することによって、UI要素に対して連続性のある印象をユーザーに与えることができます。
この「ゆらめき・ずらし」は、以下にありますサンプルムービーを見ていただいた方が理解が早いと思います。
Sample movie : Stagger
URL：https://material.io/design/motion/customization.html#stagger
まとめ
マテリアルデザインでは、モーションをカスタマイズすることによって、ユーザーに与える印象を変えることができます。
モーションの細かい違いでも、UIとしてのブランドを表現することもできますので、それぞれのカスタマイズが与える印象を理解した上で、必要に応じて適用することが重要となります。
最後までお読みいただきありがとうございます。
今回の記事は以上です。
この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
