79
84

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

スクリーンショット_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の"触感"を超えた

79
84
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
79
84

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?