[{"data":1,"prerenderedAt":41},["ShallowReactive",2],{"post-dist54-event-report":3,"distEvent":31},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":6,"revisedAt":6,"title":7,"body":8,"categories":9,"author":11,"thumbnail":23,"ogpImage":27},"dist54-event-report","2026-09-09T08:20:56.633Z","2026-09-09T09:10:50.373Z","DIST.54 「アニメーションの良さは何で決まるのか？」参加レポート","\u003Cp>2026年9月1日（火）、DIST.54 「アニメーションの良さは何で決まるのか？」を開催しました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff2e70be73f9844fc945681439b77152c\u002FSlide%2016_9%20-%202.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Cp>エンジニア、デザイナー、インタラクションデザイナー、映像講師と、異なる立場からアニメーションに向き合う4名の登壇者が、それぞれの視点で動きやモーションデザインのノウハウを語った当日の様子をご紹介します。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>アニメーション実装の小技5選\u003C\u002Fstrong>\u003Cbr>kinew Katashin\u003C\u002Fli>\u003Cli>\u003Cstrong>Figma MotionとAI機能で作るアニメーション\u003C\u002Fstrong>\u003Cbr>DeNA・IE3 宮本 昌典\u003C\u002Fli>\u003Cli>\u003Cstrong>動きの外側と内側について探索する\u003C\u002Fstrong>\u003Cbr>昭和機電・THE GUILD 奥田 透也\u003C\u002Fli>\u003Cli>\u003Cstrong>デザインの中にあるモーションを考える\u003C\u002Fstrong>\u003Cbr>映像講師 ヤマダイ\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"hb5d26e22a8\">アニメーション実装の小技5選\u003C\u002Fh2>\u003Cp>kinewのKatashinさんによるLTでは、エンジニアの視点からアニメーションを実装する際に実践している5つの小技をご紹介いただきました。ここではその中から、一部を取り上げます。\u003C\u002Fp>\u003Ch3 id=\"he9e2d75326\">参考動画を撮って観察する\u003C\u002Fh3>\u003Cp>Katashinさんは、参考にしたいアニメーションを見つけたら、まず動画に撮って観察することを勧めます。動画をただ再生するだけではなく、スローにしたり気になる部分をシークしてよく見たりするそうです。一見複雑に見えるアニメーションも、分解してよく観察すると単純な要素の組み合わせだったりするため、自分でも再現できそうだと気づけるのが利点だと言います。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fba124cf7cbba4a6c99213b9608decfe9\u002FSlide%2016_9%20-%206.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Ch3 id=\"ha8fec195c9\">実機での確認と一晩寝かせる\u003C\u002Fh3>\u003Cp>ウェブ制作の現場でよくある落とし穴として、PCのブラウザ上でモバイルサイズの確認をしていると、実機で見たときに違和感が出ることがある点を指摘していました。必ず実機での確認を忘れないようにすることがポイントだそうです。さらに、自分が作ったアニメーションを何度も見ていると慣れてしまい、これでいいと思っても次の日に見るとダメに感じることがあるため、一晩寝かせることも大切だと締めくくりました。\u003C\u002Fp>\u003Ch2 id=\"h49bfa53900\">Figma MotionとAI機能で作るアニメーション\u003C\u002Fh2>\u003Cp>続いてのセッションは、DeNA・IE3のデザインマネージャー、デザイナーである宮本昌典さんによる発表です。Figmaの新機能「Figma Motion」と、AIエージェントを組み合わせたアニメーション制作の実践例を、実演を交えて紹介していただきました。\u003C\u002Fp>\u003Ch3 id=\"h1e31fdcf65\">Figma Motionの基本機能\u003C\u002Fh3>\u003Cp>まず、2026年6月にFigmaへ追加された「Figma Motion」という新機能を紹介していただきました。従来、アニメーションを作りこむときはFigmaで作ったデザインをLottieなど他ツールへエクスポートする必要がありましたが、Figma Motionの登場によって1つのツールで完結できるようになりました。\u003C\u002Fp>\u003Cp>位置や不透明度、スケールといったよくあるアニメーションツールのタイムライン機能や、イージングのプリセット、豊富なアニメーションプリセットが用意されている点も特徴です。実演では、オートキーフレームという、マウスで動かした分だけ自動でキーフレームを打ってくれる機能を使い、不透明度やスケールを組み合わせたシンプルなモーションをその場で作っていただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F9cb002fb36694463a6709099719cf951\u002FSlide%2016_9%20-%205.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Ch3 id=\"h925dd89ab2\">AIエージェントによるアニメーション編集\u003C\u002Fh3>\u003Cp>Figma Motionと同時に登場したAIエージェント機能についても解説がありました。デザインの調整やプラグイン作成、シェーダー作成に加えて、アニメーションの編集もAIエージェントで実現できるようになっています。実演では、テキストの不透明度が一文字ずつ変わる指示や、ハートのアイコンにバウンドするマイクロインタラクションを付ける指示をチャットで入力し、AIがアニメーションを自動生成する様子を紹介いただきました。\u003C\u002Fp>\u003Ch3 id=\"hc0779ef3d4\">プラグイン化による再利用性の向上\u003C\u002Fh3>\u003Cp>AIで作ったアニメーションは、その場限りで再利用しにくいという課題があります。そこで宮本さんは、作ったアニメーションをプラグイン化することを提案していました。画像が球体状に回転するアニメーションや、単語ごとに下からせり上がるテキストアニメーションをAIとの対話でプラグイン化し、毎回エージェントに指示をしなくても再利用できる状態にするワークフローは大変興味深かったです。\u003C\u002Fp>\u003Cp>さらに応用として、シェーダー機能とAIを組み合わせ、脈動するAIアバターのようなエフェクトを生成する事例も披露されました。\u003C\u002Fp>\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Ffile\u002F1677375441937184962\u002Fdist-54\" target=\"_blank\" rel=\"noopener noreferrer\">当日のスライド\u003C\u002Fa>\u003C\u002Fp>\u003Ch2 id=\"he9c5efb53a\">動きの外側と内側について探索する\u003C\u002Fh2>\u003Cp>3つ目のセッションは、昭和機電・THE GUILDのインタラクションデザイナー、プログラマーである奥田透也さんによる発表でした。「良いアニメーションとは何か」という問いを、ご自身の作品や仕事の実例を通じて掘り下げていただきました。\u003C\u002Fp>\u003Ch3 id=\"hebb55216e0\">自分自身の経験を手がかりにする\u003C\u002Fh3>\u003Cp>奥田さんは、良し悪しの判断基準を持つことの重要性を強調しました。いい悪いを判断するための判断基準がないとブレてしまうため、自分の中のゴール像をちゃんと持ってそこに向かうことが重要だと語ります。\u003C\u002Fp>\u003Cp>脳に作用する周波数を音楽に混ぜ込むアプリのUIデザインでは、ドラッグ操作のアニメーションにラジオのチューニングをするときの無限の解像度で探れる感じや、釣りで竿を振ったときに大きく飛んでいく感覚をイメージしながら矢印のモーションを作ったと明かしました。自分が経験したイメージを手がかりにすることは大事で、それを追求できていれば良いオリジナルになるという考えを、多摩美術大学での講義での学生の作例とともに紹介いただきました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F309a26c544744496b209aaa18bcc8db4\u002FSlide%2016_9%20-%204.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Ch3 id=\"hc8d94bdd42\">画面の外側までをモーションデザインと捉える\u003C\u002Fh3>\u003Cp>もう一つの視点として、画面の外の動きも含めてモーションデザインと考え、画面から意識が遠ざかるときのアニメーションまで広く捉えることを挙げています。\u003C\u002Fp>\u003Cp>BALMUDA Phoneのインタラクションデザインを手がけた経験から、ストライプ状のUIを上に引っ張るとアプリが起動するインタラクションを実装した背景には、スマートフォンの操作を「所作」として捉え、身のこなしや佇まいから来る洗練された動き、機能美としての身体性を画面の前後に接続して入れられないかと考えたとのことです。\u003C\u002Fp>\u003Ch3 id=\"h8ccc72f04a\">AI時代における人間の役割\u003C\u002Fh3>\u003Cp>最後に奥田さんは、AIの台頭を踏まえた今後の展望を語りました。シェーダーなどより難しい作り方の道もある一方、より自分の内側や外界との接続といった周辺に向かうことが有効だと述べます。ソツのないアニメーションはAIがやってくれるので、人間は自分自身がいいと思うことをやりきったほうが、役割分担としてはいいのではないかという言葉で締めくくりました。\u003C\u002Fp>\u003Ch2 id=\"h99721ea32b\">デザインの中にあるモーションを考える\u003C\u002Fh2>\u003Cp>最後のセッションは、映像講師のヤマダイさんによる発表です。大学や専門学校で映像を教える立場から、モーショングラフィックスにおける形と印象、視線誘導の重要性について語っていただきました。\u003C\u002Fp>\u003Ch3 id=\"h10968c6f1d\">形と印象、抽象と具体のバランス\u003C\u002Fh3>\u003Cp>NHKのインフォグラフィックスや群馬県のPR映像制作の経験を踏まえ、細かなエフェクトをどんどん重ねてこってりさせるよりも、印象として面白いものを作ってほしいという監督の指示のもと、シンプルな対応を心がけていると話していました。具体的に作り込みすぎるとターゲットが絞られすぎてしまうため、少し抽象化してそれぞれが思うことをモーションに乗せ、感情を揺さぶるようなものを作ることが多いそうです。\u003C\u002Fp>\u003Cp>AIの浸透についても触れ、学生に対しては手作業を強化して、その人にしか作れないものを武器にしてほしいと伝えていると語っていました。\u003C\u002Fp>\u003Ch3 id=\"haa2bd7fc83\">視線誘導とスクリーンディレクション\u003C\u002Fh3>\u003Cp>動画特有の難しさとして、動いた順番をどう見せるかという時間軸としてのグラフィックの見せ方が重要になり、視線誘導が大事なポイントになると説明していました。映像分野で使われる「スクリーンディレクション」という概念にも触れ、スクリーンの中の方向性を作る作業で、シェイプの先に何かがあると示しながら次のカットへつなげ、最終的なテーマへ視線を導く手法を紹介していました。\u003C\u002Fp>\u003Cp>また、大きなスクリーンでの表示を想定した仕事の経験から、NHKのスタジオで大きなモニターに映してイージングの最終チェックを行う必要があり、大きいモニターではスピードが速く見えてしまうため二重チェックが必要になるという実践的な注意点も共有していました。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fd40e0dad9bb54dc39d8d5c54a8ea607c\u002FSlide%2016_9%20-%203.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Ch3 id=\"h07984c2657\">受け手を意識したコミュニケーション\u003C\u002Fh3>\u003Cp>最後にヤマダイさんは、モーションデザインが本質的にはコミュニケーションであることを強調しました。受け手がいるということが大事で、動き自体で感動するというよりも、受け手が今まで経験したものを呼び起こすものであり、経験の違いによって感じるものが変わってくると語ります。\u003C\u002Fp>\u003Cp>学生への指導では、初めて見せる相手にいきなり強いものをぶつけるのではなく、ちゃんと受け取ってもらえるように作ることが大切だと伝えているそうです。モーションデザインの仕事をする上では、アートではなくデザインとして仕事をするわけで、最終的にはコミュニケーションをしっかりしなければならないという現実的な指摘もありました。\u003C\u002Fp>\u003Cp>以上、DIST.54の参加レポートでした。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F3105a3a52f4746a2ba6359014a73779c\u002FSlide%2016_9%20-%201.jpg\" alt=\"\" width=\"1200\" height=\"675\">\u003C\u002Ffigure>\u003Cp>過去の勉強会の動画はDISTの公式YouTubeチャンネルからいつでもご覧になれます。今回ご紹介したFigma Motionのデモやアニメーションの実演シーンなど、文章だけでは伝わりにくい「動き」そのものをぜひ動画で確認してみてください。\u003C\u002Fp>\u003Cp>DIST公式サイト：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"padding-bottom: 52.5%; padding-top: 120px;\">\u003Ca href=\"https:\u002F\u002Fdist.tokyo\u002F\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?url=https%3A%2F%2Fdist.tokyo%2F&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>\u003Cp>DIST公式YouTubeチャンネル：\u003C\u002Fp>\u003Cdiv class=\"iframely-embed\">\u003Cdiv class=\"iframely-responsive\" style=\"height: 140px; padding-bottom: 0;\">\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@DISTJP\" data-iframely-url=\"https:\u002F\u002Fiframely.net\u002Fapi\u002Fiframe?url=https%3A%2F%2Fwww.youtube.com%2F%40DISTJP&key=c271a3ec77ff4aa44d5948170dd74161\">\u003C\u002Fa>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cscript async src=\"https:\u002F\u002Fiframely.net\u002Fembed.js\" charset=\"utf-8\">\u003C\u002Fscript>",[10],"イベントレポート",[12],{"id":13,"createdAt":14,"updatedAt":15,"publishedAt":14,"revisedAt":15,"name":16,"job":17,"avatar":18,"profile":21,"xId":22,"githubId":22},"zj4140csfzp","2024-02-16T08:47:03.048Z","2024-02-26T02:43:14.033Z","沖 良矢","代表／インタラクションデザイナー",{"url":19,"height":20,"width":20},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5a1443817ff045dca487a1d1ff776039\u002Foki_202304.png",512,"1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI\u002FUX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学、東京造形大学非常勤講師。","448jp",{"url":24,"height":25,"width":26},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff256533001d14fb1a741cad9f296ad8d\u002Fdist54-event-report.png",720,1280,{"fieldId":28,"type":29},"ogpImage",[30],"タイプ1（タイトルのみ）",{"contents":32,"totalCount":38,"offset":39,"limit":40},[33],{"id":34,"isArchive":35,"startDate":36,"title":37},"dist-54",true,"2026-09-01T10:00:00.000Z","DIST.54 「アニメーションの良さは何で決まるのか？」",65,0,1,1788945096508]