【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。利用するのは『Materialize』。マテリアルデザイン概念や重要ポイントを押さえ、実際の手順を確認していきましょう。

Materialize(マテリアルデザインフレームワーク)について

使う前に押さえておきたいポイント(マテリアルデザイン)

マテリアルデザインは、2014年にGoogleが提唱したデザインのガイドラインです。

• 現実にある物質的な要素
• 紙とインクのメタファー
• 高さ、厚さの概念がある(重なり・影など)
• スライダーなど直感的に操作方法がわかる

ガイドラインはもっと長くて厳密ですが、マテリアルっぽくしたい場合は、以下のガイドラインを読んでから行うと良いでしょう(管理人は70%読みました、残りは空き時間に読みます)。

【参考リンク】マテリアル デザインのガイドライン（日本語版）
https://material.io/jp/guidelines/

Materializeについて(メリットやライセンス)

サイトによると『マテリアルデザインをベースにした、モダンなレスポンシブ』とのことです。 メリットは、レスポンシブ＆最近のwebによくある、モダンなマテリアルデザインを、静的HTMLで導入しやすくなる点です(１からCSSを組もうとすると、膨大な手間がかかります)。

【参考リンク】Materialize公式サイト
https://materializecss.com

ライセンスはMIT(商用や改変・再配布自由)の緩いライセンスです。著作権表記やライセンスに関するリンクなどは CSS内に書いてあるので、消さないようにしましょう(著作権やライセンス表記をするのが利用条件)。

Materializeで組む前に、押さえておきたいポイント

上に書いた『マテリアルデザインのガイドライン』の他に、事前に押さえておきたいポイントがあります(まだあんのか笑)。

公式サイト『CSSやcomponent』

CSSのクラス指定(色・グリッド・テーブルetc.)とか、サイトのパーツ(ボタン・ナビ・ぱんくず・アイコン・フッター・スライダーetc.)をどうするかという部分です。というのも、クラス指定などが

>【参考リンク】Materialize公式・CSSカラー
https://materializecss.com/color.html

パララックステンプレートを確認する

手っ取り早い方法はこちら。Materialize公式サイトにある、パララックステンプレートを確認します。ナビやヘッダー・３列アイコン・フッターなどがどのように配置・クラスわけされているかをチェックします。

【参考リンク】Materialize公式・パララックステンプレート
https://materializecss.com/templates/parallax-template/preview.html

Materializeで、マテリアルデザインっぽいレスポンシブサイトを組む手順

CSSやスクリプトをサーバーにアップし、ヘッダーから読み込む

公式サイトで配布しているCSSやjavascriptをサーバーに上げる形で行いました(バックグラウンドというのは画像です)。サイトで配布されているファイルはもっとあるんだけど、最低限レイアウト組める分だけ入れました。 cdnjs.cloudflare.comから読み込む形でもできます(お好きな方で)。

jqueryとかも使うみたいなのをどこかで読んだので、一応入れておきます。なお、短いスクリプトを直接ヘッダーに書いていますが、これがないと、モバイルアクセス時にメニューが開きませんでした。アイコンやフォントは、マテリアルっぽくする重要なポイントなので、使えるように読み込んでおきます。

CSS・ヒーローヘッダーみたいな背景

bodyに対して大きめの画像を入れて背景にしました。『coverでディスプレイ全体に広がる・スクロールしないで固定』などです。これはmaterializeの他に追加で足しました。アイコンの部分が見にくくなりそうな部分・文章が入る部分は背景白で(class whiteって書いても良かったかも)。

【コード】
body{background-size: cover; background-image: url(“/背景画像ur/.jpg”); background-repeat: no-repeat; background-attachment: fixed;}

透過・色の指定

materializeのサイトで色一覧(マテリアルガイドラインにあるような色)があり、これはCSSのclassに書くことができます。画像の例だと、白文字が『white-text』メニューの背景色透過が『transparent』となっています。

【コード】
nav class=”transparent”（透過） class=”brand-logo white-text”（ブランドロゴと白文字）

中央３列アイコン部分

アイコンについては、マテリアルのアイコン紹介サイトで使いたいアイコンを選んで、以下のように指定しました。 【参考リンク】アイコン一覧 https://material.io/tools/icons/?style=baseline

『material-icon』というクラスの部分にアイコン名（ここではpagesのアイコン）をこのような形で入れると表示してくれます。ここらへんのレイアウトは『col s12 m4』みたいな感じなので、bootstrapを使ったことがあると、取っつきやすいと言えます。

materializeでサイトをリニューアルした結果

管理人が使っているドメインのトップに入れて、総合トップページにしました。コーポレートサイト風ですね。『大きめヘッダー画像』は、入れる写真によっては、『見ている人にとって、何屋かわかりやすい』ので、非常にメリットがあります。

元の状態は スマホ対応しているとは言え、少しごちゃごちゃして古かったので、落ち着いた上品なデザインになったと思います。

スマホで表示した場合

３列のレイアウトが変動して一列になります。ここら辺は『col s12 m4』みたいなのを見ていると、イメージしやすいかと思います。アイコンを大きめにしてやると、ユーザーがタップしやすくなります（もちろん、行き先のイメージしやすいアイコンの選択も重要です。）。

メニューはハンバーガーみたいなアイコンをタップすると、横からこのように出てきます。

あとがき・まとめ

という感じでした(実は初めて使った)。完璧なマテリアルにするには、より使い込みが必要ですが、静的HTMLサイトでこういうデザインにしたい場合は、ぜひ導入を検討してみてください。 (大変そうだな～と思った場合は、当サイト管理人に相談いただければ幸いです。)