配色のトレンドのパターンと便利なツールのまとめ | Swwwim
2015年のデザイントレンドとして「フラットデザイン」「マテリアルデザイン」が挙げられる。今までのデザインではあまり見られなかった特徴的な配色を用いられることが多くなってきました。幅広く大きな範囲を同色で塗られることが多い、上記のデザイントレンドでは、上にのってくるコンテンツ（文字情報など）の可読性なども考慮したものでなければなりません。 今回は、その「フラットデザイン」「マテリアルデザイン」らしい、配色のパターンと便利なツールを紹介します。 トレンドデザインらしい色の条件と選択 「フラットデザイン」「マテリアルデザイン」では、大きい面で色を塗られることが多い。そのため、広い面積で使った時に見ていて「目に優しい色」を選択する必要がある。また「白文字を載せた時に映える色」「複数色を合わせて使用した時に違和感がない色」を意識することが大切になってきます。 【左】loubsol - http:/
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Bootstrapのボタンを拡張 Material Designの色とボタンタイプを追加するCSSライブラリ「cb-materialbtn.css」 | mae's blog
Bootstrap Advent Calendar 2015 – Qiita7日目の記事です。Bootstrapは便利で、特にノンデザイナーなエンジニアでもそれなりにしっかりとしたデザインのサイトが作れるということで、利用している方も多いと思います。ただ使っていて思うのは、用意されている色のバリエーションが少ないということです。Bootstrapで作ったサイトはどれも似通っていると言われてしまうのもそこに原因があるのではないかと思っています。そこで、今回ボタンだけではありますが、使える色やスタイルを拡張するBootstrap用のCSSライブラリを作ったので、この機会に紹介させていただきます。 「cb-materialbtn.css」概要「cb-materialbtn.css」は、CSSフレームワーク「Bootstrap」の（主に）ボタンの色やスタイルを拡張するためのCSSライブラリとなりま
マテリアルデザイン向けに作成されたGoogleアイコンフォント「Material icons」の使い方
Material iconsのアイコンフォントの使い方 以下で、Material iconsのアイコンフォントの使い方を紹介します。 詳しい方法は、以下に記載してあります。 Material icons guide – Google design 主な手順 アイコンフォントを利用するには、主に以下の手順が必要です。 Material iconsフォントのCSSファイルを呼び出す CSSファイルに利用をするためのコードを書く（コピペ） アイコンフォントを表示したいところにHTMLを書く（コピペ） Material iconsのアイコンフォント用CSSファイルは、WEB上から手軽に呼び出すことができるので、かなり設定は簡単です。 Material iconsフォントのCSSファイルを呼び出す Material icons用のCSSファイルは、Google Web Fontsにあるものを呼び出す
Googleのマテリアルデザインを使ったウェブサイトが作れる公式CSS/JS/HTMLコンポーネント「Material Design Lite」
Googleがモバイル向けOSの「Android 5.0 Lollipop」で採用し、同社の他の製品やサービスでも導入されている「Material Design(マテリアルデザイン)」は、見た目だけではなく使い勝手までも意識してデザインされたUXです。そのマテリアルデザインを使ったウェブサイトを作れるCSS/Javascript/HTMLコンポーネント「Material Design Lite」を、Googleが公開しています。 Material Design Lite http://www.getmdl.io/ Introducing Material Design Lite — Google Developers — Medium https://medium.com/google-developers/introducing-material-design-lite-3ce67098
%25E3%2581%25AEcss%25E3%2582%2584%25E3%2583%2595%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%25A0%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF)
マテリアルデザイン(Material Design)のcssやフレームワーク - webhack / ウェブ技術が好き
2015-06-28 マテリアルデザイン(Material Design)のcssやフレームワーク ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向いています。カラーパレットをcssで指定できるのは分かり易くていいかなと思います。 2. Polymer https://www.polymer-project.org/1.0/ Web Componentsでサイトを作るのにマテリアルデザインを導入するならPolymerが向いています。更新頻度が速くて開発がどんどん進められている印象です。 3. Bootswatch
Material design buttons
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Google Material Design
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Googleのマテリアルデザインを実現する洗練されたBootstrapテーマ「Material Design for Bootstrap」 | ソフトアンテナ
Googleの提唱する新しいデザインガイドライン「マテリアルデザイン」はフラットデザインを一歩進めたデザインとして今注目されています。 「Material Design for Bootstrap」はこのマテリアルデザインをBootstrapのテーマとして実現するもの。まだ開発の初期段階ですが、完成すればBootstrap 3と組合せてWebサイトでも簡単にマテリアルデザインを再現することができそうです(GitHub)。 ナビゲーションバー ボタン テーブル フォーム ナビ インジケーター アイコン アイコンも独自！ まとめ 組み込み方も簡単でbootstrapのあとに該当cssを読み込むだけ。 <link href="bootstrap.min.css" rel="stylesheet"> <link href="material/ripples.css" rel="stylesheet
Material Icons Guide
This page has moved to developers.google.com/fonts/docs/material_icons.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP