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

プロジェクト事例 - TSUMIKI UI DESIGN のサイトを公開

つみきでは、UI/UX事業部のサイトとなる「TSUMIKI UI DESIGN 」を公開しました。制作のきっかけや想いをプロジェクトメンバーに聞いてみました!

ポートフォリオでチームの想いを伝える

ー サイトを立ち上げた経緯を教えてください。

携わった案件を紹介して、つみきが得意なことや大切にしていることをちゃんと伝えたいという目的がありました。アウトプットを見てもらうことが一番の説得力にな

もっとみる

つみきのマイクロインタラクションとは? [インナーブランディング事例紹介]

ユーザーの愛着を生むデザインを得意とするつみきが今、特に力を注いでいるのが「マイクロインタラクション(※)」です。

でも「そもそも、なぜマイクロインタラクションなのか?」

その理解と認識が、実は事業部内のメンバーそれぞれで曖昧になっているのではないか?

潜在的なその課題をクリアにするべく、3名のディレクターが集結。「つみき UI/UX事業部のインナーブランディング」と銘打って、社内プロジェク

もっとみる

虫の視点でつくる、マイクロインタラクションの事例

こんにちは。

「鳥の目」「虫の目」「魚の目」というものがあります。物事を見極めるため必要な視点を生き物の目線で表現した言葉です。「鳥の目」は俯瞰して全体像を見ること、「虫の目」は細部に注視すること、「魚の目」は潮の流れを読むように市場を流れを捉えることを言います。俯瞰したり注視したり周りを見たり、デザインをしていればどれも必要な視点ですね。

今回取り上げるマイクロインタラクションは、虫の視点で

もっとみる
ありがとうございます!嬉しいです。
7

API通信待ちのインタラクションの実装レベルを段階別で整理する

SPA時代のAPIのハンドリングは、もはや一般教養みたいなレベルになりつつある。

なんだけど、loadingはこのぐらいできてればいいよね、というのがプロダクトの中で認識されておらず、結果としてエンジニア個々人の誇りによって作られたすごいloadingと、動けばいいや、とりあえず動くからリリースしよう、という惰性の塊みたいなloadingがないまぜになったプロダクトが散見される。そりゃそうだよね

もっとみる

つみき UI/UX事業部のWebサイトを公開しました

つみきのUI/UX事業部のWebサイトを公開しました。
遊びごころとアイディアでユーザーの愛着を生むデザインを得意としています。アプリやWebサービスのUIデザイン・UI改善などご相談ください。

https://uid.tsumikiinc.com/

わーい。ありがとうございます!
15

マイクロインタラクションで快適なユーザ体験を。

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

マイクロインタラクションとは、日常のあらゆる体験・行動に対して、フィードバックやステータスの変化を伝える事を言います。ヒューマンセンタードデザイン(人間中心設計)の一つの手法とも言われます。

言葉にすると少し難しく感じますが、「Suicaで改札をタッチするときにピッと音がなる」や「病院の待合室に進行順番が表示されている」のような日常の

もっとみる

ProtoPie(プロトパイ)を始める。横スクロール編

アニメーションモックはAfterEffectsの一択だったんですが、もう少し視野を広げてみようかなと思いこのプロトパイを始めてみました。

プロトパイのサイトにはチュートリアルやDEMOがとても豊富です。
まず何を作るのか?という発想が邪魔をするのでDEMO版の動きを自分なりに分解してみました。

この横スクロールUIを真似したいと思います。
理由はフェードアウトの箇所がどのような作りになっている

もっとみる

UIモーション、マイクロインタラクション作成ツールの比較 2020年版

UIモーション、マイクロインタラクションを取り入れる際、様々なツールを使ってプロトタイプを作成することができます。色々ありすぎて選ぶのが大変な状況なので、主なツールの用途や特徴を元に整理してみました。ツール選びの参考にしていただけると嬉しいです。

今回は以下の6つのツールを4象限に分類して解説します。

⚠️注意:この記事では2020年1月時点での各ツールの機能を元に解説します。

まずはこの分

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

すぐ使えるXD Tips vol.2 - インタラクションをコーディング編

Adobe XD Advent Calendar 2019の10日目の記事です。

Adobe XDが作れるのはあくまで「プロトタイプ」です。ウェブページとして完成させるには、XDで作ったプロトタイプをウェブ技術で動作させる必要があります。本エントリーでは、前日のアドベントカレンダーの記事「すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編」で作られたインタラクションを

もっとみる

すぐ使えるXD Tips vol.1 - ホバーのインタラクションをデザイン編

Adobe XDの2019年11月の新機能「ホバーステート」を利用し、ボタンにマウスオーバー(ホバー)したときのマイクロインタラクションを作成する方法を解説します。

サンプルファイルはこちらからダウンロードできます。

完成系の確認

まず今回の完成系を見てみましょう。

ホバーによって、下記の2つの変化が起こっているのがわかります。

・角丸長方形の塗りが透明になる(不透明度が0になる)
・テ

もっとみる
ありがとうございます♡
37