Cntlog > スキルアップ・ノウハウ > コーディング > マイクロインタラクションを導入するために考えること

マイクロインタラクションを導入するために考えること

UIをリッチに見せる方法として近年アニメーションを使われる事が多く、ユーザーが操作した感覚を印象ずけたりUIの理解を深めるのに近年マイクロインタラクションが注目されています。

この記事ではマイクロインタラクションを導入するために抑えておくポイントを紹介します。

マイクロインタラクションを知るために

マイクロインタラクションの役割は「ユーザーのアクションに対するフィードバックや、現在のステータスを正しく伝える」ということです。

例えば保存ボタンを押して、それが正しく保存されたことや、ナビゲーションをクリック後、画面遷移中というのを表すことなど、ユーザーの操作に対してフィードバックを返すのをマイクロインタラクションと呼ばれます。

具体的にどんなものがあるかは、デザイナーの方たちが作っているギャラリーサイトで見るのとイメージしやすいです。

書籍ではこちらがわかりやすいです。

マイクロインタラクション ―UI/UXデザインの神が宿る細部

マイクロインタラクションはい作るの問題

マイクロインタラクションを取り入れる際には、「いつ」企画するかの問題が上がってきます。
今世の中にでているプロダクトを見ればわかりやすいですが、細かいところまでマイクロインタラクションが当たり前のように入ってるサイトは多くないです。

ですので誰かが「マイクロインタラクションを取り入れよう」と言わないことには始まりません。

主に下記の職種のいずれかで声が上がりやすいかなと思います。

  • プロダクトマネージャー
  • デザイナー
  • エンジニア

どこで声が上がったとしても、基本的にエンジニアが実装にモチベーションを挙げられなければ導入が難しいので、そこの課題を超える必要はあります。

当たり前ですが、「やれ」と言われてできるなら、苦労はしませんので、「なぜやるか、なぜ必要か」をきちんとチーム内で価値を共有していかないとうまくいきません。

プロダクトマネージャーが声をあげる場合の役割

プロダクトマネージャーなどのデザインをする前に声を挙げれる場合は全体を通してマイクロインタラクションの動作を考えられます。

ですので、どういう方針でいくかをデザイナーに提案して考えてもらう状況を作るのが求められます。
デザイナーに渡す資料としては下記のようなものが挙げられます。

  • インタラクションの目的やビジョンを明確に示す
  • 参考資料を渡す
  • 動画
  • 参考サイト・アプリ
  • ラフな絵コンテ

デザイナが声をあげる場合の役割

自分でつくったUIに対しどうやって動くかを、特にエンジニアに共有するのが求められます。
「適当に動かしてー」ではエンジニアも困ってしまうので、実際に動くものを渡してそれを実装してもらうのが良いかなと思います。

  • 動きをイメージできるものを探して渡す
  • モーションサンプルを作って渡す

エンジニアの役割

エンジニアは実装する事が求められます。
使ったものがデザイナー・プロダクトマネージャーの意図に沿うものか確認していき修正を繰り返します。

マイクロインタラクションの実装を実現するために大切な事

マイクロインタラクションは、誰でも簡単にできるものではないのでそれ相応のスキルが求められる。
ですのえ実装する人としては下記のような悩みがあることが多いです。

  • 自分が実現できるかというスキルの不安
  • スケジュールに余裕がない
  • そもそもアニメーションはいらないのではという考え。

これらの事を理解してきちんとエンジニアが実現できる環境をつくるというのもマイクロインタラクションの実装を実現にるのには不可欠ですので、ただ依頼すればやってもらえるとか思うのは誤解ですので注意してください

マイクロインタラクションの必要性

マイクロインタラクションは何をもたらすかといえば、おもに下記の2つになってきます。

  • 世界観の構築
  • UIの理解

ゲームのような世界観重視のものでは、その世界に没入させる要素として使われます。
また、ニュースサイトやシステム画面などの情報提供型コンテンツのような場合は、UIの動作を直感的に理解させるのに役立ちます。

重要度からみたマイクロインタラクション

マイクロインタラクションと一言で言ってもすべてのUIに必要か?といわれたらそんな事はありません。
そもそもマイクロインタラクションが入っていることが普通というものもあれば、あると嬉しいみたいなものまで様々です。

いくつかマイクロインタラクションの重要度を整理したUIを紹介でします。

必要性が高いもの

  • 読み込み時間のかかる時間のローディング
  • カルーセルのスライド

必須ではないが実装すると印象の良いもの

  • パララックス
  • スクロール連動型演出
  • いいねなど、ユーザー操作を伴うもの

    印象は小さいが、使い勝手が良くなるもの

  • モーダルの開閉
  • アコーディオンの開閉
  • スケルトンビュー(読み込み終わるまで何か表示するやつ)
  • タップエフェクト
  • buttonのホバー/アクティブ

やっても良いが効果が薄い

  • タブの切り替えのアニメーション
  • 画像読み込み後のフェード表示

手軽にマイクロインタラクションを導入したいとき

マイクロインタラクションを取り入れたい場合、micronというCSSフレームワークがあります。

micronは、JavaScriptライブラリと組み合わせて構成されてマイクロインタラクションを簡単に実装することができます。

割とかわいい感じのインタラクションのものが多いです。

16種類のアニメーションが用意されていますのでそれを選んで使うって感じです。
※もちろん自分のイメージに合うものがなければ作らないといけませんが。

関連記事

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
gitコメントの自分なりに落ち着いたプリフィックス... fix バグ修正 hotfix クリティカルなバグ修正 add 新機能・ファイル追加 update バグではない機能修正 change 仕様変更 clean リファクタリングなどのコード整理 disable 機能の無効化 remove ファイルの削...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...