CSS Nite in Osaka, vol.49 開催レポート
2019年2月22日（金）に開催した CSS Nite in Osaka, vol.49 「UI/UX マイクロインタラクション」、 多くの方に参加いただき、大盛況のうちに終了いたしました。
さっそくセミナー当日の様子をレポートしていきます。
今回の会場は、JR大阪駅から徒歩6分の「デジタルハリウッド大阪校」さんです。
オープニング
司会進行は、CSS Nite in Osaka実行委員長の松下 絵梨（ツキアカリ）さん。
オープニング早々、CSS Nite名物のプレゼントタイムです。
あいこじゃんけんで勝ち残った方にはプレゼントが進呈されます。
プレゼントの一つ目はAdobe クリアファイルとステッカー。
二つ目のプレゼントは、なんと2019年1月に出版されたばかりの『JavaScriptコードレシピ集』（技術評論社）です。
思わぬプレゼントの登場に参加者の皆様も思わず気合が入ります。
会場の熱が上がったところで、メインプログラムスタート！
「現場で活用できるマイクロインタラクションの作り方」
今回の「現場で活用できるマイクロインタラクションの作り方」に登壇いただくのは池田 泰延さん（株式会社ICS）です。
池田さんは株式会社ICSの代表で、ウェブデザイナー、フロントエンジニア向けのメディア「ICS MEDIA」の運営や、筑波大学の非常勤講師も担当されています。
まずは実例を交えながら、マイクロインタラクションが果たす役割についてお話が進んでいきます。
マイクロインタラクションの役割とは、ボタンなどのユーザーインターフェースや画面遷移をする際にちょっとした動きを加えることで、ユーザー体験に喜びの瞬間を与えること。
Google Photosなどいくつかのウェブサイトの動きを見ていくうちに、マイクロインタラクションがどういうものなのか認識が深まっていきます。
続いて「マイクロインタラクションを作るためにはどうすればよいのか？」という内容に。
ディレクター、デザイナー、エンジニア、それぞれの立場で果たす役割を説明したうえで、
「エンジニアが実装しなければ、マイクロインタラクションの実装は実現しない。そのためには、ディレクター、デザイナー、エンジニア全員がマイクロインタラクションの必要性を共有し、お互いの作業について理解を示すことが大事。」
だと、池田さんは話します。
マイクロインタラクションと一言で言っても、カルーセルやローディング表示のように無いと品質が下がるものから、やっても効果が薄いものまで様々。インタラクション導入の目的と必要かどうかの見定めが重要なようです。
その後はマイクロインタラクションをデザインするソフトとして、Adobe XD、After Effects、Animateが紹介されました。
After Effects、Animateは高度なアニメーションが作れる分、習得が難しいとのこと。
アニメーション初心者の方は、まずAdobe XDに触れてみるのがよさそうですね！
「落下時に伸縮の動きを加える」「横移動に回転の動作を加える」など、実際に各ソフトを使用したいくつかの技法も紹介されました。
技法紹介の後は、デザイナーがエンジニアに受け渡す際にどのようにすればよいか、スクリプトの書き出し技術について説明していただき、前半は終了です。
休憩を挟んで後半戦スタート！
後半はエンジニアがマイクロインタラクションを実装する方法についてお話が進んでいきます。
アニメ画像は実装が簡単ですが、停止・再生などのタイミングを調整出来ないため、凝ったものを作ろうとすると、CSSアニメーション、CSSフィルター、CSSトランジション、JavaScriptなどでの実装が必要になるとのこと。
アニメ画像をモダンブラウザで実装するにはAPNGとWebPという二つの画像形式ファイルが必要となるそうですが、その二つのファイルを簡単に作成出来るツールが紹介されました。その名も「アニメ画像に変換する君」。このソフトは株式会社ICSが開発されたそうです。スクリプトでの実装についてはICS MEDIAの記事を交えて紹介されました。
その後は、マウスホバーの入と出で切り替えの速度を変えたり、プログレスバーのバーの動きについて、最初は遅く後になるにつれて速くするといった、ユーザー体験を良くするための細部の作り込みについてお話をうかがいました。
これからのマイクロインタラクションのトレンドは「接続型アニメーション」。
画面が丸々切り替わるのではなく、元の画面を残したまま次の画面へ切り替わるような手法がトレンドになるだろうということでした。株式会社ICSの採用情報ページもヒーローエリア(ページ上部の大きい部分)が残ったまま、ページ遷移をするように作られているとのこと。
最後に「マイクロインタラクションはシンプルなテクニックの集まり」「ユーザー体験の視点からインタラクションが本当に必要か考察が必要」というまとめで締めくくられてセッションは終了！
2時間という短い時間の中に事例紹介から技術的ノウハウまでみっちり詰まった非常に内容の濃いセッションでした。
デザイナー、エンジニア、それぞれの視点でマイクロインタラクションの実装についてお話をいただけたので、多くの参加者の方がご自身に近い視点で理解を深めることが出来た様子。
池田さん、ありがとうございました！
photo by 北村 渉
report by 真鍋 友輔
