マイクロインタラクションとは
マイクロインタラクションとは、ユーザーとインターフェイスの間を取り持つ小さなやり取りを指します。マイクロインタラクションの概要と具体的な事例を紹介します。
ヒューマンセンタードデザインの一つ
マイクロインタラクションを知る上で知っておきたいのがヒューマンセンタードデザインです。ヒューマンセンタードデザインとは、直訳すると人間中心のデザイン、つまり使う人のことを考慮したデザインを指します。
マイクロインタラクションはヒューマンセンタードデザインの一つです。マイクロ（小さな）インタラクション（やり取り）の名前が示すとおり、ユーザーとのコミュニケーションを目的としています。
マイクロインタラクションの定義
前述のとおり、マイクロインタラクションはユーザーとのコミュニケーションを目的としています。例えばスマートフォンのアプリには、ボタンを押すと実行されたことを確認するポップアップが表示されるものがあります。
このようにユーザーのとったアクションに対し、フィードバックを返したり、現在の状況を伝えたりするのが、マイクロインタラクションの役割です。
ボタンやアイコンなどの事例
マイクロインタラクションの具体的な事例を見てみましょう。
FacebookやTwitterの『いいね』ボタンは、押すと小さくアニメーションが再生されます。また、子ども用のYouTubeアプリ『YouTube Kids』では、メニューアイコンをタップするとアイコンがさまざまなアニメーションで表示されます。
これらのアニメーションは見た目に楽しいだけでなく、ユーザーがボタンを正しく押したことを直感的に認識させることができるのです。
効果的なマイクロインタラクションの作り方
マイクロインタラクションはユーザーとのコミュニケーションです。したがって、ユーザーが満足することを考えて作らなくてはなりません。効果的なマイクロインタラクション作りのポイントを解説します。
退屈させないステータス通知
マイクロインタラクションの目的は、アプリやWebサイト上で起きていることをユーザーに正しく把握させることです。
例えば、Webサイトから大きなファイルをダウンロードするときに、今どれくらいダウンロードが完了していて、あとどれくらいの時間がかかるのか分からないとユーザーは不安になります。
ファイルのダウンロードの場合は、進行状況を示すプログレスバーやパーセンテージ、残り時間などが表示されることがよくありますが、無機質な印象の強いステータス表示はユーザーを飽きさせてしまいます。
この無機質なステータス表示を楽しげなアニメーションに変えれば、ユーザーは退屈せず待つことができます。結果的に満足度を向上させることにつながると言えるでしょう。
コンテクスト保持とアクションの引き出し
スマートフォンのような小さな画面のデバイスの場合、画面に多くの情報を表示させることは非常に困難です。多くの情報を伝えるためには別ページを用意することが一般的ですが、その際に直前のコンテクスト（文脈）をいかに保持するかが重要になります。
例えばECサイトで商品情報画面を見た後、同じ画面内にあるカートボタンを押すとアニメーション効果で購入画面が表示されるという仕組みがあれば、ユーザーは商品情報画面（直前のコンテクスト）から購入画面（新しいコンテクスト）に遷移したことを直感的に把握できます。
また、ユーザーのアクションを引き出す、いわゆる『コールトゥアクション』（CTA)も重要な要素です。『いいね』や『シェア』ボタンを押す、動画広告の続きを見るといったアクションを起こさせることもマイクロインタラクションの役割の一つになります。
デザインのポイント
多くのデザインと同じように、マイクロインタラクションにもデザインのポイントがあります。特に考慮しておきたいポイントについて解説します。
シンプルにデザインする
マイクロインタラクションのデザインはシンプルにすることが鉄則です。複雑なデザインでは、ユーザーは直感的に意味を把握することができません。
また、マイクロインタラクションはアニメーション効果などによって、より多くのデータ通信を行います。デザインが複雑であればあるほど、読み込み速度が遅くなるため、デザインはシンプルにする方が望ましいでしょう。
ただし、シンプル過ぎてユーザーが意味を把握できなくては効果がありません。価値と意味がシンプルに伝わるバランスの取れたデザインを目指す必要があります。
一貫性やUXを考慮する
優れたWebサイトやアプリは共通してデザインに一貫性があります。逆に言えば、どんなに美しいデザインのWebサイトやアプリでも、マイクロインタラクションのデザインが今ひとつであれば、すべてを台無しにしかねません。
Webサイトであれば元となるテーマに合わせ、マイクロインタラクションをデザインするといった工夫が必要になるでしょう。
また、UX（ユーザーエクスペリエンス）も考慮する必要があります。優れたデザインのマイクロインタラクションを導入しても、UXが低ければユーザーの満足度は上がりません。デザインとUXのバランスを上手に取ることが求められます。
作成ツールを活用しよう
マイクロインタラクション作成のツールにはさまざまなものがありますが、比較的簡単に低価格で使うことができるツールを紹介します。
本格的に作成可能なLottie
『Lottie』はAirbnbが提供するオープンソースのアニメーションライブラリです。iOS、Android、React Nativeに対応しています。
Adobe After Effectsで表示できるアニメーションを拡張プラグインでJSONファイルに書き出し、Lottieに読み込ませることで簡単にアニメーションを作ることができるのです。
様々なプロトタイプが作れるProtoPie
『ProtoPie』はアプリの制作を行う前に、画面遷移やアニメーションの動きを確認するプロトタイピングツールです。
『ProtPie』を使えば実際のアプリケーションに近い状態のプロトタイプを作ることができます。本格的な開発を始める前にプロトタイプで動きを確認しておけば、開発後の手戻りを減らすことが可能です。
直感的に使うことができ、簡単な設定でアニメーションを作成することができるので、ちょっとした確認をしたいときに便利なツールだと言えるでしょう。
ProtoPie - Create the most advanced prototypes as easy as Pie
アニメーション特化のHaiku
『Haiku』はUI用のアニメーション作成に特化したツールです。UIデザインツールのSketchと互換性があるため、Sketchをメインに使っているデザイナーにとっては使いやすいツールだと言えそうです。
複雑なアニメーション作りには向いていませんが、シンプルなアニメーション作りに適しています。習得もそれほど難しくなく、書き出し形式も豊富なので、マイクロインタラクション作りに向いているツールです。
Haiku Animator | Create engaging animations for any app or website.
まとめ
マイクロインタラクションはユーザーとインターフェイスをつなぐ小さなコミュニケーションです。存在そのものは小さいですが、与える役割は大きいため、近年では特に重要視されています。
魅力あるWebサイトやアプリには、優れたデザインのマイクロインタラクションが使われています。これらのデザインを分析し、実際に自分で作ってみることがマイクロインタラクション作りのスキルを上げる一番の近道だと言えるでしょう。