Advertisement

google-material-top

 

Googleのデザインガイドライン、マテリアルデザイン(英: Material Design)を採用したウェブサイト制作や、モバイルアプリのリニューアルなどが増えてきています。特徴のひとつ、動きやアニメーションを駆使した新しいブラウザ体験は、ユーザーの注目を集めるのに最適な手法といえるでしょう。

 

 

今回はマテリアルデザインのアニメーション、動きを使った素敵なUIデザインをまとめてご紹介します。ルールに沿って制作をすすめることで、首尾一貫したデザインを作ることができ、インスピレーションの参考にいかがでしょう。

 

 

これまでにご紹介した、マテリアルデザイン関連のエントリーは以下です。

 

 

[list type=”star”] [li]Googleマテリアル・デザインをはじめよう!参考にしたい無料素材やアイデアまとめ[/li]

[li]Googleマテリアル・デザインから学ぶ4つの重要ポイント + 参考UIデザイン、無料素材まとめ[/li]

[li]【マテリアルデザイン採用】リニューアルで気をつけた4つの大事なポイント -feedly編-[/li][/list]

 

 

 

詳細は以下から。

 

 

 

マテリアルデザインの参考にしたい、動きのあるUIデザインまとめ

 

Android Lollipop Phone and Tablet

android-lollipop-phone-and-tablet

 

 

 

Material Components

animation4

 

 

 

Playing with After Effects & Material

test_ae_material

 

 

 

Sort Animation Intro

blank

 

 

 

Petcube for Android L

android-l

 

 

 

Material Design Gallery Animation

printpage

 

 

 

Google’s Material Design Animation

material_design_animation

 

 

 

Photo Application

photoapp

 

 

 

Inbox + Calendar Integration Animation

big

 

 

 

Open Chat Animation

dribbble-1

 

 

 

L for Love

androidl____

 

 

 

News@Mail.ru Material Concept

mailmobileanimated

 

 

 

Queue

queue

 

 

 

Product Purchase Transition

aasada

 

 

 

Material Transition

offer-selection

 

 

 

Secret Project

shot2

 

 

 

Navigation Menu Animation

dribbble-animation

 

 

 

Floating Action Button

fab-animation

 

 

 

Material Design Menu Animation

dribbble-2

 

 

 

Share Results

share-results-ux-ui-interface-app-design-ramotion-1

 

 

 

New Message Animation

animacia-export-1

 

 

 

White Material Effect

white-phone

 

 

 

Domain App – Error Notifications

app---error-notifications2

 

 

 

マテリアル限定ギャラリーサイト

 

MaterialUp

マテリアルデザインを使ったサイト制作で困ったときに覗きたい、UIデザインをあつめたギャラリーサイト。定期的に更新されていて、数も豊富に揃います。

materialup

 

 

サムネイル@ : Travel Club App – Mobile App by Alla – Material App

参照元リンク : Material Design Motion Explorations – Abduzeedo Design Inspiration