UIデザインガイドライン

マテリアルデザイン|No.26:Animated icons|日本語解説

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

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Animated icons(アイコンのアニメーション)」の概要について学ぶことができます。

Material Design : Design section “Animated icons”
URL:https://material.io/design/iconography/animated-icons.html

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

この記事の前提

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

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

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

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

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

アニメーションの効果

出典:Material Design : Design section “Animated icons”
URL:https://material.io/design/iconography/animated-icons.html#usage

アイコンを「アニメーション」させることによって、そのアイコンの「アクション」そのものを分かりやすく伝えることができます。

例えば、アイコンの「ON/OFF」の切り替えをアニメーションさせることにより、「ON/OFFの切り替えがされている」というアクションをユーザーに伝えることができます。

また、アニメーションすることによって「操作に対する楽しさ」をユーザーに感じさせる効果もあります。

それでは次に、アイコンのアニメーションをデザインする上で、考慮すべき「要素」と、その効果について解説します。

Emphasis|強調

アイコンをアニメーションさせる際、「単純な動き」にするか「複雑な動き」にするかで、そのアイコンの「強調」具合を変化させることができます。

重要なアイコンに対して「複雑なアニメーション」を使用することにより、その重要性をユーザーに伝えるとともに、「アニメーションによる楽しさ」も伝えることができます。

例えば、音楽アプリの操作アイコンに対して「複雑なアニメーション」を使用することにより、そのアイコンの重要性を表現できます。

Duration|期間(時間)

アイコンをアニメーションさせる際、そのアニメーションの「期間(時間)」を決めることもデザインにおいて重要です。

マテリアルデザインにおいては、以下の3種類の「期間」が推奨されています。

  • シンプルなアニメーション:100ms
  • 基本的なアニメーション:200ms
  • 複雑なアニメーション:500ms

※1ms(1mm sec)=1/1000秒

複雑なアニメーションにするほど、長い「期間」を用いてアニメーションさせる必要があります。

また、別々のアイコンでも、同じレベルの複雑さのアニメーションとする場合は、同じ「期間」とすることが推奨されています。

さらに、複数のアイコンがアニメーションする際、「アニメーションの開始タイミングをずらす」という考え方もあります。

「アニメーションの開始タイミングをずらす」ことによって、次々にアニメーションが進んでいくことから、そのアニメーション全体の「進行具合」を表現することができます。

States|状態

出典:Material Design : Design section “Animated icons”
URL:https://material.io/design/iconography/animated-icons.html#states

アイコンをアニメーションさせることによって、アイコンの「状態」の変化を強調させることができます。

「状態」の変化が強調されることにより、ユーザーに「現在の状態」を伝えやすくなります。

Theming|テーマ

アイコンをアニメーションさせることによって、そのUIの「テーマ(ブランド)」を表現することができます。

例えば、UIに使用されているロゴマークに対してアニメーションがある場合、UI上のその他のアイコンにも似たようなアニメーションを適用させることにより、UI全体として統一した「テーマ」を表現することができます。

まとめ

出典:Material Design : Design section “Animated icons”
URL:https://material.io/design/iconography/animated-icons.html#usage

アイコンをアニメーションさせることによって、楽しい雰囲気を表現できるだけでなく、色々な効果を期待できます。

そのため、「UIをより分かりやすくする手段」として、アイコンのアニメーションは、有効な手段の1つです。

また、マテリアルデザインのWebページには、この記事に載せられていない「アニメーションのサンプルムービー」がいくつかありますので、一通り確認してみることをおすすめします。

Material Design : Design section “Animated icons”
URL:https://material.io/design/iconography/animated-icons.html

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

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

続きを学びたい方は

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

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

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.25:System icons|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「System icons(システムアイコン)」について日本語解説しており、その概要について学ぶことができます。...

COMMENT

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

CAPTCHA