CSS Nite in Osaka, vol.49「UI/UX マイクロインタラクション」
-
cssnite_osaka
- 2404
- 7
- 0
- 19
-
- いいね！19
CSS Nite in Osaka
@cssnite_osaka
Tipsを皆さん、ふむふむと頷きながら見ています。Animate、After Effects細かい動きも精度高く表現できます。 Animate ・横移動に傾斜の動作を加える、バウンスなど After Effects ・横移動に回転の動作を加える ・落下時に伸縮の動きを加える #cssnite #デジハリ大阪
2019-02-22 19:50:27
前川 昌幸@maepon
@maepon
これを思い出した。 THE ILLUSION OF LIFE the12principles.tumblr.com #cssnite #デジハリ大阪
2019-02-22 19:48:55
CSS Nite in Osaka
@cssnite_osaka
作ったもの、どういう形でエンジニアに渡す？ ・ソフト内で定義→ファイルからエンジニアが読み解くしかない ・動画として書き出す→表現が忠実で再現度が高い。しかしデータ容量が巨大になりがち… ・スクリプトとして書き出す→動的なデータに対して、組み込める。軽量◎。 #cssnite #デジハリ大阪
2019-02-22 19:52:17
CSS Nite in Osaka
@cssnite_osaka
スクリプト書き出し→XDはできない、AEはプラグインで利用可能、Animateは利用可能 #cssnite #デジハリ大阪
2019-02-22 19:53:11
CSS Nite in Osaka
@cssnite_osaka
AfterEffects+Bodymovin＋Lottie adobeexchange.com/creativecloud.… #cssnite #デジハリ大阪 pic.twitter.com/TQ2yZZbKDk
2019-02-22 19:56:37
拡大
CSS Nite in Osaka
@cssnite_osaka
参考サイト ・UI Movement uimovement.com ・LottieFiles - Free animation files build for Lottie, Bodymovin lottiefiles.com/featured #cssnite #デジハリ大阪
2019-02-22 19:59:09
CSS Nite in Osaka
@cssnite_osaka
10分の休憩タイム！後半ではエンジニアが実装する方法をお話しいただきます！お菓子で糖分摂取してくださいねー！ #cssnite #デジハリ大阪 pic.twitter.com/HFMx9oaYZ7
2019-02-22 20:03:06
拡大
CSS Nite in Osaka
@cssnite_osaka
『アニメ画像に変換する君』についてはICS MEDIAでも説明されています。 LINEアニメスタンプにも利用できる！ APNGやWebPへ変換可能なアプリ「アニメ画像に変換する君」をリリース - ICS MEDIA ics.media/entry/12746 #cssnite #デジハリ大阪
2019-02-22 20:18:43
himoton
@himoton
『アニメ画像に変換する君』便利！お世話になってます！ ics.media/entry/12746 #cssnite #デジハリ大阪
2019-02-22 20:20:34
CSS Nite in Osaka
@cssnite_osaka
CSS animation、transitionで色々な表現ができます。どんなことができるかなと考えるのも楽しいですよね！｜CSSアニメーションで実現！ コピペで使えるマイクロインタラクション - ICS MEDIA ics.media/entry/15130 #cssnite #デジハリ大阪
2019-02-22 20:21:09
CSS Nite in Osaka
@cssnite_osaka
明るくなるbrightnessなどを使って、ユーザーの行動の結果を視覚的にわかりやすく。CSSフィルターはトランジションとの相性◎｜CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA ics.media/entry/15393 #cssnite #デジハリ大阪
2019-02-22 20:26:23
CSS Nite in Osaka
@cssnite_osaka
SVGをCSSプロパティで形状を変えたりとなめらかで印象的なアニメーションを実装できます。｜UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA ics.media/entry/15970 #cssnite #デジハリ大阪
2019-02-22 20:28:45
ほっぺ／淀川コナン
@aktuehr
「マウスオーバー時はフィードバックを早くする事でレスポンスの良さをユーザーは体感する。逆にマウスアウト時はユーザーの関心は対象から離れているので余韻に使う。」 #cssnite #デジハリ大阪
2019-02-22 20:38:44
CSS Nite in Osaka
@cssnite_osaka
アニメーション付きプログレスバーの種類別おすすめの使い方 blogs.adobe.com/japan/web-best… #cssnite #デジハリ大阪
2019-02-22 20:39:52
よしぱん
@yoshipan
プログレスバー、アニメーションをゆっくり始め、終わりに近づくにつれ速度を速めることで、はやく読み込んだように感じさせる。心理トリックみたいで面白い！ #cssnite #デジハリ大阪
2019-02-22 20:41:26
CSS Nite in Osaka
@cssnite_osaka
ドロワー表示のCSSバージョン。 出てくる時にひし形変形で傾斜もつけられる！#cssnite #デジハリ大阪
2019-02-22 20:45:47
CSS Nite in Osaka
@cssnite_osaka
マイクロインタラクションの世界では接続型アニメーションが今後増えていく。 css-tricks.com/native-like-an… #cssnite #デジハリ大阪
2019-02-22 20:47:51
CSS Nite in Osaka
@cssnite_osaka
JSで中身を差し替え。遷移しても保持したいページがあるときにもつかえる！参考ページはこちら。 株式会社ICS 採用サイト ics.media/recruit #cssnite #デジハリ大阪
2019-02-22 20:49:48
CSS Nite in Osaka
@cssnite_osaka
『多様なユーザーを受け入れる』ために、アクセシビリティを考えてアニメーションを取り入れないという選択肢もある。 #cssnite #デジハリ大阪
2019-02-22 20:51:55
CSS Nite in Osaka
@cssnite_osaka
prefers-reduced-motionの対応ブラウザ。 caniuse.com/#feat=prefers-… #cssnite #デジハリ大阪
2019-02-22 20:53:08
CSS Nite in Osaka
@cssnite_osaka
まとめ ・マイクロインタラクションのコツはシンプルなテクニックの集まり ・本当に必要なインタラクションかUXの視点からの考察が大事 #cssnite #デジハリ大阪
2019-02-22 20:53:18
CSS Nite in Osaka
@cssnite_osaka
濃厚な2hのセッションでした！ありがとうございました！ #cssnite #デジハリ大阪 pic.twitter.com/LHYhPZBG9j
2019-02-22 20:54:55
拡大
CSS Nite in Osaka
@cssnite_osaka
予告！ CSS Nite in Osaka, vol.51 2019年5月18日(土) 会場：中央会計 出演：鍋坂 樹伸さん テーマ：写真撮影ワークショップ 詳細は追って！ #cssnite #デジハリ大阪
2019-02-22 20:58:31
もりてつ＠NO BASS, NO LIFE.
@m_n_t_p
セッション終わりました。盛りだくさんの充実した内容でした……池田さん( @clockmaker )お疲れ様でした＆ありがとうございました！( ´∀｀) #cssnite #デジハリ大阪
2019-02-22 21:00:01