こんにちは
Androidエンジニアの富田です。先日、I/O Extended 2018 ShibuyaにBlog枠として参加させていただきました。I/O Extended 2018 ShibuyaとはMaterial Designに特化したイベントで、IO2018で発表された新しいMaterial Designについてのお話が多く大変興味深かったので内容をレポートしたいと思います。間違いや認識の違いがありましたら、ご指摘いただけますと幸いです。
Material update
Google合同会社 鈴木拓生さんによる「リデザインされたMaterial Design」についてです。
そもそもMaterial Designって？
Material DesignとはGoogleが2014年に発表したデザインフレームワーク。元々は社内用のフレームワークだった。なんで社内用にフレームワークを作っていたかというと、サービス間のUIが異なっていて使いにくかったため。GmailとGoogle Calendarでは異なるUIだったので、慣れない人にとっては操作しづらかった。そこでタブレット、モバイル、デスクトップなどに最適化されたフレームワークを過去のデザインシンキング、デザイン資産を使って作り、きちんとOSSとして公開したものがMaterial Design。2014年はGoogle PlayでMaterial Designを利用したアプリが0個だったのに対して、今や150万ものアプリが存在する。一方問題もあり、フレームワークを利用しているためどうしてもアプリの独自のカスタマイズ性が難しい。これを解決するためにできたものがMaterial Theming。
Material Themingって？
E2Eの考え方でブランドに沿った形でデザインをシステマチックに作ることができる機能。ブランドにあったボタン、スライダーなど様々なコンポーネントを利用できる。
Material DesignとMaterial Themingの違いは？
- 変わっていないところ
- 物質的なものをメタファーとして使っている
- 必要な機能をレイヤーごとにヒエラルキーを作って表現する
- プライマリーカラー、セカンダリーカラー
- フォントをきちんとヒエラルキーを並べて使う
- 変わったところ
- ボタンの形などの表層的なところはカスタマイズしている
- コンポーネントの組み合わせによってアプリを構築する
- 英文はRobotoフォント、英文じゃないものはNoto Sansフォントを推奨していたが、より多くのフォントをサポートするようになった
- アイコンは1パターンから2パターンになった。自分たちのサービスにあったものを選べる
Material Designを使っているとGoogleアプリっぽくなっちゃう問題
元々Googleの社内向けデザインフレームワークなのでGoogleっぽいデザインになってしまうのは当然。今回はGoogleも一つのMaterial Themingユーザとなり、Material ThemingをカスタマイズしたGoogle Material Themingを開発した。その使用例としてGmail、Google News、Google Pay、Google Homeなどでは、Google Material Themingを使用している。今後、他のGoogleアプリについても同様にGoogle Material Themingに移行していく予定。
Google以外にMaterial Themingを使ったアプリは？
Pocket Casts、Lift、ZapposがすでにMaterial Themingを利用している。
Material Themingをカスタマイズする方法
material.ioのガイドラインを参照するとわかるように今回material.ioが大きくアップデートされ、Material Tools、Material Componentsなどが発表された。Material Designは、デザイナーだけではなく、デベロッパーも使うもので、プラットフォームについてはFlutter、Android、iOS、Webで動く。Material Designはあくまでもデザインフレームワークなのでデザイナーはクリエティブな部分に注力してもらいたい。
マルチプラットフォーム
マルチプラットフォームとしてReact版を開発中。Flutter、Android、iOS、Webと対応されているがAndroid、iOSとは微妙に違いがあり、細かいところでプラットフォームにあった設計をしている。チュートリアルが準備されており、学びたい人は各プラットフォームで触ることができる。デベロッパーの場合は全てOSSで見れるようになっているので、機能拡張やバグなどがあればレポートをお願いします。
Material Themingの使い方
- Android
com.google.android.material:material:バージョンをgradleファイルに追加- Jetpackの関係でサポートライブラリはandroidxに入りますが、materialのサポートライブラリは別途切り離されて開発され続ける
- iOS
- CocoaPodsを使ってインストール
- Web
- nodeモジュールとしてnpm installでインストール
- Flutter
- 最初から入っているので何もする必要がない
みんなでデザインシステムを構築
みなさんが使っているアプリケーションや導入した過程で使いづらいところに対してフィードバックを送ってほしい。Google Material ThemingのようにGoodpatch Material Themingがあってもよくて、自社で使うときにカスタマイズしたMaterial Themingを使うのもあり。さらにJapan Material Themingといったような、みんなでデザインシステムを作っていくようなやり方を一緒にできると良いです。
UIデザイナーのためのMaterial Designの理解と実践
株式会社グッドパッチ 蔡漢翔さんによる「UIデザインーのためのMaterial Desingの理解と実践」についてです。
Material Designのサイト
Material Designサイトには、ガイドライン、デザインツール、コンポーネントがある。Material Designとはデザインシステムで、デザインシステムとはスタイルガイド、コンポーネントライブラリ、デザインから実装までの一つのデカイシステム。サイト上ではデザイン、デベロッパー、ツールのカテゴリ分けされている。
メタファーを使ってわかりやすくMaterial Designについて考える
僕たちが毎日使っているアプリ、Webサイトを料理としてメタファーをつけると、デザイナーとデベロッパーはシェフで料理を作る人。デザインシステムは、料理を作るためのキッチン、調理器具、レシピ、食材などいろんなものを集めるデカイシステム。では、Material Designは料理教室。Foundation、Component、Toolは料理教室の中の料理の基礎知識を教えることで、調理済みの食材や便利なキッチン道具が準備されている。つまり、料理教室は料理の基礎が分かれば誰でも美味しい料理が作れる。Material DesignはUIの基礎が分かれば誰でも美しいアプリを作ることができるデザインシステム。Material Designは、デザインシステムを作るためのデザインシステム。
普段の業務にMaterial Designをどう導入する
Sketch、Material Theming Editorの2つツールを使って次の3つをやってみる。
- Color
- Typography
- Components
Color
Material Designはベースの色システムがある。メインはプライマリー、セカンダリーがあり、その他にバックグラウンド、サーフェース、エラーの色がある。色システムを作るには、自分のデザインスタイルに合わせてプライマリーカラー、セカンダリーカラーを選択すると、マテリアルシステムは2つの色によってカラーパレットを自動生成される。
Typography
文字について大事な内容として、文字を揃えるときはBaselineで揃えること。Line-heightを4の倍数にする。そうすることで全てのテキストオブジェクトを4の倍数に揃えることができる。英語じゃない言語を使うとき注意することがあり、Line-heightを多めに取る必要がある。Titleより小さい文字の時、日本語フォントは英語フォントよりも小さくする必要があるが、プラグインを使うことによって自動的に調整される。
Components
アトミックデザインとは物質を構成する原子、分子、有機体などのメタファーを使ってUIの構成要素を5段階に分解するデザイン方法論。どのオブジェクトを原子、分子に指定することが難しいが、自分の組織が素晴らしいUIシステムを構築するために効果的にコミュニケーションするのに役立つはずです。つまり、アトミックデザインを5段階に分解できなくても、チームが効率的にやりやすい形にする方がいいかもしれない。
Google IO2018からの学び
Google IO2018の会場Wifiパスワードは「Make good things together」でこの中で一番大切なことは「together」。UIデザイナー、デベロッパーなど実際にデザインから実装するまで関わる人間はたくさんいる。みんなのおかげでユーザに優しいプロダクトをリリースすることができる。
Material Theming対応の前に知っておきたい、エンジニア側の対応コスト
株式会社ノハナ 瀬戸優之さんによる「Material Theming対応の前に知っておきたい、エンジニア側の対応コスト」についてです。
Material Componentsとは
Material ComponentsとはMaterial Themingを簡単に実装するための専用ライブラリ。エンジニアはこれを使うと実装コストが下がり、Android、iOS、Web、Flutter向けに提供されている。iOSはそれほどコストが高くないが、アップデート回数が多いこととGithubのIssue数が1000ある点に不安がある。AndroidはAndroid Studio 3.2、compileSdkVersion AndroidP対応とコストが高くまだ対応できている会社は少ない印象。Flutterは一行importするだけで導入できるが、導入している会社は少ない。
Material Componentsはどれくらい実用的に使えるか
ボタンの角を完全に丸くしたり、真四角、切り落としなどができる。しかしまだAndroidでは一部Componentsは提供されていない。それらをカスタム実装する方法もあるがコストが高い。ロードマップが公開されているので、Material Componentsがどのように対応して行くのかわかるのでチェックしてみてください。
すぐに使えるComponents
Bottom App Bar、Buttons、Chipsは使える。ただAndroidだけ角を丸くできない。
ちょっと待ちなComponents
Backdropは7月対応予定。Extended FAB、Tooltipsもまだで、Color Themeは一部のコンポーネントが8月対応予定。だいたいのコンポーネントが8月対応であるが、Material Desing Componetnsに対応していなくても実装できる。しかしそれ相応にエンジニアの実装コストがかかるので本当に使いたいかどうかは、会社で色々考えてやりましょう。
gallery.io
galleryとZeplinを比較をすると、galleryには次の利点があります。
- 無料で使える
- Gmailアカウントと連携している
- Material Designのコンポーネントのガイドラインがワンクリックで見える
- スマートフォンアプリがあるのでデザインの確認がしやすい
- Material Theming Editorと親和性が高い
一方ダメなところは、リリースしたばかりなのでまだ機能が整っていない。画像やアイコンのダウンロードが全部の解像度向けにダウンロードできない。ただとにかくフィードバックを送ってほしいと書いてあるので、フィードバックを送っていくことで我々好みのgalleryになっていくかもしれない。
我々の対応
デザイナーの方はエンジニアの方と話し合って、対応できるタイミング、対応すべきタイミングを調べてもらう。Material Designのアップデートに注目して何がどこまでできるのかをエンジニアの方にチェックしてもらって会社のベストのタイミングでガッと対応するとバリューを出せそう。
Material Designの設計思想を探る
株式会社グッドパッチ 丸怜里さんによる「Material Designの設計思想を探る」についてです。
新しいMaterial Designについて考察
Material Designガイドラインの序章で語られるPrinciplesの章で新たに二つのデザイン原則が加わった。デザイン原則は大きく以下の5つに分かれている。
- メタファー表現
- 大胆、行き来、意図的
- モーションは意味を与える
- 柔軟な基盤
- クロスプラットフォーム
特に下の2つの「柔軟な基盤」、「クロスプラットフォーム」。iOSに提供されているMaterial Design Componentsの実装集が存在するが、これこそクロスプラットフォームを強く意識されているということがわかる。
Material Designのガイドラインで大きくプロジェクトが3つ掲げられている
体験の統一、視覚言語としてのデザイン、ビジュアルの柔軟性という3つが掲げられており、特にビジュアルの柔軟性が新しく追加された要素。今までのMaterial Designは厳格さがあったが、Material Themingでは柔軟性というキーワードが意識されている。Material Themingはコードレベルでデザインが体系化されており、構造やインターフェースを維持したままビジュアル部分のカスタマイズができる。
UXの5階層モデルに当てはめる
UXの5階層モデルには、表層、骨格、構造、要件、戦略がある。構造以下インターフェースとしては不変的であり、より表層に近いものはMaterial Themingを使って挿げ替えることができる。
FABについて
FABの振る舞いはコンテキストでもっとも主要なアクション。行動につながるアクションを提供するボタンであり、もっとも主要なアクションのため複数ではなく、特にモバイルのような画面が小さいではスクリーン内に一つを利用したほうが良い。またFABそのものが別のオブジェクトとして展開できる。
FABをiOSと比較
iOSは右上にその画面の主要なアクションが配置される。これがMaterial DesignのFABに当たるのかもしれない。見栄え的なところでiOSのバーボタンはFABと違って見え辛くその存在に気づきにくい課題がある。ユーザビリティーテスト段階で右上に主要ボタンを配置してもなかなか気づかれなかった。そのため、FABの一目見てわかる存在はiOSよりもMaterial Designの方が優れていると言えるかもしれない。
Bottom App Barについて
Bottom App BarをFABと一緒に使い合わせることによって、今まで上にあったものが下に降りて来て指に届きやすく使いやすくなった。
Elevationについて
Material Designは高さの概念が明確に定義されていて、影によって高さのサーフェースの高さを表現している。これはそもそもデバイスには奥行きがあって、紙のメタファーと言われるサーフェースが重なっている。
Backdropについて
手前にレイヤーがあって、奥にもうひとつレイヤーがある。これを分解してみると、背景レイヤーと前景レイヤーがあり主従関係になっている。主のレイヤーに対してメインコンテンツを配置して、従のレイヤーは前景レイヤーに対するオプションや検索だとフィルター設定などの使い方ができる。Backdropにおけるフォーカスの遷移過程は2ステップあって、前景レイヤーがデフォルトであって、次に背景レイヤーを操作する。これを踏まえてみると、BackdropとiOSのセミモーダルビューに似ているように見えるが、レイヤーを分解してみるとレイヤーの役割が逆転している。
モーションについて
Material Designに限らず、意味のあるモーションは体系化されていて、The 12 Principles of UX in Motionこれがモーション理論がよくまとまっている。モーションの価値は以下の通りで、Material Designもモーションについて体系化されて詳しく説明されているので先ほどの記事と併せて読むと理解が深まる。
- 非文字言語での対話
- 動きによって意味を与える
- 意味のない動きをなくす
- 時間軸に沿った状態を表現する
- 未来を示唆する
最後に
貴重なお話を聞くことができて楽しかったですし、特にFlutterはアリババが一番使い倒しているというのは非常に興味深かったです。僕はエンジニアなので、Material Themingを適切に導入できるように日々アップデート情報をキャッチアップしてさらにデザイナーさんに共有していこうと思いました。ありがとうございました！
