デザインシステム、見てる？

ハードル激低LT大会ッ！ #02 の登壇資料です。
https://smarthr.connpass.com/event/278899/

Transcript

1. デザインシステム、見てる？
   SmartHR
   @kabetch
   ハードル激低LT大会ッ！ #02
   2023.04.20
   

   View Slide

2. プロダクトを作る上での相棒は？
   

   View Slide

3. デザインシステムですよね
   SmartHR Design System ( https://smarthr.design/ )
   

   View Slide

4. SmartHR Design Systemとは？
   SmartHR Design System - コンセプト 概要 ( https://smarthr.design/concept/ )
   SmartHR Design System は、クラウド人事労務ソフト「SmartHR」において、サービ
   スに関わるすべての人がSmartHRらしい表現をするための基準や素材をまとめたも
   のです。
   “
   ”
   

   View Slide

5. SmartHRでプロダクトを作っている皆さん
   これからSmartHRで一緒にプロダクトを
   作ってくれるかもしれない皆さん
   

   View Slide

6. デザインシステム、見てる？
   

   View Slide

7. 「もちろん！ブックマークだってしてるし」
   

   View Slide

8. いいね！でも、
   

   View Slide

9. もっとこう、、
   すぐ呼び出せるようにしてる？
   

   View Slide

10. 僕はこうしてます！
    Alfredで “sy” まで入力して ｯﾀｰﾝ‼
    

    View Slide

11. ctrl + space
    

    View Slide

12. sy
    

    View Slide

13. ｯﾀｰﾝ‼
    

    View Slide

14. 👏
    

    View Slide

15. 別にトップページである必要性はない
    SmartHR Design System ( https://smarthr.design/ )
    

    View Slide

16. SmartHR Design System - コンポーネント ( https://smarthr.design/products/components/ )
    

    View Slide

17. SmartHR Design System - デザインパターン（共通）
    ( https://smarthr.design/products/design-patterns/ )
    

    View Slide

18. SmartHR Design System - ライティングスタイル
    ( https://smarthr.design/products/contents/writing-style/ )
    

    View Slide

19. SmartHR Design System - ウェブアクセシビリティ簡易チェックリスト
    ( https://smarthr.design/accessibility/check-list/ )
    

    View Slide

20. 「いちいち呼ばずに常に開いときゃよくね？」
    

    View Slide

21. 👍
    

    View Slide

22. 自分がよく使うコンテンツ（＝相棒）を
    すぐに見られるようにしておこうぜ
    とにかく
    

    View Slide

23. おわり
    

    View Slide