2016年7月22日

ナレッジ

アプリの動きに悩んだら!素晴らしいインスピレーションを得られるインタラクション厳選24本

こんにちは、デザイナーの武本です。最近のUIは、気持ちの良いインタラクションが多く取り入れられていることが当たり前になってきています。皆さんはUIの動きを考えるときに、何を参考にしていますか?

良いアニメーションやインタラクションを考えるのは僕のようなWebデザイナーの仕事です。が、すぐに思い浮かぶわけではなく、やはりいろいろなサイトやアプリを探します。最近、僕が探したインタラクションの中ですごくインスピレーションを得られた24選を紹介します。「なかなかいい動きが思い浮かばない・・・」、そんな時にはぜひこちらを見てみてください。
 
 
 

目次

ラインのインタラクションが美しいメニュー

1_001

Floating burger 2.0

上下スクロールすると、画面上部のラインがハンバーガーメニューの周りをくるっと囲んだり、戻ったりします。細いラインの動きがシャープです。
 
 
 

ダイナミックな画面切り替え

2_001

Login & Home Screen

Sign inのボタンがローディングに変わり、画面切替わりのタイミングでそのローディングが一気にズームアップし、画面が切り替わります。
 
 
 

紙のように動くインタラクション

3_001

Delivery Card

配達先情報をカードに見立てたアクション。紙のようににパタパタ折り畳むインタラクションが気持ちいいです。
 
 
 

直感的なフィルタ変更が可能

4_001

Filter Menu

色とインタラクションでより直感的に作成できるTo Doリスト。メニュータップで円形の放射状に拡大。瞬時にフィルタ変更できるのが便利です。
 
 
 

タブバー特有の問題にアプローチ

5_001

Animated sliding tab bar

タブバー特有の「画面サイズ幅を余計にとる」問題にアプローチしたインタラクション。シンプル&コンパクトです。
 
 
 

本を選ぶ。がコンセプト

6_001

Book selecting

本を選ぶ際の挙動に特化したインタラクション。次の対象物の表示タイミングが素晴らしいです。
 
 
 

チャットのインタラクションをより面白く

7_001

Chat Concept animation

ゆらゆらとした波のようなインタラクションと弓をひくようなインタラクションが特徴的。遊び心のある動きですね。
 
 
 

紙をめくるような気持ちよさ

8_001

Calendar choosing

紙をめくるように直感的な操作を可能にするカレンダー。遷移スピードも速くスムーズ。
 
 
 

心地の良いリロード

9_001

Motion about reloading

コーヒーをモチーフにした挙動がユニークなリロードのインタラクション。波打って注がれるコーヒーの雰囲気が出ています。
 
 
 

気持ちが伝わるハートのインタラクション

10_002

iOS App Transitions

すべての動きがとってもスムーズ。「Thanks!」のハートアイコンのインタラクションとサイズが可愛らしいです。
 
 
 

よりスマートな支払い方を

11_002

Starbucks Credit Card Interaction

スターバックスカード or クレジットカードをスワイプで素早く選び、支払いをよりスムーズにします。
 
 
 

近未来を感じさせるUI

12_001

Remote Car Control

エンジン停止やロックなどマイカーでリモート制御するアプリコンセプト。黒をベースに近未来を彷彿とさせるスタイリッシュなデザインです。
 
 
 

小さなインタラクションの効果

13_001

New connection!

新しいコネクションが追加された時のインタラクション。小さいパーツですが、握手する手が上下に動くだけで人とつながったというイメージがわきますね。
 
 
 

クレジットカードの番号入力を直感的に

14_002

Final App Interaction

クレジットカード番号が1回ずつで変わるサービス。番号を盗まれるのを防止するのと、支払い先ごとにカード番号を別にすることが可能に。このアプリで一括管理ができて便利ですね。色合いも参考になります。
 
 
 

速さでゲーム感を表現

15_001

Circle Game Menu

PlayStationのような、ボタンがゲームっぽさをより一層引き立てます。インタラクションの動きも気持ち良い速さです。
 
 
 

ラインとサークルを使ったスマートなUI

16_001

New Project for MarketMe

メニューアイコンのタップで真上にすっと伸びるラインと円状の検索ボタンが印象的。
 
 

癖になるほどのスムーズなレイアウト切り替え

17_001

Arco Eshop

横スワイプでの閲覧から縦2ラインでの閲覧へスムーズに切り替えできます。
 
 
 

美しい写真の見せ方

18_001

Arco

ブラインドが開くようにして画面が切り替わるコンセプト。写真も美しいです。
 
 
 

グラフ表示を面白く

20_001

Arco - Graph

グラフ表示用UIですが、グラフ内で数値が増減する際にインタラクションが施してあり視覚的にも分かりやすいのが特徴です。ぐにゃっと動くインタラクションがただのグラフと一味違うを出しています。
 
 
 

広がりが美しい操作アイコン

21_001

Menu access [Origami]

メニュータップで、縦方向と横方向に操作アイコンが広がります。ブルーとオレンジが印象的です。
 
 
 

スタイリッシュに見えるゼリーのような弾力

22_001

Photo Cards App

対象物が左右に首を振り、より立体的に見せています。弾力のある動きが気持ち良いです。
 
 
 

ドラッグして、シンクロさせるだけ

23_001

Synchronization App

連絡先情報を別のアカウント(アプリ)間で同期するためのもの。アイコンを入れ替えるだけで簡単に同期が終了します。直感的操作を実現しつつ、細部のデザインまで作りこまれている。
 
 
 

均一じゃないインタラクションがよりスタイリッシュに

24_01

Lockscreen (animated)

ロックスクリーンのUIデザイン。あえてアイコンとアイコンネームに表示タイムラグを発生させることで均一性を崩した所にセンスの良さを感じます。
 
 
 

均一じゃないインタラクションがよりスタイリッシュに

25_001

Epic Black Friday Deals

米国で有名なブラックフライデーの告知UI。ブラックとイエローの配色が印象的。
 
 
 
いかがだったでしょうか?シンプル系からダイナミックな動きまで幅広いインタラクションがたくさんありますね。インタラクションはクライアントやエンジニアにどんなUIをイメージしているのかを説明するのにも直感的でわかりやすいので、そう言った意味でもとても便利です。僕がインタラクションを探す時によく見ているのは今回紹介した「dribbble」です。是非これからのデザインの参考にご活用ください!
 
 

PM

TakemotoTakuya

UI/UXデザイナー 美術大学を卒業した後、居場所を探してヨーロッパに行くも、居場所は見つからず帰国。その後すぐにアイスリーデザインに拾われ、今に至る。

関連する記事

おすすめの記事

Recruit

アイスリーデザインでは

一緒に働くメンバーを募集しています

採用情報はこちら矢印