「ちいさくはじめるデザインシステム」とUXライター

LINE Technical Writing Meetup vol. 24にてお話したSmartHR Design Systemとそれをまとめた書籍「ちいさくはじめるデザインシステム」の出版で、UXライターがどんなことをしたかについてまとめたスライドです。

Transcript

1. 「ちいさくはじめるデザインシステム」
   
   とUXライター
   株式会社SmartHR｜UXライター
   おおつかあぐり
   LINE Technical Writing Meetup vol. 24
   

   View Slide

2. © 2023 Aguri Otsuka All Rights Reserved.
   @aguringo
   おおつかあぐり
   UXライター / SmartHR Inc.
   About Me
   

   View Slide

3. © 2023 Aguri Otsuka All Rights Reserved.
   

   View Slide

4. © 2023 Aguri Otsuka All Rights Reserved.
   

   View Slide

5. © 2023 Aguri Otsuka All Rights Reserved.
   今日お話すること
   どうしてUXライターが
   
   デザインシステムを運用しているのか？
   

   View Slide

6. © 2023 Aguri Otsuka All Rights Reserved.
   できることが増えると…
   

   View Slide

7. © 2023 Aguri Otsuka All Rights Reserved.
   つねに自分に問いかけている言葉
   UXライターって
   
   どんな価値貢献するの？
   

   View Slide

8. © 2023 Aguri Otsuka All Rights Reserved.
   https://note.com/aguri/n/n024d48ba30d3
   https://note.com/aguri/n/n5e7f8591df79
   

   View Slide

9. © 2023 Aguri Otsuka All Rights Reserved.
   4年目時点での考え（イマココ）
   

   View Slide

10. © 2023 Aguri Otsuka All Rights Reserved.
    UXライターは、どうやって価値貢献するのか？
    t 開発現場での意思決定の再現性を率先して高
    めg
    t マルチプロダクト化するアプリケーションの
    ユーザーの学習コストをできるだけ下げる
    

    View Slide

11. © 2023 Aguri Otsuka All Rights Reserved.
    デザインシステムとは
    「ちいさくはじめるデザインシステム」
    「デザインシステム」は、デジタルプロダクト開発においてその必要性や役割を
    言及されることが多い概念です。GoogleのMaterial DesignやAdobeのSpectrum
    など、有名企業をはじめ業種や業態を問わず、数えきれないほどのデザインシス
    テムが公開されています。
    
    プロダクトの重要性が増すにつれ、プロダクトが示す領域も広がり、デザインシ
    ステムが取り扱う範囲も広がってきています。タイポグラフィやレイアウト、
    色、アイコン、コンポーネントといった、デザインに関する事柄だけでなく、言
    葉の表現や雰囲気など、ユーザーとのありとあらゆる接点を網羅する必要が出て
    きているともいえるでしょう。デザインシステムは、不確実性の高いモノづくり
    の現場において、良いモノを作るための1つの手段なのです。
    

    View Slide

12. © 2023 Aguri Otsuka All Rights Reserved.
    だから、
    
    UXライターは
    
    デザインシステムの運用に
    
    携わっている
    

    View Slide

13. © 2023 Aguri Otsuka All Rights Reserved.
    Document／文書
    ドキュメントとは？
    

    View Slide

14. © 2023 Aguri Otsuka All Rights Reserved.
    Document／文書 の意味
    英語の翻訳：〔正式な〕公文書、記録文書
    
    
    語釈：参照されることを前提として残す記録
    

    View Slide

15. © 2023 Aguri Otsuka All Rights Reserved.
    UXライターがデザインシステムに関わる意義
    意思決定の抽象化をして記録を残し、
    
    その再現性を高める
    

    View Slide

16. © 2023 Aguri Otsuka All Rights Reserved.
    「〇〇して、△△にする」
    「■■したら、▼▼になった」
    「hogeのときには、fugaする」
    

    View Slide

17. © 2023 Aguri Otsuka All Rights Reserved.
    具体を集めて、ルール＝抽象化する過程
    収集・分類・定義（命名）
    

    View Slide

18. © 2023 Aguri Otsuka All Rights Reserved.
    抽象化はUXライターの得意分野
    「ちいさくはじめるデザインシステム」
    「調査・分類・抽象化」といったUIテキストの作成プロセスは、イン
    ターフェースインベントリのプロセスに類似しています。インター
    フェースインベントリとは 、 プロダクト上のUIコンポーネントを調
    査・分類し、コンポーネントに対する共通認識を醸成する活動を指す
    言葉で、デザインシステムを構築するうえで「最初の一歩」として位置
    付けられることもあります。つまり、UIテキストの作成は、その営み
    自体がデザインシステムのガイドライン作成に通ずるものといえます。
    SmartHRのUIテキストガイドラインも例外ではありません 。UIテキス
    ト作成のために、既存のUIテキストを収集・分類・抽象化していく過
    程で、プロダクト全般に適用できるガイドラインがおのずと生まれて
    いったのです。
    

    View Slide

19. © 2023 Aguri Otsuka All Rights Reserved.
    SmartHR デザイン原則
    

    View Slide

20. © 2023 Aguri Otsuka All Rights Reserved.
    おさらい
    

    View Slide

21. © 2023 Aguri Otsuka All Rights Reserved.
    UXライターがデザインシステムにコミットすると…
    デザインの意思決定を誰もが参照しやすいように
    なる
    
    
    開発者の意思決定の足並みが揃う
    
    
    ユーザーに提供するプロダクトの使い勝手が良い
    状態が生まれる
    

    View Slide

22. © 2023 Aguri Otsuka All Rights Reserved.
    今日のテーマの別の角度からの話はこちらでもお読みいただけます
    デザインシステムの運用体制についてはこちら
    開発しながらガイドライン化する考え方についてはこちら
    https://note.com/aguri/n/n2665dcdc5948
    https://speakerdeck.com/aguringo/20220315-design-study-morning07
    

    View Slide

23. Confidential - Not to be disclosed or distributed to third parties.
    Copyright © 2022 Aguri Otsuka All Rights Reserved.
    書籍化にあたって
    

    View Slide

24. © 2023 Aguri Otsuka All Rights Reserved.
    

    View Slide

25. © 2023 Aguri Otsuka All Rights Reserved.
    ・ 台割（全体の構成）の作成
    ・ リライト、トーン＆マナーの調整
    ・ インタビューを元にしたコラム原稿作成
    書籍化にあたって
    

    View Slide

26. © 2023 Aguri Otsuka All Rights Reserved.
    書籍化に関するエピソードはこちらでもお読みいただけます
    入社半年だから書けた、ちいさくはじめるデザインシステム
    私たちはいつだって、Work in Progress
    https://note.com/aguri/n/ndedb58e0ec1f
    https://note.com/47178/n/n67341b10343a
    

    View Slide

27. Confidential - Not to be disclosed or distributed to third parties.
    Copyright © 2022 Aguri Otsuka All Rights Reserved.
    最後に
    

    View Slide

28. We Are Hiring!
    

    View Slide

29. © 2023 Aguri Otsuka All Rights Reserved.
    https://open.talentio.com/r/1/c/smarthr/pages/45059
    一緒に働きたい！
    
    という方
    
    お待ちしております
    

    View Slide