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 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

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

saito

高校時代にIT・Web業界に興味を抱き、神戸電子専門学校で2年間デザインやWeb実装について知識を得た後、新卒でN′sCreates株式会社のデザイナーとして入社。ミッションである｢解で快を創る｣を実現するべく日々の業務に向き合い、より良い提案を心掛けています。また、学生時代からWeb制作に関わる方のためのセミナーイベント「CSS Nite in KOBE」のスタッフとして業界の最先端に触れ、自主的に学習してきた知識やスキルを武器に、常に成長を続けている。