マイクロインタラクションの観察

21
ノート

XDを使った簡単なアニメーション

こちらの方のTwitter投稿からインスピレーションを受け、同じようにAdobe XDで簡単なアニメーションを作成してみました。

▼参考 コンセプトと動きが明快でいいですよね!

ハロウィン中のちょっとした遊びがコンセプト

僕はハロウィン中にダークモードに変えたら、こんなマイクロインタラクションが起きたら面白そうだなと思って作成しました。
ツール:Adobe XD (自動アニメーション)
所要

もっとみる
ありがとうございます!
6

「クラシルのお気に入り」をリデザインしてみました!

前回に引き続き、クラシルのリデザインです。今回はお気に入りについて改善してみたいと思います。

▼前回の記事はこちら

お気に入りを追加する際の挙動

お気に入りに追加するとモーダルでどこの階層に保存をするか聞かれます。
▼BEFORE

これがザッピング中に毎回差し込まれるので少しテンポが悪くなるなと感じました。
どんな作業でもA工程をまとめて、B工程を一気にやるという方が効率的ではないかと仮説

もっとみる
ありがとうございます!
13

「クラシル」をリデザインしてみました!

久しぶりのリデザイン記事です。
過去にも架空の乗り換えアプリやGoogle翻訳、YouTubeなどリデザインしてきました。最近ではファミリーマートのサービスデザインを勝手に作っています。ファミリーマートさんに届いて欲しい!

次なる課題を探していたら、クラシルの坪田さんはリデザインに対するスタンスがオープンだったので提案させていただきます。もちろんマイクロインタラクションも意識していきます。

もっとみる
ありがとうございます!
16

ある1日に見たマイクロインタラクション

前回の投稿した、「身の回りにあるマイクロインタラクション」の第2弾になります。1日に何回マイクロインタラクションに出会うのか?をメモしていきたいと思います。

5:30 Powerbeats Proの同期

朝一のマラソンを日課にしています。最近導入したpowerbeatsproのイヤホンは蓋を開けるだけでiPhoneと同期します。片方のイヤホンを外すと自動的に音も止まります。とにかく走りやすい!

もっとみる

音楽好きを夢中にさせるアプリのマイクロインタラクションを考察してみた

Web制作会社つみきにてデザイナーとして活躍してるユキコです!
私はお仕事中、お気に入りの音楽を聴きながら作業することが多いです。むしろ音楽聞かないと気が乗らなくて手が進まない。そんな方も多いのではないでしょうか??
映画見て気に入ったらその映画の主題歌とサントラしばらく聴きまくる 。FF・ドラクエにはまったらゲームのサントラしばらく聴きまくる。そんでもって気に入った曲はワントラックリピートしまく

もっとみる
I Love U ♡
77

「ファミリーマートの定額カフェサービス」を勝手に提案してみた【デザイン編】

3度の飯より「ファミマのカフェラテ」。朝、昼、夕と3回ほど買っている愛好家です。もうサブスクになってくれー。無いなら作ってみる!というのが今回の記事テーマです。
前編は企画の整理。後編はマイクロインタラクションを含んだモックのデザインを公開します。

企画編から読みたい方はこちらから
マイクロインタラクション満載で「ファミリーマートの定額カフェサービス」を勝手に提案してみた【企画編】

前回の振り

もっとみる
ありがとうございます!
22

「ファミリーマートの定額カフェサービス」を勝手に提案してみた【企画編】

3度の飯より「ファミマのカフェラテ」。朝、昼、夕と3回ほど買っている愛好家です。もうサブスクになってくれー。無いなら作ってみる!というのが今回の記事テーマです。
前編は企画の整理。後編はマイクロインタラクションを含んだモックのデザイン意図を公開します。

マイクロインタラクション満載で「ファミリーマートの定額カフェサービス」を勝手に提案してみた【デザイン編】

こんなサービスを考えました

なんで

もっとみる
ありがとうございます!
8

【DJアプリ】マイクロインタラクション比較でわかったプロダクトの「立ち位置」と2つの心地よさについて

こんにちは!株式会社つみきでWebとAppのディレクションをしているmanami/Fと申します。(本名を出すのに抵抗がありニックネームで失礼。。)

この度部署をあげてマイクロインタラクションを研究していこうということになり、マイクロインタラクションについてぼんやり考える日々です。

ネタについて何を書こうか結構悩んだのですが、部署でも共有されているこの一文をふと思い出し。

[……]「こよなく愛

もっとみる
スキを押してくれたあなた、最高ですヽ(´▽`)/
11

読み込みボタンのマイクロインタラクション

「もっと見る」ボタンはいまや標準ともいえるUIパーツです。検索結果に多く用いられ、表示件数が多い時に置かれています。

今回は見慣れたもっと見るボタンにマイクロインタラクションを追加して、よりわかりやすいものに提案してみます。

現状の問題点

よくあるタイプは下記のようなボタンタイプです。

noteのボタンです。
問題点としてはこのボタンを押したら何件分読み込まれるのか分からない点です。【10

もっとみる
ありがとうございます!
9

マイクロインタラクションの効果を数値化する

マイクロインタラクションの効果にはどのようなものがあるでしょうか?「インタラクティブ性の高いアニメーションを使ってブランドイメージを高める」「ユーザー体験を心地よいものにしてサービスへの愛着を強める」。これらはもちろん大事なことですが、このままでは主観的な印象によるところが大きく、何をどの程度行えばどのくらいの効果を見込めるかを測ることができません。その結果、ステークホルダーやプロジェクトのメンバ

もっとみる
わーい。ありがとうございます!
118