サイトマップ English
ホーム > 視覚的な工夫 > マイクロインタラクション

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

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

マイクロインタラクションは、UIのことを語るうえで欠かせない存在です。

サイトやアプリを使用するユーザーの目的に応じて動きやエフェクトなどを使い、視覚的に次の動作へ誘導する、 またデバイスが正常に動作していることを示すなど、様々な情報のフィードバックをするための動きや機能の事を マイクロインタラクションと呼びます。これから例を見てみましょう。

  

例えば、上の入力フォーム。

これをクリックすると、文字が打ち込まれる場所に縦線の形をしたカーソルが点滅します。

これには、文字を入力する場所への誘導、このサイトが正常に動いていることの表示などの意味があります。

これも、マイクロインタラクションの一例です。

マウスホバー

HOVER

マイクロインタラクションに分類される物の内に、マウスホバーがあります。

マウスホバーとは、サイト内のボタンにカーソルをかざした時に 大きさを変えたり色が変わったりなどの反応のことです。

これにより、閲覧者は今自分がどこをクリックしようとしているのかを見やすくなり、 よりサイトの使用が簡単になります。

下にいくつか実例があるので、カーソルを当ててみてください。

色が変わる

大きさが変わる

影がなくなる

世界的に利用されているSNSであるTwitterの「いいね」ボタンもマイクロインタラクションの良い例です。 このいいねボタンを押すと、エフェクトをつけながらボタンの色が変わるため操作がわかりやすくなっています。

また、スマートフォンでこれを押すと手に振動が伝わるため、視覚以外にもアプローチして使いやすさを高めていることがわかります。

HOVER

これらのマウスやカーソルに関する動きの他にも、アプリや機能の使い方を分かりやすくする 工夫はたくさんあります。 次のページからさらに例を見てみましょう。