wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/06/24

こんにちは、管理人@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化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分 …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

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

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

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事 …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …