wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/07/01

こんにちは、管理人@SS_mshpです。

今回は、フレームワークを使ったサイト制作を行ってみます。

利用するのは『Materialize』。マテリアルデザイン概念や重要ポイントを押さえ、実際の手順を確認していきましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

公式サイト『CSSやcomponent』

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

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

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


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

【参考リンク】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"(ブランドロゴと白文字)

中央3列アイコン部分

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


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

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


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

元の状態は

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

スマホで表示した場合


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


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

あとがき・まとめ

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

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

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

  関連記事

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、word ...