[この記事は Addy Osmani、開発プラットフォーム エンジニアによる Google Developers Blog の記事 "This is Material Design Lite" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]


2014 年、 Google は すべてのデバイスのフォームファクタで上質なデザインと美しい UI のガイドラインを提供することを目的として、マテリアル デザイン仕様を公開しました。本日、当社は素の CSS、HTML および JavaScript を使用したWeb サイトに、この仕様を導入するための最初の試みをリリースします。これを、 マテリアル デザイン ライト (MDL) と呼んでいます。

MDL では、マテリアル デザインの "Look and Feel" を Web サイトに簡単に追加できます。MDL の “ライト” な部分は、主要なデザイン目標に由来します。MDL には依存関係がほとんどなく、インストールや使用が容易です。また、フレームワークに寛容です。つまり、MDL はフロントエンド ツール チェーンが急速に変化する状況で使用できます。MDL はコード サイズの点でオーバーヘッドが少なく (gzip 圧縮された状態で最大 27KB)、Web サイトのマテリアル デザインを有効にすることに特化しています。

今すぐ利用を開始するか、CodePen の例のいずれかをお試しください。
MDL は Polymer で構築された Paper 要素のわかりやすい実装です。Paper 要素は個別に使用することも、組み合わせてマテリアル デザインスタイルのサイトを作成することもできる完全にカプセル化されたコンポーネントで、より高度なユーザーの操作をサポートします。つまり、MDL は同等の Polymer 要素と一緒に使用できます。

画期的なテンプレート


MDL はマーケティング ページ、テキスト記事およびブログなど、コンテンツの多い Web サイトのために最適化されています。当社は、Google のテンプレート ページからダウンロードできる MDL を使用して作成可能な幅広いサイトをご紹介するために、レスポンシブなテンプレートを構築しました。これらのテンプレートが、魅力的なサイト構築のお役に立てば幸いです。

ブログ:

テキストの多いコンテンツ サイト:

ダッシュボード:

単独の記事:
and more!

技術的な詳細とブラウザのサポート

MDL には、マテリアル デザイン ボタン、テキストフィールド、ツールヒント、スピナーなど、豊富なコンポーネント セットが含まれています。また、新しいマテリアル デザインの 柔軟な UI ガイドラインに準拠したレスポンシブなグリッドおよびブレイクポイントも含まれています。

MDL ソースは、 BEM を使用して Sass で記述されます。できれば 当社のテーマ カスタマイザーまたは組み込みの CSS を使用していただきたいですが、 GitHub から MDL ソースをダウンロードして独自のバージョンを構築することもできます。MDL を使用する最も簡単な方法は、 当社の CDN を参照することですが、CSS をダウンロードするか、 npm またはブラウザから MDL をインポートすることもできます。

最新のすべての主要ブラウザ (Chrome、Firefox、Opera、Edge) および Safari で完全な MDL エクスペリエンスが動作しますが、当社の厳しいテストに合格しなかった IE9 などのブラウザでは CSS のみに制限されます。当社のブラウザの互換性一覧には、MDL が公式にサポートするブラウザに関する最新情報が表示されています。

その他の質問

当社は、デザイナーとともに、進化を続けるマテリアル デザインに取り組み、常に一歩先をいく発想を Web に取り入れてきました。これには、レスポンシブなテンプレート、高パフォーマンスのタイポグラフィー、バッジなどの未実装コンポーネントへのソリューションの提供も含まれます。MDL は現在の仕様に対応し、いまだ進化を続ける仕様へのガイダンスを提供します。マテリアル デザインの仕様についてのユーザーのご意見やご質問が MDL の進化を促し、Web におけるマテリアル デザインの役割を向上させます。

数多くのご質問がおありだと思いますが、一部については、 FAQ で回答しています。さらにご質問がある場合は、お気軽に GitHub や Stack Overflow でお尋ねください。

まとめ

MDL は、ユーザーが精通し毎日使用している、Web の中核をなすテクノロジーである CSS、HTML および JS を基盤として構築されています。MDL をプロジェクトに導入することで、信頼性が高く洗練された Web 用のマテリアル デザインの実装にアクセスできるようになります。マテリアル デザイン ライトで構築された、魅力的で洗練されたレスポンシブな Web サイトを拝見できるのを心より楽しみにしています。


Posted by Eiji Kitamura - Developer Relations Team