2019/3/19 cssnite afterdark参加レポート

こんにちは、折坂です。
今回は、先日参加したCSS Nite After Dark「現場で活用できるマイクロインタラクションの作り方」の参加レポートです。

●マイクロインタラクションとは？

ユーザーのアクションに対するフィードバックやステータスの変化を正しく伝えるための細かなデザインのこと
引用：https://webdesign-trends.net/entry/7583より

●CSS Niteとは？

https://cssnite.jp/

●講師の池田泰延さん
https://twitter.com/clockmaker

• 発表の概要
• 実際に現場にどう落とし込むか？
• Nuxt.jsへの挑戦
• まとめ

発表の概要

発表は以下のようにマイクロインタラクションに関して網羅的にまとめられており、
二時間でよくまとまったなと関心してしまう内容でした。

・マイクロインタラクションの役割
・ウェブの世界でのマイクロインタラクション
・マイクロインタラクションの必要性
・デザインソフトでの制作
・エンジニアが実装する場合
・今後のマイクロインタラクション

さすが、大阪では再演版をやるぐらいあります。

＊この記事を書いてる時点で、すでに再演版もキャンセル待ち！！

参考になったことと感想をいくつか挙げてみました。

• マイクロインタラクションの役割は、ユーザーの認知と行動の手助けである。
• AppleやGoogleなどの先進的な企業はデザインシステムにマイクロインタラクションが組み込まれている。特にAppleのヒューマンインターフェイスガイドラインは、参考になりそうである。
• コンテンツの種類で、マイクロインタラクションの役目が違う。 ウェブの場合は、UIの理解の手助けがメイン。
• 池田さんの情報源の紹介、やはりインターネットの海のなかにはまだまだ知らないサイトがあるのだなと、関心してしまいました。海外にはまだまだ知らないサイトがありますね。

実際に現場にどう落とし込むか？

翌日、早速情報を社内共有しました。
マイロプスでは、セミナーと書籍は全面的に会社サポートですが、
参加したら発表がマストです。
予想通りでしたが、ディレクター、デザイナー、エンジニア間での
マイクロインタラクションについての取り扱い（誰が発案し、どのように伝えていくか？）あたりが、話題の中心となりました。
また、社内ではアニメーションに関する知識・経験が薄いので、そこらも勉強の必要があるなと感じるところでありました。

池田さんの発表では、AfterEffectやAnimateとの連携なども発表され、
その中でも、AfterEffect+bodymovinは、実は本サイトのトップでロゴのアニメーションに使いたかったので改めてチェックしてみます。

NUXT.jsへの挑戦

発表の後半でNUXT.js(https://ja.nuxtjs.org/)が紹介されました。
名前は知っていたけど、案件では登場したことがなく、事前情報ほぼない状態で説明をきいたのですが、控えめにいって凄いですね。
インストールすると、開発環境から、ローカルサーバ、デプロイツール、テストツールまでパッケージで組み込まれるようです。
マイロプスでもよく使うSassとwebpackの環境もはいっているようです。
以前、Movable Type（DATA.API）で、SPAを制作したときは、フロントエンドのインタラクションが弱めで、そこらに強いフレームワークを探していたのですが、DATA.APIと組み合わせるのにちょうどいいかもしれません。

まとめ

CPUが高性能化し、回線が早くなることで10年ぐらい前だとflashで実装していたような表現を、jsをはじめとする代替技術で実装できるようになってきました。
きっと、モバイルは、よりネイティブアプリの挙動に近づいていき、そのために高度な実装が要求されてくるような局面がやってくるのではないでしょうか？

いち制作者としては、難しい技術に挑戦しセンセーショナルなものを作りたいところもありますが、高度な技術が全てのクライアントに必要なわけではないので経営者としては、どのように舵取りしていこうかなと前向きに悩ましいところであります。
ただどんな凄い技術が開発されても、それに惑わされず自分たちのビジョンにそって、クライアントに向き合いビジネスに邁進できればと思います。