UIデザインガイドライン

マテリアルデザイン|No.32:Understanding motion|日本語解説

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

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Understanding motion(モーションの理解)」の概要を学ぶことができます。

Material Design : Design section “Understanding motion”
URL:https://material.io/design/motion/understanding-motion.html

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

この記事の前提

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

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

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

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

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

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

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

Principles|原則

マテリアルデザインでは、「モーション(UIの動き)」に対して以下の3つの原則があり、「モーション」を使うことによって、UIの表現を豊かにし、使いやすくすることができます。

原則01:Informative|有益性

「モーション」は、「UIの要素」「アクション(操作)」「アクション(操作)の結果」の関係を強調することによって、ユーザーに情報を通知します。

原則02:Focused|集中

「モーション」は、ユーザーが気を散らすことなく、重要なことに集中できるようにします。

原則03:Expressive|表現性

「モーション」は、操作によるインタラクションに個性を与え、ブランドを表現することができます。

それでは次に、「モーション」によって得られる効果について解説します。

なお、ここから先は、理解を深めるために、マテリアルデザインの以下Webページの「サンプルムービー」を見ながら読み進めることをおすすめします(この記事内には参照の関係上、ムービーはありません)。

Material Design : Design section “Understanding motion”
URL:https://material.io/design/motion/understanding-motion.html

Hierarchy|階層

「モーション」は、UIの変化の中で「それぞれの要素がどのように関連しているか」という「階層」を示すことができます。

例えば、メールのUIにおいて、「受信ボックスリスト」画面からメールを選択すると、背面から「メールの詳細」画面が表示される「モーション」をすることにより、「受信ボックスリスト」と「メールの詳細」に対して、親と子の関係を表現することができます。

Sample movie : Hierarchy
URL:https://material.io/design/motion/understanding-motion.html#hierarchy

Brand expression|ブランド

「モーション」は、「ブランド」や「UIのスタイル」を表現することができます。

例えば、「トランジション(画面遷移の仕方)」を工夫することによって、そのUIにおける「ブランド」を表現することができます。

また、アイコンにアニメーションを加えることにより、アイコンの意味を強調させることができます。

Sample movie : Brand expression
URL:https://material.io/design/motion/understanding-motion.html#brand-expression

Feedback and status|フィードバックとステータス

「モーション」は、ユーザーに「フィードバック」を提供し、UI操作における「ステータス」を伝えることができます。

例えば、キーパッドを入力した際にアニメーションさせることによって、「入力の成功」を示すフィードバックをユーザーに提供することができます。

Sample movie : Feedback and status
URL:https://material.io/design/motion/understanding-motion.html#feedback-and-status

User education|ユーザーへの教育

「モーション」は、ユーザーの「操作方法の理解」を手助けすることができます。

例えば、上方向にスワイプが必要なUIでは、UIを上方向にアニメーションさせることによって、ユーザーに「スワイプできる」ということを伝えることができます。

Sample movie : User education
URL:https://material.io/design/motion/understanding-motion.html#user-education

まとめ

マテリアルデザインでは、UIに対して「モーション」を使うことによって、さまざまな効果を与えることができます。

「モーション」の利用はUIの「使いやすさ」にもつながりますので、「モーション」のさまざまな効果を理解した上で、活用を検討してみることをおすすめします。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

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

次のガイドラインを学びたい方は

※作成中です※

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.31:Applying shape to UI|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Applying shape to UI(UIへの形状の適用)」の概要を学ぶことができます。...

COMMENT

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

CAPTCHA