マテリアルデザイン、フラットデザインガイドラインを読む

by kkeeth

Slide 1

Slide 1 text

マテリアルデザインフラットデザインガイドラインを読む Japan Xamarin Users Group 福田　拳士朗 Ionic Japan User Group 桑原　聖仁

Slide 2

Slide 2 text

マテリアルデザインガイドラインを読む

Slide 3

Slide 3 text

登壇者自己紹介福田　拳士朗（フクダ　ケンシロウ）＠Kenshiro_fukuda/Kenshiro.fukuda.9 http://bit.ly/Jre657hp 2019新卒の人間。茨城県石岡市　出身・在住。品川までは普通列車で約 1.5H 好きなもの：Windows 10・Xamarin・クラウド・モバイル・鉄道・Web 最近楽しかったこと：DT線で写真撮ったこと

Slide 4

Slide 4 text

マテリアルデザインとは「A unified system that combines theory, resources, and tools for crafting digital experiences.」 Googleによって提唱したユーザーエクスペリエンスデザインの体系、およびそれを実現する開発技術や手法、デザイン、試みなどの包括的呼称　とされている。 2014年6月のGoogle I/Oにて発表され、主にAndroidネイティブアプリで持ち入れられている。原本元ソース：https://material.io/

Slide 5

Slide 5 text

マテリアルデザインガイドラインを読む原本の最終更新：2017年9月　ソース：https://material.io/guidelines/ 技術と科学の革新性と可能性を備えた優れたデザインを合成するユーザーのためのビジュアル言語を作成することに挑戦してきた。この仕様は、マテリアルデザイン設計の教義と仕様を引き続き発展させながら更新される文書である。そして、目標は？ 1.技術と科学の革新性と可能性を備えた優れたデザインの古典的原則を合成するビジュアル言語を作成すること 2.プラットフォームやデバイスの規模にかかわらず統合されたエクスペリエンスを実現する単一の基盤システムを開発すること

Slide 6

Slide 6 text

マテリアルデザインの大原則主に3つの原則に基づく。１．比喩であること２．意図的なものであること３．モーション＝意味

Slide 7

Slide 7 text

マテリアルデザインの環境についてすべてのマテリアルオブジェクトは、x、y、z次元を持つすべてのマテリアルオブジェクトは、単一のz軸位置を持つキーライトは方向性シャドウを作成し、アンビエントライトはソフトシャドウを作る。

Slide 8

Slide 8 text

マテリアルデザインの最新情報 2017年9月オフライン上でのアクセス機能の拡張系をAndroid 8.0向けに行った Updated guidance on categorizing notifications into channels and a new messaging template Android 8向けのアイコン作成方法についても解説。 Simplified guidance on how settings are grouped, titled, and styled

Slide 9

Slide 9 text

マテリアルデザインーAndorid Notifications Snackbars and toasts Fingerprint Split screen Launcher icons Androidにおけるメインとして利用されつつある。このガイドラインで通知の作り方などもサポートしている。

Slide 10

Slide 10 text

マテリアルデザインが使われているアプリ Google+ Airbnb Evernote ※　原則的にGoogleアプリはマテリアルデザインが採用されている。参考：https://sugar.amebaownd.com/posts/357364

Slide 11

Slide 11 text

類似のものとして・・・ Microsoftでは、Googleのマテリアルデザインを追いかけるかのように、「Fluent Design System」を採用している。デザイン特設サイト：https://fluent.microsoft.com/ 実装方法や、解説についてはこちらをご覧ください。 https://blogs.msdn.microsoft.com/shintak/2017/05/26/fluent-design-1/ （１と２あります）

Slide 12

Slide 12 text

フラットデザイン

Slide 13

Slide 13 text

登壇者自己紹介 const my_info = { 　 Name: ‘桑原聖仁’, 　 Twitter: ‘@kuwahara_ngv5’, 　 GitHub: ‘k-kuwahara’, 　 Qiita: ‘clown0082’, 　 Workplace: ‘Yumemi, Inc.’ }

Slide 14

Slide 14 text

登壇者自己紹介 github.com/riot

Slide 15

Slide 15 text

登壇者自己紹介

Slide 16

Slide 16 text

当方「サーバーサイドエンジニア」です。

Slide 17

Slide 17 text

フラットデザインとは

Slide 18

Slide 18 text

フラットデザイン（Flat Design）とは対象物を抽象化して　「シンプル」「ダイナミックなレイアウトや色使い」で勝負するデザイン手法　

Slide 19

Slide 19 text

フラットデザイン（Flat Design）とは対象物を抽象化して　「シンプル」「ダイナミックなレイアウトや色使い」で勝負するデザイン手法　

Slide 20

Slide 20 text

フラットデザインの起源厳格な定義はなく、AppleもMicrosoftも「フラットデザイン」とは提唱していない。 ※もちろんガイドラインもない。（Microsoft社が提唱した「モダンUI」が後に大きな影響を及ぼす）

Slide 21

Slide 21 text

なんでこんなに流行ったの？

Slide 22

Slide 22 text

フラットデザインへの変遷当時は「スキュアモーフィックデザイン」「リッチデザイン」が主流しかし、以下のような問題が発生　　 PCとスマホで表示した時に見え方が変わってしまう　　マルチデバイスな時代変化とともに需要が減少

Slide 23

Slide 23 text

Modern UI （旧: Metro UI） 2011年に発表された Windows 8にも採用。 Microsoft社がWindows8のUIをフラット化

Slide 24

Slide 24 text

Apple社がiOSのデザインに採用

Slide 25

Slide 25 text

スキュアモーフィックデザイン（立体感、奥行き、質感、光沢感の演出）　　⬇ 　⬇ 　⬇ フラットデザイン（抽象化、シンプルで平面的） Apple社がiOSのデザインに採用

Slide 26

Slide 26 text

＞ we understood that people had already become comfortable with touching glass, they didn’t neet physical buttons, they understood the benefits （人々がタッチスクリーンに既に慣れて、十分使いこなしているため、　物理的なボタンを模倣するようなことはもう必要ないと考えた。）参考URL: http://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out-of-ios/ Apple社がiOSのデザインに採用

Slide 27

Slide 27 text

その他の採用事例

Slide 28

Slide 28 text

フラットデザインのメリット・デメリット

Slide 29

Slide 29 text

フラットデザインのメリット ➔ 柔軟性のあるフレームワーク ◆ グリッド、カード、モジュールなどと相性が良い ◆ 均一な幾何学的形状になる傾向があり、認識しやすく直感的 ➔ より大きく、より合理的なタイポグラフィ ◆ 影やその他の効果がないため、読みやすい ➔ レスポンシブデザインとの互換性 ◆ グリッドベースのレイアウト、シンプルなグラフィックス ◆ 簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置

Slide 30

Slide 30 text

➔ ユーザビリティへの悪影響 ◆ 全てがフラットだと、どこがクリック可能なのか分かりにくい ◆ シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分かり辛いフラットデザインのデメリット ➔ 識別性の欠如 ◆ 狭義のビジュアルスタイルに固執することで、似たデザインになりがち ➔ 日本語には合わない ◆ 漢字、画数の多い平仮名・カタカナはシンプルではない

Slide 31

Slide 31 text

フラットデザインの今後は？

Slide 32

Slide 32 text

厳格にフラットデザインのルールを遵守するのではなく、装飾やアニメーションをフラットデザインに柔軟に取り入れることによってデザインとユーザビリティを両立させる参考URL: https://www.nngroup.com/articles/flat-design/ フラットデザイン 2.0

Slide 33

Slide 33 text

マテリアルデザインとの比較

Slide 34

Slide 34 text

比較その１

Slide 35

Slide 35 text

比較その２

Slide 36

Slide 36 text

比較その３

Slide 37

Slide 37 text

＜フラットデザイン＞・なるべく影や、アニメーションなどの　エフェクトをなくす（平面化）・グリッドをしっかり活用する・デザインにこだわりすぎるとユーザビ　リティが下がるので注意が必要マテリアルデザインとフラットデザインの比較＜マテリアルデザイン＞・設計時はしっかりとしたマニュアル通　りの設計が必要・アイコン一つとっても、全世界で共通　のアイコンでないといけなくなる・主にAndroidとWebでの取り入れ事例　が多い

Slide 38

Slide 38 text

双方メリット・デメリットを理解し、どちらが何に適しているのかを、的確に判断しながらデザインを考えていくことが大事だと思います。