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

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

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

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

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

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

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

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

マテリアルデザインの最新情報 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

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

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

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

フラットデザイン

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

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

登壇者自己紹介

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

フラットデザインとは

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

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

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

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

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

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

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

＞ 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のデザインに採用

その他の採用事例

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

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

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

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

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

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

比較その１

比較その２

比較その３

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

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

最後に…

Riot.js @Tokyo #3 開催決定！

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

ご清聴ありがとうございました！

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

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

kkeeth

More Decks by kkeeth

Other Decks in Technology

Featured

Transcript