Web デザインのこれからを Material Design と Ionic から考えた

Slide 1

Slide 1 text

Web Material Design Ionic Nobuhiro Takahashi @feb19 2018.5.20 Ionic Meetup Tokyo #4Web at Lightning Talk 2018.5.20

Slide 2

Slide 2 text

TAKAHASHI NOBUHIRO @feb19 Designer / Engineer 2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 2

Slide 3

Slide 3 text

!" )' 2018.5.20 Ionic Meetup Tokyo #4Web%at #( Lightning TalkWeb $ Material Design Ionic & 3

Slide 4

Slide 4 text

Web 4 2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic

Slide 5

Slide 5 text

%" Web ! 2018.5.20 Ionic Meetup Tokyo #4Web #at & Lightning TalkWeb ! Material Design Ionic $ 5

Slide 6

Slide 6 text

… 2018.5.20 Ionic Meetup Tokyo #4Webat Lightning TalkWeb Material Design Ionic 6

Slide 7

Slide 7 text

LT 2018.5.20 Ionic Meetup Tokyo #4Web at " Lightning TalkWeb Material Design Ionic ! 7

Slide 8

Slide 8 text

2018.5.20 Ionic Meetup Tokyo #4Web &at !) Lightning TalkWeb " Material Design Ionic ' 8 (% +- ,$ #*. please follow → @feb19

Slide 9

Slide 9 text

2018.5.20 Ionic Meetup Tokyo #4Web9at * 6=&1!+ Lightning TalkWeb .)"7 Material Design Ionic : 9 '7-7,24#)@ 24#)G8 UIF E ?H Web .)"7I 3/1%5&DC#$2(0+; B AMP (0+

Slide 10

Slide 10 text

2018.5.20 Ionic Meetup Tokyo #4Web 9at ) 2<%/!* Lightning TalkWeb +("3 Material Design Ionic : 10 UI &31-3,7C5 '.*4A7C5 >8;@B= ?#$0 UI 6

Slide 11

Slide 11 text

2018.5.20 Ionic Meetup Tokyo #4Web 'at !) Lightning TalkWeb " Material Design Ionic ( 11 +$ .- " #%" ,&*"

Slide 12

Slide 12 text

2018.5.20 Ionic Meetup Tokyo #4Web &at ( Lightning TalkWeb Material Design Ionic ' 12 UI $)" %# !*"

Slide 13

Slide 13 text

2018.5.20 Ionic Meetup Tokyo #4Web *at ",! Lightning TalkWeb # Material Design Ionic + 13 (.% UI '-& /) $

Slide 14

Slide 14 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 14 Material Design ?

Slide 15

Slide 15 text

2018.5.20 Ionic Meetup Tokyo #4Web #A!at $*$4L(2%, Lightning TalkWeb /)&5 # Material Design Ionic C 15 ^XP _d?O=_J: RE UI /)&5 fdZTa7\ /+-4/)&5e E`S< 0'1'# Google /)&5*,.3 Material Design (H9M) =b a11y i18n @c>]IF" KQ B8DW6D[6 Google GUV/)&5N` Y; https://material.io/

Slide 16

Slide 16 text

2018.5.20 Ionic Meetup Tokyo #4Web2at -7' Lightning TalkWeb #. Material Design Ionic 4 16 <#. ") %+.30 UI #.;154 9/ No.1 Android :8 iOS / web 6&(,!% #. ") *,!$

Slide 17

Slide 17 text

2018.5.20 Ionic Meetup Tokyo #4Web 3at !&!.8$+"' Lightning TalkWeb )%#/ Material Design Ionic 4 17 >2: iOS / web 5B9 Bootstrap )%#/ → Material Design =@ ?6< Material Design A0 7; 1 ),-(*

Slide 18

Slide 18 text

2018.5.20 Ionic Meetup Tokyo #4Web "at $ Lightning TalkWeb Material Design Ionic # 18 UI !% &

Slide 19

Slide 19 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 19

Slide 20

Slide 20 text

2018.5.20 Ionic Meetup Tokyo #4Web 2at #-6*$ Lightning TalkWeb '"/ Material Design Ionic 4 20 :+!( <3. 58:;01UI ?>/&/% +,/)+!(37=9 :4

Slide 21

Slide 21 text

2018.5.20 Ionic Meetup Tokyo #4Web Cat (9M!3* Lightning TalkWeb .': Material Design Ionic F 21 ! %#< WP= W " *-#1* ;PGB?W # "3 %9/)7+ BGM $ NK< BGM OHED(JVR) % 86:< ,5$83XU ☕ &2< Q>@,5$83 TL48:0 UI ISA

Slide 22

Slide 22 text

2018.5.20 Ionic Meetup Tokyo #4Web &#(J' at *1* ;:=@V3,9.;8N[ KA" IR*4+26R" $) HMEW[O!ATM UI F#&%*4+26RDXR! SBRRP(C%50,= (IRY

Slide 23

Slide 23 text

2018.5.20 Ionic Meetup Tokyo #4Web )at $,! Lightning TalkWeb % Material Design Ionic * 23 ,'+. UI (-"#% &/0

Slide 24

Slide 24 text

2018.5.20 Ionic Meetup Tokyo #4Web at # Lightning TalkWeb Material Design Ionic ! 24 Material Design 2 &' %$ " Google I/O 2018

Slide 25

Slide 25 text

2018.5.20 Ionic Meetup Tokyo #4Web )at %," Lightning TalkWeb & Material Design Ionic + 25 /0* #$&!'(. - Material Design 2 https://material.io/design/material-studies/

Slide 26

Slide 26 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 26 Corner Radius Font Coloring Elevation etc..

Slide 27

Slide 27 text

2018.5.20 Ionic Meetup Tokyo #4Web,at !%0$" Lightning TalkWeb # & Material Design Ionic . 27 Web / iOS (Swift / Objective-C) /134-( https://material.io/develop/ Material Design Android )*/+2'

Slide 28

Slide 28 text

2018.5.20 Ionic Meetup Tokyo #4Web(at &* Lightning TalkWeb ' Material Design Ionic ) 28 Ionic ! Angular Material Design $ $%#&" https://github.com/angular/material2 Angular

Slide 29

Slide 29 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 29 Material Design (Android / iOS / Web) https://codelabs.developers.google.com/code labs/mdc-101-flutter/#0 Flutter

Slide 30

Slide 30 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 30 Ionic

Slide 31

Slide 31 text

2018.5.20 Ionic Meetup Tokyo #4Web 2at "(8&# Lightning TalkWeb $!) Material Design Ionic 3 31 iOS / Android 7A4?*:@ →Android MD / iOS iOS 11 Design →/OSED9+F0$!) 7A@ Platform Specific Styles ,- http://ionicmaterial.com/ % OSS 5 1;> iOS Material Design '#)5D.B(6=C<)

Slide 32

Slide 32 text

2018.5.20 Ionic Meetup Tokyo #4Web 0at *3&! Lightning TalkWeb #- Material Design Ionic 1 32 %')"$&+(, iOS /57 ionic .426

Slide 33

Slide 33 text

2018.5.20 Ionic Meetup Tokyo #4Webat " Lightning TalkWeb Material Design Ionic ! 33 #$ Ionic % !

Slide 34

Slide 34 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 34

Slide 35

Slide 35 text

2018.5.20 Ionic Meetup Tokyo #4Web /at '1# Lightning TalkWeb * Material Design Ionic 0 35 "$&! *% Material Design "$&!#(%) Ionic Framework ,2-.+

Slide 36

Slide 36 text

%" Web ! 2018.5.20 Ionic Meetup Tokyo #4Web #at & Lightning TalkWeb ! Material Design Ionic $ 36

Slide 37

Slide 37 text

2018.5.20 Ionic Meetup Tokyo #4Web *at $,#! Lightning TalkWeb "% Material Design Ionic + 37 UI "%/1+- ). '( 0&

Slide 38

Slide 38 text

2018.5.20 Ionic Meetup Tokyo #4Web"at % Lightning TalkWeb Material Design Ionic $ 38 !# !

Slide 39

Slide 39 text

2018.5.20 Ionic Meetup Tokyo #4Web at Lightning TalkWeb Material Design Ionic 39 https://frokan.connpass.com/

Slide 40

Slide 40 text

Web Material Design Ionic Nobuhiro Takahashi @feb19 2018.5.20 Ionic Meetup Tokyo #4Web at Lightning Talk 2018.5.20