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

UI デザイン戦略どうすればいいですか？

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