UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

「マイクロインタラクション」という言葉をご存知でしょうか。

何かをクリック、あるいはタップしたときに何が起こったのかを端的に理解するための最小単位のインタラクションのことです。

今回は実際にInstagramで使われているマイクロインタラクションの例を紹介しつつ、その重要性について考えてみます。

Instagramの「ブックマーク」

Instagramのブックマーク機能を使うと、投稿の画像が画面右下の自分のプロフィールメニューに入っていきます。

これによって、ユーザーは「ブックマークに保存した投稿を見たいときは、ここを見ればいいんだな」と分かります。

このように、何か保存するときは、その保存先が分かるようにする必要があります。
もちろんアニメーションを使わずとも、モーダルを表示して「ブックマークの保存先は○○です」のように文章で伝える方法もあります。

しかし、やはり文章を読むのはユーザーにとって負担になりますし、常に表示されるのであれば少し鬱陶しく感じてしまうかもしれません。
かといって初回だけ表示していると、ユーザーは忘れてしまうかもしれません。

アニメーションであれば、文字のようにユーザーの負担にならず、もはや無意識のレベルでユーザーに保存先を伝えられます。

気がつかない・気にしないレベルの細かさが使い勝手を分ける

Dan Saffer氏の著書「マイクロインタラクション ー UI/UXデザインの神が宿る細部」では、このようなマイクロインタラクションについて学べます。

2014年の書籍のため、出てくる実例はやや古いですが、マイクロインタラクションについての理解を深められます。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！