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

   

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

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

   

こんにちは、管理人@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サイトでこういうデザインにしたい場合は、ぜひ導入を検討してみてください
(大変そうだな~と思った場合は、当サイト管理人に相談いただければ幸いです。)

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

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

  関連記事

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

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

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

ワードプレス・手動インストールってどうやるの?(自動インストールがない、あるいはエラーの場合)

今回は、サーバーの簡単インストールなどで、エラーになって入らない場合の対 …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

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

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

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …