CSS Nite in Osaka, vol.50 開催レポート
2019年4月6日（土）にメビック扇町で開催した、
CSS Nite in Osaka, vol.50「UI/UX マイクロインタラクション」再演版
多くの方に参加いただき、大盛況のうちに終了いたしました。
ありがとうございました！
セミナー当日の様子をレポートします。
オープニング
司会進行は、CSS Nite in Osaka実行委員長の松下 絵梨（ツキアカリ）さん。
セミナー開始早々にプレゼントタイムです。
Adobeの「クリアファイル」「卓上カレンダー」「保冷バッグ」をかけてあいこじゃんけん！
プレゼントを獲得された方、おめでとうございます♪
会場の熱が上がったところで、メインプログラムスタート！
「現場で活用できるマイクロインタラクションの作り方」
登壇いただくのは池田 泰延（株式会社ICS）さんです。
株式会社ICS代表で筑波大学の非常勤講師を担当されていてます。
また、ウェブデザイナーとフロントエンジニアのための情報メディア「ICS MEDIA」の運営もされています。
まず「マイクロインタラクションの役割」について実例を紹介しながら、お話が進んでいきます。
マイクロインタラクションとは遊び心のある動きを指すことが多く、ユーザーインターフェイスや画面遷移をする際にちょっとした動きで使うことで、一見取るに足りない瞬間を『喜びの瞬間』に変えると解説されていました。
続いて、「マイクロインタラクションをどうやって作るのか？」の内容です。
ディレクター、デザイナー、エンジニアのそれぞれの立場の役割について解説した上で、「それぞれの仕事に対して尊敬と感謝の念を持つことが大切」と話されていました。
続いて、「マイクロインタラクションの必要性」の内容です。
コンテンツによってマイクロインタラクションの役割が異なるので、「ゴールとするUXを見据え、インタラクションを整理しよう」と話されていました。
マイクロインタラクションの実装はスケジュールにも限りがあるので、どれを実装するのかを考えるとよいと話されいました。
続いて、「デザインソフトでの制作」の内容です。
Adobe XD、After Effects、Animate（元Adobe Flash）のそれぞれのソフトの違いや制作事例を交えながら解説されていました。
Adobe XDはタイミングをずらす作業が苦手で、After Effects、Animateはタイミングをずらす作業が得意なソフトなので、ツールの使い分けが重要と話されていました。
モーションの参考サイトを説明していただき、前半は終了です。
休憩を挟んで後半戦スタート！
後半は「エンジニアが実装する方法」についてお話が進んでいきます。
CSSアニメーションやSVGアニメーションでマイクロインタラクションを実装する方法を解説され、複雑そうなアニメーションはスローモーションで見ると、一個一個のモーションはすごくシンプルな組み合わせになってると話されていました。
続いて、「今後のマイクロインタラクション」の内容です。
マイクロインタラクションの世界では接続型アニメーションが今後増えていくと解説されていました。
最後のまとめで「マイクロインタラクションはシンプルなテクニックの集まり」「本当に必要なインタラクションであるかUXの視点からの考察が大事」と締めくくられてセッションは終了！
エンディング
最後にもう一度プレゼントタイム。
池田さんとあいこじゃんけんスタート！
池田さんが執筆された『JavaScriptコードレシピ集』（技術評論社）です！
プレゼントを獲得された2名の方、おめでとうございます♪
あっという間でしたが終わりの時間。 お忙しい中ご参加いただきありがとうございました！
photo & report by 國富 一弥
