MaterialDesignGuideななめよみ

改めてMaterialDesignについて学びたいなーと思ったので雑に斜め読みしました。
https://material.io/design/
↑このサイトです
斜め読みで自分が大事にしたいなと思っている部分を中心にとりあげているので、完全に網羅しているわけではもちろんありません。
気になるところがあれば斜め読みすることをお勧めします。

MaterialDesignの歴史的経緯

Google I/O 2014&Android5.0から登場。主にAndroid、Webに関する提言だった。
また、Google I/O 2018でコンポーネントの追加/変更が行われた他、Flatter登場に合わせてiOSについての記載も追加された新MaterialDesignGuideが発表された。

そもそもMaterialDesignとは？

UIパーツ、表面の見た目(色も)、コンポーネント等がさだめられた、デザインの方針、基準となるもの。

https://material.io/design/environment/surfaces.html#
MaterialDesignとは、「Material」な環境をディスプレイ内に持ってこようという試みである。
「Material」は「Physical world」、「物質世界」の状態である。ものを重ねれば影が出るし、光を反射する、そういったことがベースの考え方になる。
また、Materialとはいっても液状、ガスといったものではなく、ベースとなっているものは「紙」であることはおさえておきたい。

[著者注]
MaterialDesign登場前はFlatDesignと呼ばれるものがAndroidアプリデザインの基本であり、こちらはFlatというだけあって

• ものの重なりがなく一画面におけるコンポーネントはすべて同じ高さに表現されていた。
• カード概念がなく、カードとカード等の隙間はなかった。結構みっちりとコンポーネントが配置されていたイメージ(個人の感想です)
• 光についても特に概念として存在しておらず、また影もなかった

MaterialDesignでの特筆すべき点

各View

• 深さ
  • それまでのフラットデザインとは異なりX,Y軸のみならずZ軸が存在する
  • 各Object自身の厚さは1pxで統一(AndroidだとObjectの厚みは基本的に設定できないので気にしないでもいい)
• 様々な解像度、画面サイズに耐えられるように、基本的にViewの見た目はベジェで作られるべき。

タップ時の反応

• タップで反応するのはタップ位置の一番表層のObjectのみ、下に透過したりしない。
• Objectが重なっていた場合に、下のObjectを上に移動するときに通過しない(重なっている下Objectを表示する場合は、上Objectを取り除くが正しそう)
• 見た目が変わるときにはどのObjectがどう変わったかわかるように適切にアニメーションする。カードが全画面なる

Grid

• 何事も8dp単位が基本。
  • 画面端からのMerginはモバイルなら16dp,タブなら24dpが基準。あんまりmarginも大きくなりすぎないように注意
  • コンテンツ間の隙間はすべて一定にする 間は開けすぎないように注意
  • 最大dp数によってmarignやカラム数とか決まってるから準拠すると綺麗！！！！
    • https://material.io/design/layout/responsive-layout-grid.html#breakpoints

タブとナビゲーション

• 上タブは動作として、並列のカテゴリーが表示されている(GooglePlayの音楽ライブラリのジャンル等)　 なのでスワイプで遷移可能&表示がアニメーションで切り替わる
• 下ナビゲーションは全く機能が変わるものを表示する(Youtubeなんかがそう。トレンド、急上昇、フォルダ等)　スワイプ不可だしアニメーションなしでパッと切り替わる

色

• カラーチャートが存在するのでこれを活用すると楽かも。完全に準拠する必要はなさそう。
  • https://material.io/tools/color/#!/?view.left=0&view.right=0
• 基本色はプライマリーカラーとセカンダリーカラーの2色。
• プライマリー、セカンダリーの色の濃淡で＋背景色で構成するように心がける
• その他、エラー、ON、OFF、文字色等も決めておく

フォント

• 見出し、サブタイトル、ボディ、ボタン等の組み合わせで、TypeSystem的に13種類用意してそこから適宜使うほうが良い。
  • https://material.io/design/typography/the-type-system.html#
• 大きめヘッドラインはデザイン強めのフォントだと目に入ってきやすいので良い。逆にh6ほど小さくなるとサンセリフ等デザイン性の薄いフォントの方が良い
• サブタイトル以下になると、シンプルで読みやすいフォントの方が良い
• ボタンはフォント自体はサンセリフ等シンプルフォントにする。英語だとすべて大文字のが良い。また、タップ不可テキストとの差異は明確になるようにする。

アイコン

• アプリアイコンもマテリアルを準拠する。光、影等。
• システムアイコンは基本的には抽象的な表現のベクターアイコンにする。細い線は使わない(2dp以上)。
• システムアイコンでアニメーションできるとおしゃれですね。(ON/OFFとかToggle的なもので使いやすいかも)　タッチ時に反応があるとちょっと楽しいかもしれない（詳しい作り方はちょっとわからない
  • https://qiita.com/takahirom/items/3deee8b73e0a2bc1a50b 公式じゃないけどanimated-vectorとして吐き出してくれるらしい

Viewやコンポーネントの形

• コンポーネントは見ただけでコンポーネントの用途がわかるようにする。別のコンポーネントっぽい見た目にしない。
• ブランディングとして全体のテイストをあわせる。
  • アイコンとかが丸っこい場合はアプリのボタンとかも丸っこいのにする、アイコンがとがってたりする場合はボタンとかにも曲線を使わないようにする、等

アニメーション

https://material.io/design/motion/understanding-motion.html#
実際に動いてるの見たほうがなんとなくつかめると思われる

• 以下のような効果を出すためにつかう
  • タップしたときに何が起こったのか、エレメント間の関係性を表示するために使う。
  • 注目させる。例えば電話のボタン等。
  • 表現として。アプリの特色の一つになる。
• スピードは一定じゃなくて傾斜をつけるといいかもしれない。
• 画面遷移やコンポーネントを開く/閉じる等の動作の場合は、開く/閉じるでスピードを変えるといい（閉じるときの方が早い

便利なTools

Google I/O 2018で発表された新MaterialDesignGuideで追加された。

• Sketchで使えるMaterialThemeEditor。Sketchのプラグイン的なもの？　例えばボタンテーマを変更したら作成されているすべてのObjectが変更できます
• ZeplinみたいなGalleryも追加された。

以下は前からあるもの。

• ColorTools。ベーシックなAndroidアプリの形があって、それを
• Iconも用意してあるよ VectorアイコンとWebアプリ用のWebFontがあります。AndroidだとVectorから追加ができる。

斜め読んだ感想

一番大事にしているのは「連続性」だなと感じた。
特に新マテリアルデザインコンポーネントなんかだと、旧版との大きな差異として、ThemeEditor等「全体的なデザインコンセプトについて」の項目が多く含まれているように思われた。
また、アニメーションで各コンポーネント間の連続性を表せると一気にマテリアルデザイン感が増すな、と思った。
Gridのところにあったガチガチにきまっているものもあって、すごくわかりやすいなと感じた。
ななめよみでも、結構イラストやアニメーションが多く「これはOK」「これはだめ」の表記がわかりやすいので、自分の現在携わっているプロダクトとの比較もしやすいのではないかと感じた。
（実際ここが課題だなーという部分もちょいちょい見受けられた）