マテリアルデザインのガイドラインや素材があるサイト紹介

マテリアルデザインのガイドラインや素材があるサイト紹介
(YouTube, AdSense, Play 公認エキスパート)
2021年03月02日 in Web・IT
記事内にPR・広告が含まれる場合があります

スマートフォン等のモバイル端末が普及し、モバイルアプリやWebサイト等でもユーザーの操作性がより求められるようになりました。そこでGoogleが力を入れてアピールしているのが『Material Design(マテリアルデザイン)』です。以前から耳にするフラットデザインと似ているところはありあすが、マテリアルデザインはフラットデザインよりも質感や動きがあります。

例えば「どこならタップできるか」「どこのボタンが重要なのか」などかが見ただけでも分かるような、ユーザーを視覚的にガイドできるのがマテリアルデザインです。Googleだけが使っているデザインではなく一般の方でも使えるように、スペース・色・画像の使い方などのガイドラインが細かくあります。

ガイドラインだけでなくフォントやデザイン素材なども公開されているので、一から作成することができない人でもマテリアルデザインを導入することもできるでしょう。今回はマテリアルデザインについて学ぶことができるサイトや素材を提供しているサイト等を紹介致します。

広 告

本家Google

material-d01
http://www.google.com/design/

Googleが公開しているマテリアルデザインに関するサイトです。マテリアルデザインはどのようなものなのかや、事例・動画・アイコンなどがあります。ガイドラインやレイアウトについても詳細に記載されています。英語なので全て理解するのは難しいかもしれませんが、見ているだけでも「マテリアルデザインってこういうものなのか」ということは分かるサイトです。

アイコンについては以前当サイトでもご紹介いたしました。

MATERIAL DESIGN LITE

material-d02
http://www.getmdl.io/

パーツやWebサイトのテンプレートをダウンロードすることができるサイトです。ソースコードをコピーして貼り付けるだけで、マテリアルデザインを導入することができるので便利!少しずつ導入してカスタマイズしていきたい方にお勧めです。

materialup

material-d03
http://www.materialup.com/

様々なユーザーがマテリアルデザインのソースコードや画像データ等の素材を公開しているサイトです。ダウンロードして使用可能な素材も多くあります。かなり豊富にデータがあるので、見ているだけでも参考になって楽しいサイトです。

MaterialDesignThemes

material-d04
http://materialdesignthemes.com/

一部有料もありますが、多くが無料でダウンロード可能なテンプレートが公開されています。HTML用のテンプレートだけでなく、WordPress用のテンプレートまで公開されています。気軽にマテリアルデザインで構築されたWebサイトにすることができますね!

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。