デザイン編 Hatena Engineer Seminar #19

Transcript

1. Hatena Engineer Seminar #19
   id:
   σβΠϯฤ
   ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़
   takuwolog 2022.03.30
   

   View Slide

2. id:takuwolog
   ҏ౻୓
   ϊϕϧνʔϜϦʔυσβΠφʔ
   

   View Slide

3. σβΠφʔ͕ΤϯδχΞͱ
   ڠۀͯ͠ίϯϙʔωϯτࢦ޲Ͱ
   3FBDUҠߦͨ͠࿩
   ࠓճͷ͓࿩
   

   View Slide

4. ࿩ͷલఏ
   ● ΧΫϤϜαϙʔλʔζύεϙʔτͷຊ֨తͳ։ൃ͕8݄͔Βελʔ
   τ
   ● ͜ͷ։ൃ͔ΒReactҠߦΛ։࢝͠·ͨ͠
   ○ ಉ͡λΠϛϯάͰσβΠϯγεςϜͷߏங΋։࢝
   ● σβΠφʔ͸ۀ຿ͰHTMLͱCSSΛॻ͍͍ͯ·͢
   ○ Ϣʔβʔͷ໨΍खʹ৮ΕΔσβΠϯΛ࠷ޙ·Ͱ࢓্͛Δ͜ͱ͕
   ໨త
   ● σβΠφʔ͸Reactʹ৮Δͷ͸΄΅ॳΊͯͰ͢
   

   View Slide

5. ४උ͢Δ
   ڞ௨ೝࣝΛἧ͑Δ
   

   View Slide

6. ϖʔδ͔Βίϯϙʔωϯτ΁
   globalNav (header)
   footer
   sidebar
   heroHeader
   main
   globalNav (header)
   footer
   sidebar
   heroHeader
   main
   

   View Slide

7. ͳͥڠۀͯ͠ίϯϙʔωϯτΛ࡞Δͷ͔
   ίϯϙʔωϯτʹݟͨ໨ͱৼΔ෣͍ʹؔ͢Δ໾ׂ͕͋Δ৔߹
   ͸ɺΤϯδχΞ͚ͩͰܾΊΕͳ͍ͷͰσβΠφʔ΋Ұॹʹ
   ͳͬͯߟ͍͑ͯ͘ɻ
   Ұॹʹͳͬͯߟ͍͑ͯ͘தͰϕετͳίϯϙʔωϯτͷ࢟Λ
   ໛ࡧ͢Δɻ
   

   View Slide

8. ίϯϙʔωϯτͷ࢖͍ํΛ໌֬ʹ͢Δ
   ίϯϙʔωϯτ͕େ͖͘ͳΓ͗͢ͳ͍Α͏ʹɺ·ͨ͸૿
   ͑͗͢ͳ͍Α͏ʹɺԿΛ͢Δίϯϙʔωϯτͳͷ͔ɺ
   νʔϜͰೝࣝΛἧ͑Δɻ
   

   View Slide

9. UI Organisms etc…
   Ұ൪খ͍͞୯Ґ
   
   
   υϝΠϯʹґଘ͠ͳ͍
   υϝΠϯݻ༗ͷ
   
   
   ػೳ΍σβΠϯ
   Icon, TemplateͳͲ
   ίϯϙʔωϯτͷ୯Ґ
   

   View Slide

10. ڠۀ͢Δ
    ίϯϙʔωϯτ։ൃͷ
    ϫʔΫϑϩʔ
    

    View Slide

11. 
    σβΠϯϞοΫ͔Β
    ίϯϙʔωϯτΛ෼ׂ͢Δ
    

    View Slide

12. ϖʔδ͔Βίϯϙʔωϯτʹ
    

    View Slide

13. ϖʔδ୯ҐͷϞοΫ
    

    View Slide

14. ίϯϙʔωϯτʹ෼ׂ
    

    View Slide

15. UI Organisms
    άϧʔϐϯά͢Δ
    

    View Slide

16. ໋໊ɾґଘؔ܎
    

    View Slide

17. variantΛग़͓ͯ͘͠
    

    View Slide

18. σβΠϯπʔϧ্ͰίϯϙʔωϯτԽͯ͠λεΫʹ͢Δ
    

    View Slide

19. 
    ૬ஊɺ࣮૷ɺڞ༗
    

    View Slide

20. ࠔͬͨΒૉૣ͘૬ஊ
    ● ϖΞϓϩ
    ● ͨ͘͞Μ࣭໰ͯ͠ɺҙݟΛग़
    ͠߹ͬͯɺ஌ݟΛͨΊΔ
    ● ϨϏϡʔ΋૬ஊͷ৔
    

    View Slide

21. ● ໨Ͱݟͳ͕Βίϯϙʔωϯτ
    Λ࡞͍͚ͬͯΔͷͰσβΠ
    φʔϏϦςΟ͕ߴ͍
    ○ σβΠϯϨϏϡʔ΋ḿΔ
    ● ͋Δఔ౓·Ͱ࡞ۀͯ͠ɺ࠷ऴ
    ௐ੔͸࣮ࡍͷը໘Λ࡞Γͳ͕
    ΒਐΊͨ
    StotybookͰ֬ೝ͠ͳ͕ΒਐΊΔ
    

    View Slide

22. ػೳͱݟͨ໨ͷ෼཭
    σβΠϯͷ౎߹Ͱى͜ΔίϯϙʔωϯτͷංେԽΛ཈͑Δ
    
    ϦϯΫ
    
    
    
    Ϙλϯ
    
    
    LinkAppearanceͷvariants:
    ButtonAppearanceͷvariants:
    

    View Slide

23. νʔϜͰڞ༗͢Δ
    ● ৽͍ܾ͠·Γࣄ͸จॻԽ͢Δ
    ● ෳ਺ਓͰಉ࣌ਐߦͰ࡞ۀͯ͠ΔͷͰɺࣗ෼ͷ஌Βͳ͍ͱ͜ΖͰ༷ʑͳ͜
    ͱ͕ى͜Δ
    ○ ஌Β͵ؒʹศརͳίϯϙʔωϯτ͕ര஀͢Δ͜ͱ΋͋Δ
    ○ ίϯϙʔωϯτͷ࢖͍ํ͸Storybookʹॻ͍͓ͯ͘
    ● ࡞ͬͨίϯϙʔωϯτΛνʔϜʹ঺հ͢Δ
    ○ ϓϩδΣΫτΛ੝Γ্͛Δ׆ಈ
    

    View Slide

24. 
    ঢ়گʹԠͯ͡
    ৬छΛӽڥͯ͠։ൃ͢Δ
    

    View Slide

25. σβΠφʔ ΤϯδχΞ
    ঢ়گʹΑͬͯɺσβΠφʔͷख͕଍Γͳ͍ɺ
    ·ͨ͸ΤϯδχΞͷख͕଍Γͳ͍͜ͱ͕͋Δɻ
    ͜Ε·Ͱͷ஌ݟΛ׆͔ͯ͠ӽڥͯ͠ΈΔɻ
    

    View Slide

26. σβΠφʔ͕ΤϯδχΞྖҬʹೖͬͯΈΔ
    ● ίϯϙʔωϯτΛ৽نͰ࡞Δ
    ○ ίʔυҰൃͰ৽نͰίϯϙʔωϯτͷ਽ܗ͕࡞Εͨ
    ○ ੩తͳDOMΛॻ͍ͯͦ͜ʹελΠϧΛ౰͍ͯͯ͘
    ● طଘͷίϯϙʔωϯτΛ֦ு͢Δ
    ○ σβΠϯʹؔ͢ΔProps΍VariantΛ૿΍͢
    σβΠφʔ͚ͩͰͰ͖Δ͜ͱΛ૿΍ͯ͠଎౓ͱޮ཰Λ্͛ͨ
    

    View Slide

27. ΤϯδχΞʹσβΠφʔྖҬΛ΍ͬͯ΋Β͏
    ● ίϯϙʔωϯτ͕ἧͬͯ͘ΔͱͦΕΛ૊Έ߹Θͤͯը໘Λ࡞Δ
    ͜ͱ͕Ͱ͖Δ
    ○ σβΠϯͷ࠷ऴௐ੔͚ͩσβΠφʔ͕ೖΔ
    ○ ࠷ऴௐ੔͚ͩͳͷͰ0͔Β࡞ΔΑΓ଎͍
    ྟػԠมʹཱͪճΔ͜ͱͰϦιʔεΛ࠷େݶʹ׆͔͢
    

    View Slide

28. ӽڥͷ৺ߏ͑
    ● ·ͣ͸ͱΓ͋͑ͣ΍ͬͯΈΔ
    ● ඼࣭͸lint΍VRTɺϨϏϡʔͳͲͰ୲อ͢Δ
    ● ৺ཧత҆શੑ͸σΠϦʔεΫϥϜͳͲͰ౎౓૬ஊ
    ্ख͍ͬͯ͘Δ৔߹͸ײँ͢Δɺͦͯ͠๙Ί߹͏ʂ
    

    View Slide

29. ·ͱΊ
    

    View Slide

30. ● ڞ௨ೝࣝΛἧ͑ͯҰॹʹ࡞ۀͰ͖ΔΑ͏ʹ
    ● ϞοΫ͔ΒίϯϙʔωϯτͷઃܭਤΛ࡞Δ
    ● ஌ݟΛਂΊͯɺঢ়گʹԠͯ͡ӽڥͯ͠ΈΔ
    ΤϯδχΞͱڠۀͯ͠ίϯϙʔωϯτࢦ޲ͰReact
    Ҡߦ͢ΔͨΊʹ
    

    View Slide