アニメーションが心地よいマテリアルデザインのUIサンプル5選

MaterialUp

良質なマテリアルデザインを毎日更新中。こちらもチェック:@MaterialPalette &@_iosup_

この記事はuplabsからの翻訳転載です。配信元または著者の許可を得て配信しています。

Can you Code this UI Concept? Vol. 2

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。

マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。

UIデザインの歴史に学ぶシャドウと奥行きの使い方

この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。

MaterialUpのオススメUIコンセプト5選

1. ミュージックプレイヤー

楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりアニメーションされます。

1-eea4worl5vja-6pmg6nu4q

Music Player Transition’ — Concept by Anish Chandran

See the Pen Material design music app (pure CSS) by Gregor Adams (@pixelass) on CodePen.

2. 検索アイコン

検索で使用される虫眼鏡アイコンがそのままローディング演出になるアニメーションです。

1-1pijtrgwpdbdo4yqpjcbja

Search’ — Concept by Oleg Frolov

See the Pen Search by Radimir Bitsov (@_rbit) on CodePen.

3. スイッチボタン

保存や適用ボタンのない設定画面などで使用されるスイッチボタンをより流体的に表現したアニメーションです。

‘Fluid Switch’ — Concept by Leonardo Zakour

Fluid Switch’ — Concept by Leonardo Zakour

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.

4. 登録フロー

ユーザー登録のフローをマテリアルデザインの様式に則って再現したものです。画面内の重要なアクション(緑のボタン)が移動することによって、ユーザーに取ってほしい行動を誘導しています。

‘Signup Interaction’ — Concept by Sikrant

Signup Interaction’ — Concept by Sikrant

See the Pen Material Design Signup Interaction by Kyle Lavery (@koenigsegg1) on CodePen.

5. いいね

Twitterの「いいね」のような、ハートが弾けるようなアニメーションです。

‘Favorite Animation’ — Concept by John Noussis

Favorite Animation’ — Concept by John Noussis

See the Pen Favorite Animation by Kyle Lavery (@koenigsegg1) on CodePen.

・・・

このようなアニメーションをもっとお探しの方はこちらの記事も御覧ください。

コピペで使える!マテリアルデザインなUIアニメーション

UpLabsではデザインのインスピレーションとなるリソースを毎日更新しています。あなたのつくったUIコンセプトやCodePenなどありましたら是非UpLabsとシェアして下さい。

1-bqhz5bet0pnbuv5ooqh9zq


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて