マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
BASEのアプリにMaterial Designを導入する際にやったこと考えたこと - NOTE - MIFURU
先日 BASEのアプリのリニューアルバージョンがリリースされた 。( Google Playはこちら ) 今までiOSとAndroidのデザインが全く同じでガイドラインに沿ったデザインを行えていなかったので今回のリニューアルを機にMaterial Design（マテリアルデザイン）を採用。そのとき流れやデザインまでのプロセスを簡単にをまとめてみる。 導入までの経緯 BASEではiOSのアプリが先にリリース。ver.3.0.0が出るタイミングでAndroidアプリもリリースしたがiOSと全く同じデザインで実装されていた。当時すでにMaterial Designは発表されはじめ、Google Playでも少しずつMateral Designを採用したアプリが特集されていて本格的に広まっていた。 BASEのアプリのデザインが内製になったタイミングでMaterial Designに変更する話が出て
Material Design on Android Checklist
By Roman Nurik, Design Advocate Android 5.0 brings in material design as the new design system for the platform and system apps. Consumers will soon start getting Android 5.0 and they’re already seeing glimpses of material design with apps like Google Play Newsstand, Inbox by Gmail and Tumblr. Meanwhile, developers now have the Android 5.0 SDK, along with AppCompat for backward compatibility. And
[UI Design] Material Palette - マテリアルデザインに対応したカラーパレットツール
[UI Design] Material Palette – マテリアルデザインに対応したカラーパレットツール Pocket Tweet Googleの新しいデザインルールであるマテリアルデザインに準拠した、カラーパレット生成ツール。表示される各色の中から2色を選ぶと画面右側にプレビュー画面が出るので、それを見ながら配色を選ぶという仕組み。チョイスした色は画面右下の「Your Palette」エリア内に残るので、そこをクリックするとHEX指定で色の値をクリップボードにコピーできます。Androidアプリ作る際の配色決めに使えそうです。GoogleアプリのiOS版にもこのデザインルールは部分的に導入されつつあるので、Android AppっぽいUIのiOS Appを作る際にも使えそう。個人的にはiOSの文化にAndroidのルールを持ち込むのってあんまし好きじゃないですが。ハンバーガーメニュ
Lollipop時代のナビゲーション
ActionBar.NAVIGATION_MODEがdeprecatedに Lollipop（API Level 21）で、ActionBar.NAVIGATION_MODEが deprecatedになりました。ActionBarのTabとSpinnerの利用が非推奨となります。 AppCompatのActionBar.NAVIGATION_MODEもdeprecateになったので、 実質的にはすべてのVersionにおいてdeprecatedと考えて良いかと思います。 ■ ActionBar上でのTabもSpinnerも非推奨に Tabの代替案はSlidingTabLayout Googleの方からTabの代替案として提示されているのが、SlidingTabLayoutです。 これは、APIに用意されているものではなく、HorizontalScrollViewの拡張実装として、Andro
Material Design on Android Checklist (Japanese version) マテリアルデザイン対応のためのチェックリスト - 安藤日記
■マテリアルデザイン対応のためのチェックリスト 原文 (Material Design on Android Checklist) By Roman Nurik, Design Advocate ( http://android-developers.blogspot.jp/2014/10/material-design-on-android-checklist.html ) Android 5.0 は、プラットフォームやシステムアプリ用の新しいデザイン・システムであるマテリアルデザインを導入しています。ユーザーの皆様はもうすぐ Android 5.0 の入手が可能になりますが、もう既に彼らは Google Play Newsstand や Inbox by Gmail、Tumblr などのアプリでマテリアルデザインを垣間見ています。開発者の方々は下位互換性を保つための AppCompat
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
でも、それでも、Web Components with Polymerに全力で投資する - nekovaの日記
エモくない話はQiitaに書きました http://qiita.com/nekova/items/30f1e11d6adfa1ff1ba9 WebComponentsって何なの agektmrさんがWeb Componentsについて詳しくは知らない人に向けて、素晴らしい記事 を書いてくれているので読まない手はありません。 agektmrさんの記事読んだ後はWeb Componentsを使ってみよう！を読むのが良いと思います。 Polymerって何なの Polymerとは、一部のモダンブラウザが対応しているWeb Componentsの機能を、未対応ブラウザに提供するためのPolyfillライブラリです。 一部のモダンブラウザとはChromeとOperaを指します。つまり、それら以外のブラウザのためにはPolymerが必要です。 先日のGoogle I/Oで発表されたMaterial De
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Material Design Animation Code
マテリアルデザインを用いたデザインリニューアル [フリル編]![マテリアルデザインを用いたデザインリニューアル [フリル編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/76b9f2cd58f69ba8f3d551f88dcafb865fb05912/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fdroidkaigi-150425032816-conversion-gate02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
Material Palette - Material Design Color Palette Generator
GitHub - yanzm/MaterialTabHost: TabHost along with the specifications of the Material design
What You Can Learn From Google’s Material Design | Envato Tuts+