UI
デザイン

[Material Design] UI設計をおさらいしたい人のためのリンク集

More than 3 years have passed since last update.

スクリーンショット_2015-12-02_23_09_08.png

Googleのマテリアルデザインを主眼にしたリンク集です。


Google公式

Material Design


入門+コンセプト復習編

よくわかるマテリアルデザインの設計コンセプト

今さら聞けない?! 5分でわかる!マテリアルデザイン入門

まずはこの2つでイメージを把握。図解が丁寧で素晴らしいです。

はじめてのマテリアルデザイン入門

上から順に見ていくとマテリアルデザインの概要がつかめるという素晴らしい記事。

Google の新しいデザインガイドライン「Material Design」(Developers.io)

公式ドキュメントの翻訳と、

マテリアルデザインのゴール、基本原則等を丁寧に書いてくれています。

マテリアルデザインをどうやって始めればいいのか?までの解説付き


具体的な基準数値を把握しよう編

アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点(スライド付)

iOSヒューマンインターフェイスガイドラインと、マテリアルデザインガイドを比較してのまとめです。

これに全て書いてあった・・!!

最小フォントサイズ、行長、字間等の具体的数値をまとめてくれています。

テキスト情報も素敵ですが、スライドが素晴らしいです。熟読しましょう。


事例集編

materialUp

言わずもがなの事例集。ハイクオリティ

これから始める人のための、マテリアルデザイン参考サイトまとめ

独自にサービスをまとめてくれています。

iOSUp

マテリアルデザインではないですが、最近iOS&Macアプリ集も出たようなのでついでに


便利ツール編

Material icons guide

公式アイコン集 & ガイド

Material Design Community Icons

コミュニティが提供しているアイコン集

material palette

★便利!2色選ぶとサンプルとカラーパレットを生成してくれるという優れもの


テンプレ / フレームワーク

Google公式

・テンプレート: Layout templates

・フォント: Roboto & Noto fonts

すべてダウンロード可能です

公式:Material Design Lite

解説:マテリアルデザインを手軽に!CSS/HTML/JSコンポーネント「Material Design Lite」の使い方まとめ

Material Design Lite はテンプレートのように手軽に使えます。

Material Design for Bootstrap

Bootstrapテーマも存在するようです

公式:Polymer With Material Design

解説:Polymerとは、初めてのPolymerを使ってみる

PolymerはGoogle提唱のJavaScriptのUIフレームワークです。

material ui

CSSフレームワーク。話題のReact対応だそうです

Material Design対応の使えるCSS・JSフレームワーク集より


Androidコンポーネント

MaterialDesignLibrary

MaterialEditText


おまけ

Material Designの採用で「Domain」アプリのダウンロード数が44%も増加した例

レビュー:Android史上最高の" L"、初めてiOSの"触感"を超えた