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

Transcript

1. マテリアルデザイン フラットデザインガイドラインを読む Japan Xamarin Users Group 福田　拳士朗 Ionic Japan User Group 桑原　聖仁
2. マテリアルデザインガイドラインを読む
3. 登壇者自己紹介 福田　拳士朗（フクダ　ケンシロウ） ＠Kenshiro_fukuda/Kenshiro.fukuda.9 http://bit.ly/Jre657hp 2019新卒の人間。 茨城県石岡市　出身・在住。品川までは普通列車で約 1.5H 好きなもの：Windows 10・Xamarin・クラウド・モバイル・鉄 道・Web 最近楽しかったこと：DT線で写真撮ったこと
4. マテリアルデザインとは 「A unified system that combines theory, resources, and tools for crafting digital experiences.」 Googleによって提唱したユーザーエクスペリエンスデザインの体系、およびそれを実現する開 発技術や手法、デザイン、試みなどの包括的呼称　とされている。 2014年6月のGoogle I/Oにて発表され、主にAndroidネイティブアプリで持ち入れられている。 原本元ソース：https://material.io/
5. マテリアルデザインガイドラインを読む 原本の最終更新：2017年9月　ソース：https://material.io/guidelines/ 技術と科学の革新性と可能性を備えた優れたデザインを合成するユーザーのためのビジュアル 言語を作成することに挑戦してきた。 この仕様は、マテリアルデザイン設計の教義と仕様を引き 続き発展させながら更新される文書である。 そして、目標は？ 1.技術と科学の革新性と可能性を備えた優れたデザインの古典的原則を合成するビジュアル 言語を作成すること 2.プラットフォームやデバイスの規模にかかわらず統合されたエクスペリエンスを実現する単一 の基盤システムを開発すること
6. マテリアルデザインの大原則 主に3つの原則に基づく。 １．比喩であること ２．意図的なものであること ３．モーション＝意味
7. マテリアルデザインの環境について すべてのマテリアルオブジェクトは、x、y、z次元 を持つ すべてのマテリアルオブジェクトは、単一のz軸 位置を持つ キーライトは方向性シャドウを作成し、アンビエン トライトはソフトシャドウを作る。
8. マテリアルデザインの最新情報 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
9. マテリアルデザインーAndorid Notifications Snackbars and toasts Fingerprint Split screen Launcher icons Androidにおけるメインとして利用されつつある。このガイドラインで通知の作り方などもサ ポートしている。
10. マテリアルデザインが使われているアプリ Google+ Airbnb Evernote ※　原則的にGoogleアプリはマテリアルデザインが採用されている。 参考：https://sugar.amebaownd.com/posts/357364
11. 類似のものとして・・・ Microsoftでは、Googleのマテリアルデザインを追いかけるかのように、「Fluent Design System」を採用している。 デザイン特設サイト：https://fluent.microsoft.com/ 実装方法や、解説についてはこちらをご覧ください。 https://blogs.msdn.microsoft.com/shintak/2017/05/26/fluent-design-1/ （１と２あります）
12. フラットデザイン
13. 登壇者自己紹介 const my_info = { 　 Name: ‘桑原聖仁’, 　 Twitter: ‘@kuwahara_ngv5’, 　 GitHub: ‘k-kuwahara’, 　 Qiita: ‘clown0082’, 　 Workplace: ‘Yumemi, Inc.’ }
14. 登壇者自己紹介 github.com/riot
15. 登壇者自己紹介
16. 当方「サーバーサイドエンジニア」です。
17. フラットデザインとは
18. フラットデザイン（Flat Design）とは 対象物を抽象化して 　「シンプル」「ダイナミックなレイアウトや色使い」 で勝負するデザイン手法　
19. フラットデザイン（Flat Design）とは 対象物を抽象化して 　「シンプル」「ダイナミックなレイアウトや色使い」 で勝負するデザイン手法　
20. フラットデザインの起源 厳格な定義はなく、AppleもMicrosoftも 「フラットデザイン」とは 提唱していない。 ※もちろんガイドラインもない。 （Microsoft社が提唱した「モダンUI」が後に大きな影響を及ぼす）
21. なんでこんなに流行ったの？
22. フラットデザインへの変遷 当時は「スキュアモーフィックデザイン」「リッチデザイン」が主流 しかし、以下のような問題が発生 　　 PCとスマホで表示した時に見え方が変わってしまう 　　マルチデバイスな時代変化とともに需要が減少
23. Modern UI （旧: Metro UI） 2011年に発表された Windows 8にも採 用。 Microsoft社がWindows8のUIをフラット化
24. Apple社がiOSのデザインに採用
25. スキュアモーフィックデザイン （立体感、奥行き、質感、光沢感の演出） 　　⬇ 　⬇ 　⬇ フラットデザイン （抽象化、シンプルで平面的） Apple社がiOSのデザインに採用
26. ＞ 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のデザインに採用
27. その他の採用事例
28. フラットデザインのメリット・デメリット
29. フラットデザインのメリット ➔ 柔軟性のあるフレームワーク ◆ グリッド、カード、モジュールなどと相性が良い ◆ 均一な幾何学的形状になる傾向があり、認識しやすく直感的 ➔ より大きく、より合理的なタイポグラフィ ◆ 影やその他の効果がないため、読みやすい ➔ レスポンシブデザインとの互換性 ◆ グリッドベースのレイアウト、シンプルなグラフィックス ◆ 簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置
30. ➔ ユーザビリティへの悪影響 ◆ 全てがフラットだと、どこがクリック可能なのか分かりにくい ◆ シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分かり辛い フラットデザインのデメリット ➔ 識別性の欠如 ◆ 狭義のビジュアルスタイルに固執することで、似たデザインになりがち ➔ 日本語には合わない ◆ 漢字、画数の多い平仮名・カタカナはシンプルではない
31. フラットデザインの今後は？
32. 厳格にフラットデザインのルールを遵守するのではなく、装飾やア ニメーションをフラットデザインに柔軟に取り入れることによってデ ザインとユーザビリティを両立させる 参考URL: https://www.nngroup.com/articles/flat-design/ フラットデザイン 2.0
33. マテリアルデザインとの比較
34. 比較その１
35. 比較その２
36. 比較その３
37. ＜フラットデザイン＞ ・なるべく影や、アニメーションなどの　エ フェクトをなくす（平面化） ・グリッドをしっかり活用する ・デザインにこだわりすぎるとユーザビ　リ ティが下がるので注意が必要 マテリアルデザインとフラットデザインの比較 ＜マテリアルデザイン＞ ・設計時はしっかりとしたマニュアル通　りの 設計が必要 ・アイコン一つとっても、全世界で共通　のア イコンでないといけなくなる ・主にAndroidとWebでの取り入れ事例　が 多い
38. 双方メリット・デメリットを理解し、どちらが何に適し ているのかを、的確に判断しながらデザインを考え ていくことが大事だと思います。
39. 最後に…
40. Riot.js @Tokyo #3 開催決定！
41. Riot.js @Tokyo #3 開催決定！ 絶賛登壇者募集中！！
42. ご清聴ありがとうございました！