CSS Nite in Osaka, vol.49「UI/UXマイクロインタラクション」のレポート
2019/02/22(金)に、CSS Nite in Osaka, vol.49「UI/UXマイクロインタラクション」に参加してきました。
https://cssnite-osaka.com/vol49/cssnite-osaka.com
横長の会場で、スクリーンが3箇所に設置されていました。
初めにアイスブレイクで同じ机の方とお話しをしつつ、
プレゼントを賭けたじゃんけん大会が始まりましたw
講師の池田さんが執筆された「JavaScriptコードレシピ集」がプレゼントで、
そろそろ買おうかなと思ってた時だったので、
意気込んでじゃんけんしましたが、途中で脱落しましたw
セッションは休憩を挟んで前半後半の2部制でした。
UI/UXマイクロインタラクション
マイクロインタラクションの役割
前半は、「マイクロインタラクションの役割」を実例を交えた紹介から始まりました。
IBM Design Languageから引用されていた「突然の変化は現実の世界には存在しません」「継続的な動きがあることによってユーザーがどこに行きたいかを導く」というのが個人的に一番しっくりきました。
また、結局 エンジニアが作れるかどうか、作りたいと思えるかどうか が、マイクロインタラクションの実現というのにかかっているのは、「ほんそれ」という感じで納得でした。（ディレクターやデザイナーがやりたいと言っても、エンジニア自身がやるメリットを感じられなければ実現できない）
マイクロインタラクションの優先度
全てを対応していると重要な機能が間に合わないという事も実際問題としてあり得るため、
チーム全員でマイクロインタラクションの必要性を認識した上で、 優先度を決める 事が必要になってきます。
優先度の観点としては、「必要度」と「印象」の2軸が紹介されていて、さらに4つのパターンが紹介されていました。
実際にプロジェクトに適応する場合は、メンバーで相談してカテゴライズするのがよさそうです。
いずれにしても、必要度が高いと感じるもの(例えば、読み込みに時間がかかる場合のローディング表示など)はなるべく入れたいなと思いました。
前半の最後は、デザインワークの例の紹介。
Adobeのソフトが多様化していて、デザイン業務をやっていない身としては浦島太郎でしたが、
Adobe Animateの操作を見ていると、昔Flashを触っていた時の懐かしい感覚が蘇って来ました。
よくよく調べたら、名称がFlashから変わってたんですね。
インタラクションの状態変化を表すには最適だな〜と思いました。
あとは、イージングをうまく使う事によって 現実の世界にある動き を再現できるんだなというのは勉強になりました。
ここまでが前半。
マイクロインタラクションを実装する
後半は、エンジニアがどのようにして実装していくのかという話。
懐かしいところでいうと、「アニメ画像」。ゲームのボタンなどリッチな見せ方をするものとかではまだ現役とのことでせいた。
実装でよく使いそうなところとしては、CSSトランジションでの制御・JavaScriptでの制御かなと思いました。
CSSについては、フィルタも有効とのことで、これも試してみたいです。
実装のコツ的なところで、すごく勉強になったのが、マウスオーバーの演出の紹介。
インとアウトで表現を変えるというのが自分の観点になかったので目から鱗でした。
「マウスオーバー時はフィードバックを早くする事でレスポンスの良さをユーザーは体感する。逆にマウスアウト時はユーザーの関心は対象から離れているので余韻に使う。」
これが、今回のセッションで一番心に残ったワードです。
他にもデザイン時にイージングが例に上がっていましたが、これもそのまま実装できたり、
あとは、1文字ずつフェードする方法とかは、pタグから1文字ずつspan分割してアニメーション実行など、
ごりごり実装することで実現できそうなものがありましたw
最後に、トレンドとして「接続型アニメーション」が紹介されていましたが、WebだとSPAでできちゃうんですね。知らなかった。。勉強することが多くて何からしようか迷いますw
次のアクション
今回のセッションでかなり新しいインプットが多かったので、しばらくは、やってみる・アウトプットに集中しようかなと思います。
まずは、SPAの勉強がてらに、「接続型アニメーション」にチャレンジしようと思います。
