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

webhack / 猫とウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイドの技術やプロジェクトマネジメントとかウェブに関するマーケティングとかWEBを取り巻く全般を好きに書くブログ

マテリアルデザイン(Material Design)のcssやフレームワーク

CSS ウェブデザイン マテリアルデザイン

ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。

1.Materialize

f:id:tkosuga:20150628203340p:plain

materializecss.com

bootstrapを使わずにレスポンシブなマテリアルデザインに向いています。カラーパレットをcssで指定できるのは分かり易くていいかなと思います。

 

2. Polymer

f:id:tkosuga:20150628203304p:plain

https://www.polymer-project.org/1.0/

Web Componentsでサイトを作るのにマテリアルデザインを導入するならPolymerが向いています。更新頻度が速くて開発がどんどん進められている印象です。

 

3. Bootswatch Paper

https://bootswatch.com/paper/

bootstrap + マテリアルデザインならbootswatchを利用するのが簡単です。githubのURLも載せておきます。

f:id:tkosuga:20150628203519p:plain

http://fezvrasta.github.io/bootstrap-material-design/

github.com

 

マテリアルデザインの事例を探すなら「Materialup」です。使われているデザインを見ると作ろうとしているサイトでマテリアルデザインを導入するとどのようになるかイメージが付いてきますよね。

www.materialup.com

CSSフレームワークとそれを使ったテンプレートが充実してくるにつれて、ウェブデザインやコーディングといった作業のバランスが専業から兼業に変わってきているように感じます。

ワードプレスに関してはWordpress.orgを使えばサイト内でテンプレートを購入できますし、ThemeForestで$50も出せば1サイトで利用するWordPressのテンプレートを丸ごと導入できます。

themeforest.net

CSSフレームワークの充実に合わせてデザインテンプレートの導入が容易なったおかげで、カスタマイズに専念できるようになりました。