読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

Material Design Lite使ってみた

仕事でMaterial Design Liteに触れる機会があったので、いくつか感じとれた特徴を紹介したいと思います。

Material Design Liteとは

マテリアルデザインなウェブサイトを簡単に作れるフレームワークです。

マテリアルデザインは、Googleが発表した新しいデザインコンセプト(Introduction - Material design - Google design guidelines)ですが、うまく一言で説明できないかなーと思い、いろいろ記事を探してみました。

が、なかなか難しい・・・!
まぁ、こんな感じでしょうか。一言じゃないけど。

  • 3次元の空間に、要素が重なって配置される
  • 主要機能は目立たせる
  • アニメーションは、一箇所を起点に連続して起こる

で、これをウェブサイトで、手っ取り早く実現できるフレームワークがMaterial Design Liteです。・・・は言い過ぎかも。
「これの基本部分を手っ取り早く実現できる」くらいですかね。

Material Design Liteの導入

公式サイトで配布されている以下のファイルを読み込めば、導入は完了です。

インストールの方法はいろいろ紹介されていますが、僕はBowerを使いました。

ここからはHTMLを書いてページを作っていくのですが、ここで一つ注意が必要。
Material Design LiteはBEM(Block Element Modifier)を採用しています。classの命名規則の一種ですが、Material Design Liteを使ってウェブサイトを作るには、BEMの記法に従って書かなければいけません。

まぁ、あくまでclass名の書き方なので難しくはないのですが、最初は長〜いclass名が気持ち悪くて、なかなか慣れないかも。

まずは、公式サイトのHTMLソースをコピペ

僕もBEMはなんとなくしか知らなかったのですが、学習コストが惜しかったので、公式サイトのCOMPONENTSからソースをコピーペーストしてウェブページを作っていきました。

まずは、「Layout」のソースをコピペして、その中のmainタグの中に、「Buttons」のソースをコピペして、、という感じで。
「この要素のCSSをこうしたい、ああしたい」という修正がしたくなった時は、BEMの場合、基本「Modifier(例えば、「mdl-layout__header--scroll」の「scroll」の部分)」を修正することで対応します。

が、Material Design LiteのCOMPONENTSには、「Modifier一覧」のようなページが用意されておらず(見つからないだけ?)、Modifierをどう変化させれば良いのか、パッとわからないのが痛かったです。
COMPONENTSのLayoutには複数のパターンが紹介されているので、そのパターンを一つ一つ見て、Modifierの違うパターンを見つけ、修正する、という、ちょっと面倒くさい作業になってしまいました。

そんな作業の繰り返しで、マテリアルデザインなサイトを作っていきました。

応用は自力で

上記までで出来るのは静的ページですが、マテリアルデザインの醍醐味の一つ、「連続したアニメーション」の実装には、自力でJavaScriptを書く必要があります。

Buttons」などユーザーアクションが必要なモジュールには、予め波紋などのアニメーションが実装されています。しかし、
ボタンを押す→違う要素が大きくなる→その要素の中でアニメーションが起きる」など、
要素をまたぐ連続したアニメーションを実装する場合は、DOM操作のJavaScriptを自分で書く必要があります。

その他、Material Design Liteの特徴

あと、触っていて気づいた特徴です。

  • グリッドレイアウトのCSSにはbox:flexを使っている(個人的には嬉しい。Bootstrapはfloat:leftを使っている)
  • アイコンフォントが便利(Material icons - Google DesignからHTMLコピペ)
  • 大きめの要素には、だいたいz-indexが効いてる(新要素を追加した場合、z-indexを指定しないと隠れてしまうケースが起こる)

などですかね。


実装方法で言うならば、「BEMを使ってページを構築するフレームワーク」で、どちらかというとCSSフレームワークです。
大規模で、複雑な動きをするウェブサイトには向きませんが、単発の静的ページや簡単なデモサイトを作るには良いのではないでしょうか。