本当に信頼できる会社にホームページを任せていますか?実績10年以上のWEBデザイナーが代表です

Googleマテリアルデザインの見本や無料素材が大量にストックされた「MaterialUP」

Googleマテリアルデザインの見本や無料素材が大量にストックされた「MaterialUP」

アプリを制作する上で参考にしたい、Googleの「マテリアルデザイン」。「Googleのすすめる「マテリアルデザイン」とは?基本の考え方を理解しよう」では3回にわたってその基本的な理論をご紹介してきましたが、実際にこれに基づいてアプリを制作する際にとても参考になるテンプレート集&無料素材集があります。

MaterialUP

ショーケースには、カレンダーやアイコン、アニメーションなど、マテリアルデザインのコンセプトに基づいた様々なモックアップやウェブサイトが並んでいます。毎日新しいサンプルが追加されるので、目が離せません。

中には「DOWNLOAD」ボタンのついたフリー素材もあるので、気になるものはクリックして見てみましょう。
右上の「+」ボタンからは、制作したアプリを投稿することもできます。

上のメニューバーから「Market」を選ぶと、UIキットやテンプレートの販売ページに移ります。いずれも安価なので、導入しやすいと思います。

「Collections」には、世界中のクリエイター達が作った作品が展示されています。サムネイルをクリックすると、デモ用のアニメーションや画像が表示されます。それをさらにクリックすると、dribbleやCodePenなどの共有サイトへと飛びます。

マテリアルデザインのインスピレーションを得るには最適なサイトですね。この中でも特に面白い素材をいくつかご紹介します。

Login/Logout animation concept

ログインボタンを押してからページへ遷移するときの、広がるインクと弾むような画面のアニメーションがきれいです。
CodePenで公開されています。

Download Animation

軽快なアニメーションでダウンロードの進捗を示してくれるローディングアイコン。シンプルなのに目を引きます。

Material Elevation Visualization

エレメントにカーソルを当てるとその高度を数値で表してくれます。長押しするとエレメントが持ち上がるエフェクトも。マテリアルデザインを考える上でとても参考になります。

Music animations part3

CDがスライドして入れ替わるようなアニメーションを見せてくれるミュージックアプリ。小さな画面の中でもこんなにおしゃれなデザインができるのかと魅せられます。

優れた素材はまだまだたくさんあります。ぜひチェックして、参考になるデザインを見つけてみてください。

コメントは受け付けていません。


まずはお気軽にご相談下さいホームページ制作についてのお問合せ


低価格プランホームページ制作実績スマートフォンサイト制作お問合わせフォーム


お問い合わせ

ホームページ制作相談室は代表をはじめWEB技術者だけの会社です。営業マンは1人もいないので営業は行いません。