CSS Nite After Dark 2019 「現場で活用できるマイクロインタラクションの作り方」のフォローアップを公開します

2019年3月19日に開催したCSS Nite After Dark 2019の池田 泰延さん（ICS）の『現場で活用できるマイクロインタラクションの作り方』フォローアップを公開します。

• スライド
• サンプル

メッセージ、補足など

マイクロインタラクションのセッションにご参加いただき、ありがとうございました。

今回のセッションでは、マイクロインタラクションの役割から、モーション系のツールで作る話、エンジニアがCSSやJavaScriptで実装する段階まで具体的に紹介しました。

ウェブサイトにマイクロインタラクションを実装しようとするとデザイナーやエンジニアのプラスアルファの作業となることが多く、実装工数は増える可能性があります。実装工数が増えようとも、ユーザー体験の向上のために提案できることは大事です。そのため、マイクロインタラクションの必要性をお伝えすることに注力しました。プロダクトが目指すユーザー体験を実現するために、マイクロインタラクションを活用していきましょう。

フォローアップでは、発表での補足とお寄せいただいた質問をいくつかピックアップして回答します。

アンケートでいただいた質問に関して

たくさんのアニメーション用のコードを書くと重くなると思います。軽くするにはどのような手段がありますか？

「再生が滑らかでなく重たい」と「データ容量が重たい」の2つの意味が考えられます。今回は前者について回答します。

再生負荷に関しては、いくつかの最適化のポイントがあります。

• ベクターグラフィックスだと再生負荷が高い → ビットマップ画像にする
• 同時に表示している要素が多い → 数をへらす
• フィルター効果（ぼかし）など高負荷なエフェクトを使っている → フィルターを使わない

一般的にDOMやSVGに比べて、HTML5 CanvasやWebGLのほうが描画性能は高いです。そのため、「再生が重たい」と感じたらHTML5 CanvasやWebGLの採用を検討するといいでしょう。参考までに、私が以前検証した記事を紹介します。同時に動かせる要素の数で比較すると、DOMだと3000個程度、WebGLだと40000個程度となります。

最速のアニメーションライブラリはこれだ！ JSライブラリの性能をDOMとWebGLで比較検証 - ICS MEDIA https://ics.media/entry/14993

Nuxt.js等で作成したシングル・ページ・アプリケーションでは、pjaxのようにURLが切り替わりますが、SEOとして問題ないですか

最近のGoogle検索エンジンはJavaScriptを解析すると言われています。しかし、確実に解析される保証がないので、HTMLのソースコードとして展開しておくことがベストプラクティスのひとつとして知られています。

Nuxt.jsの場合は、SSR（サーバー・サイド・レンダリング）という技術を使って、シングル・ページ・アプリケーションのページ内リンクを静的なHTMLファイルとしても生成できます。HTMLファイルが存在する状態となるので、通常のウェブサイトと同様に検索エンジンは解析してくれます。

次の資料がNuxt.jsのSSRについてわかりやすく説明されているので、参考にするといいでしょう。

Nuxt.jsによるAdobe MAX Japan 2018公式Webサイト制作の舞台裏 - Speaker Deck https://speakerdeck.com/haribote/nuxt-dot-jsniyoruadobe-max-japan-2018gong-shi-websaitozhi-zuo-falsewu-tai-li

マイクロインタラクション有り無しで見積もりを変えてしますか？

はい、変えています。 私の場合ですが、マイクロインタラクションを用意する前提ではじめに提案します。予算や期間が限られる場合に、他の要件と優先度を調整しながら、場合によってはマイクロインタラクションを削ります。

外注にマイクロインタラクションをどのように発注するか

構成案や仕様書に、絵コンテなどの形で明確に記載しておきます。「マテリアルデザインのリップルエフェクトをボタンに追加してほしい」といった共通言語を使って仕様書に記載しておくのもいいと思います。

After Effectsで作成したモーションはCSSやJSで再現できると思っていいでしょうか

残念ながら、かならず再現できるわけではありません。

After Effectsはもともと映像制作用のソフトウェアなので、ウェブに適さない部分もあります。たとえば、「エフェクト」はBodyMovinで書き出すと、ブラウザではまったく再現できません。また、複雑なパスアニメーションだと変換で壊れる場合があります。After Effectsで作成する際は、BodyMovinでの変換結果をこまめにブラウザで確認することが大事です。

マイクロインタラクションを勉強するために行っていることを教えてください。

アニメーションのセンスを磨き、アイデアの引き出しをためておくことが大事です。そのためには、さまざまなウェブサイトやアプリを普段から観察しています。たとえば、次のギャラリーサイトでセンスのいい動きをチェックします。

https://www.awwwards.com/ https://thefwa.com/

また、普段からアニメーションやマイクロインタラクションの練習として、小さなデモを制作するのもオススメです。ウォームアップができていると、いざ制作するときにすぐにアイデアがでてきます。アニメーションは試行錯誤がものをいう場面があります。アニメーションにおいて、予備動作（スケール変化など）が必要な場合とそうでない場合を判断することがありますが、そのときも普段から制作していると感覚的に判断がつくようになります。

文字1つ1つをspanタグで囲んでアニメーションしたところで、あとからpタグに切り替えるとおっしゃっていたと思いますが、具体的にどのように切り替えるのか教えて欲しいです。

サンプルの「1_texteffect」フォルダ内のJavaScriptを、そのような設計のコードにしてみました。アニメーションを始める前に元のinnerHTMLプロパティーのデータを変数にとっておき、アニメーションがおわったところで、innerHTMLプロパティーに再代入します。