Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
March 03, 2018

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

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

March 03, 2018
Tweet

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つの原則に基づく。 1.比喩であること 2.意図的なものであること 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/ (1と2あります)

  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. 比較その1

  35. 比較その2

  36. 比較その3

  37. <フラットデザイン> ・なるべく影や、アニメーションなどの エ フェクトをなくす(平面化) ・グリッドをしっかり活用する ・デザインにこだわりすぎるとユーザビ リ ティが下がるので注意が必要 マテリアルデザインとフラットデザインの比較 <マテリアルデザイン> ・設計時はしっかりとしたマニュアル通 りの 設計が必要

    ・アイコン一つとっても、全世界で共通 のア イコンでないといけなくなる ・主にAndroidとWebでの取り入れ事例 が 多い
  38. 双方メリット・デメリットを理解し、どちらが何に適し ているのかを、的確に判断しながらデザインを考え ていくことが大事だと思います。

  39. 最後に…

  40. Riot.js @Tokyo #3 開催決定!

  41. Riot.js @Tokyo #3 開催決定! 絶賛登壇者募集中!!

  42. ご清聴ありがとうございました!