CSS Nite in Osaka, vol.50「UI/UX マイクロインタラクション」再演版

あいまいみー｜designer @imyme_999

■ CSS Animation CSSのみで実装可能 ・繰り返し動くモーション ＞CSSモーション ics.media/entry/15130/ ・効果をつける ＞CSSフィルター ics.media/entry/15393/ ・CSSフィルター＋トランディション ＞組み合わせが良い #cssnite

あいまいみー｜designer @imyme_999

・マウスオーバーの演出 マウスイン→早く マウスオーバー→ 遅く ＞余韻が残るようになる ユーザーが興味を持った瞬間にホバーを早くする →ユーザーの興味があるところにフォーカス ・プログレスバーを早くする ＞ユーザーの体感をよくする 参考：blogs.adobe.com/japan/web-best… #cssnite

あいまいみー｜designer @imyme_999

■ 今後のマイクロインタラクション ・トレンド 接続型マイクロインタラクション ＞つながりを感じるようなデザイン ＞App Store CSS トリップス ＞アバターがついてくる #cssnite

んじゃみ @nnjyami

マイクロインタラクション、実際に池田さんのお話聴けてすごく良かった！ コツはあるけれど、細かなことを地道に積み上げて実装していくことが必要と学びました！ メモまとめた✍️ scrapbox.io/179/UI%2FUX_Mi… #cssnite

あいまいみー｜designer @imyme_999

■ 多様なユーザーを受け入れる ユーザーの選択肢を与える ＞OSにアニメーション有無が用意されている ・CSSで動きを抑制する ＞OSで選択できる ＞Windows10、MacOS #cssnite

あいまいみー｜designer @imyme_999

［まとめ］ ■ マイクロインタラクションのコツ ・シンプルなテクニックの集まり ＞参考サイトを観察するとシンプルなものが集まっている ・UXの視点から本当に必要かを考える ＞各セクションのスタッフと話し合う #cssnite

CSS Nite in Osaka @cssnite_osaka

懇親会はビアバッシュです🍻 #cssnite pic.twitter.com/Y6Maj6cZs8

拡大

Eri Matsushita 松下 絵梨 @matsu_eri

おつかれさまでした！ #cssnite pic.twitter.com/hxeXSadHLD

拡大

ももねこ🍑おばま / DUCK WORKS @momoneko_dw

CSS Niteに行ってきた～🍀 やりたいことがたくさん増えた😄😄とっても楽しくてとっても参考になりました、ありがとうございました！！ #cssnite cssnite-osaka.com/vol50/

津田亮_SEO @tsudaryo1715

CSS nite in Osaka お疲れ様でした！ アニメーションの優先度や具体的な作り方から意識まで学べてとても満足です！ そして懇親会も新しい出会いがあり嬉しく思います^ ^