2014年8月にGoogleが発表したデザインガイドライン、マテリアルデザイン（英: Material Design）を利用したいというデザイナーやデベロッパーは増えているようです。実際、すでに多くのAndroid用アプリデザインなどにも採用されており、今後ますます要チェックのデザイントレンドとなっています。
海外デザインブログCSS Authorで、マテリアルデザインを採用するときに確認したいUIコンポーネントやフレームワーク、CSSエフェクトなどの無料デザイン素材をまとめたエントリー「Material Design Resources for Designers & Developers」が公開されていたので、今回は特に使い勝手の良さそうなアイテムを中心にまとめてご紹介します。
詳細は以下から。
Googleマテリアルデザインを採用するときに確認したい無料素材まとめ
マテリアルデザインをベースに、半透明グラデーションが美しいミニマルスタイルのUIコンポーネントPSD。
7色の基本カラー配色を利用し、アプリデザイン開発もスムーズに行うことができるUIキット。
Android Lollipop UI Design Kit
最新版Android Lollipopを完全再現したUIコンポーネントキットで、Sketch用ファイルを収録しています。
料理やレシピをモチーフにUIコンポーネントが揃い、直感的なデザインが可能になっています。
モバイルアプリ作成を想定しており、飲食店やカフェ用サイトなどにも活用できるコンポーネントが揃います。スライド式ナビメニューやギャラリーデザインなど、インタラクションな動きも考慮されています。
Android Lアプリデザインを元に、Bootstrapのコンポーネントと組み合あせたデザインPSDキット。
デザイナーコミュニティDribbble用アプリを、マテリアルデザインで再現したコンセプトPSDキット。
Material Design UI Kit PSDファイル
モバイル端末表示に対応した、さまざまなアプリコンテンツ制作に利用できそうなアイテムが揃います。
すでに採用されているAndroid用OSを完全再現したGUIキット。
こちらもAndroidアプリを再現したPSDキットで、最近アップデートを行い、より豊富なデザインパターンに対応しています。
Android Material Design Ui Kit
マテリアルデザインのベースコンセプトにもなっているドロップシャドウも再現された、Sketch用UIコンポーネントキット。
青色をベースにした可読性も良く、ミニマルなデザインスタイルが魅力的なUIコンポーネントPSD。
マテリアルデザインとiOS デザインを組み合わせた様な、シンプルでミニマルスタイルのUIキット。
マテリアルデザインをつかってfacebookアプリを作成した、コンセプトデザイン用PSDファイル。
まるで本物のインターフェースと間違うほどよくできた、skype用アプリをコンセプトデザインで作成しています。
ショッピングサイトを想定し、マテリアルデザインを採用したアプリデザイン用sketchファイル。
音楽アプリを想定し、アニメーション遷移も考慮されたPSDのグループ分けがされているので、編集作業も手軽に。
Material Design Flat Avatar Set
フラットスタイルで作成された、人物ベクターアイコン素材セット。
20のカテゴリーに渡り、７つの解像度で作成された合計1000個のアイコン素材がPNGファイルで揃っています。
Google Material Weather Design Icons
天気予報アプリなどに活用できる、さまざまな天気を表現したアイコン素材セット。
Illustratorでアイコンのデザイン制作行うときに便利な、AIファイルで収録されています。
マテリアルデザインのドロップシャドウを利用した、立体的なアルファベット文字PSD。
同様に数字だけをあつめた、マテリアルデザインと相性の良いフリー素材。
マテリアルデザインに利用されている配色をコピー＆ペーストで取得でき便利ツールのひとつ。
2色の配色を選択することで、自動的にカラーパレットを作成してくれるオンラインツール。
ヘッダー部分にパララックスエフェクトを適用し、スムーズなアニメーションを実装した、レスポンシブ対応のサンプルコード。
See the Pen Responsive Material Layout by Aristide Bruneau (@AristideBH) on CodePen.
ボタンをクリックするとカード状レイアウトが、アニメーション付きで展開されます。
人気フレームワークBootstrapにマテリアルデザインを導入しているので、拡張しやすくカスタマイズしやすくなっています。
マテリアデザインのコンポーネントを揃えたフレームワークで、取扱説明書も分かりやすく詳しく書かれています。
CSSとJSで作成されたフロントエンド向けフレームワークなので、慣れたHTMLでコーディングを進めたいときにも便利です。またSASSファイルも用意されているので、より快適なデザイン開発を実現します。
UIを構築するためのライブラリReact.jsに対応したしたフレームワークで、CSSスタイリングとコンポーネントが完備されています。
Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワーク、Angular.jsを利用し、より柔軟に直感的にレイアウトを作成できます。豊富なデモが用意されている点もポイントです。
Webデザインを部品化することを目的に開発されたWeb Componentsを利用した新しいライブラリ。オンラインテストツールも公開されており、最近動画チュートリアルも日本語字幕に対応したようです。
マテリアルデザイン関連記事
フラットデザインとマテリアルデザインって同じ？違いを検証してみました
よく耳にするフラットデザインとマテリアルデザインの違いを、両方のメリット、デメリットも合わせて紹介しています。
Googleマテリアル・デザインをはじめよう！参考にしたい無料素材やアイデアまとめ
まずマテリアルデザインの基本を知りたいときは、こちらの記事を参考にどうぞ。
Googleマテリアル・デザインから学ぶ４つの重要ポイント + 参考UIデザイン、無料素材まとめ
マテリアルデザインのガイドラインから学んだ4つのポイントを、無料デザイン素材と一緒にまとめています。
参照元リンク : Material Design Resources For Designers And Developers – CSS Author
