$30 off During Our Annual Pro Sale. View Details »

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

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

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

aguri otsuka

May 11, 2023
Tweet

More Decks by aguri otsuka

Other Decks in Design

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