ゴールド・シルバー・アルミ・チタンなど、金属の素材の違いによって質感を塗り分ける描き方 -Material Studies
「Material UI Colors」はマテリアルデザイン用のカラーチャートが手に入るサイトです。マテリアルデザインに合う色をすぐに探すことができるので便利ですよ。その場でカラーコードのコピーも行えます。 以下に使ってみた様子を載せておきます。まずMaterial UI Colorsへアクセスしましょう。 トップページには基本色となる色が一覧で表示されます。その中から好みの色を選ぶと類似色が一覧で表示されます。色をクリックするとカラーコードをコピーすることができますよ。RGBなど他のフォーマットも用意されています。ぜひマテリアルデザインの色選びに困ったら参考にしてみてください。 Material UI Colors （カメきち）
2023年12月 (1) 2023年11月 (116) 2023年10月 (79) 2023年9月 (28) 2023年8月 (7) 2023年7月 (6) 2023年6月 (101) 2023年5月 (229) 2023年4月 (201) 2023年3月 (206) 2023年2月 (147) 2023年1月 (193) 2022年12月 (146) 2022年11月 (54) 2022年10月 (1) 2022年9月 (1) 2022年8月 (1) 2022年7月 (3) 2022年6月 (1) 2021年9月 (1) 2021年8月 (8) 2021年6月 (3) 2021年4月 (4) 2021年3月 (6) 2021年2月 (1) 2021年1月 (3) 2020年12月 (2) 2020年11月 (2) 2020年10月 (5) 2020年9月 (12) 2020年8月 (40
16. Material Design on Android Checklist マテリアルデザインを理解する上でキーとなる4つのポイントの解説 Tangible Surfaces A Bold, Print-Like Aesthetic Authentic Motion Adaptive Design 手触りのある 表面の表現 印刷物デザインの 応用 修飾ではなく 意味を伝える動き 画面サイズの変化に 適応するデザイン http://android-developers.blogspot.jp/2014/10/material-design-on- android-checklist.html
![マテリアルデザインを用いたデザインリニューアル [フリル編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/76b9f2cd58f69ba8f3d551f88dcafb865fb05912/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fdroidkaigi-150425032816-conversion-gate02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
Googleが提供しているモバイルOS「Android」の最新バージョン「Android - 5.0 Lollipop」にも採用されている、新しいUX体系が「マテリアルデザイン」です。マテリアルデザインの発表後、Googleは自社サービスに続々とマテリアルデザインを採用しており、サードパーティ製のアプリなどでもこれを採用したものが次々と登場しています。そんなマテリアルデザインでは使用可能な色が指定されているのですが、これで使えるカラーを並べたカラーパレットを表示してくれ、使用したいカラーをクリックすればそのカラーコードが一発でコピーできてしまうというウェブサイトが「Material UI Colors」です。 Material UI | Material Design | Material UI Colors http://www.materialui.co/ 「Material UI C
「Material UI」はマテリアルデザインに使える配色をまとめたサイトです。アクセスすると様々な色が表示されます。どれもマテリアルデザインに合う色合いになっていますよ。クリックするとカラーコードをコピーできます。 以下に使ってみた様子を載せておきます。まずMaterial UIへアクセスしましょう。マテリアルデザインに合う色がずらっと一覧で表示されています。 このようにさまざまな色が表示され、クリックするとカラーコードをコピーすることができます。流行りのマテリアルデザインを採用する際、どの色を使おうか困ったときにぜひご活用ください。 Material UI | Material Design | Material UI Colors （カメきち）
こんにちは！てっちゃんです。 今日は12月24日クリスマスイブですね。皆さん今夜は予定があるんですかね？ 僕は安定の...(´・ω・｀) 年末になりボチボチ今年を振り返ろうかなって時期なので今年のまとめとして僕が個人的に気になった2014年のツールとかサービスを10選ほどご紹介しようと思います。 選定と感想は僕の独断と偏見なのであしからず。 HTML5勧告 http://www.w3.org/2014/10/html5-rec.html.ja 2014年10月28日、HTML5の仕様が勧告となりました。「勧告」とはすべての仕様が確定したときにするもので、これによりHTML5という仕様が「正式な規格」になったことをさします。とはいえ、制作側としてHTML5を使っていく以上安定した制作が出来るとは限りません。ブラウザの実装が完璧ではなく周辺技術の仕様には差がでているのが現状ですが、今後もバージ
Material Designを取り入れたBootstrapのテーマ、小さいGUIに魅力がたくさん詰まっているApple Watch、Appleのこれからの主力となるiOS 8のUI、進化して使いやすくなったフラットスタイルのコンポーネント、ユーザーに操作の楽しさと使いやすさを与えるさまざまなアニメーションなど、新しいUIを体験できる素材を紹介します。 新しいモノって見るだけでも、ワクワクしますよね。 Material Design for Bootstrap Material Design for Bootstrap -GitHub Googleが提唱する新しいUX「Material Design」をモチーフにしたBootstrap 3用のテーマ。 ナビゲーション、パネル、スライダー、ボタン、テーブル、フォーム、アイコン、タイポグラフィなど、さまざまなUIエレメントが揃っています。
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう 佐藤歩（株式会社サイバーエージェント） この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。 Material Designという視覚的言語 Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。 それを実現するため、伝統的なグラフィックデザインとテク
Googleが先日発表した新しいUX「Material Design」の中で特に注目されているのが、タップやクリックをするとインクを落としたように波紋が広がるエフェクト。 これを実装するテクニックを紹介します。 Material Designについては、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しています。 この波紋のエフェクトはあちこちのコミュニティで盛んで、その中でもここで紹介するエフェクトはかなり美しく仕上がっています。 デモではリストで配置したナビゲーションの各アイテムをクリックすると、そのクリックした地点を中心に波紋が広がり、フェードで消えていきます。 ※上記はエフェクトが分かりやすいよう、各アイテムの高さを広げています。 実際の動作は、下記ページでお楽しみください。 Ripple Click Effect from Google Material De
Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
