徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。
マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。
この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。
MaterialUpのオススメUIコンセプト５選
1. ミュージックプレイヤー
楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりアニメーションされます。
‘Music Player Transition’ — Concept by Anish Chandran
See the Pen Material design music app (pure CSS) by Gregor Adams (@pixelass) on CodePen.
2. 検索アイコン
検索で使用される虫眼鏡アイコンがそのままローディング演出になるアニメーションです。
‘Search’ — Concept by Oleg Frolov
See the Pen Search by Radimir Bitsov (@_rbit) on CodePen.
3. スイッチボタン
保存や適用ボタンのない設定画面などで使用されるスイッチボタンをより流体的に表現したアニメーションです。
‘Fluid Switch’ — Concept by Leonardo Zakour
See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.
4. 登録フロー
ユーザー登録のフローをマテリアルデザインの様式に則って再現したものです。画面内の重要なアクション（緑のボタン）が移動することによって、ユーザーに取ってほしい行動を誘導しています。
‘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
See the Pen Favorite Animation by Kyle Lavery (@koenigsegg1) on CodePen.
・・・
このようなアニメーションをもっとお探しの方はこちらの記事も御覧ください。
UpLabsではデザインのインスピレーションとなるリソースを毎日更新しています。あなたのつくったUIコンセプトやCodePenなどありましたら是非UpLabsとシェアして下さい。
