マテリアルデザイン

マテリアルデザイン
Material Design
Akio Yonekura
http://neuegrafik.jp

1. マテリアルデザインとは
2. アニメーション
3. スタイル
4. レイアウト
5. ユーザーインターフェイス

マテリアルデザインとは

© Copyright Akio Yonekura
Google I/O 2014で発表されたGoogleのデザインガイドライン。
Androidアプリをはじめ、WebサイトやiOS用アプリも移行を進めている。
フラットデザインに近いが、影やレイヤーなど3Dを表現
現実世界の物理的なアニメーション

「紙」と「インク」
マテリアルデザインは「紙（ペーパー）」と「インク」をメタファーとしている。
UIはバーチャル空間に「紙」の特徴を持つ。
「紙」は長方形か円形（正円）
三角形などの複雑なシェイプは使わない
複雑なシェイプは「インク」（コンテンツ）として
紙の上に描く

3D（XYZ軸）空間でのUI設計
マテリアルデザインのUIは、紙を用途に合わせて重ねていく3次元で設計する。
UIはXYZ軸を持つ
紙のUIを重ねて情報設計や遷移を行う

紙の変形
紙のUIはコンテンツの遷移やピックアップなどの目的にあわせて変形する。
紙のUIはX軸とY軸で変形する
円型は等倍で変形する
Transforming material
http://www.google.com/design/spec/what-is-material/material-properties.html

標高Z軸と影（シャドウ）
XY軸が変形するのに対して、Z軸は標高の移動に絞られる。紙のUIには厚みがあり、UIの役割によって標高が異なる。
紙のUIは厚みを持つ(1dp)
紙の厚みやZ軸の標高・アニメーションによって
シャドウが異なる
Material casts shadows
http://www.google.com/design/spec/what-is-material/material-properties.html
Resting elevation
http://www.google.com/design/spec/what-is-material/elevation-shadows.html

アニメーション
リップル（波紋）
タップするとフィードバックとして波紋のアニメーションが始まる
Responsive interaction : User Input
http://www.google.com/design/spec/animation/responsive-interaction.html
タップした位置から
波紋が広がる

リベール
コンテンツの遷移に使う。円形で覆うアニメーション。
Use the Reveal Effect
http://developer.android.com/training/material/animations.html#Reveal

コンテンツの継続
コンテンツの遷移は、タップした場所が広がり詳細が現れる。カード、リスト、グリッドで共通して使われている。
Meaningful transitions
http://www.google.com/design/spec/animation/meaningful-transitions.html

隆起アニメーション
カードやレイズボタン、フローティングアクションボタンは、押している間浮き上がる
Lift on touch
http://www.google.com/design/spec/animation/responsive-interaction.html
タップした後に
隆起する
隆起した後に
元の位置に沈む

Delightfulアニメーション
細部に何度も押したくなるような楽しい表現が含まれている
Delightful details
http://www.google.com/design/spec/animation/delightful-details.html
時計回りで回転する

スタイル / レイアウト

カラー
1つの主要色（プライマリー）と1つの強調色（アクセント）によって成り立つ
アップバーのプライマリーのシェード500
ステイタスバーはシェード700を使用する
Color palette
http://www.google.com/design/spec/style/color.html

アクセントカラー
アクセントカラーは重要な要素に注目を集めるために使う。
鮮やかな強調色は小さめに使う
フローティングアクションボタンなどの
目立つ場所にはアクセントカラーを使用する

タイポグラフィ
マテリアルデザインではRoboto（欧文）とNoto（和文）を使用する。
Android 5 Lollipop日本語版では基本フォントは丸ゴシックが使われている。
Roboto & Noto fonts
http://www.google.com/design/spec/resources/roboto-noto-fonts.html
ABCDEFGHIJKLMN
abcdefghijklmnopq
あいうえおかきくけこ
さしすせそたちつてと
Noto Sans JapaneseRoboto
Roboto 美しい日本語

文字サイズと行送り
アプリ内で使用する文字サイズと行送り
NotoRoboto

文字色
背景が白の場合、文字色は黒(#000000)を基準として
透明度を下げていく
背景に色がある場合、文字色は白(#FFFFFF)を基準として
透明度を下げていく

dp (密度非依存ピクセル単位)
dp（別名dip）はAndoroid端末で使われる密度非依存ピクセル単位 density-independent pixels
dpは端末の解像度に関わらず
統一的に大きさを扱うための単位
UIのサイズや影にも適応する
文字サイズは同じ規格で
sp（scale-independent pixel）と呼ぶ
100px
mdpi / 160dpi xxhdpi / 480dpi
300px100dp 100dp

Seem（繋ぎ目）とStep(段差)
レイアウトの境界は、紙が並ぶ Seem（継ぎ目）と、紙が重なる Step（段差）がある
Seem（繋ぎ目）では
隣接する紙が同時に動く。
Step(段差)は
それぞれの紙が個別に動く

アイコン
マテリアルデザイン用のシステムアイコンを提供している
System icons in Github
https://github.com/google/material-design-icons

カスタムアイコン
カスタムでアイコンを制作する際には24dpのグリッドシステムを使用する。
24dpのグリッドを使い
アイコンを描く
24dpの領域に対して、
実際の描画は20dpに収める

ユーザーインターフェイス

UI（ユーザーインターフェイス）
App bar
アップバー
Card / Dialog
カード / ダイアログ
Status bar
ステータスバー
Background
バックグラウンド

App bar
App barは、ブランディングと機能（ナビゲーション、検索、アクション）を持つ。
Navアイコンからドロワーナビゲーションを開く
階層を戻る際にはNavアイコンを使用する
Nav icon Menu icon
Title
Menuアイコンから
重なる項目が出る
App bar drop down
http://www.google.com/design/spec/components/menus.html
Action icon

ボタン
マテリアルUIで使用するボタンは3種類。優先度で決定する。
Floating action button
フローティング・アクション
ボタン
Raised button
レイズドボタン
Flat button
フラットボタン

フローティング・アクション・ボタン
FAB（フローティング・アクション・ボタン）は紙の上ならどこにでも配置できる。
Seem、Stepともに両方の紙に
関連がある場合は跨いで上に
表示できる
Floating action button
http://www.google.com/design/spec/components/buttons-
floating-action-button.html

レイズドボタン
レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。
「紙」でつくられた汎用的なボタン
押すと隆起する
Raised button
http://www.google.com/design/spec/components/buttons.html

フラットボタン
レイズドボタンとフラットボタンが汎用的に使用できる。優先度で使い分ける。
「インク」で作られた汎用的なボタン
影が無いボタン
Flat button
http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-
buttons

タブ
タブはグループ分けされたコンテンツの切り替えに使う
タブは文字のタップとコンテンツのスワイプ
で切り替えられる
タブをナビゲーションとして使わない
Animation of sibling-to-sibling transition
https://www.google.com/design/spec/patterns/navigational-transitions.
html#navigational-transitions-parent-to-child

ナビゲーション・ドロワー
Googleアプリ共通のナビゲーション
左から右へスライドして、右56dpで
停止する。
戻りは左側へアニメーションする
項目が多い場合は上下にスライドする

コンテンツ
コンテンツの表現方法は主に3種類
List
リスト
Grid
グリッド
Card
カード
単一のリンクにはリストやグリッドを使う。複数の機能やリンク先を持つ場合にはグリッドを使う

リスト
項目を縦に数多く並べることができる
詳細への遷移は、タップしたリスト項目
が広がり次へ繋がる
Parent-to-child transition animation
https://www.google.com/design/spec/patterns/navigational-transitions.
html#navigational-transitions-parent-to-child

グリッド
コンテンツをグリッド上に並べて視覚的に選択する
四隅の角が直角
シャドウがついていない

カード
紙の上に写真やテキストを載せることができる
四隅の角が丸い（2dp）
シャドウがついている

参考文献
- Material design Guideline
https://www.google.com/design/spec/
- I/O 2014 アプリに学ぶマテリアルデザイン
http://googledevjp.blogspot.jp/2014/08/io-2014.html
-【マテリアルデザイン採用】リニューアルで気をつけた4つの大事なポイント -feedly編-
http://photoshopvip.net/archives/73204
- マテリアルデザインに対応した Evernote for Android
https://blog.evernote.com/jp/2015/03/12/47325

マテリアルデザイン

More Related Content

What's hot

Viewers also liked

Similar to マテリアルデザイン

More from Akio Yonekura

マテリアルデザイン