Advertisement

ultimate-material-top

 

2014年8月にGoogleが発表したデザインガイドライン、マテリアルデザイン(英: Material Design)を利用したいというデザイナーやデベロッパーは増えているようです。実際、すでに多くのAndroid用アプリデザインなどにも採用されており、今後ますます要チェックのデザイントレンドとなっています。

 

 

海外デザインブログCSS Authorで、マテリアルデザインを採用するときに確認したいUIコンポーネントやフレームワーク、CSSエフェクトなどの無料デザイン素材をまとめたエントリー「Material Design Resources for Designers & Developers」が公開されていたので、今回は特に使い勝手の良さそうなアイテムを中心にまとめてご紹介します。

 

 

 

詳細は以下から。

 

 

 

Googleマテリアルデザインを採用するときに確認したい無料素材まとめ

 

Free Material Design Ui Kit

マテリアルデザインをベースに、半透明グラデーションが美しいミニマルスタイルのUIコンポーネントPSD。

materi-design-ui

 

 

 

Free Material UI Kit

7色の基本カラー配色を利用し、アプリデザイン開発もスムーズに行うことができるUIキット。

ui8-material-uidesign

 

 

 

Android Lollipop UI Design Kit

最新版Android Lollipopを完全再現したUIコンポーネントキットで、Sketch用ファイルを収録しています。

Android-Lollipop-UI-Design-Kit-for-Free

 

 

 

Material UI Kit: Cooking

料理やレシピをモチーフにUIコンポーネントが揃い、直感的なデザインが可能になっています。

Material-UI-Kit-Cooking

 

 

 

Recipes – Material Design

モバイルアプリ作成を想定しており、飲食店やカフェ用サイトなどにも活用できるコンポーネントが揃います。スライド式ナビメニューやギャラリーデザインなど、インタラクションな動きも考慮されています。

recipes-material-design

 

 

 

L Bootstrap UI Kit

Android Lアプリデザインを元に、Bootstrapのコンポーネントと組み合あせたデザインPSDキット。

boostrap-material-psd

 

 

 

Dribbble App Material Design

デザイナーコミュニティDribbble用アプリを、マテリアルデザインで再現したコンセプトPSDキット。

dribbble_app__material_design_

 

 

 

Material Design UI Kit PSDファイル

モバイル端末表示に対応した、さまざまなアプリコンテンツ制作に利用できそうなアイテムが揃います。

Material-Design-UI-Kit

 

 

 

Android L GUI Kit

すでに採用されているAndroid用OSを完全再現したGUIキット。

Android-L-GUI-Kit

 

 

 

Android 5.0/Material Design

こちらもAndroidアプリを再現したPSDキットで、最近アップデートを行い、より豊富なデザインパターンに対応しています。

Android-L-5.0-UI-Kit-PSD

 

 

 

Android Material Design Ui Kit

マテリアルデザインのベースコンセプトにもなっているドロップシャドウも再現された、Sketch用UIコンポーネントキット。

material-design-ui-sketch

 

 

 

Free Material UI Kit PSD

青色をベースにした可読性も良く、ミニマルなデザインスタイルが魅力的なUIコンポーネントPSD。

friee-material-ui-kit

 

 

 

Free UI Kit

マテリアルデザインとiOS デザインを組み合わせた様な、シンプルでミニマルスタイルのUIキット。

Free-UI-Kit-Ramotion-PSD

 

 

 

Facebook Material Design

マテリアルデザインをつかってfacebookアプリを作成した、コンセプトデザイン用PSDファイル。

Facebook-Material-Design-GUI-Kit-PSD

 

 

 

Skype Material UI Concept

まるで本物のインターフェースと間違うほどよくできた、skype用アプリをコンセプトデザインで作成しています。

skype-material-ui

 

 

 

Zalando Material Design UI

ショッピングサイトを想定し、マテリアルデザインを採用したアプリデザイン用sketchファイル。

zalando-shopping-site

 

 

 

Android L PSD Kit

音楽アプリを想定し、アニメーション遷移も考慮されたPSDのグループ分けがされているので、編集作業も手軽に。

music-app-material

 

 

 

Material Design Flat Avatar Set

フラットスタイルで作成された、人物ベクターアイコン素材セット。

material-people

 

 

 

Material Design Icons

20のカテゴリーに渡り、7つの解像度で作成された合計1000個のアイコン素材がPNGファイルで揃っています。

1000-Material-Design-Icons

 

 

 

Google Material Weather Design Icons

天気予報アプリなどに活用できる、さまざまな天気を表現したアイコン素材セット。

material-weather-icon

 

 

 

Matrial Design Icon Template

Illustratorでアイコンのデザイン制作行うときに便利な、AIファイルで収録されています。

Material-Design-Icon-Template

 

 

 

Material Design PSD Alphabet

マテリアルデザインのドロップシャドウを利用した、立体的なアルファベット文字PSD。

Material-Design-Psd-Alphabet-Featured

 

 

 

Material Design PSD Numbers

同様に数字だけをあつめた、マテリアルデザインと相性の良いフリー素材。

Material-Design-Psd-Numbers-Featured

 

 

 

Material Design Colors

マテリアルデザインに利用されている配色をコピー&ペーストで取得でき便利ツールのひとつ。

Material-Design-Colors1

 

 

 

Material Palette

2色の配色を選択することで、自動的にカラーパレットを作成してくれるオンラインツール。

Material-Palette

 

 

 

Responsive Material Layout

ヘッダー部分にパララックスエフェクトを適用し、スムーズなアニメーションを実装した、レスポンシブ対応のサンプルコード。

See the Pen Responsive Material Layout by Aristide Bruneau (@AristideBH) on CodePen.

 

 

 

Card Opening Effect

ボタンをクリックするとカード状レイアウトが、アニメーション付きで展開されます。

Material-card-opening-effect

 

 

 

Material Design for Bootstrap

人気フレームワークBootstrapにマテリアルデザインを導入しているので、拡張しやすくカスタマイズしやすくなっています。

Google-Material-Design-for-Bootstrap

 

 

 

Material Framework

マテリアデザインのコンポーネントを揃えたフレームワークで、取扱説明書も分かりやすく詳しく書かれています。

Material-Framework

 

 

 

Materialize

CSSとJSで作成されたフロントエンド向けフレームワークなので、慣れたHTMLでコーディングを進めたいときにも便利です。またSASSファイルも用意されているので、より快適なデザイン開発を実現します。

Materialize

 

 

 

Material UI

UIを構築するためのライブラリReact.jsに対応したしたフレームワークで、CSSスタイリングとコンポーネントが完備されています。

Material-UI

 

 

 

Angular Material

Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワーク、Angular.jsを利用し、より柔軟に直感的にレイアウトを作成できます。豊富なデモが用意されている点もポイントです。

Angular-Material

 

 

 

Polymer

Webデザインを部品化することを目的に開発されたWeb Componentsを利用した新しいライブラリ。オンラインテストツールも公開されており、最近動画チュートリアルも日本語字幕に対応したようです。

Polymer

 

 

 

マテリアルデザイン関連記事

 

フラットデザインとマテリアルデザインって同じ?違いを検証してみました

よく耳にするフラットデザインとマテリアルデザインの違いを、両方のメリット、デメリットも合わせて紹介しています。

flat-vs-material-top

 

 

 

Googleマテリアル・デザインをはじめよう!参考にしたい無料素材やアイデアまとめ

まずマテリアルデザインの基本を知りたいときは、こちらの記事を参考にどうぞ。

materialdesign_top

 

 

 

Googleマテリアル・デザインから学ぶ4つの重要ポイント + 参考UIデザイン、無料素材まとめ

マテリアルデザインのガイドラインから学んだ4つのポイントを、無料デザイン素材と一緒にまとめています。

material2014-top

 

 

参照元リンク : Material Design Resources For Designers And Developers – CSS Author