1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="W5MBM8wHHD"><a href="https://uxdaystokyo.com/articles/animation-ui-easier-understand/">アニメーションを使うと飛躍的にわかりやすくなるUI</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/animation-ui-easier-understand/embed/#?secret=W5MBM8wHHD" width="600" height="338" title="“アニメーションを使うと飛躍的にわかりやすくなるUI” — UX TIMES" data-secret="W5MBM8wHHD" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2023/06/bose-anime.gif480270「百聞は一見にしかず」と言いますが、アニメーションしていることで、テキストでは伝わりにくい内容がわかることがあります。 プレゼンでもアニメーションが入ると、理解しやすくなります。動き自体に意味があるものもありますが、プレゼンでよくある「＊＊＊の3つ」のように、要約したものをひとつずつ段階的に表示させることで、情報を集中させることができ、理解しやすくなるものメリットです。 このようにアニメーションは上手に利用すると効果バツグンです。今回は、アニメーションを使うと飛躍的にわかりやすくなる使いどころをご紹介します。 商品説明をアニメーション動画で作る アニメーションは、プレゼンだけでなく、ウェブサイトでも利用できます。プレゼンと同じで、商品の説明動画をアニメーションで表示させることでユーザーはいちいち動画を再生せずにしてもみることができます。 引用：kickstarter　Magware 2.0  操作をアニメーションで表現 引用：https://minkabu.co.jp/choice/kabu-rakuten-vti/ スマートフォンでテーブルの横スクロールがある場合、横スクロールはでますが、高さが高くなったり、スマホのサイズが小さい場合はスクロースが表示されない場合もあります。そこで、横スクロールがあることをアニメーションで表現するとわかりやすいです。 オンボーディングをアニメーションで作る BOSE：アプリセット画面 Bose の眠りを快適にしてくれるというヘッドセットをご存知でしょうか？ ケースで充電できる仕組みで、はじめて使う方にはわかりにくいのですが、スマホのアプリではアニメーションを利用してわかりやすく説明してくれます。アニメーションを利用していることで、言葉で伝わりにくい操作方法を理解させやすくなります。また、説明文だけ変更すれば良いアニメーションで作っているので多言語対応しやすい作りが世界ブランドを感じさせます。 操作（UI）の説明をアニメーションで作ろう！ 引用：イオン銀行　FAQページ イオン銀行で氏名変更をする際に分からなかったので、FAQページを見たのですが、そのページ自体もテキスト文章で説明されわかり難かったです。 私は、上の画像にあるように、トップページの「▼」によって、そこからプルダウンできると思ったのですが、実際は異なるUIでした。よく見ると、右にお客様情報各種設定がアクティブ状態になっていたので、そこからだと知ることができましたが、認識するまでに時間を要してしまいました。 そもそものUIが良くないこともありますが、イオン銀行では操作を説明するページが多く存在します。せっかく作った説明ページでも分かりにくいのはよくありません。 そこで、アニメーションを使って「お客様情報各種設定」ボタンからプルダウンしている画像があれば、一目瞭然でわかりやすいでしょう。 S/N比に気をつける アニメーションを軽くしてくれるlotefilesの紹介動画でも話させていただきましたが、アニメーションを作る際には、シグナル＆ノイズ（S/N比）も気にしておきたいですね。 何を持ってシグナルなのか、ノイズなのか、は見たい情報によって異なりますが、単純にノイズになりえやすいアニメーションを多様すると、比率は低くなってしまいます。できるだけシグナルがわかるようなデザイン設計をしましょう。 【アニメーションを効果的に活用し、ユーザーの心を掴もう】 以下の内容がわかる動画です！特に、Figmaとの連携で簡単にアニメーションが作れます！ lottiefilesアニメーションとは何か？使い方とFigmaとの連携　 https://www.youtube.com/watch?v=OHqv-1BlzBY まとめ アニメーションを効果的に利用できる場所は以外にたくさんあります。ぜひ使っていきましょう！ アニメーションの使いどころ 商品説明操作UIオンボーディングFAQなどの操作説明ページ