• HOME
  • デザイン
  • マイクロインタラクションって何?概要や作成ツールを紹介

マイクロインタラクションって何?概要や作成ツールを紹介

Webサイトやアプリに組み込まれ、ユーザーとのコミュニケーションに使われるマイクロインタラクションは、近年特に重要視されているデザインの一つです。マイクロインタラクションの概要や作成のポイント、作成ツールを紹介します。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

マイクロインタラクションとは

マイクロインタラクションとは、ユーザーとインターフェイスの間を取り持つ小さなやり取りを指します。マイクロインタラクションの概要と具体的な事例を紹介します。

ヒューマンセンタードデザインの一つ

マイクロインタラクションを知る上で知っておきたいのがヒューマンセンタードデザインです。ヒューマンセンタードデザインとは、直訳すると人間中心のデザイン、つまり使う人のことを考慮したデザインを指します。

マイクロインタラクションはヒューマンセンタードデザインの一つです。マイクロ(小さな)インタラクション(やり取り)の名前が示すとおり、ユーザーとのコミュニケーションを目的としています。

マイクロインタラクションの定義

前述のとおり、マイクロインタラクションはユーザーとのコミュニケーションを目的としています。例えばスマートフォンのアプリには、ボタンを押すと実行されたことを確認するポップアップが表示されるものがあります。

このようにユーザーのとったアクションに対し、フィードバックを返したり、現在の状況を伝えたりするのが、マイクロインタラクションの役割です。

ボタンやアイコンなどの事例

マイクロインタラクションの具体的な事例を見てみましょう。

FacebookやTwitterの『いいね』ボタンは、押すと小さくアニメーションが再生されます。また、子ども用のYouTubeアプリ『YouTube Kids』では、メニューアイコンをタップするとアイコンがさまざまなアニメーションで表示されます。

これらのアニメーションは見た目に楽しいだけでなく、ユーザーがボタンを正しく押したことを直感的に認識させることができるのです。

効果的なマイクロインタラクションの作り方

マイクロインタラクションはユーザーとのコミュニケーションです。したがって、ユーザーが満足することを考えて作らなくてはなりません。効果的なマイクロインタラクション作りのポイントを解説します。

退屈させないステータス通知

マイクロインタラクションの目的は、アプリやWebサイト上で起きていることをユーザーに正しく把握させることです。

例えば、Webサイトから大きなファイルをダウンロードするときに、今どれくらいダウンロードが完了していて、あとどれくらいの時間がかかるのか分からないとユーザーは不安になります。

ファイルのダウンロードの場合は、進行状況を示すプログレスバーやパーセンテージ、残り時間などが表示されることがよくありますが、無機質な印象の強いステータス表示はユーザーを飽きさせてしまいます。

この無機質なステータス表示を楽しげなアニメーションに変えれば、ユーザーは退屈せず待つことができます。結果的に満足度を向上させることにつながると言えるでしょう。

コンテクスト保持とアクションの引き出し

スマートフォンのような小さな画面のデバイスの場合、画面に多くの情報を表示させることは非常に困難です。多くの情報を伝えるためには別ページを用意することが一般的ですが、その際に直前のコンテクスト(文脈)をいかに保持するかが重要になります。

例えばECサイトで商品情報画面を見た後、同じ画面内にあるカートボタンを押すとアニメーション効果で購入画面が表示されるという仕組みがあれば、ユーザーは商品情報画面(直前のコンテクスト)から購入画面(新しいコンテクスト)に遷移したことを直感的に把握できます。

また、ユーザーのアクションを引き出す、いわゆる『コールトゥアクション』(CTA)も重要な要素です。『いいね』や『シェア』ボタンを押す、動画広告の続きを見るといったアクションを起こさせることもマイクロインタラクションの役割の一つになります。

デザインのポイント

多くのデザインと同じように、マイクロインタラクションにもデザインのポイントがあります。特に考慮しておきたいポイントについて解説します。

シンプルにデザインする

マイクロインタラクションのデザインはシンプルにすることが鉄則です。複雑なデザインでは、ユーザーは直感的に意味を把握することができません。

また、マイクロインタラクションはアニメーション効果などによって、より多くのデータ通信を行います。デザインが複雑であればあるほど、読み込み速度が遅くなるため、デザインはシンプルにする方が望ましいでしょう。

ただし、シンプル過ぎてユーザーが意味を把握できなくては効果がありません。価値と意味がシンプルに伝わるバランスの取れたデザインを目指す必要があります。

一貫性やUXを考慮する

優れたWebサイトやアプリは共通してデザインに一貫性があります。逆に言えば、どんなに美しいデザインのWebサイトやアプリでも、マイクロインタラクションのデザインが今ひとつであれば、すべてを台無しにしかねません。

Webサイトであれば元となるテーマに合わせ、マイクロインタラクションをデザインするといった工夫が必要になるでしょう。

また、UX(ユーザーエクスペリエンス)も考慮する必要があります。優れたデザインのマイクロインタラクションを導入しても、UXが低ければユーザーの満足度は上がりません。デザインとUXのバランスを上手に取ることが求められます。

作成ツールを活用しよう

マイクロインタラクション作成のツールにはさまざまなものがありますが、比較的簡単に低価格で使うことができるツールを紹介します。

本格的に作成可能なLottie

『Lottie』はAirbnbが提供するオープンソースのアニメーションライブラリです。iOSAndroidReact Nativeに対応しています。

Adobe After Effectsで表示できるアニメーションを拡張プラグインでJSONファイルに書き出し、Lottieに読み込ませることで簡単にアニメーションを作ることができるのです。

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サイトやアプリには、優れたデザインのマイクロインタラクションが使われています。これらのデザインを分析し、実際に自分で作ってみることがマイクロインタラクション作りのスキルを上げる一番の近道だと言えるでしょう。

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ