デザインに関わる方全てに是非見て欲しい!!Google の新しいデザインガイドライン「Material Design」

最近アイコンを探してたときに偶然辿り着いたサイトでしたが、無償で様々なものが公開しているのも驚きでした。紙やWEB、プロダクトデザイナーや、UI/VIデザイナーを目指してる方には是非見てもらいたい資料です。
世界のGoogleは無償公開しているものもやっぱり凄かった。それはGoogle の新しいデザインガイドライン「Material Design」をまとめたもの。内容が非常に充実しております。UIの勉強をするならここだけでもいいのではないのかと思うくらいしっかりとわかりやすくまとめられております。個人的な意見ですが、書籍で販売されているデザインの本を購入するよりも、こちらでいろいろと見て勉強したほうがよさそうな気がしました。

Material Design Introduction

まずはじめに Material Design の概要です。本文をそのまま引用させていただきます。
[fac_icon icon=”external-link” font_size=”15px”]Material Design – Introduction

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

私たちは、「技術と科学の可能性と技術革新」と「古典的な素晴らしいデザイン原則」を融合し、ユーザーのための視覚的言語(visual language)の作成に挑戦しました。世界中のユーザーの為に生きたドキュメントとして更新され続けていくことが書かれています。

Principles

Material Design は、以下の3つの原則に基づいて設計されています。

  • Material is the metaphor
  • Bold, graphic, intentional
  • Motion provides meaning

では実際にどういった内容が書かれているのか見ていきたいと思います。


What is material?

[fac_icon icon=”external-link” font_size=”15px”]Environment
マテリアルについての説明です。3D軸での捕らえ方や、光の当たり方と影のでき方についての説明です。
[fac_icon icon=”external-link” font_size=”15px”]Material properties
マテリアルの使い方(いい例・だめな例)見せ方についての説明が書かれてます。
[fac_icon icon=”external-link” font_size=”15px”]Elevation and shadows
階層での影の付き方の説明が書かれてます。これは非常に勉強になりました。
Google material design


Animation

モーション(動き)について、より具体的に書かれています。実際にどういった動き方をするのか、ムービー付きで分かりやすく解説されているので見ていて非常に分かり易いです。ただモーション(動き)を付ければ良いというわけではなく、ユーザーが気持ち良いモーションスピードの緩急やユーザーのアクションを起点にしている点も非常に素晴らしい。
[fac_icon icon=”external-link” font_size=”15px”]Authentic motion
[fac_icon icon=”external-link” font_size=”15px”]Responsive interaction
[fac_icon icon=”external-link” font_size=”15px”]Meaningful transitions
[fac_icon icon=”external-link” font_size=”15px”]Delightful details


Style

配色やタイポグラフィ、アイコンや画像の使い方について、適切なサイズや使い方について解説されています。基本はフラットデザインを踏襲しているように見えますが、Material Design では印刷ベースのデザインのエッセンスを取り入れているという点が異なるので、そういった観点で見ていくと良いと思います。
[fac_icon icon=”external-link” font_size=”15px”]Color
配色のいい例、悪い例を実例であげており、ここではillustratorとPhotoshop用のカラースウォッチが公開されております。全てのカラーを一瞬でillustratorやPhotoshopで使えるのが便利です。WEBデザイナー向けには非常にうれしい素材が提供されてます。
[fac_icon icon=”external-link” font_size=”15px”]Icons
システムアイコンの設計からプロダクトアイコンの設計について、非常にわかりやすく書かれております。UIデザイナーや、アプリのアイコンを作る方には非常に勉強になると思います。また、システムアイコンが全て無料でダウンロードして使えます。
02_153531
[fac_icon icon=”external-link” font_size=”15px”]Imagery
写真の取り扱い方についての書かれております。どんな写真の使い方や見せ方がいいのか、いい例、悪い例を用いて説明してます。
[fac_icon icon=”external-link” font_size=”15px”]Typography
Googleが開発したオリジナルのフォントRobotoやNotoフォントの使い方などを解説してます。そしてフォントは全て無料でダウンロードができるようになってます。
noto fonts
[fac_icon icon=”external-link” font_size=”15px”]Writing
UXの観点から、どういった文字表記・表現がいいのかわかりやすく解説してます。


Layout

Material Design におけるレイアウトの考え方と具体的な使い方について解説されています。紙の上に印刷されていたり、紙と紙が重なったり、紙の上にオブジェクトが転がっていたりといったような、現実世界の素材の振る舞いを表現しているようです。
[fac_icon icon=”external-link” font_size=”15px”]Principles
レイアウトの原則について。
[fac_icon icon=”external-link” font_size=”15px”]Units and measurements
デバイスに依存しないスケーラブルピクセルの概念についての解説。
[fac_icon icon=”external-link” font_size=”15px”]Metrics & keylines
余白スペース・比率について。美しく見せるための余白のとり方、キーラインについての解説。
[fac_icon icon=”external-link” font_size=”15px”]Structure
UIの構造についての解説。
[fac_icon icon=”external-link” font_size=”15px”]Responsive UI
レスポンシブ(可変)UIについての解説。


Components

さまざまなコンポーネント(UI パーツ)のガイドラインが解説されています。モーションや印刷ベースのデザインを適用したコンポーネントデザインが決められており、実際の利用方法や、いい例・悪い例をあげて解説してます。
[fac_icon icon=”external-link” font_size=”15px”]Bottom sheets
[fac_icon icon=”external-link” font_size=”15px”]Buttons
[fac_icon icon=”external-link” font_size=”15px”]Buttons: Floating Action Button
[fac_icon icon=”external-link” font_size=”15px”]Cards
[fac_icon icon=”external-link” font_size=”15px”]Data tables
[fac_icon icon=”external-link” font_size=”15px”]Dialogs
[fac_icon icon=”external-link” font_size=”15px”]Dividers
[fac_icon icon=”external-link” font_size=”15px”]Grid lists
[fac_icon icon=”external-link” font_size=”15px”]lists
[fac_icon icon=”external-link” font_size=”15px”]Lists: Controls
[fac_icon icon=”external-link” font_size=”15px”]Menus
[fac_icon icon=”external-link” font_size=”15px”]Pickers
[fac_icon icon=”external-link” font_size=”15px”]Progress & activity
[fac_icon icon=”external-link” font_size=”15px”]Selection controls
[fac_icon icon=”external-link” font_size=”15px”]Sliders
[fac_icon icon=”external-link” font_size=”15px”]Snackbars & toasts
[fac_icon icon=”external-link” font_size=”15px”]Subheaders
[fac_icon icon=”external-link” font_size=”15px”]Steppers
[fac_icon icon=”external-link” font_size=”15px”]Steppers
[fac_icon icon=”external-link” font_size=”15px”]Tabs
[fac_icon icon=”external-link” font_size=”15px”]Text fields
[fac_icon icon=”external-link” font_size=”15px”]Toolbars
[fac_icon icon=”external-link” font_size=”15px”]Tooltips


Patterns

特徴的なユーザーのアクションのパターンについて述べられています。テキスト選択の方法やジェスチャーの意味、アクションボタンのアプローチ、画像の取り扱い方、検索バーの使い方など今までのよくあるアクションについて、具体的に解説されています。
[fac_icon icon=”external-link” font_size=”15px”]Data formats
[fac_icon icon=”external-link” font_size=”15px”]Empty states
[fac_icon icon=”external-link” font_size=”15px”]Errors
[fac_icon icon=”external-link” font_size=”15px”]Gestures
[fac_icon icon=”external-link” font_size=”15px”]Fingerprint
[fac_icon icon=”external-link” font_size=”15px”]Launch screens
[fac_icon icon=”external-link” font_size=”15px”]Loading images
[fac_icon icon=”external-link” font_size=”15px”]Navigation
[fac_icon icon=”external-link” font_size=”15px”]Navigation drawer
[fac_icon icon=”external-link” font_size=”15px”]Navigational transitions
[fac_icon icon=”external-link” font_size=”15px”]Notifications
[fac_icon icon=”external-link” font_size=”15px”]Permissions
[fac_icon icon=”external-link” font_size=”15px”]Scrolling techniques
[fac_icon icon=”external-link” font_size=”15px”]Search
[fac_icon icon=”external-link” font_size=”15px”]Selection
[fac_icon icon=”external-link” font_size=”15px”]Settings
[fac_icon icon=”external-link” font_size=”15px”]Swipe to refresh


Usability

ユーザービリティを向上させるためのガイドラインについて述べられています。現在はアクセシビリティに関する内容だけのようです。すべての人に同様の使いやすさやユーザー体験をもたらすためには守っておくべきです。
[fac_icon icon=”external-link” font_size=”15px”]Accessibility
[fac_icon icon=”external-link” font_size=”15px”]Bidirectionality


Resources

無償で公開されているリソースです。カラーパレットから、各種デバイスのサイズ表、Roboto & Noto fontsやレイアウトテンプレート等がダウンロードして利用できます。WEBデザイナーやUI/UXデザイナーには非常にありがたいツールとなりそうです。
[fac_icon icon=”external-link” font_size=”15px”]Color palettes
Colorで公開されていたカラーパレットのスウォッチセットがillustrator用/Photoshop用でまとめてダウンロードできます。
color

[fac_icon icon=”external-link” font_size=”15px”]Devices
様々なデバイスのサイズが、プラットフォーム、スクリーンサイズ、アスペクト比、dpサイズ、pxサイズで整理されてます。
device

[fac_icon icon=”external-link” font_size=”15px”]Layout templates
Illustrator 用のテンプレートがが各プラットフォーム・デバイス向けに提供されています。またワイヤーフレーム用のテンプレートもillustrator用・sketch用で公開されてます。
▼Mobile Layout templates
Layout

▼Whiteframes
Whiteframes
[fac_button icon=”download” name=”Download” text=”Whiteframes (.ai)” link=”https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip” target=”_self” color=”#1fbba6″ color_hover=”#ffffff” background=”#ffffff” background_hover=”#1fbba6″ border_color=”#1fbba6″] 14.92MB
[fac_icon icon=”external-link” font_size=”15px”]Roboto & Noto fonts
Googleが開発したオリジナルのフォントRobotoやNotoフォント(全ての言語対応)がダウンロードできます。Notoフォントは各国のフォントが入っておりますが、日本語フォントが必要な場合には「Noto Sans CJK JP」のみをダウンロードするといいと思います。
roboto
Noto fontsの日本語フォントのみをダウンロードするには下のボタンをクリックでダウンロードができます。
[fac_button icon=”download” name=”Download” text=”Noto Sans CJK JP (.zip)” link=”https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip” target=”_self” color=”#1fbba6″ color_hover=”#ffffff” background=”#ffffff” background_hover=”#1fbba6″ border_color=”#1fbba6″] 115.5MB
[fac_icon icon=”external-link” font_size=”15px”]Sticker sheets & icons
各コンポーネントのデザインガイドラインのページが AI ファイルで提供されています。
Google material design

まとめ

イントロダクションでも書かれている通り、今後もどんどん更新されてさらに充実していくであろうと思われるGoogle Material design。いい例・悪い例を取り上げており、非常にわかりやすく解説しているので言葉(英語)が分からなくても、「これはいい、これは悪い」と視覚でもわかると思います。
ざっくりとまとめましたが、今後このページでもさらに詳細を追記していきたいと思います。

コメントを閉じる

コメントを残す