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

      2021/06/22   3349文字

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

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

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

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

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

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

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

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

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

ライセンスはMIT(商用や改変・再配布自由)の緩いライセンスです。著作権表記やライセンスに関するリンクなどは

CSS内に書いてあるので、消さないようにしましょう(著作権やライセンス表記をするのが利用条件)。

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

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

公式サイト『CSSやcomponent』

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

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


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

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

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


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


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

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


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

透過・色の指定


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

中央3列アイコン部分

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


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

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


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

元の状態は

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

スマホで表示した場合


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


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

あとがき・まとめ

  • マテリアルガイドラインや、公式サイトのCSS・componentを読んでおくとスムーズ
  • 色指定がclassでというようなクセがある
  • レイアウトはbootcampっぽいので、慣れているとラク
  • 以前はwordpressでこういうのをやってたけど、軽い静的HTMLサイトにも導入しやすくなった

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


【カテゴリ】 - CSS
【タグ】 -

  関連記事

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS
WordPress CSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック
自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)
【WordPressテーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現
【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える