Advertisement

GIF-UI-Design-001

 

作成したモバイルアプリのコンセプトを、より分かりやすくユーザーに伝えることができるとして、GIFアニメーションを使ったUIデザインコンセプトの表現は、人気のプレゼンテーション方法のひとつとなってきています。モバイルデザイン制作の参考にしてみてはいかがでしょう。

 

 

海外デザインブログThe Design Inspirationで、ダイナミックな動きをGIFアニメーションで表現した、モバイルUIデザインをまとめたエントリー「20 Incredible Mobile UI Animations in GIFs」が公開されていたので、今回はこちらを中心に個人的にブックマークしておきたい作品を一緒にまとめています。

 

 

 

詳細は以下から。

 

 

 

ダイナミックな動きが魅力的な、GIFアニメーション付モバイルUIデザインまとめ

 

FaceScan App Concept

顔をスキャンするとプロフィール情報が表示されるアプリコンセプト。

FaceScan-app-concept

 

 

 

WIP Discover Music App

スルスルと流れるようなエフェクトが気持ちいい音楽アプリ用コンセプト。

Discover-Music-app

 

 

 

Menu Animation

太字フォントが印象的なナビゲーションメニュー。

GIF-UI-Design-004

 

 

 

Dashag Tour

アプリデザインの特長をまとめて、スライド形式表示していきます。

Dashag-Tour

 

 

 

Animation Home GIF

キュートなアイコンで演出された、余計なデザインを省いたミニマルなつくり。

Animation-Home-Gif

 

 

 

Photo Navigation

ズラズラとタイル上に並べられた写真は、クリックするとズームで表示されます。

photo_navigation_concept

 

 

 

Poppin Adding a Task

To Doリストをより直感的に作成する、サークルデザインを採用したユニークなアプリUIデザイン。

Adding-a-task

 

 

 

Weather App

ぼんやりフェードインするエフェクトが美しい、天気予報アプリUIデザイン。

GIF-UI-Design-008

 

 

 

GIF Fiche

モバイルアプリの一連の使い方を、アニメーションで分かりやすく伝えます。

GIF-UI-Design-017

 

 

 

Gif Pay / Charge

モバイルアプリを使った入金や支払いの手順を説明しています。

GIF-Pay-Charge1

 

 

 

Covert Inbox

メール受信ボックスをダーク系デザインと、滑らかなアニメーションでスタリッシュにまとめています。

GIF-UI-Design-019

 

 

 

Walkthrough Animation

モバイルアプリの使い方、特長を分かりやすくアニメーションで再現します。

Walkthrough-Animation

 

 

 

Team Messages

チームやプロジェクト毎にチャット機能を加えた、ミニマルなUIデザインが素敵なアプリ。

Team-Messages

 

 

Interaction Overview

Interaction-overview(2)

 

 

Menu Interaction Gif

左側からふわりとスライドしながらメニューが表示されています。

Menu-interaction

 

 

 

モバイルアプリの操作性を良く伝える、GIFアニメーション付UIデザインまとめ

今回は未紹介のアプリUIデザインをあつめています、いかがでしょう。

gif_animation5

 

 

サムネイル@ : Gif Animation by Sergey Valiukh – Dribbble

参照元リンク : 20 Incredible Mobile UI Animations in GIFs – The Design Inspiration