Umi Blog
ウミブログ
あけましておめでとうございます。お正月に食べすぎたせいで胃が大きくなってしまったのか、仕事中にお腹がぐーぐーなって恥ずかしい思いをしている森山です。ウミブログをご覧いただいている皆様、本年もどうぞよろしくお願いいたします。
さて本日は、マテリアルデザインのWebサイトが簡単に作れてしまう「Materialize（マテリアライズ）」というCSSフレームワークについてご紹介したいと思います。ウミでは普段CSSフレームワークを使用することはあまり無いのですが、こちらの Materialize は昨年ご依頼いただいた案件でも実際に使用させていただきました。
マテリアルデザインとは、Googleが提唱しているデザインのガイドラインです。 詳しくは私が以前に書かせていただいたこちらのブログ「近頃話題の「マテリアルデザイン」についてまとめてみました」をご覧ください。
さて、今回ご紹介させていただくMaterializeとは、前述のマテリアルデザインに則ったWebサイトが簡単に作成することができるCSSのフレームワークです。レスポンシブWebデザインにも対応しているので、スマートフォンやタブレットにも対応したい！という場合にももちろんおすすめです。下記サイトから無料でダウンロードすることができます。
Materializeの使い方は簡単です。 簡単なので使い方・・というほど説明することもないのですが一応書いておきます。
まず下記ページから一式をダウンロードしましょう。
SASS対応版もありますのでお好みの方を選んでください。
同ページの下の方をみていただくと分かりますが、上記の他に2種類のデザインテンプレートも用意されており、それらをダウンロードすることもできます。 一から作成するのが面倒、細部にはこだわらないのである程度形が作られている方が都合が良いという方はこちらをダウンロードされると早いかと思います。
デモサイトも用意されているので分かりやすいですね。
Materializeではあらかじめ様々なパーツが用意されています。各パーツの設定方法についてはサイト上で解説されていますので、それらを参考にしながら自分の作成したhtmlファイル内の要素に指定されたクラス名をつけてあげるだけでマテリアルなデザインが実現できるというわけです。 オリジナルなデザインを必要としなければ、ほとんどCSSを記述しなくてもサイトを完成させることができます。
Materialize上に自分が必要とするスタイルが無い場合は通常のサイト制作時と同様にCSSにスタイルを追加してあげればOKです。ただしあまりにカスタマイズが多くなるようであれば逆にメンテナンス性が下がってしまう可能性がありますので、そういった場合はMaterializeを使わないほうが良いかもしれません。
Materializeでは以下のスタイルがあらかじめ用意されています。デザインや開発を始める前にざっと目を通してから取り掛かることをおすすめします。ここでは簡単にリストだけご紹介させていただきますので、詳しくは本サイトにてご確認ください。
基本的なスタイルやレイアウトがはあらかじめ設定されており、それぞれのクラスを組み合わせることで様々な表現が可能です。
基本的なパーツは一通り用意されています。うまく組み合わせて使用しましょう。
JavaScriptを使ったパーツも豊富に用意されていて、手軽にサイトを華やかにすることができます。
スマートフォン対応のためのパーツも用意されています。
以上です。
今回取り上げた Materialize は非常にシンプルな分、これだけでWebサイトを完結しようとすると表現に制限が出てくるかもしれませんが、どなたでもわかりやすい作りになっているのではないかと思います。これらを引き出しとして覚えておくといざというとき即席でそれっぽいサイトを作ることもできるのではないかと思いますので、ぜひ押さえてみていただければと思います。マテリアルデザインにご興味がある方、簡単にモダンなサイトを作りたいという方のお役に立てば幸いです。
森山 智華
スタジオ・ウミ取締役。デザイナーとして15年以上のキャリアを持ち、Drupal の特性を踏まえた、開発のしやすさと美しさを両立する設計に定評があります。現在はデザイン業務を後進に引き継ぎ、経理・人事・採用などの総務業務を一手に引き受けてチーム全体をデザイン中。糸を紡いだり庭いじりをしたり、手を動かすアナログな時間が好きです。
小さなご意見も、私たちにとっては大きなヒントです！
ぜひ率直なご感想をお寄せください
この
Masters of Drupal Engineering.
人に、
