マテリアルデザインのフレームワーク「Materialize」を紹介。

2018年3月4日2022年6月4日

最近ちょこちょこWebサイトの作成の依頼があるですが、フロントエンドの技術はあまり知りませんでした。

WebサイトでデザインをするにはCSS（Cascading Style Sheets）を使用すれば、

デザインも管理も楽になるということが知っているぐらいでした。

いろいろ調べてみるとこれからの主流は「マテリアルデザイン」とのことのなので、

今回は「Materialize」を紹介したいと思います。

※超初心者向けの記事になります。

マテリアルデザインとは？

マテリアルデザインとは、

「2014年にGoogleが発表した”現実世界のルール(奥行きや、影など、質量)”を取り入れ、直感的な操作を実現するためのデザイン」になります。

スマートフォン、タブレット、パソコンなどのデバイスで統一されたデザインを取り入れることにより、デバイスが変わっても操作性もユーザーの操作は統一されます。

また、現実世界のルール（マテリアル）をデザインに取り入れることで、

ユーザーに馴染みのない新しいものを直観的に理解しやすくさせることができます。

マテリアルデザインの特徴には以下のようなものがあります。

「紙」と「インク」の要素が構成されている。
要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念（3次元）を持つ。また影を使用することで要素間の関係性を表している。
意味のあるアニメーション・インタラクション（inter：相互にとaction：作用する）

参考:マテリアルデザイン（日本語）

参考:マテリアルデザインガイドライン（英語）

ちなみにマテリアルデザインの前の流行のデザイナは「フラットデザイン」といい、

iphoneやWindows8以降で利用されているデザインになります。

フラットデザインには↓のような問題点があります。

立体的な表現（3D表現や、ライティング）を無くしたフラットデザインでは、どこを押すことができるのか、あるいはどこに文字を入力できるのかわからないづらい
無駄な装飾を無くした為、見出し、本文、ラベル、ボタン、テキストインプットなどの区別がつきづらい。

Materializeとは

Materializeとは「マテリアルデザインに特化したCSSのフレームワーク」です。

Materializeは「初心者にとっつきやすい」、「機能の多い」、「ドキュメントが豊富」の大変オススメです。

またGithubのスター数（お気に入り数）も大変多く、**活発に開発も行われています。**

初心者でJavaScript（JQuery）、CSSでサイトを作成したことがない人は「Materialize」は大変オススメです。

私は一度もJavaScript（JQuery）、CSSでサイトのデザイン・作成したことがありませんでしたが、お客様に満足してもらいました。

「○○ってすぐ追加できる？」という要望にも30分で答えることが出来、これからもよいお付き合いができそうです笑

そもそもデザインには最低限の労力でその他機能や性能を重視したいですもんね。

以下、その他オススメのマテリアルデザインのフレームワークです。

Materializeを使用してみよう

まずはMaterializeの資材をダウンロードします。 Materializeのダウンロード先

赤枠の「Materialize」からダウンロードできます。

「materialize-v0.1XX.X.zip」がダウンロードできるので展開します。

↓の構成で展開できますが、「index.html」は含まれていないので注意してください。

MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html

index.htmlのテンプレートは↓で使用することをオススメします。

※文字コードは「UTF-8」で改行コードは「LF」にすることをオススメします。

下のテンプレートを利用するとMaterialize内のCSSとJavaScriptをすべて読み込んでくれます。

<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>

<!--Import ここはオリジナル。init.jsはカスタマイズに使用する。-->
<script type="text/javascript" src="js/init.js"></script>

<!--Import ここはオリジナル。style.cssはカスタマイズに使用する。-->
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen,projection"/>

</head>

<body>

</body>
</html>

「js/init.js」と「css/style.css」はオリジナルのカスタマイズ用に使用するため、用意しておいてください。

今回は簡単な導入方法を紹介しました。次回は機能を実際に使ってみたいと思います。