UI/UX Micro Interaction
CSS Nite vol.50
by 池田泰延さん @clockmaker
ICS Media
Wordpress → Nuxt にフルリニューアル
JavaScript コードレシピ集
600P!
マイクロインタラクションの役割
Web世界でのマイクロインタラクション
必要性
デザイン
エンジニア
今後のマイクロインタラクション
マイクロインタラクションの役割
一般的なマイクロインタラクション
遊び心のある動き
ユーザーインタフェースとして画面遷移(マテリアルデザイン的な)
オライリー: マイクロインタラクション
一見取るに足らない瞬間を喜びの瞬間に
IBM Design Language
「突然の変化は現実の世界には存在しない」→アニメーションの必要性
Apple
直接操作の効果を高める
アニメーションを定義したデザインシステムが増えている
MS / Influent Design System
フラットデザイン + 奥行き
IBM
Audi User Interface
Apple / Human Interface Guidelines
Google / Material Design
異なるプラットフォームで再現するためのパラメータまで公開
Github Style Guideline
Web でのマイクロインタラクション
最近見た面白い演出
spire
ナビゲーション・ページ遷移のモーション
デジタルっぽさ
PELIZZARI STUDIO
マイクロインタラクションがかなり前面にでている例
Google Photos
ひとつひとつの操作に対してアニメーション
選択した時は凹んだようになって、チェックボックスがつく
モーションが入ることにより、連続した操作を感じられる
マイクロインタラクションを制作するには
Water Fall
ディレクター → デザイナー → エンジニア
ディレクターの役割
インタラクションの目的やビジョンを明確に示す
参考例を示す
普段から使ってイイものをストックしておく
デザイナーの役割
動きのイメージを想像しながら制作
エンジニアに要望や指示を明確に
モーションサンプルを作る
絵コンテで見せる
エンジニアの役割
デザインデータからモーションを実装する
忠実に再現する → 忠実に再現するだけでは 6・7 割くらいの出来になる
最後はエンジニアが踏ん張り、120%の出来を目指せるかどうか
誰が発案するのか
ディレクターが発案できれば一番いい
他が無関心でもエンジニアが実装すれば実現する
世界観を壊すものでなければモーションを入れてNGになる場合は少ない
エンジニアがやりたくないという場合の理由
せっかく作ったコードが汚くなるから嫌
アニメーション = 非同期処理を挟むとカオスになりがち
スケジュールの余裕がない
スキル的に良い動きを作る自信がない
最近はアニメーションよりも設計の方に意識が向きがち
あとから、演出を加えたいとか言うなよ = はじめに言っていないと設計が厳しい
そもそもアニメーションいらない
コンテンツの種別で役割が異なる
没入型コンテンツ(ゲームやバーチャルリアリティ)
世界観の構築
情報提供型コンテンツ
UI の理解を促進するために
ゴールとするUXを見据えてインタラクションをつくる
必要度と印象によって分類する
必要なもの、実装しないと品質が低いと思われる
ローディング
カルーセルのスライド移動
画像がただ変わるだけだと、どのように移動しているのかわかりにくい
画像自体が左右に移動すると、位置の関係性がわかりやすい
必要ではないが、好印象を与えられる
パララックス、スクロール連動
奥行き感を感じさせる
いいねや保存などユーザー操作に伴う
ユーザーの行動に対してフィードバックすることで好印象
印象は小さいが、使い勝手のカイゼンにつながる
モーダルの開閉
フワッと出ることでレイヤーの重なり、関係性がわかる
アコーディオンの開閉
開いた、どこにコンテンツが入っていたかわかる
スケルトンビュー
コンテンツが表示されるまで、出そうなコンテンツがグレーで表示
ボタンのホバーやアクティブ
やってもいいけど、効果が薄い
タブ切り替え時のフェード
画像読み込み時のフェード表示(Lazyload時の表示)
スクロールしたら先に表示されている方がUXには効果的
スケジュールは有限なので必要性と効果が高いものを実装する
制作するツール
Adobe XD
デザイナーが作って、エンジニアが実装できるか?
作ったものをサイト上でプロトタイプを公開できる
つまり実装できる
After Effects
ビジュアルエフェクト用のツール
マイクロインタラクションのサンプルを作るためによく使う
レイヤー分けしてキーフレームを打って作る
Adobe Animate
元 Flash
精密なアニメーション、ベクターツールが充実
タイムラインで基本的に作っていく
XD は取得は容易だが、アニメーションの精度が低い
XD:アニメーションのタイミングをズラすのが難しい
制作Tips
横移動の傾斜の動作を加える
イージングを設定する(加速度を変える)
移動に変形を加える
横移動に回転の動作を加える
AE
グラフエディター
べジュ曲線で使う
動くときに少し回転を加えると、移動していることを少しインパクトを加えられる
落下時に変形を加える
落ちるときに幅方向の変形を加える
落ちたときにボヨヨンとする
アニメーションのフォーマット
ソフト内でアニメーションを定義
ファイルから実装者が読み解かなければならない
動画として書き出す
表現が忠実、データ容量が巨大になってしまう
スクリプトとして書き出す
アニメーションとデータを連動できる、軽量
AE (Bodymovin + Lottie)と Animate (標準の機能 ... Canvas、SnapSVG、) で可能
JS や JSON として書き出す
自由な再生や再生停止が可能
デザイナーとエンジニアの分業の可能性
デザイナーがモーションを作り、エンジニアが書き出されたものを使い実装する
参考サイト
UI Movement
ユーザー投稿型サイト
モーションに特化
LottieFiles
エンジニアとして実装する
CSS アニメーションでもかなりのアニメーションが実装可能 ... ICS Media 参考
CSS Animation
繰り返し動くもの
CSS Transition
状態の変化(Classのつけ外し)
CSS フィルター + Transition
filter: brightness(1); のような設定で可能
ひとつのボタンや画像で状態の変化が実装可能
サムネイルや画像ボタンに使うと効果的
todo ... Mix Blend Mode
SVG アニメーション
Scalable Vector Graphics
マークアップ観点からも SVG の方が優れている
<SMIL> ... SVG に対して CSS を書く
SVG に対して CSS のアニメーションがそのまま書ける
SVG 内から CSS を読み込める
SVG を JS で動かす ... 華やかな表現が可能
SnapSVG ... Adobe
vivus
パスの始点から終点までを使ってアニメーションできるライブラリ
マウスオーバーの演出
オーバーとアウト時の演出を変える
オーバーは早く tarnsition: all 0.1s; ... レスポンスを早く、機能的に
アウトはゆっくり ... 余韻を残す tansition: all 1.0s; ... 関心は離れているが余韻を残す
点滅
ランダムテキスト ... デジタルっぽさ、世界観の演出
プログレスバーを早く感じさせる例 ... Adobe の記事
実装例
文字のアニメーション
元は通常のマークアップ
JS で Span タグなどに分離
24ms ごとに遅らせてクラスを追加
演出が終わった後に元にもどせば SEO 的にもリスクはないのでは
ドロワー
カーテンのモーション
上が先に動いて、下が付いてくるイメージ skewXとleftのパラメーター
今後のマイクロインタラクション
接続型アニメーション
画面切り替わりの接続型アニメーション
連続して繋がっているのがわかるように
CSS-Tricks の記事
SPA でないと難しい部分がある
JS で差分の中身を差し替えていくイメージ
保持したいパーツを残しておく
参考: ICS 採用サイト
多様なユーザーを受け入れる
ユーザーに選択肢を与える
OS にアニメーションの有無を選択できるように
アニメーションがすべての人に求められているわけではない
細かく動くと集中できない人
メディアクエリ prefers-reduce-motionで取得できる
対応ブラウザ増えている(Safariも)
ダークモードなども
まとめ
マイクロインタラクションはシンプルなテクニックの集まり
じっくり研究して、地道に実装
UX の視点から本当に必要かどうか検討し、実装する
質問
インタラクションの合意形成
はじめはフワッと
デザイン段階で動くもの(最終実装に近いもの)を用意して合意を得る
出し戻し
よほど大げさなもの、センスが悪くなければ大丈夫
キャラクターアニメーションは指摘が多い場合がある
見積もり
はじめに盛り込んでいる