CSS Nite in Osaka, vol.50 開催レポート

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」の運営もされています。

登壇いただくのは池田 泰延(株式会社ICS)さん

まず「マイクロインタラクションの役割」について実例を紹介しながら、お話が進んでいきます。

マイクロインタラクションとは遊び心のある動きを指すことが多く、ユーザーインターフェイスや画面遷移をする際にちょっとした動きで使うことで、一見取るに足りない瞬間を『喜びの瞬間』に変えると解説されていました。

マイクロインタラクションの役割について説明する池田さん

続いて、「マイクロインタラクションをどうやって作るのか?」の内容です。

ディレクター、デザイナー、エンジニアのそれぞれの立場の役割について解説した上で、「それぞれの仕事に対して尊敬と感謝の念を持つことが大切」と話されていました。

マイクロインタラクションをどうやって作るのか?について説明する池田さん

続いて、「マイクロインタラクションの必要性」の内容です。

コンテンツによってマイクロインタラクションの役割が異なるので、「ゴールとするUXを見据え、インタラクションを整理しよう」と話されていました。

マイクロインタラクションの実装はスケジュールにも限りがあるので、どれを実装するのかを考えるとよいと話されいました。

マイクロインタラクションの必要性について説明する池田さん

続いて、「デザインソフトでの制作」の内容です。

Adobe XD、After Effects、Animate(元Adobe Flash)のそれぞれのソフトの違いや制作事例を交えながら解説されていました。

Adobe XDはタイミングをずらす作業が苦手で、After Effects、Animateはタイミングをずらす作業が得意なソフトなので、ツールの使い分けが重要と話されていました。

モーションの参考サイトを説明していただき、前半は終了です。

デザインソフトでの制作について説明する池田さん

休憩を挟んで後半戦スタート!
後半は「エンジニアが実装する方法」についてお話が進んでいきます。

CSSアニメーションやSVGアニメーションでマイクロインタラクションを実装する方法を解説され、複雑そうなアニメーションはスローモーションで見ると、一個一個のモーションはすごくシンプルな組み合わせになってると話されていました。

エンジニアが実装する方法について説明する池田さん

続いて、「今後のマイクロインタラクション」の内容です。

マイクロインタラクションの世界では接続型アニメーションが今後増えていくと解説されていました。

最後のまとめで「マイクロインタラクションはシンプルなテクニックの集まり」「本当に必要なインタラクションであるかUXの視点からの考察が大事」と締めくくられてセッションは終了!

エンディング

最後にもう一度プレゼントタイム。
池田さんとあいこじゃんけんスタート!

最後にもう一度プレゼントタイム

池田さんが執筆された『JavaScriptコードレシピ集』(技術評論社)です!
プレゼントを獲得された2名の方、おめでとうございます♪

プレゼントの『JavaScriptコードレシピ集』(技術評論社)を手にする池田さん

あっという間でしたが終わりの時間。 お忙しい中ご参加いただきありがとうございました!

photo & report by 國富 一弥

アンケートでいただいたご感想

全体を通しての感想

セッションの感想

ツイッターまとめ

次回予告

次回は5月18日にCSS Nite in Osaka, vol.51が開催されます。

イベント名 CSS Nite in Osaka, vol.51
「Photo & XD Direction」
日時 2019年5月18日(土)14:00-18:00(開場13:30)
(終演時間は変更の可能性アリ)
会場 中央会計セミナールーム
大阪市中央区備後町3-6-2 大雅ビル3F

協賛・協力