Material Design Icons - Icon Library - PictogrammersOpen-source iconography for designers and developersWe're a collective of passionate individuals creating beautiful icon and font libraries for drop-in use in your designs and development. Made with from all over the world!
無料のマテリアルデザインフレームワーク10選
ライターであり、Sufism:A Brief Historyの著者。メインの分野はオープンソース、モバイル開発、WebCMS、ベクターアートなど。電子ジャーナルのBrave New Worldのチーフ＆エディター。 デザイン原則に科学と技術のイノベーションを組み合わせたら、なにが起こるでしょうか？ まさにGoogleが実践し作りあげた、マテリアルデザインのコンセプトが創られるのです。 マテリアルデザインとは、クラシックデザインの原理やルールと、サイエンスやテクノロジーの可能性やきまりを結びつけたビジュアルデザインコンセプトです。マテリアルデザインだけでなく、関連するツールやリソースも同様に人気があります。 この記事では、マテリアルデザインスタイルを採用するWebやモバイルプロジェクトに最適なフレームワークをまとめました。 マテリアルデザインUIキットとマテリアルデザイン活用の実例もまとめて
Goodbye `shape` - AndroidのMaterialButtonがすごい良かった話
概要 Material Design Theming対応を各アプリで進めるのは、AndroidX対応と依存して難しいところはありますが、そもそも対応するとどういいのかみたいな情報があまりなかったので、同じことをするにしても新しいのだとどうよくなるのか？みたいな話を書きたいと思ってます。 Material Deisgnのライブラリで、MaterialButtonとか他にもStyleが入ってきて、今まで作ってきていたオレオレのshape drawable（XMLで作っていたDrawable系のファイルを纏めて指している）を作らなくてもだいたいの事ができるようになったよねという話です。 Material Themingとは？ MaterialDesignを、実際のアプリに合わせてカスタマイズできるように少しやわらかくしたもの。 MaterialThemingを実装した各プラットフォームごとの実装
新しいマテリアルデザインとの向き合い方｜Ayaka Ikeda
先日アップデートされたMaterial Designですが、その背景や内容をご存知でしょうか？ I/O18の内容を踏まえたMaterial Design（マテリアル デザイン）のイベントがGoodpatchさんにて開催されました。 登壇者は以下の4名です。Googleの鈴木さん以外は登壇資料が公開されたので、記事後半にてまとめています。 本記事ではイベントで取り上げられたMaterial Designの成り立ちやアップデート内容、今後目指しているところなどを中心にまとめています。Material Designをあまり読んだことがない方でもわかるように一部図を加えています。 Material Designはデザイナーとディベロッパー間の新たな共通言語 Material Designが生まれた背景 Material DesignとはGoogleが2014年に発表したデザインのフレームワークです
Random Material Palette Generator - THREEBÙ
Random Material Palette Generator RMPG is a tool to create three color palettes just with a click! RMPG uses Material Design colors. See your palettes in different ways! Use the top right menu to display the palette with your favorite template. You can choose from: Text Material card Classic vertical palette Circular palette Threebù logo in svg format Do you fall in love with a palette? Use the to
Material Designを最速で使いこなす｜池内健一
Material Designを使いこなすための最速の手順を紹介します。最近UIデザインを始めた方、iOSアプリのデザインはしていたけどAndroidのデザインも行う必要になった方、WebサービスでMaterial Designを使ってみたい方、Androidエンジニアでデザイン方面ももっと知りたい方などは参考にしてみてください。 Material DesignとはMaterial DesignとはGoogleが構築したUIデザインフレームワークです。Androidだけでなく、WebやiOSのデザインにも活用できます。 ざっくりとした内容は「Material Designとは」でググってみてください。基本理念をわかりやすく解説している記事が並んでいます。この段階ではなんとなくMaterial Designってこんなんだなって理解したら十分です。 それではガイドラインを読み込む前に、まずは準
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
商用利用無料！Material Designが簡単に実装できる、Bootstrap 4をベースにした新作テンプレートのまとめ
Material Designを使用してみたいけど、時間がない、手間をかけたくない、という人にぴったりな、Material Designが採用された商用でも個人でも無料で利用できるBootstrap 4ベースの新作テンプレートを紹介します。 企業向けサイト、プロダクトのランディングページ、ポートフォリオやギャラリー、ブログ用のテンプレートが揃っています。 Material Design for Bootstrap 4 MDB- GitHub Bootstrapの特徴や基本的な使い方は、下記の記事を参考にどうぞ。 参考 Bootstrap 4の主な特徴、IE8のサポート終了、Sassに移行、CSSの単位はremとem採用 Bootstrapのグリッドシステムの基本な使い方 新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ ではMaterial De
Propeller - Front-end framework based on Material Design & Bootstrap
Google Material Design Material Design is a visual language created by Google that synthesises the classic principles of good design with the innovation and possibility of technology and science. Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web.
30 Examples of Material Design Palette Color Usage
Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents
デザイナーに届けたい…マテリアルデザイン事始め Part.1 - Qiita
2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。 Part.1 : マテリアルデザインの概観 次回 Part.2 : マテリアルデザインのコンポーネント（小） マテリアルデザインってなんなのさ？ 物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。 基本の考え方 マテリアルデザインとは紙とインクの要素で出来ている オブジェクトの重なりを物質的に捉える（３次元） 意味のあるアニメーションでより直感的に 紙とインク 紙？ UIパーツは紙でできていると考える。 紙は以下の特徴
はてなブックマークiOSアプリはマテリアルデザインの悪い見本 - UXエンジニアになりたい人のブログ
はてなブックマークのiOSアプリを真面目に使ってみたらひどい出来だったので書きます。 基本構造 まずはアプリの基本構造をおさらいします。このアプリは大きな画面構成として メイン（様々なエントリー一覧） フィード マイページ の3つからなっています。 それぞれの画面と親子関係、各画面を呼び出すための操作をまとめると以下のようになります。[ ]で囲まれた青文字がUI表現で、赤文字部分が最終操作画面とその説明です。★が初期画面です。 まとめたつもりなんですが読みにくいし主題とあまり関係がないので、面倒な人は下の画像まで読み飛ばしてください [フローティング操作ボタン] メイン（様々なエントリー一覧） [ツールバー横のナビゲーションドロワーボタンから左部ナビゲーション：タイトルは「話題を探す」] [仕切り線：カテゴリー] ホーム [タブ] 人気エントリー（いわゆるホッテントリ）★ 新着エントリー（
Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう(1) そもそもMaterial Designって?
Googleは2014年にMaterial Designというデザインシステムを公開しました。そして2017年1月時点で、このデザインを活用したアプリがGoogle Play上に100万以上も公開されています。 この連載では、「Material Designとは何か」「どのようにMaterial Designを利用してアプリを作るのか」を解説していきます。 なぜMaterial Designが生まれたのか かつては「パソコン」が唯一のインターネット環境を提供するデバイスとして存在していましたが、この10年で「スマートフォン」や「タブレット」「ウェラブル端末」「コネクテッドカー」「テレビ」など、さまざまなデバイスから利用できるようになりました。 しかし一方で、Googleの「検索」や「メール」といったさまざまなアプリ・サービスは、増え続けるデバイスごとに、異なるユーザーインタフェースで提供し
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に変更する話が出て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーのためのMaterial Designの理解と実践
Components – Material Design 3
マテリアルデザインでやってはいけない68のこと（間違いチェックリスト）
マテリアルカラー
マテリアル デザインのガイドライン（日本語版）
http://www.cosmicmind.io/material/color