デザインシステム導入前夜

今回はプロジェクト側の問題でデザインシステムの導入を見送ることとなってしまいました。
デジタル庁のデザインシステムは非常に良く纏まっているので、参考になると思います。

Transcript

1. σβΠϯγεςϜಋೖલ໷
   2023/02/27 ARCANA Meetup #86
   

   View Slide

2. ࣗݾ঺հ
   • ໊͋ͩ
   
   
   • Χογʔ
   
   
   • ࠷ۙ
   
   
   • ೔ਗ਼ϤʔΫ ϐϧΫϧϛϥΫϧέΞҿΜͰ·͢
   
   
   • ޮՌ͋Δͷʁ
   

   View Slide

3. σβΠϯγεςϜͱ͸
   

   View Slide

4. σβΠϯγεςϜ͸ɺσβΠϯͷҰ؏ੑɺޮ཰ੑɺεέʔϥϏϦςΟΛߴΊΔ
   ͨΊͷํ๏࿦Ͱ͢ɻ
   by ChatGPT
   • σβΠϯͷҰ؏ੑ: σβΠϯͷΨΠυϥΠϯɺίϯϙʔωϯτɺϒϥϯσΟϯάʹج͍ͮ
   ͨσβΠϯͷઃܭΛ౷Ұ͢Δ͜ͱͰɺϢʔβʔʹରͯ͠౷Ұੑͷ͋ΔΤΫεϖϦΤϯε
   Λఏڙ͢Δ͜ͱ͕Ͱ͖·͢ɻ
   
   
   • ޮ཰ੑ: ࣄલʹఆٛ͞ΕͨσβΠϯن໿ʹج͍ͮͯσβΠϯΛߦ͏͜ͱͰɺσβΠϯͷ࡞
   ੒ʹ͔͔Δ࣌ؒΛ୹ॖ͠ɺޮ཰ੑΛ޲্͢Δ͜ͱ͕Ͱ͖·͢ɻ
   
   
   • εέʔϥϏϦςΟ: ࣄલʹఆٛ͞ΕͨσβΠϯن໿Λ࢖༻͢Δ͜ͱͰɺ৽͍͠ϓϩμΫτ
   ΍αʔϏεͷ։ൃΛਝ଎͔ͭ؆୯ʹ͢Δ͜ͱ͕Ͱ͖·͢ɻ
   

   View Slide

5. σϞ
   

   View Slide

6. σβΠϯγεςϜͳ͠
   

   View Slide

7. σβΠϯγεςϜͳ͠
   ΞϯέʔτͷWEBը໘͕
   
   
   ඞཁʹͳͬͨͳɻ
   
   
   ͦΕͬΆ͍ը໘Λ࡞Ζ͏
   ൃ஫ଆ ։ൃଆ
   ͳΜͩ͜Εʁʂ
   
   
   ࠓ·Ͱͷը໘ͱςΠετ͕
   
   
   ҧ͏͚Ͳɻ·͋ɺ͍͍͔ʂ
   

   View Slide

8. ը໘࢓༷ॻ
   Ռ෺ௐࠪʂ
   ࢯ໊
   ޷͖ͳՌ෺
   όφφ ΓΜ͝ Ω΢Π ϨϞϯ ༸ͳ͠ εΠΧ
   ࠓޙ௅ઓ͍ͨ͠Ռ෺ ʁ
   Ϟʔμϧ
   ग़ͯ͠
   ૹ৴
   

   View Slide

9. ը໘࢓༷ॻ
   Ռ෺ௐࠪʂ
   ࢯ໊
   ޷͖ͳՌ෺
   όφφ ΓΜ͝ Ω΢Π ϨϞϯ ༸ͳ͠ εΠΧ
   ࠓޙ௅ઓ͍ͨ͠Ռ෺ ʁ
   Ϟʔμϧ
   ग़ͯ͠
   ૹ৴
   ݟग़͚ͩ͠ͲϘʔϧυ
   
   
   ʹ͠ͳ͍͍ͯ͘ͷʁ
   ΞϯμʔϥΠϯͷςΩετΤϦΞ
   
   
   ॳΊͯΈ͚ͨͲɺ৽͘͠࡞Δͷʁ
   ࠓ·Ͱ͸બ୒ࢶͷଟ͍߲໨͸ϐοΧʔΛ
   
   
   ࢖͚ͬͯͨͲɺϥδΦϘλϯʹ͢Δͷʁ
   Ϟʔμϧग़ͯͬͯ͠ͳΜ΍ͶΜɻ
   
   
   Ϟʔμϧ͸ॳΊ͚ͯͩͲɺը໘࢓༷͸ʁ
   ૹ৴Ϙλϯ͕നృΓͬͯɺࠓ·Ͱ
   
   
   ϨΠΞ΢τͱҧ͏ͳɻ
   

   View Slide

10. σβΠϯγεςϜ͋Γ
    

    View Slide

11. ൃ஫ଆ ։ൃଆ
    Θ͔Δʂ
    
    
    ͜ΕσβΠϯγεςϜʹ
    
    
    ͷ͍ͬͯΔ΍ͭͩʂ
    σβΠϯγεςϜ͋Γ
    ΞϯέʔτͷWEBը໘͕
    
    
    ඞཁʹͳͬͨͳɻ
    
    
    σβΠϯγεςϜΛࢀরͩʂ
    

    View Slide

12. ը໘࢓༷ॻ
    ޷͖ͳՌ෺Λڭ͑ͯͶ
    ࢯ໊
    ޷͖ͳՌ෺
    ࠓޙ௅ઓ͍ͨ͠Ռ෺
    ճ౴͢Δ
    ࠓޙ௅ઓ͍ͨ͠Ռ෺Λ۩ମతʹ͔͍ͯͶʂ
    બ୒͍ͯͩ͘͠͞
    Ռ෺ɹଠ࿠
    ࠓ೔͸޿͍ൣғͰ੖Εͯɺय़ͷ౸དྷΛ࣮ײ͢Δཅؾ
    
    
    ͱͳΓ·͢ɻؔ౦ΑΓ੢ͷ஍Ҭ͸εΪՖคͷඈࢄγ
    
    
    ʔζϯʹೖ͓ͬͯΓɺՖค͕େྔʹඈࢄ͢Δ͓ͦΕ
    ͜ΕͳΒ͢Ͱʹίϯϙʔωϯτ͕
    
    
    ଘࡏ͍ͯ͠ΔͷͰɺ࣮૷͕؆୯ͩͶ
    

    View Slide

13. ·ͱΊ
    • σβΠϯͷ޻਺͕࡟ݮ͞ΕɺαʔϏεͷվળͷͨΊͷ࣌ؒΛ૿΍͢͜ͱՄೳͱͳ
    Δɻ
    
    
    • ϝϦοτ͚ͩʹ΋ݟ͑Δ͕σϝϦοτ΋͋Δɻ
    
    
    • σβΠϯγεςϜͷϝϯςφϯείετ΍ɺϓϩδΣΫτͷνʔϜશମͷڠྗ͕
    ඞཁͰ͋Δɻ
    
    
    • ͓·͚
    
    
    • σδλϧிσβΠϯγεςϜ
    
    
    • https://www.digital.go.jp/policies/servicedesign/designsystem/
    

    View Slide

14. ͓͠·͍Ͱ͢
    

    View Slide