CREARC

Designer's Blog

0

最近アイコンを探してたときに偶然辿り着いたサイトでしたが、無償で様々なものが公開しているのも驚きでした。紙やWEB、プロダクトデザイナーや、UI/VIデザイナーを目指してる方には是非見てもらいたい資料です。

世界のGoogleは無償公開しているものもやっぱり凄かった。それはGoogle の新しいデザインガイドライン「Material Design」をまとめたもの。内容が非常に充実しております。UIの勉強をするならここだけでもいいのではないのかと思うくらいしっかりとわかりやすくまとめられております。個人的な意見ですが、書籍で販売されているデザインの本を購入するよりも、こちらでいろいろと見て勉強したほうがよさそうな気がしました。

Material Design Introduction

まずはじめに Material Design の概要です。本文をそのまま引用させていただきます。
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?

Environment
マテリアルについての説明です。3D軸での捕らえ方や、光の当たり方と影のでき方についての説明です。

Material properties
マテリアルの使い方(いい例・だめな例)見せ方についての説明が書かれてます。

Elevation and shadows
階層での影の付き方の説明が書かれてます。これは非常に勉強になりました。

Google material design


Animation

モーション(動き)について、より具体的に書かれています。実際にどういった動き方をするのか、ムービー付きで分かりやすく解説されているので見ていて非常に分かり易いです。ただモーション(動き)を付ければ良いというわけではなく、ユーザーが気持ち良いモーションスピードの緩急やユーザーのアクションを起点にしている点も非常に素晴らしい。

Authentic motion
Responsive interaction
Meaningful transitions
Delightful details


Style

配色やタイポグラフィ、アイコンや画像の使い方について、適切なサイズや使い方について解説されています。基本はフラットデザインを踏襲しているように見えますが、Material Design では印刷ベースのデザインのエッセンスを取り入れているという点が異なるので、そういった観点で見ていくと良いと思います。

Color
配色のいい例、悪い例を実例であげており、ここではillustratorとPhotoshop用のカラースウォッチが公開されております。全てのカラーを一瞬でillustratorやPhotoshopで使えるのが便利です。WEBデザイナー向けには非常にうれしい素材が提供されてます。

Icons
システムアイコンの設計からプロダクトアイコンの設計について、非常にわかりやすく書かれております。UIデザイナーや、アプリのアイコンを作る方には非常に勉強になると思います。また、システムアイコンが全て無料でダウンロードして使えます。

02_153531

Imagery
写真の取り扱い方についての書かれております。どんな写真の使い方や見せ方がいいのか、いい例、悪い例を用いて説明してます。

Typography
Googleが開発したオリジナルのフォントRobotoやNotoフォントの使い方などを解説してます。そしてフォントは全て無料でダウンロードができるようになってます。
noto fonts

Writing
UXの観点から、どういった文字表記・表現がいいのかわかりやすく解説してます。


Layout

Material Design におけるレイアウトの考え方と具体的な使い方について解説されています。紙の上に印刷されていたり、紙と紙が重なったり、紙の上にオブジェクトが転がっていたりといったような、現実世界の素材の振る舞いを表現しているようです。

Principles
レイアウトの原則について。

Units and measurements
デバイスに依存しないスケーラブルピクセルの概念についての解説。

Metrics & keylines
余白スペース・比率について。美しく見せるための余白のとり方、キーラインについての解説。

Structure
UIの構造についての解説。

Responsive UI
レスポンシブ(可変)UIについての解説。


Components

さまざまなコンポーネント(UI パーツ)のガイドラインが解説されています。モーションや印刷ベースのデザインを適用したコンポーネントデザインが決められており、実際の利用方法や、いい例・悪い例をあげて解説してます。

Bottom sheets
Buttons
Buttons: Floating Action Button
Cards
Data tables
Dialogs
Dividers
Grid lists
lists
Lists: Controls
Menus
Pickers
Progress & activity
Selection controls
Sliders
Snackbars & toasts
Subheaders
Steppers
Steppers
Tabs
Text fields
Toolbars
Tooltips


Patterns

特徴的なユーザーのアクションのパターンについて述べられています。テキスト選択の方法やジェスチャーの意味、アクションボタンのアプローチ、画像の取り扱い方、検索バーの使い方など今までのよくあるアクションについて、具体的に解説されています。

Data formats
Empty states
Errors
Gestures
Fingerprint
Launch screens
Loading images
Navigation
Navigation drawer
Navigational transitions
Notifications
Permissions
Scrolling techniques
Search
Selection
Settings
Swipe to refresh


Usability

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

Accessibility
Bidirectionality


Resources

無償で公開されているリソースです。カラーパレットから、各種デバイスのサイズ表、Roboto & Noto fontsやレイアウトテンプレート等がダウンロードして利用できます。WEBデザイナーやUI/UXデザイナーには非常にありがたいツールとなりそうです。

Color palettes
Colorで公開されていたカラーパレットのスウォッチセットがillustrator用/Photoshop用でまとめてダウンロードできます。
color

Devices
様々なデバイスのサイズが、プラットフォーム、スクリーンサイズ、アスペクト比、dpサイズ、pxサイズで整理されてます。
device

Layout templates
Illustrator 用のテンプレートがが各プラットフォーム・デバイス向けに提供されています。またワイヤーフレーム用のテンプレートもillustrator用・sketch用で公開されてます。

▼Mobile Layout templates
Layout

▼Whiteframes
Whiteframes

14.92MB

Roboto & Noto fonts
Googleが開発したオリジナルのフォントRobotoやNotoフォント(全ての言語対応)がダウンロードできます。Notoフォントは各国のフォントが入っておりますが、日本語フォントが必要な場合には「Noto Sans CJK JP」のみをダウンロードするといいと思います。

roboto

Noto fontsの日本語フォントのみをダウンロードするには下のボタンをクリックでダウンロードができます。

115.5MB

Sticker sheets & icons
各コンポーネントのデザインガイドラインのページが AI ファイルで提供されています。
Google material design

まとめ

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

ざっくりとまとめましたが、今後このページでもさらに詳細を追記していきたいと思います。



コメントはこちら

TOPへ戻る