Googleマテリアルデザインの見本や無料素材が大量にストックされた「MaterialUP」
Googleマテリアルデザインの見本や無料素材が大量にストックされた「MaterialUP」
アプリを制作する上で参考にしたい、Googleの「マテリアルデザイン」。「Googleのすすめる「マテリアルデザイン」とは？基本の考え方を理解しよう」では3回にわたってその基本的な理論をご紹介してきましたが、実際にこれに基づいてアプリを制作する際にとても参考になるテンプレート集＆無料素材集があります。
ショーケースには、カレンダーやアイコン、アニメーションなど、マテリアルデザインのコンセプトに基づいた様々なモックアップやウェブサイトが並んでいます。毎日新しいサンプルが追加されるので、目が離せません。
中には「DOWNLOAD」ボタンのついたフリー素材もあるので、気になるものはクリックして見てみましょう。
右上の「+」ボタンからは、制作したアプリを投稿することもできます。
上のメニューバーから「Market」を選ぶと、UIキットやテンプレートの販売ページに移ります。いずれも安価なので、導入しやすいと思います。
「Collections」には、世界中のクリエイター達が作った作品が展示されています。サムネイルをクリックすると、デモ用のアニメーションや画像が表示されます。それをさらにクリックすると、dribbleやCodePenなどの共有サイトへと飛びます。
マテリアルデザインのインスピレーションを得るには最適なサイトですね。この中でも特に面白い素材をいくつかご紹介します。
Login/Logout animation concept
ログインボタンを押してからページへ遷移するときの、広がるインクと弾むような画面のアニメーションがきれいです。
CodePenで公開されています。
軽快なアニメーションでダウンロードの進捗を示してくれるローディングアイコン。シンプルなのに目を引きます。
「Material Elevation Visualization」
エレメントにカーソルを当てるとその高度を数値で表してくれます。長押しするとエレメントが持ち上がるエフェクトも。マテリアルデザインを考える上でとても参考になります。
CDがスライドして入れ替わるようなアニメーションを見せてくれるミュージックアプリ。小さな画面の中でもこんなにおしゃれなデザインができるのかと魅せられます。
優れた素材はまだまだたくさんあります。ぜひチェックして、参考になるデザインを見つけてみてください。