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

Transcript

1. Web    Material Design  Ionic  

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

2. TAKAHASHI NOBUHIRO @feb19 Designer / Engineer 2018.5.20 Ionic Meetup Tokyo

   #4
   Web    at  Lightning Talk
   Web    Material Design  Ionic   2

3. !
   "
   )'  2018.5.20 Ionic Meetup Tokyo #4Web%at #( Lightning

   TalkWeb $ Material Design  Ionic &  3

4. Web     
    4 2018.5.20 Ionic Meetup

   Tokyo #4Web    at  Lightning TalkWeb     Material Design Ionic  

5. %" Web !   
   2018.5.20 Ionic Meetup Tokyo

   #4Web #at  & Lightning TalkWeb !  Material Design  Ionic $  5

6.  … 2018.5.20 Ionic Meetup Tokyo #4
   Web at  

   Lightning Talk
   Web   Material Design Ionic   6

7.  LT   2018.5.20 Ionic Meetup Tokyo #4
   Web at

   " Lightning Talk
   Web  Material Design Ionic !  7

8. 2018.5.20 Ionic Meetup Tokyo #4
   Web &at !) Lightning Talk
   Web "

    Material Design Ionic '  8 (% +- ,$ #* . please follow → @feb19

9. 2018.5.20 Ionic Meetup Tokyo #4Web 9at * 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+<A> 

10. 2018.5.20 Ionic Meetup Tokyo #4Web  9at ) 2<%/!* Lightning

    TalkWeb +("3   Material Design  Ionic : 10 UI &31-3,7C5
    '.*4A 7C5 >8;@B= ?#$0 UI 6 

11. 2018.5.20 Ionic Meetup Tokyo #4Web  'at !)  Lightning

    TalkWeb "   Material Design Ionic  (  11
    +$  
    .-  "
    #% " 
    ,&*  "

12. 2018.5.20 Ionic Meetup Tokyo #4Web &at ( Lightning TalkWeb 

      Material Design  Ionic '  12 UI $)" 
    %# 
    !*"  

13. 2018.5.20 Ionic Meetup Tokyo #4Web *at ",! Lightning TalkWeb #

     Material Design  Ionic +  13 (.%  UI '-&
    /) $
    

14. 2018.5.20 Ionic Meetup Tokyo #4Web    at 

    Lightning TalkWeb     Material Design Ionic   14 Material Design ? 
    

15. 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/

16. 2018.5.20 Ionic Meetup Tokyo #4Web2at -7' Lightning TalkWeb #. Material

    Design  Ionic 4  16
    < #. ")
    %+.30   UI #.;1 54
    9/ No.1 Android :8
    iOS / web 6&(,!% #. ") *,!$

17. 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   ),-(*

18. 2018.5.20 Ionic Meetup Tokyo #4Web "at $ Lightning TalkWeb 

     Material Design Ionic #  18   UI !% 
    &

19. 2018.5.20 Ionic Meetup Tokyo #4
    Web    at 

    Lightning Talk
    Web    Material Design  Ionic   19  

20. 2018.5.20 Ionic Meetup Tokyo #4Web  2at #-6*$ Lightning TalkWeb

    '"/   Material Design  Ionic 4  20 :+!(
    <3. 
    58:;01UI
    ?>/&/% +,/)+!(37 =9 :4

21. 2018.5.20 Ionic Meetup Tokyo #4Web  Cat (9M!3* Lightning TalkWeb

    .':   Material Design  Ionic F  21 ! %#< WP
    = W  " *-#1* ;P
    GB?W  # "3 %9/)7+ BGM $ NK< BGM OHED(JVR) % 86:< ,5$83XU ☕ &2< Q>@,5$83 T L48:0 UI ISA

22. 2018.5.20 Ionic Meetup Tokyo #4Web & #(J' at *1*<Q-8+2 Lightning

    TalkWeb 50,= & #( Material Design  Ionic #L  22 T HM!?\ZR(F#&% UG/72> ;:=@V3,9.;8N[ KA"   IR
    *4+26R"  $) HMEW[O!ATM UI F#&%*4+26R DXR! SBR
    RP(C%50,= (IRY

23. 2018.5.20 Ionic Meetup Tokyo #4Web  )at $,! Lightning TalkWeb

    %   Material Design  Ionic *  23 ,'+.  UI   (-"#%
    &/0

24. 2018.5.20 Ionic Meetup Tokyo #4
    Web at # Lightning Talk
    Web 

    Material Design Ionic !  24 Material Design 2 &'  %$ " Google I/O 2018

25. 2018.5.20 Ionic Meetup Tokyo #4Web )at %," Lightning TalkWeb &

     Material Design  Ionic +  25 /0*
    #$&!'(. -   Material Design 2 https://material.io/design/material-studies/

26. 2018.5.20 Ionic Meetup Tokyo #4Web    at 

    Lightning TalkWeb     Material Design Ionic   26
    Corner Radius
    Font
    Coloring
    Elevation etc..

27. 2018.5.20 Ionic Meetup Tokyo #4
    Web ,at !%0$" Lightning Talk
    Web #

    &  Material Design  Ionic .  27 Web / iOS (Swift / Objective-C)  /134-( https://material.io/develop/ Material Design  Android   )*/+ 2' 

28. 2018.5.20 Ionic Meetup Tokyo #4Web(at &* Lightning TalkWeb ' Material

    Design Ionic )  28 Ionic !
      Angular  Material Design $ $%#&"
     https://github.com/angular/material2 Angular

29. 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

30. 2018.5.20 Ionic Meetup Tokyo #4
    Web   at  Lightning

    Talk
    Web     Material Design Ionic   30  Ionic

31. 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<)

32. 2018.5.20 Ionic Meetup Tokyo #4Web 0at  *3&! Lightning TalkWeb

    #-  Material Design  Ionic 1  32 %')"$&+
    (,
      iOS /57 ionic .4 26 

33. 2018.5.20 Ionic Meetup Tokyo #4
    Web at " Lightning Talk
    Web 

     Material Design Ionic !  33 #$ Ionic  % !

34. 2018.5.20 Ionic Meetup Tokyo #4
    Web   at  Lightning

    Talk
    Web     Material Design  Ionic   34 

35. 2018.5.20 Ionic Meetup Tokyo #4Web /at '1# Lightning TalkWeb *

     Material Design Ionic 0  35 "$&! *% Material Design "$&!#(
    %)
     Ionic Framework ,2-.+  

36. %" Web !   
    2018.5.20 Ionic Meetup Tokyo

    #4Web #at  & Lightning TalkWeb !  Material Design  Ionic $  36

37. 2018.5.20 Ionic Meetup Tokyo #4
    Web *at  $,#! Lightning Talk
    Web

    "%  Material Design  Ionic +  37 UI "%/1+- ). '(  0& 

38. 2018.5.20 Ionic Meetup Tokyo #4
    Web"at % Lightning Talk
    Web  Material

    Design  Ionic $  38 !#   !

39. 2018.5.20 Ionic Meetup Tokyo #4
    Web    at 

    Lightning Talk
    Web    Material Design  Ionic   39 https://frokan.connpass.com/

40.  Web    Material Design  Ionic 

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