Google I/O 2018で発表されたMaterial Designのアップデート

今年も5月8-10日にかけて、米国で年次開発者会議『Google I/O 2018』を開催しました。

毎年、その年の新しい技術やサービスの発表を行っていますが、今年はMaterial Design関連のアップデートも発表しました。最終回となる今回は、そのMaterial Designに関しての発表をまとめてご紹介します。

[Google I/O 2018 で発表された Material Design に関する発表]

• Material Theming : よりカスタマイズしやすいデザインシステム
• Material Tools Suite : Material Theme Editor, Gallery 等のツール群
• Material Components : Material Design を実装する上で利用可能な、Android、iOS、Web、Flutterのライブラリ

それでは、順にそれぞれの詳細をご紹介します。

Material Theming とは

2014年にMaterial Designを発表してから4年、現在ではGoogle Playストア上には、Material Designを利用して開発されたアプリが150万を超えました。さまざまなアプリが Material Designを使ってデザインされる一方で、「Material Designをよりブランドに沿った形でカスタマイズしたい」といったニーズがありました。

そこで登場したのが、今回発表した Material Themingです。

Material Themingは、Material Designのデザインシステムを、プロダクトのブランドに合わせてカスタマイズするための仕組みです。Material Themeingを利用することで、よりブランドに沿った独自のデザインシステムを開発しアプリやサービスに適用することができます。

例えば、従来の Material Designでは、ボタンの形状や大きさをガイドラインで細かく定義していました。Material Themingでは、まずはアプリ全体のデザインテーマを決定し、それに沿ってボタンやカード等のコンポーネントの形状を変更できるようになります。

Material Themingでは、アプリケーション全体のテーマを指定し、例えばボタンのコーナーの処理をどうするのか? といったパーツや全体のデザイン設計を決めます。Themeを最初に決定することで、テーマに合わせて細部のボタンやカードの形状が決まるため、アプリケーション全体として統一感を持ったデザインが可能です。

Googleのプロダクトも、Google Material Themingと呼ばれる、独自のMaterial Themingを利用しています。例えば、Gmailや Google News等のGoogleのプロダクト向けのテーマを用意し、製品ごとにカスタマイズしています。

Googleの Material Themingについてはこちらの記事で詳しく読むことができます。

Material Themingは、アプリ単位で使うこともできますが、企業単位でアプリのブランディングを統一する際にも利用できます。

Material Themingを利用するとどのようなデザインが可能になるのか?

Googleでは、皆さんが Material Themingを簡単に検証できるようにすべく、用途別でアプリのモックデザインをご用意しています。

Basil

Basilは、料理レシピ用のアプリケーションです。

Crane

Craneは、旅行用のアプリケーションです。

Owl

Owlは、デザイン、ファッション、建築等を学ぶためのオンライン学習コースのアプリケーションです。

Shrine

Shrineは、ファッションや雑貨のオンラインストアのアプリケーションです。

上記の4つのアプリは、Material Themingをリリースする際に、実際にどれくらいブランドに沿ったカスタマイズができるかを検証する上で作ったサンプルアプリになります。

Material Theme Editorを使ったMaterial Theming作成

今年のGoogle I/Oでは、Material Themingの作成をサポートするツールを公開しました。

Material Theme Editorは Sketchのプラグインとして提供されており、Editor経由でSketch上のライブラリのテーマを一括で変更・管理することができます。

例えば、上記の例では、Material Theme Editorを使ってコンポーネントのコーナーの角度を設定しています。ここで設定した角度が、Sketchファイル内で使われる全てのコンポーネントに自動的に反映されます。

より詳しい内容を動画で見たい方は、「Build great Material Design products across platforms (Google I/O ‘18)」のセッション動画をご覧ください。Google I/OアプリをMaterial Theme Editorでカスタマイズするデモがご覧いただけます。

I/Oでは、今後、Material Theme Editorが Sketchに加え、InVision向けにも提供予定であることを発表しました。

Galleryを使ったMaterial Themingのデザインフィードバック

Sketchを普段利用しない、エンジニアにもデザインの修正を共有する必要があります。そこで、Webベースのデザイン共有ツールとして、Galleryを正式に公開しました。

Sketchで作成した、Material Themingは直接Gallary上に展開することが可能です。Galleryでは、各デザインの履歴管理やそれぞれのパーツに対してコメント等を記入することができ、ここでデザイナーとエンジニアで詳細を詰めて行くワークフローを作ることができます。

Galleryはデザイナー、エンジニア、プロダクトマネージャー向けのWeb上のコラボレーションツールですが、Android、iOSで提供している、Galleryアプリを利用すると、モバイル端末上で各画面がどのように見えるかを検証することもできます。

Material Componentsを使って開発する

今回、Android, iOS, Flutter, そしてWebの4つのプラットフォームでMaterial Themingに沿ったオープンソースライブラリMaterial Componentsの提供を開始しました。

全てのコンポーネントは、GitHub上で開発されており、どなたでもPull Requestを送ることができます。

また、コンポーネントの公開に合わせて、コンポーネントの使い方を学ぶことができるオンラインの学習教材(コードラボ)を公開しましたので、是非一度試してみてください。

Material Components のロードマップ

今後どのようなコンポーネントが、どのプラットフォーム向けに公開されるかについては、こちらのページのロードマップで確認することができます。

Material Guidelines をよりインタラクティブに

一新したMaterial.ioのサイトにMaterial Designに関する情報を集約しています。また、もっとも参照の多いガイドラインを、インタラクティブで分かりやすくしました。

例えば、各コンポーネントには、Specというボタンが付いており、そこからSpec Viewerに飛ぶことができます。

Spec Viewerでは、各コンポーネントでどの大きさのマージンやパディング、そしてフォントが使われているかを把握することができます。さらに、フォントの箇所からは、使われているフォントへのリンクが張られており、そこからフォントをダウンロードすることも可能です。

今後の展開について

Material Designは2014年の公開から、いただいたフィードバックを元に、常にガイドラインやコンポーネントをアップデートし続けています。今後も、デザイナー、開発者の皆さんからのフィードバックにもとづき、より良いデザインシステムにしていきたいと思っています。