マテリアルデザインを取り入れたWebサイトづくりのポイント

2016/05/29

7_1
マテリアルデザインを取り入れたWebサイトをつくる機会があり、マテリアルデザインの存在は知っていたものの詳しく理解していたわけではなかったので一から調べました。その時に参考にしたサイトやポイントをまとめてみました!

マテリアルデザインとは

マテリアルデザインはGoogleが推奨しているデザインの概念でフラットデザインとは違い「物質的」で影や奥行きなど「3次元要素」のあるデザインとなっています。
 
詳しい内容はGoogle公式のガイドラインで説明されています。
サイトはこちら

カラー

サイト全体で使用するカラーを大きく4つに分けて選びましょう。

・メインカラー

・セカンドカラー

・アクセントカラー

・フォントカラー

 

カラーコードの説明などは公式ガイドラインのこちらで説明されていてカラースウォッチの提供もされています。
 

便利サイト

Material Design Colors
7_2
HEX・rgb・rgbaから選んでカラーをクリックするとカラーコードをコピーできます。他にもメニューからフラットデザインやソーシャルメディアで使われているカラーコードをコピーすることもできるので重宝します!
 

Material Design Color Palette Generator
7_3
2つのカラーを選ぶと自動で合う他のカラーを選んでくれるサイトです。さらに選ばれたカラーコードをクラス名つきでcssやsassでダウンロードできたり、png画像でダウンロードできます!

シャドウ

マテリアルデザインでは一つ一つの要素が紙のカードでできていると考えられています。
そして、それぞれの要素には厚みがあり重なりで生まれるシャドウの違いで高さ関係を表現しています。
厚みの単位としてdpを用いて公式ガイドラインでは説明されています。
公式ガイドラインのシャドウについてはこちらからどうぞ。
 
実際にサイトでマテリアルデザインを表現するときに便利な公式フレームワークMaterialDesignLiteがあるのでご紹介します!
 
まずファイルを一式ダウンロードして必要のあるものを読み込みます。

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 
ダウンロードしなくてもCDNで読み込むこともできます。
使用するカラーを変更してCDNでcssの読み込みをする場合はこちらでカスタムできます。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

 
 

シャドウの使い方は、mdl-shadow–●dpというクラス名をhtml要素に付与して利用します。●の部分を変更してシャドウの濃さを調整してください。
実際のコードはMaterialDesignLiteで公開されているコンポーネントがあるのでご覧ください。
 

See the Pen Material Design Lite components demo by madka (@madka) on CodePen.0

ボタン

マテリアルデザインにはFloating・Raised・Flatの3つ種類があります。それぞれのボタンには適切な重ね順や使い方があるので公式ガイドラインのこちらをご覧ください。
 

また、ボタンをクリックしたアクションはユーザーに分かりやすいものというのもマテリアルデザインの特徴です。公式フレームワークMaterialDesignLiteでボタンのコンポーネントも公開されています。

Raised Button

See the Pen Material Design Lite components demo by madka (@madka) on CodePen.0

 

Flat Button

See the Pen Material Design Lite components demo by madka (@madka) on CodePen.0

アイコン

マテリアルデザインに対応したアイコンをGoogleが提供しています。
公式ガイドラインではアイコンパックのダウンロードができて、MaterialIconsではSVG・PNG・アイコンフォントの利用ができます。

公式ガイドラインのアイコンに関するページ

こちらからどうぞ。

MaterialIcons

こちらからどうぞ。

 
どちらもCC BY 4.0のライセンスで利用することができます。

ざっくりとではありますがマテリアルデザインを取り入れるときのポイントまとめでした。
マテリアルデザインに関連する便利なサイトやアイテムは多くあるので利用してサイトづくりに活用してみてはいかがでしょうか。

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend