この記事から得られること
この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Animated icons(アイコンのアニメーション)」の概要について学ぶことができます。
Material Design : Design section “Animated icons”
URL：https://material.io/design/iconography/animated-icons.html
なお、この記事は「約2〜4分」で読める内容となっています。
この記事の前提
この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。
また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。
また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。
なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。
アニメーションの効果
出典：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デザインの勉強を一緒にしていきましょう。
続きを学びたい方は
なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。
次のガイドラインを学びたい方は
一つ前のガイドラインを学びたい方は
