マイクロインタラクションとは?UXに取り入れる際の5つのポイント
「"中身を読まずに"表紙のデザインやタイトルを見て本を買ってしまった」
あなたも、このような経験はありませんか?
この行動自体は、決して珍しいものではありません。
だからこそ、本や雑誌、書籍と同様に、ホームページも*「見栄え」や「タイトル決め」*というのは非常に重要な要素といえます。
しかし、「UXデザイナー」という職業が確立された昨今、今求められているのは外観(見た目)だけではありません。
ホームページでいえば『内容』や『体験』にフォーカスする必要があります。
それでは、どうすればユーザーに満足してもらえる内容・体験になるのでしょうか。
その答えのヒントとなるのが*「ヒューマンセンタードデザイン(Human-centered Design、人間中心デザイン)」*です。感情や日常表現も含めて普段使っている言葉と同じ言葉で語りかけ、必要な時にはあなたを笑わせたり驚かせたりします。AIチャットなども、こうしたヒューマンセンタードデザインを取り入れています。
UXの世界では、ヒューマンセンタードデザインのアプローチ方法の一つとして*「マイクロインタラクション(Micro-interactions)」*という手法を取ります。この手法を採用すれば、ユーザーとの距離も近くなり、ホームページの離脱率が下がるだけでなく、再訪問率の向上にもつながります。
今回は、「マイクロインタラクション」の中身と、Web担当者やUXデザイナーがすぐに取り入れられるマイクロインタラクションのポイントをお伝えしていきます。
マイクロインタラクションとは?
マイクロインタラクションとはヒューマンセンタードデザインのアプローチ手法の一つです。
ただ白紙のページに芸術的なデザインを施す従来型のデザインとは異なり、人間の感情も含めてユーザーとコミュニケーションを取ることを重要視しています。
マイクロインタラクションは、直訳すれば*「とても小さなやりとり」*という意味です。UXの世界では、ユーザーに瞬時にフィードバックを提供したり、進行中のプロセスの状況を伝えたり、システムやアルゴリズムがどれだけ複雑だとしても非常にシンプルな操作を促すように、ストレスなくユーザーとのコミュニケーションを取っていきます。
それでは、今日から実践的に使える「マイクロインタラクション」にはどのようなものがあるのでしょうか。具体的に見ていきましょう。
実践「マイクロインタラクション」5つのポイント!
ポイント1:常に進行状況(ステータス)を伝える
By xjw on Dribbble
想像してみてください。例えば、百貨店で服を買う時に、気に入ったジャケットを購入しようと決めます。しかし、自分に合うサイズではなかったので、店員さんに自分のサイズを伝えて、取りに行ってもらいます。ところが、なかなか店員さんが帰ってきません。多くの方は待たされることにストレスを感じるはずです。
ホームページを巡回する時も、同じような状況に遭遇することがあります。アップロード中のファイルが完全にアップロードされるまでの時間がわからなかったり、ページが重くどれくらいで読み込まれるのかがわからなかったりする時です。
マイクロインタラクションでは、現在ホームページ上で何が起こっているのかを明示するのが重要だと考えます。
背景の色を変えたり、プログレスバーで進行状況を伝えたり、音を流して変化させたりするのです。
しかし、一つだけ注意点があります。それは、ユーザーを退屈させないことです。淡々と変化するだけの背景やプログレスバーは人間的なデザインとは程遠いので、可愛らしい人間的な動きをするアニメーションを取り入れましょう。もちろん、アップロードに失敗した時もです。そうすれば、ユーザーはイライラするどころかニッコリ笑ってくれます。
ポイント2:ハイライトやアニメーションを効果的に使う
By Tamas Kojo on Dribbble
最近のデザインでは、余計なスペースを取り除くために、ボタンを押したら必要な場合だけ他のボタンやメニューが表示されるようになっています。ハンバーガーメニューやスライドメニューがその例として挙げられます。
ここで大切になってくるのが、そのボタンを押せば他のボタンやメニューが出てくると、ユーザーに瞬時に気付かせてあげることです。
押してはじめて何が行われるのかがわかるボタンや、そもそも押すべきものかがわからないボタンは、ユーザー体験を低下させるからです。
そこでマイクロインタラクションでは、自らが変化のきっかけを知らせる動きやデザインを重視します。具体的には、マウスホバーで色が変わったり、ツールチップでボタンが押された後のアクションを表示したり、アニメーションでボタンの存在を知らせたりすることです。
ユーザーの視線を集め、見逃さないようにすることが大切です。
ポイント3:コンテクストを保つ
By Ramotion on Dribbble
スマートフォンやスマートウォッチのような非常に小さな画面を持ったデバイスでは、1つの画面にたくさんの情報を詰め込むことは難しくなっています。
その解決策の1つが、別のページへ遷移する際にわかりやすく誘導してあげることです。
マイクロインタラクションでは、直前のコンテクスト(文脈)を保持したまま詳細情報をユーザーに表示させる手法が好んで使われます。
ここでも重要になるのがアニメーションです。
いきなり真っ白になってまた別のページに遷移すると、直前のページにいた時の情報が忘れ去られてしまいます。アニメーションを効果的に使うことで、小さな画面でも直前のコンテクストを保ったままページを移動することが可能になります。
ポイント4:行動を呼び起こす
By Ramotion on Dribbble
ユーザーと効果的にコミュニケーションを取ることに加えて、マイクロインタラクションを上手に活用することで、ユーザー自身にコミュニケーションを促すことができます。閲覧を続けていたり、サイト内を回遊したり、いいねを押したり、シェアしたりするのです。
マイクロインタラクションでは、こうしたアクションを促す行動を*「コールトゥアクション(Calls-to-action)」*と呼びます。Twitterやインスタグラム、Facebookの動画広告でも、広告の隅に「詳しくはこちら」「もっと見る」というボタンが表示されており、コールトゥアクションを意識した作りになっています。
ポイント5:イメージを喚起するチュートリアル
By CLAY on Dribbble
iPhoneやAndroidのアプリでは、使用前にチュートリアルを設けるものが増えてきました。実はこれもマイクロインタラクションの手法の一つなのです。
ページを完全に遷移することなく、コンテクストを保ったまま、魅力的なアニメーションを使って基本的な機能を紹介します。こうすることで、ユーザーが次に取るべき行動が明確になるだけでなく、アプリを使う前から(チュートリアルを見ただけで)アプリに好感を持つので、アプリをたくさん使ってくれるようになるのです。
まとめ
ユーザーにストレスなく使ってもらうために、マイクロインタラクションを取り入れてみましょう。
マイクロインタラクションは、アニメーションと非常に密接に関わっています。どのようにしたらユーザーに心地よい印象を与えることができるのか、ぜひ今回ご紹介した5つのポイントを踏まえて考えてみてください。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- 離脱率
- 離脱率とはホームページを見ている人が、そのホームページから去り、アクセスの記録などを取れなくなる状態の割合のことを言います。ホームページ運営者はどのページでユーザーが離脱(去った)のかをチェックし、改善に役立てることが多いです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- シェア
- シェアとは、インターネット上で自分が見つけて気に入ったホームページやブログ、あるいは、Facebookなど自分自身が会員登録しているSNSで自分以外の友達が投稿した写真、動画、リンクなどのコンテンツを自分の友達にも共有して広めたいという目的をもって、SNSで自分自身の投稿としてコンテンツを引用し、拡散していくことをいいます。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
- タグ
- タグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。特にインターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング