新しくなったMaterial Designのココに注目!最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる

先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。
ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。

新しくなったMaterial Designのココに注目

Material Design

Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。

Google I/O 2018でアナウンスされた大きなポイントは、3点。

その他の新機能はロードマップにまとめられているので、新しく加わったガイドラインや注目しておきたいドキュメントを紹介します。

サイトのキャプチャ

Material Design

トップページでは、Material Designをダイジェスト的に知ることができます。

サイトのキャプチャ

Density principles

まずは新コンテンツ、効果的な密度を備えたUIを作成するためのテクニック。
コンテンツが適切な密度でレイアウトされていると、非常に読みやすく、コンテンツの優先順位が判断でき、より多くのコンテンツやアクションが利用できます。

サイトのキャプチャ

When to apply density

情報量が多いコンテンツ、リストや表やフォームなどでは密度をコントロールすることで、ユーザーは劇的に使いやすくなります。

サイトのキャプチャ

When not to apply density

逆に、アラートやダイアログなど、ユーザーに警告するコンポーネントに密度を適用してしまうと、注意を喚起する能力が低下してしまいます。

サイトのキャプチャ

Touch and click targets

密度はタッチ・クリックの操作に対しても慎重にデザインする必要があります。
タッチする要素は小さくても48x48dpのサイズが必要で、要素間は8dpのスペースが必要です。マウスでクリックする要素はそれより小さく、24x24dpのサイズがあればクリックが十分にできます。

サイトのキャプチャ

Typographic density

テキストの密度も非常に重要です。
行間のスペースであるline-heightを適切にすることで、テキストの可読性は劇的に向上します。line-heightを引き締めたい時は、ベースラインのグリッドに4dpを加えます。

Material Designには、他にもWebサイトやスマホアプリのUIをデザイン・実装する際に役立つノウハウやテクニックが満載です。

サイトのキャプチャ

Breakpoints

ブレイクポイントをどのように定義するか、悩む人も少なくないかもしれません。最近の主流はカラム数を3種類、4カラム・8カラム・12カラムを使用し、スマホの垂直・水平、タブレットの垂直・水平、デスクトップのスクリーンサイズを定義します。

サイトのキャプチャ

Responsive Patterns

コンポーネントもスクリーンサイズとデバイスタイプに基づいて、デザインのパターンを適合させることができます。単にサイズを変化させるだけでなく、要素の形状やレイアウトも最適化された例が豊富に掲載されています。

サイトのキャプチャ

Color usage and palettes

Material Designで特徴的なものの一つがカラーです。
Material Designではプライマリとセカンダリのカラーを選択し、それぞれの明度を変化させ、明るい色と暗い色を使用します。

サイトのキャプチャ

Applying color to UI

カラーは、UI要素・コンポーネントに一貫性のある意味のある方法で適用されます。

サイトのキャプチャ

Cards

Webサイトやスマホアプリで使用されるさまざまなUI要素・コンポーネントについての説明も充実しています。

サイトのキャプチャ

Specs -Cards

そのUI要素の定義をはじめ、適用されるアニメーション、アクション、デザイン、スペックなど、勉強になる情報が満載です。

サイトのキャプチャ

Divers

コンテンツを区切り、グルーピングする区切り線など、見落としがちな要素もしっかりした解説が掲載されています。

サイトのキャプチャ

Theming -Divers

区切り線にもさまざまなタイプがあり、適切に使用することで、効果的なUIをデザインできます。

サイトのキャプチャ

Develop -Material Design

実装では、Android, iOS, Webごとにその実装方法のドキュメントが掲載されています。

サイトのキャプチャ

Material Color Tool

ツールも充実しています。
「Color Tool」ではMaterial Designのカラーを簡単に作成して、利用できます。

サイトのキャプチャ

Material Color Tool

作成したカラーは、アクセシビリティの確認を忘れないようにしなとですね。

サイトのキャプチャ

Material Theme Editor

新しくリリースされた「Theme Editor」はSketchのプラグインとして利用でき、Material Designのテーマを作成し、カラー、形、タイポグラフィにスタイルを変更してシンボルライブラリを作成できます。

サイトのキャプチャ

Material Design Gallery

ギャラリーでは、Material Designの実際の使用例を見ることができるので、インスピレーションが沸いてくると思います。

sponsors

top of page

©2018 coliss