40代からのフロントエンドエンジニアリング。

フロントエンドを中心に、Web関連話をゆるく書いていきます。

CSS Nite in Osaka, vol.49 に参加しました。

このブログ、1年ほど放ったらかしになっていました……が、更新再開してぼちぼちと書いていこうかなと思っております。

さて、更新再開最初の記事は先月2/22(金)に行われた「CSS Nite in Osaka, vol.49 − UI / UX マイクロインタラクション −」の報告です。

CSS Nite in Osaka, vol.49

仕事等でWebに携わっておられる方ならフロントエンドなどの情報サイト「ICS MEDIA」の名前は聞いたことがあるかと思います。そのICS MEDIAを運営しているICSの代表である池田泰延さんが大阪に来られると聞き私も行きたい!と思っていました。

申し込み開始の情報を入手して気がついた時には既に残席わずか……ギリギリセーフでした(;´∀`)

ということで、2月22日、午後半休を取ってデジハリ梅田校へ!

セッション開始……の前に。

なぜか最初にじゃんけん大会(;´∀`)

Adobeクリアファイルとステッカー、そして今回登壇される池田さんの本「JavaScriptコードレシピ集」が当たると聞いて参加者全員テンションが上がりました!

………はい、私はすぐに負けました(苦笑)。

セッション本編:前半。

で、セッション本番。

前半はマイクロインタラクションとはどんなものなのかというところから入り、実例の紹介、そしてディレクター、デザイナー、エンジニアそれぞれの立場からどうやってマイクロインタラクションを実現するかといった流れの解説と続きました。

……まあエンジニアはこう考えがちですが(;´∀`)

その後はマイクロインタラクションの必要性についての説明。

インタラクションが必要なケース、そうでないケース、きっちり見極めたいものです。

そして、デザイナー側としてデザインツールでマイクロインタラクションを入れるための方法について。Adobeのツール(XD、After Efects、Animate)を使って実現する方法についての説明、およびエンジニアに渡すための方針についての説明があり前半終了となりました。

セッション本編:後半。

後半はエンジニア側の立場でマイクロインタラクションを実現するにはどのように実装すればよいかということを中心に話が進んでいきました。 もちろん、手段として中心となるのはCSS3(CSS Animation)やJavaScriptです。

ここからは過去のICS MEDIAの記事を紹介しながら進んでいったのでダダダッと貼っていきます(←手抜きですみません)。

ics.media

ics.media

ics.media

ics.media

また、上記記事で紹介されている手法以外にもcanvasを使ってリッチな表現を実現するCreateJSも紹介されていました。

createjs.com

実はこれもICSさんが作られた入門サイトがあったりします(笑)。

ics.media

そのあとはマイクロインタラクションの実例紹介、そして今後のマイクロインタラクションの展望。今後は「接続型アニメーション」(ページ遷移の際も途切れずにアニメーションを行うもの)が増えてくるだろうという池田さんの予測。アプリでは使われるようになってきたものの、WebではNuxt.jsでようやく使えるようになってきたとのことです。

Nuxt.jsを使って接続型アニメーションの実例としてICSさんの採用サイトが紹介されていました。

ics.media

なお、この数日後の池田さんのツイートによるとサイト公開後応募が来るようになったとのこと。やはり採用サイトも良いものを作れば応募に繋がりますね(・∀・)

最後に

  • マイクロインタラクションのコツはシンプルなテクニックの集まり
  • 本当に必要か、UXからの視点が大事

というまとめがありセッションは終了しました。

懇親会

場所を移動しての懇親会。

池田さんや参加者の方々と飲み食いしつつフロントエンドを中心としたいろいろな話で盛り上がりました。

話の中で印象に残っているのは、先の採用サイトのように静的なサイトを作るのにはNuxt.jsが合っているという話。このことも後日Twitterで詳しく触れられていました。

私の個人サイトも一度Nuxt.jsで作り直してみようかな。

まとめ

デザイナーとエンジニアのそれぞれの立場でマイクロインタラクションをどうやって実現していくか、またその必要性や効果はどうなのかがとても把握しやすいセッションでした。 また、池田さんの語り口も非常に丁寧でわかりやすかったです。

東京で先日行われた再演、さらに大阪で4月に行われる再演も即日で枠が埋まる人気なのも頷けます。

別のテーマで機会があればまた池田さんのセッションが聴きたいですね( ´∀`)

また、同じICSのメンバーである鹿野さんのセッションを大阪で実現して欲しいという声も多かったです。私も実現してほしいと思っています!

ちなみにこの日のTweetTogetterにもまとめられていますのでそちらもぜひ。