UIデザインガイドライン

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

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

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

Material Design : Design section “Customization”
URL:https://material.io/design/motion/customization.html#applying-customizations

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

この記事の前提

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

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

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

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

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

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

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

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(スピード)」について詳しく学びたい方は、こちらの記事も合わせてご確認ください。

マテリアルデザイン|No.34:Speed|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「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(遷移パターン)」を詳しく学びたい方は、こちらの記事も合わせてご確認ください。

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

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

続きを学びたい方は

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

次のガイドラインを学びたい方は
マテリアルデザイン|No.37:Gestures|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Gestures(ジェスチャー)」の概要を日本語解説で学ぶことができます。...

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

COMMENT

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

CAPTCHA