Material Theming 概要

YouTubeに挙がっている「B07【Design】Material Theming - Material Design の先へ」を見てのメモです。2018年当時の話なので、今はちょっと変わってるかもしれません。

Material Designとは

2014年のGoogle I/Oで、クロスプラットフォームに使えるUIのデザインガイドラインとして発表したもの。元々社内向けに作っていたものを一般に公開した。当時、Google以外でMaterial Designを使っているアプリは0だったが、今では150万ものアプリがMaterial Designを使用している。

Material Designを発表して各社から「どうしたらMaterial Designに従いつつ、自分たち独自のブランド性を見せることができるのか」などの質問をもらった。それに応える形で今回Material Themingをリリースした。

Material Themingとは

アプリのすべてのモジュールでカスタマイズ可能にしつつ、アプリ全体の世界観を損なわないようなもの。

例えば、今まではButtonの色を変えたり、丸みを変えたりしようと思っても、結構ガイドラインにガチガチに縛られていた。が、Material Themingに従うとブランドのイメージに沿った形でコンポーネントをカスタマイズすることができる。カスタマイズしたものは、すべてのページで統一できるようなシステムになっている。

今までと変わっていないところ

・自然の世界をメタファーとしてデジタルの世界に落とし込む
　・高い階層にいるものは、より大きな影がつく
　・タッチしたらフィードバックが返ってくる
・コンポーネントの組み合わせでアプリを作る
・インタラクションをアニメーションなどで表現する
・色がブランドを決める上で重要だという考え方
　・プライマリーカラー、アクセントカラーの存在も変わってない
・フォントサイズによって重要度を判別させる
　・2014年当時はNotoフォントを推奨してきたがそれだけだとブランドを
　　表現するのは難しいというフィードバックがあったので、様々な
　　タイプフェイスに対応できるようにデザインシステムを拡張している
・ユニバーサルに理解されるアイコンを使う
・白抜きバージョンのアイコンも公開

Material Designのケーススタディは記事として公開している
→Material Studies

Google Material

Material DesignをGoogle向けにカスタマイズしたもののこと。Gmailなどはこれに則って作られている。ユーザがGoogleのアプリを開いたときに「これはGoogleのアプリだ」とわかってもらえるよう、Googleの様々なアプリにGoogle Materialを適用していく予定。

どのように自社向けにカスタマイズすればいいのかは、Customizationのページを見ると良い。

Material.ioのリニューアル

従来は「MATERIAL DESIGN」にはガイドラインだけが存在しており、ツールがバラバラに存在していた。2018年からは、Material Designに関するポータルという位置付けでMaterial.ioをリニューアルした。

Material.ioの中にはDesign、Develop、Toolsというセクションがある。これ以外にもMaterial Tools Suiteというのを公開した。これは、エンジニアとデザイナーのワークフローを円滑にするためのツール。開発者向けにはMaterial Components（ライブラリ）を提供している。

Material Designの思想

Material Designはエンジニアとデザイナーの間を取り持つためのもの。エンジニアがMaterial Designに沿って作るとデフォルトっぽいアプリができてしまう。今回、デザイナーの方がよりカスタマイズしやすいように拡張した。

Material Design自体はクロスプラットフォームで動くべきものだと考えている。どのデバイスからアクセスしても同じユーザ体験ができることを目指している。

Material Designはエンジニアやデザイナーの車輪の再開発を防ぐために作っている。例えばクレジットカードの入力フォームはデザイナーがクリエイティブを発揮するところではなく、ナチュラルに作るべきところ。ここはMaterial Designにそのまま従い、他のブランド表現に時間を使ってもらえば良い。

Material Designのポータルはどのように整理されたか

Design、Develop、Toolsに分かれている（2020年5月現在は異なる）。

■Design

主にデザイナー向け。ガイドラインだけでなく、「どのような思想に基づいて作られているのか」などの抽象度の高い話も書いている。せっかくのオンラインコンテンツなので、インタラクティブ性、他のコンテンツとの連携を高めていく。Material Componentsに行くとSpecsという項目があり、それをクリックするとSpec Guidelineが出てくる。どれくらいの幅なのか、どのフォントを使っているかがわかるようになっている。「このフォント使いたい」と思ったらFのアイコンをクリックするとGoogle Fontsのページに飛んで、そこからフォントがダウンロードできるようになっている。カラーのセクションでは、パレットジェネレータをガイドラインの中に埋め込んでいる。

■Develop

主に開発者向け。Material ComponentsをAndroid、iOS、Web、Flutterの4つのプラットホーム向けに開発している。OSごとに細かい切り分けをしている。

切り分け例
・画面タイトル：Androidは左寄せ、iOSは中央寄せ
・メニューの「…」ボタン：Androidは縦向き、iOSは横向き

組み込み方を学べるCodelabも公開している。

■Tools

エンジニアとデザイナーの間をつなぐもので、GalleryやMaterial Theme Editorなどがある。Material Theme EditorはSketchのプラグインとして使われるもの。Material Componentsが外部ライブラリとして呼べるようになっている。Theme Editorで色を変えたらすべてが変わるようになっているし、コンポーネントに手を加えたら、「ライブラリをアップデートしたけどそれをすべてに反映させますか？」という表示が出てきて、これもすべてに反映させることができる。

デザインをエンジニアと共有したい（かつ、実機でも見てみたい）時は、SketchからGalleryというツールにアップロードをする。デザイナーがそのファイルを共有すると、エンジニアはコメントを残したり、マージンなどを確認したりすることができる。その他、様々なプラットホームでどう見えるかを確認したり、コンポーネントのレファレンスに飛んだりすることもできるようになっている。

Material Components

Android、iOS、Web、Flutterの4つのプラットホーム向けに作っている。今、React用も開発している。

Androidの場合はgradleのdependenciesに入れるだけで使える。Webの場合はモジュールごとに npm install を使ってコンポーネント単位でインストールする。FlutterはすでにMaterial Componentsが入っているので uses-material-design を true にするだけで使うことができる。iOSの場合はCocoaPodsを使ってインストールする。

■Material Componentsを使うべきか

「Material Designの考え方は使うけどComponentsは使わないようにしよう」というパターンもあると思う。とはいえGoogleもTextField一つとってもどれくらいの幅や文字数がクリックされるまでに早かったのかなどの検証をしてComponentsを作っているので、使用することをおすすめする。

■注意点

今Material Designにあるコンポーネントがすべて移植されているわけではない。例えばBottom SheetはMaterial Componentsとして提供しているが、Radiusをつける機能は提供していない。そういったカスタマイズ機能はOSによって開発の差がある状態。RoadmapはGitHub上で公開している（現在は削除されている）。今現在、一番開発が進んでいるのはFlutter。