CSS Nite in Osaka, vol.49 に参加しました。
このブログ、1年ほど放ったらかしになっていました……が、更新再開してぼちぼちと書いていこうかなと思っております。
さて、更新再開最初の記事は先月2/22(金)に行われた「CSS Nite in Osaka, vol.49 − UI / UX マイクロインタラクション −」の報告です。
仕事等でWebに携わっておられる方ならフロントエンドなどの情報サイト「ICS MEDIA」の名前は聞いたことがあるかと思います。そのICS MEDIAを運営しているICSの代表である池田泰延さんが大阪に来られると聞き私も行きたい！と思っていました。
申し込み開始の情報を入手して気がついた時には既に残席わずか……ギリギリセーフでした(；´∀｀)
ということで、2月22日、午後半休を取ってデジハリ梅田校へ！
セッション開始……の前に。
なぜか最初にじゃんけん大会(；´∀｀)
最初にジャンケン大会から始まった件 #cssnite #デジハリ大阪 pic.twitter.com/NehclNqAPc
— もりてつ＠NO BASS, NO LIFE. (@m_n_t_p) 2019年2月22日
Adobeクリアファイルとステッカー、そして今回登壇される池田さんの本「JavaScriptコードレシピ集」が当たると聞いて参加者全員テンションが上がりました！
………はい、私はすぐに負けました(苦笑)。
セッション本編：前半。
で、セッション本番。
前半はマイクロインタラクションとはどんなものなのかというところから入り、実例の紹介、そしてディレクター、デザイナー、エンジニアそれぞれの立場からどうやってマイクロインタラクションを実現するかといった流れの解説と続きました。
エンジニアあるある #cssnite #デジハリ大阪 pic.twitter.com/nVGl26eCfi
— もりてつ＠NO BASS, NO LIFE. (@m_n_t_p) 2019年2月22日
……まあエンジニアはこう考えがちですが(；´∀｀)
その後はマイクロインタラクションの必要性についての説明。
必要性にも『必要なもの』『必須ではないが、実装すると好印象』『印象は小さいが、使い勝手のためやっておきたい』『やっても良いが、効果が薄い』と段階がある。今回のプロジェクトに適しているのか？工数やスケジュールで実装可能なのか？考えて取り入れること。#cssnite #デジハリ大阪
— CSS Nite in Osaka (@cssnite_osaka) 2019年2月22日
インタラクションが必要なケース、そうでないケース、きっちり見極めたいものです。
そして、デザイナー側としてデザインツールでマイクロインタラクションを入れるための方法について。Adobeのツール(XD、After Efects、Animate)を使って実現する方法についての説明、およびエンジニアに渡すための方針についての説明があり前半終了となりました。
セッション本編：後半。
後半はエンジニア側の立場でマイクロインタラクションを実現するにはどのように実装すればよいかということを中心に話が進んでいきました。 もちろん、手段として中心となるのはCSS3(CSS Animation)やJavaScriptです。
ここからは過去のICS MEDIAの記事を紹介しながら進んでいったのでダダダッと貼っていきます(←手抜きですみません)。
また、上記記事で紹介されている手法以外にもcanvasを使ってリッチな表現を実現するCreateJSも紹介されていました。
実はこれもICSさんが作られた入門サイトがあったりします(笑)。
そのあとはマイクロインタラクションの実例紹介、そして今後のマイクロインタラクションの展望。今後は「接続型アニメーション」(ページ遷移の際も途切れずにアニメーションを行うもの)が増えてくるだろうという池田さんの予測。アプリでは使われるようになってきたものの、WebではNuxt.jsでようやく使えるようになってきたとのことです。
Nuxt.jsを使って接続型アニメーションの実例としてICSさんの採用サイトが紹介されていました。
なお、この数日後の池田さんのツイートによるとサイト公開後応募が来るようになったとのこと。やはり採用サイトも良いものを作れば応募に繋がりますね(・∀・)
最後に
- マイクロインタラクションのコツはシンプルなテクニックの集まり
- 本当に必要か、UXからの視点が大事
というまとめがありセッションは終了しました。
懇親会
場所を移動しての懇親会。
懇親会ヽ(・∀・)ノ #cssnite pic.twitter.com/ZUfd1rTSkq
— もりてつ＠NO BASS, NO LIFE. (@m_n_t_p) 2019年2月22日
池田さんや参加者の方々と飲み食いしつつフロントエンドを中心としたいろいろな話で盛り上がりました。
話の中で印象に残っているのは、先の採用サイトのように静的なサイトを作るのにはNuxt.jsが合っているという話。このことも後日Twitterで詳しく触れられていました。
私も同じ事を思っています。普通の静的サイトを作るためにNuxt.jsを導入するのがいいかも。
— 池田 泰延 / ICS (@clockmaker) 2019年3月20日
・Nuxtならモダンな開発環境を一発で整備できる
・HTMLを.vueファイルにそのまま書ける
・Scoped CSSの恩恵が得られる(重要)
・極端な話、Vue.jsの機能を使わなくても利用できる https://t.co/mQOYAUpdy1
私の個人サイトも一度Nuxt.jsで作り直してみようかな。
まとめ
デザイナーとエンジニアのそれぞれの立場でマイクロインタラクションをどうやって実現していくか、またその必要性や効果はどうなのかがとても把握しやすいセッションでした。 また、池田さんの語り口も非常に丁寧でわかりやすかったです。
東京で先日行われた再演、さらに大阪で4月に行われる再演も即日で枠が埋まる人気なのも頷けます。
別のテーマで機会があればまた池田さんのセッションが聴きたいですね( ´∀｀)
また、同じICSのメンバーである鹿野さんのセッションを大阪で実現して欲しいという声も多かったです。私も実現してほしいと思っています！
ちなみにこの日のTweetはTogetterにもまとめられていますのでそちらもぜひ。
