新しいマテリアルデザインとの向き合い方
先日アップデートされたMaterial Designですが、その背景や内容をご存知でしょうか？
I/O18の内容を踏まえたMaterial Design（マテリアル デザイン）のイベントがGoodpatchさんにて開催されました。
登壇者は以下の4名です。Googleの鈴木さん以外は登壇資料が公開されたので、記事後半にてまとめています。
本記事ではイベントで取り上げられたMaterial Designの成り立ちやアップデート内容、今後目指しているところなどを中心にまとめています。Material Designをあまり読んだことがない方でもわかるように一部図を加えています。
Material Designはデザイナーとディベロッパー間の新たな共通言語
Material Designが生まれた背景
Material DesignとはGoogleが2014年に発表したデザインのフレームワークです。Googleの鈴木さん曰く「同じ企業が提供するサービス間において、デバイス問わずUIや操作方法に一貫性がないとユーザーが混乱するよね」という考えがきっかけで社内用に作られたそう。
Material Designは大きく分けると「Design、Develop、Tools」の3つの構成になっています。( https://material.io/ )
まずは「1.Design」から。( https://material.io/design/ )
Designではさらに3つのカテゴリに分けられます。
「Material System」はMaterial Designって何なの？という根本的な考え方や大枠。「Material Foundation」はレイアウトや色などUI要素に関する基本的な情報。「Material Guidelines」は実際に私たちが使用するコンポーネントについてまとめられています。
今までのMaterial Designと比較すると、基本的な考えは変わっていません。物質的なものをメタファとして使う、必要な機能をヒエラルキーを作って表現する、層やコンポーネントの組み合わせでアプリを構築するということなどは同じです。ではなぜMaterial Designはアップデートしたのでしょうか？
Material Designが抱えていた課題
私たちがそのままフレームワークを踏襲すると「独自性に欠ける、ブランドイメージを反映しにくい」という課題がありました。そこで解決策として「Material Theming」が生まれました。簡単に言うとブランドイメージに沿ってデザインを体系的にカスタマイズできる機能です。
例えば今までMaterial Designの「ボタン」はどれも似たような形になっていたそうですが「Material Theming」を使用すると形など自由に変更することができます。
これは「ボタン」に限らず他のコンポーネントも拡張性が高い作りになっています。例えば「フォント」だと英文はRobotoフォント、和文はNoto Sansフォントを推奨していましたが、より多くのフォントに対応したそうです。ただフォントでもヒエラルキーをつけて使うことは今までと変わりません。
このようにコンポーネント自体をカスタマイズして、より自分たちのサービスに適したデザインを表現することができるようになりました。
Googleも 1 Material Themingのユーザーになる
今回アップデートするにあたりGoogleも1ユーザーとしてGoogle Material Themingを作ったそうです。実際に反映されているアプリは「Gmail・Google News・Google Pay・Googe Home」など。気になる方はチェックしてみてください。
実はGoogle以外にも新しいMaterial Themingを利用したアプリを市場に提供しているサービスがあります。例えばLyftさんやNPRさん。
Lyftさんは、Floating Action Buttonを大きく拡張しています。NPRさんは、Cardの淵を丸くしています。他にもカスタマイズされたサービスは出てきているので、詳細はこちらからご覧ください。
インタラクティブなガイドラインへ
今回のアップデートではガイドラインをただの読み物コンテンツとしてではなく、インタラクティブなガイドラインになるよう重視したそうです。例として「Components」の「Text fields」で確認していきます。
「Text fields」を選択するとその下に①「Spec」という項目が表示されます。その後コンテンツエリア内でhoverすると右下に②アイコンが出てくるので、クリックします。
すると「Spec Viewer」が立ち上がります。これはリアルタイムでpadding・marginがわかったり、黒吹き出しの部分では右上に表示されるアイコンをクリックするとフォントのダウンロード画面へ遷移するそう。情報の表示切り替えは右の赤枠線で囲っているナビゲーションで操作可能です。
次に「2.Develop」を見ていきます。( https://material.io/develop/ )
主にディベロッパーの方が使用するページ。大きく「Android、iOS、Web、Flutterの4つに分けられ、実装方法の資料が掲載されています。現在はReact版を開発中とのこと。チュートリアルなど学びたい方はこちらから確認できます。
また、AndroidとiOSでは細かい部分まで配慮して作っているそうです。
上の画像だと、右下のメニューボタンがあります。Androidは縦向き、iOSでは横向きになっています。これはユーザーが見慣れないUIだと操作時に戸惑う可能性があるので、Googleはコンポーネントを作る際に各OSのガイドラインに沿って作るよう意識しているそうです。
最後に「3.Tools」を見ていきます。( https://material.io/tools/ )
Toolsでは大きく「Material Theme Editor」と「Gallery」2つが取り上げられました。
「Material Theme Editor」はSketchのプラグインとして利用できます。テーマの設定をして、色や形などのコンポーネントを自由にカスタマイズすることができるそうです。
「Gallery」は Zeplinをイメージすると分かりやすいかもしれませんが、デザイナーと開発者を繋ぐコラボレーションツールです。Material Theme Editorとの親和性も高くデザインの数値など簡単に共有できるそうです。
Googleが目指すMaterial Designとは
Material Designはデザイナーやディベロッパーの両方に使われることを目指しています。更にAndroidだけではなく全てのプラットフォームで使えるように対応していきたいとのこと。このようなフレームワークを使用することでデザイナーは本来注力すべきことに時間を割き、車輪の再開発がなくなるそうです。また、Material Designによってデザイナーとディベロッパー間で共通言語が生まれるので、コミニケーションコストも下がりワークフローの短縮に貢献するかもしれないというお話がありました。
UIデザイナーのためのMaterial Designの理解と実践
蔡さんはMaterial Designを「デザインシステムを作るためのデザインシステム」という解釈をされていてその説明が印象的でした。当日は色・タイポグラフィ・コンポーネントの3つに対して、実務でどうやって使うのか？ということでSketchとMaterial Theme Editorを用いたデモがありました。
また蔡さんから見たMaterial Designのバリューは3つあるそうです。1つ目はToolsを使うことでUIデザインのワークフローの時間を短縮することができ、ユーザーの体験を考える時間が増えるということ。2つ目は、Material FoundationがUIデザインの教科書と言ってもいいくらいの内容で、UIの基礎を学びたい人にはおすすめとのこと。3つ目は、自分のデザインがどう実装されるかわかるようになり、よりデザイナーとエンジニアの距地が近くなるとおっしゃっていました。
Material Theming対応の前に知っておきたい、エンジニア側の対応コスト
瀬戸さんからはMaterial Themingにかかる対応コストについてお話がありました。コンポーネントによってはすぐに使えるものとそうではないものがあるそうで、全て揃うのは8月頃になる可能性もあるそうです。なので、最新の情報を常にアップデートする必要があります。もし社内でMaterial Themingを導入するのであれば、デザイナーとエンジニアで対応する環境はあるのか、コストはどのくらいかかるのかきちんと話すべきということです。
また瀬戸さんから見たMaterial Designのバリューとは、ガイドラインに従えばユーザーがひどい体験をする機会が減るのでいいのではということ。またエンジニア目線だと、デザイナーから実装が厳しいデザインが降ってくることが減るのはいいですよねとおっしゃっていました。
Material Design の設計思想を探る
丸さんからは、Material DesignとiOSのインターフェイスを比較しながら、Material Designの設計思考がどこにあるのか？というテーマで進められました。今回のアップデートで新しく加わったものでデザインの原則に「柔軟な基盤」と「クロスプラットフォーム」があり、コンセプトに「ビジュアルの柔軟性」があったそうです。
総じて「柔軟性」というキーワードが意識されているのでは？とのことで、Material Themingは構造やインターフェースの仕組みを維持したままビジュアルの表現の幅を広げることができるとおっしゃっていました。
また丸さんから見たMaterial Designのバリューとは、GUIのデザインガイドラインは体系的に整備されたので、デザイナーデベロッパーは本来の仕事ができるようになるのが大きいと考えていらっしゃるそうです。
また柔軟性が出てきたこともあり、今後はアンドロイドに限定せずスクリーンなど幅広く対応できるようになるのではともおっしゃっていました。
新しいMaterial Designとの向き合い方
新しいMaterial Designでは根本的な考え方は変わっていないものの「柔軟性」がキーワードとなっており、構造やインターフェースを維持したままビジュアルの表現の幅が広がるということは勉強になりました。
また従来かかっていた制作時間の一部を短縮して、本来デザイナーが向き合うべきところに時間を費やすことができるという議論や開発者との共通言語になり得るというお話は興味深かったです。
私は制作会社で働いておりアプリのデザインを直近でやることはないかもしれませんが、今後社内でデザインシステムを作る際に、鈴木さんのおっしゃっていた車輪の再発明にならないようMaterial Designをもう一歩深く理解して役立てていければと思います。貴重なお時間をありがとうございました。
＊＊＊
いけたむのTwitterアカウントはこちらです。
記事を読んでいただきありがとうございました。もし記事に関して質問やアドバイスなどございましたら、noteのコメントまたは上記からご連絡ください。今後とも宜しくお願いいたします。