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

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

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

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

Instagramの「ブックマーク」

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

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

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

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

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

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

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

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


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

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

同じテーマの記事

齋藤 公一齋藤 公一 / 2024年3月26日

業務システムこそデザインにこだわった方が良い理由

山本 明子山本 明子 / 2024年3月22日

肩首伸ばしてスッキリ!座りながらできるストレッチ

本田 顕本田 顕 / 2024年3月13日

マック・ミラーが最高

西山秀治西山秀治 / 2024年2月16日

PHP8について

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。