レスポンシブWebデザイン対応！マテリアルデザインのCSSフレームワーク「Materialize」

あけましておめでとうございます。お正月に食べすぎたせいで胃が大きくなってしまったのか、仕事中にお腹がぐーぐーなって恥ずかしい思いをしている森山です。ウミブログをご覧いただいている皆様、本年もどうぞよろしくお願いいたします。

さて本日は、マテリアルデザインのWebサイトが簡単に作れてしまう「Materialize（マテリアライズ）」というCSSフレームワークについてご紹介したいと思います。ウミでは普段CSSフレームワークを使用することはあまり無いのですが、こちらの Materialize は昨年ご依頼いただいた案件でも実際に使用させていただきました。

そもそもマテリアルデザインってなんだっけ？

マテリアルデザインとは、Googleが提唱しているデザインのガイドラインです。 詳しくは私が以前に書かせていただいたこちらのブログ「近頃話題の「マテリアルデザイン」についてまとめてみました」をご覧ください。

Materialize とは？

さて、今回ご紹介させていただくMaterializeとは、前述のマテリアルデザインに則ったWebサイトが簡単に作成することができるCSSのフレームワークです。レスポンシブWebデザインにも対応しているので、スマートフォンやタブレットにも対応したい！という場合にももちろんおすすめです。下記サイトから無料でダウンロードすることができます。

Materialize-公式サイト

Materialize の使い方

Materializeの使い方は簡単です。 簡単なので使い方・・というほど説明することもないのですが一応書いておきます。

1.まずはダウンロード

まず下記ページから一式をダウンロードしましょう。

Materialize-ダウンロードページ

SASS対応版もありますのでお好みの方を選んでください。

テンプレートも用意されています

同ページの下の方をみていただくと分かりますが、上記の他に2種類のデザインテンプレートも用意されており、それらをダウンロードすることもできます。 一から作成するのが面倒、細部にはこだわらないのである程度形が作られている方が都合が良いという方はこちらをダウンロードされると早いかと思います。

デモサイトも用意されているので分かりやすいですね。

2.あとは好みのパーツを公式サイトで探しながら、htmlとCSSをカスタマイズ

Materializeではあらかじめ様々なパーツが用意されています。各パーツの設定方法についてはサイト上で解説されていますので、それらを参考にしながら自分の作成したhtmlファイル内の要素に指定されたクラス名をつけてあげるだけでマテリアルなデザインが実現できるというわけです。 オリジナルなデザインを必要としなければ、ほとんどCSSを記述しなくてもサイトを完成させることができます。

Materialize上に自分が必要とするスタイルが無い場合は通常のサイト制作時と同様にCSSにスタイルを追加してあげればOKです。ただしあまりにカスタマイズが多くなるようであれば逆にメンテナンス性が下がってしまう可能性がありますので、そういった場合はMaterializeを使わないほうが良いかもしれません。

Materialize で定義されているスタイルのご紹介

Materializeでは以下のスタイルがあらかじめ用意されています。デザインや開発を始める前にざっと目を通してから取り掛かることをおすすめします。ここでは簡単にリストだけご紹介させていただきますので、詳しくは本サイトにてご確認ください。

CSS

基本的なスタイルやレイアウトがはあらかじめ設定されており、それぞれのクラスを組み合わせることで様々な表現が可能です。

• 色 / Color
• グリッド / Grid
• ヘルパー / Helpers
• メディア / Media
• Sass
• 影 / Shadow
• 表 / Table
• 文字 / Typography

コンポーネント

基本的なパーツは一通り用意されています。うまく組み合わせて使用しましょう。

• バッジ / Badges
• ボタン / Buttons
• カード / Cards
• コレクション / Collections
• フッター / Footer
• フォーム / Forms
• アイコン / Icons
• ナビゲーションバー / Navbar
• ページャー / Pagination
• ローディングアニメーション / Preloader

JavaScript

JavaScriptを使ったパーツも豊富に用意されていて、手軽にサイトを華やかにすることができます。

• アコーディオンメニュー / Collapsible
• ダイアログ / Dialogs
• ドロップダウンメニュー / Dropdown
• メディア / Media
• モーダルウィンドウ / Modals
• パララックス(視差効果) / Parallax
• プッシュピン / Pushpin
• スクロールファイア（コンテンツをフェードインで読み込み） / ScrollFire

モバイル

スマートフォン対応のためのパーツも用意されています。

• ナビゲーションバー（ドラッグでメニューが出現） / Navbar
• トースト通知（スワイプで削除できる通知） / Toast

以上です。

今回取り上げた Materialize は非常にシンプルな分、これだけでWebサイトを完結しようとすると表現に制限が出てくるかもしれませんが、どなたでもわかりやすい作りになっているのではないかと思います。これらを引き出しとして覚えておくといざというとき即席でそれっぽいサイトを作ることもできるのではないかと思いますので、ぜひ押さえてみていただければと思います。マテリアルデザインにご興味がある方、簡単にモダンなサイトを作りたいという方のお役に立てば幸いです。