読者です 読者をやめる 読者になる 読者になる

WEBアザラシ

デジハリという海で泳ぐアザラシのブログ

【マテデザ初心者向け】Googleリリースのマテリアルデザインのフレームワークがやっぱりイケてる。

 

どーも、あざら氏です。

 

Googleが先日リリースした
マテリアルデザインをWEBに取り入れるためのフレームワーク
話題になっています。

blog.ku-suke.jp

 

気になったので、ちらっと見てみると確かに凄い。

フロントエンドのフレームワーク
簡単に言ってしまえば、
Bsの様にcssが勝手に決まっているので
あとはコンポーネントの通りにコピペして
ちょちょっといじってってタイプのやつです。

中身もこんな感じでBsに似ています。

f:id:zakitaku:20150805171804p:plain

 

何がBsと違うのかと言いますと
もちろんデザイン面が全然違うわけでして…

ベースデザインとして
MaterialDesignを採用しています。

f:id:zakitaku:20150805171531p:plain


上の画像からお分かりになるかと思いますが
若干の陰がついています。
マテリアルデザインとは、
実際にそのパーツが実在した場合を検証し
その通りにデザインするというのが簡単な説明でしょうか。
一応、他にもグラフィカルなフォントや大胆な余白、
そしてアニメーションなどが基本原則とされているそうです。
下のリンクが日本語訳されたデザインガイドライン
公式のガイドラインです。

dev.classmethod.jp


Introduction - Material design - Google design guidelines

 


今見つけましたが分かりやすいデモムービーです。


Material design - YouTube


個人的に好きなマテリアルデザインの作り方。
凄く興味深い製作過程です。


Making Material Design - YouTube



こういった動画は以下のGoogle公式ページにまとめられています。

www.google.com

ドキュメントは基本英語だったりしますが
日本でも大注目なので日本語の記事も多いですね。
特にGigazineさんがガンガン取り上げてくれています。
そういえば僕も初めてマテデザを知ったのはGigazineの記事だっけ…

前にディープシャドウについて書いていましたが
ディープシャドウもマテリアルデザインの表現方法なんですね。


そういえばずっとブログメディアを作りたいと考えていたのですが
Githubにブログ用のテンプレがあるらしいので使ってみようかな…

www.getmdl.io

↑公式のライブプレビューです。

 

でもこういった奴ってページの更新とかどうしたらいいんですかね?
なんかCMSとか入れる感じなんですかね?
そもそもペライチのページしか作ったことない
自分が自前でブログなど…
なんて言っているとコーポレートページも作れないし。
まだまだ勉強ですね…訳ワカメです…