Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザイン編 Hatena Engineer Seminar #19

takuwolog
April 01, 2022

デザイン編 Hatena Engineer Seminar #19

takuwolog

April 01, 2022
Tweet

Other Decks in Design

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