【無料】おすすめのマテリアルデザインテンプレート10選

【無料】おすすめのマテリアルデザインテンプレート10選

  • このエントリーをはてなブックマークに追加

以前に今さら聞けないマテリアルデザインとは?5分でわかる解説という記事でマテリアルデザインについて当サイトで紹介しましたが、これに関連して無料で使えるマテリアルデザインテンプレートをまとめてみました。管理画面、ダッシュボード、ポートフォリオ、ランディングページなど、様々なマテリアルデザインのテンプレートがありますので、ぜひともチェックしてみてください。

目次

AdminBSB Material Design

Bootstrap 3.xをベースにオープンソースプロジェクトとしてフリーで利用できるMITライセンス配布されている超極上の管理画面向けのマテリアルデザインです。社内のサービス、及びクライアント向けプロジェクトの管理画面としてこれさえあれば言うことはないでしょう。もちろん、レスポンシブデザインにも対応しているのでスマホでも問題なく閲覧できます。

マテリアルデザインな管理画面 AdminBSB Material Design

デモ / ダウンロード

Materialize

MITライセンスのMaterializeは、様々なサイトでの活用事例がショーケースとしてデモ確認できます。

マテリアルデザインテンプレートMaterialize

デモ / ダウンロード

Material Dashboard Angular2

これもBootstrapベースのダッシュボードをイメージしたテンプレートとなっており、MITライセンスでの利用、様々なアイコンもチェックしておきたいです。

マテリアルダッシュボードMaterial Dashboard Angular2

デモ / ダウンロード

Material Design Lite

Material Design Liteを使用すると、 JavaScriptフレームワークに依存せず、デバイス間の使用を最適化、古いブラウザでも正常に機能させることができます。ライセンスはApache-2です。色を予めカスタマイズしてダウンロードすることもできます。

マテリアルデザインテンプレート Material Design Lite

デモ / ダウンロード

Material Kit

MITライセンスのBootstrap向けのマテリアルデザインキットで、60のコンポーネント、2つのカスタマイズプラグイン、3つのサンプルページが含まれています。実際にこのキットを使って実装されたギャラリーページもあります。

マテリアルデザインキットMaterial Kit

デモ / ダウンロード

Material Icons

デザインテンプレートというよりは、マテリアルアイコンテンプレートです♪
Google製のオープンソースプロジェクトで、Apache License 2.0で配布されています。900個以上のアイコンが登録されており、Web向けのWebフォントとして使うことはもちろん、SVGデータを使ってAndroidやiPhone向けのアプリアイコンに使うのもいいでしょう。

マテリアルアイコン/Material Icons

デモ / ダウンロード

Material-UI

MITライセンスのオープンソースプロジェクトによるMaterial-UIです。

Material UI

デモ / ダウンロード

MaterialPro Lite

シンプルな機能に絞った印象のダッシュボード向けのマテリアルデザインです。これももちろん、レスポンシブデザインに対応しておりスマホでも閲覧できます。フリーで利用する場合のライセンスは1回限りとなります。

マテリアルデザイン MaterialPro Lite

デモ / ダウンロード

Material Design Bootstrap (MDB)

MITライセンスで配布されており、Bootstrap 4にも対応しているテンプレートです。デモページではランディングページ、3カラムリスト、eコマースサンプル、コーポレートサイト向けのサンプルが紹介されており、YouTube上でMaterial Design Bootstrap (MDB)の始め方が紹介されています。

ランディングページテンプレートなどがあるMaterial Design Bootstrap (MDB)

デモ / ダウンロード

Material Portfolio

マテリアルなポートフォリオデザインテンプレートで、ホーム、ポートフォリオ一覧、詳細、About、お問合わせのページをデモで確認することができます。CCA3のライセンスとなっています。

マテリアルポートフォリオMaterial Portfolio

デモ / ダウンロード

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に携わり、その後、便利な用務員に。Hep Hep!にてeizとして記事執筆中。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation